Redesigning the way NavViews work (and other Fluent Design changes)

Sep 12, 2017 3 mins read

The humble navigation view (NavView). Arguably one of the most staple parts of the Windows 10 user interface — and used in many apps to provide…well…navigation between different sections.

The NavView (highlighted) in the Groove app (version 10.17072.1541.0)

However, these NavViews come with two problems:

So how do we solve this? We could eliminate the NavView altogether, but I feel that if done right, it could work really well. I’ve put together a set of concepts to show you what I mean.

Ditching the hamburger

Concept of the Groove app featuring a hamburger-less NavView.

The removal of the hamburger sparks an instant question: How do you collapse the menu down to just the icon view?

The answer: a new toggle in the settings of each app that uses the new NavView style. You choose whether you want it to be automatic, always expanded or always collapsed.

An example of how a UWP app could allow the user to configure the NavView.

Collapsing the NavView reduces everything down to an icon, as expected, and shifts the account and settings controls onto two separate rows — you can see this in the concept below.

Concept of the Groove app featuring a collapsed version of the hamburger-less NavView.

But what if you tap the search control? Well, that can be made possible by simply allowing the NavView to expand on hover/press on search control. This is demonstrated in the concept below.

Concept of the Groove app featuring a expand-on-hover/tap version of the hamburger-less NavView.

Other subtleties

There are also some less noticeable changes to the navigation view. For example, the selected item is now completely highlighted in a 40% translucent shade of the user’s selected accent color. In addition, there is a new search field style which fills the entire block with a shade of 40% opaque white and aligns the hint text with the rest of the icons in the NavView.

New selected highlight style and new search field style.

Also, there are some general changes to Fluent Design as a whole shown in the concepts. The blur behind acrylic material has been increased to 60px (up from 30). But the most noticeable change is that the app titlebar text is now…centered (just like on Windows 8.x!). 😱

Centered titlebars!

Conclusion

While these changes might seem insignificant, I believe they address some of the complaints people have had with the navigation view in Windows 10 while also making it more beautiful at the same time. Thanks for reading! 🙂

Share this on Twitter