Redesigning the way NavViews work (+ other Fluent Design changes)
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.
However, these NavViews come with two problems:
- Consistency between inbox apps — not all use the standard NavView.
- Hamburgers — something many desktop users argue shouldn’t be used.
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
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.
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.
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.
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.
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!). 😱
I’ll explain my reasoning behind this in a future post. Hopefully it’ll make you understand why I did what I did.
There’s also increased padding around UI elements, giving things a more airy look along with a reduction in the number of lines for dividing stuff up, with me focusing more on using different type weight/opacity instead. Let me know what you think of it!
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 If you have any feedback on the concepts/ideas I’ve presented, please share it with me either here or on Twitter. Thanks for reading! 🙂