Friday, 10 October 2014

Navigation Drawer - Where Does it Belong in the View Hierarchy?

It used to be so simple.

http://developer.android.com/design/patterns/navigation-drawer.html

But things change. Sometimes you have to break the old to create new. When the Navigation Drawer pattern became a part of the Google's design guideline for Android it was clearly defined and the implementation was available of devs to use.

But did Google make a mistake in the initial definition? It might have seemed correct at first but there was a mistake in the spec.

Things are now changing. New updates from Google have moved things around. The new Material Design guidelines define the navigation drawer (now called Side Nav) on top of everything in the app UI.

http://www.google.com/design/spec/layout/structure.html#structure-side-nav-1

We're now in middle of a transition again. Google is changing their apps and while the process is ongoing there's a lot of variation in the released apps. I would really love to see Google to unify the way they use the drawer to send a clear message to app developers.


But what does it matter where it is rendered? It still just works!

I think it matters a lot. This is something that tells the user what they're controlling. If the drawer is the main navigation of an app it becomes one of the most important controls to get right.

View hierarchy tells user which parts he or she is manipulating when they press an item in the navigation.

This is what the previous drawer hierarchy looks like and this is what the recent update to Photos app also did. In my opinion there's two things that are wrong with this approach.

Firstly, this implies that the action bar will not change if I navigate to any of the entries... but it does.

Secondly,  the action bar actions are still active when the drawer is open but they affect the content that is currently hidden behind the drawer.

Confusing.


In the latest Google Hangouts app the drawer renders on the same level as the tabs. This tells the user that when I navigate to another item from the drawer the tabs will stay in place. That's not what's happening here though. I think this implementation is wrong and should be corrected.

The latest update to Google Newsstand adheres most closely to the Material Design guidelines from any of the Google apps.

I think this implementation is great and the correct one. When I navigate the whole content changes, including the action bar. This corresponds most closely to reality.


Making the drawer the highest level component also allows us to avoid unpleasant visual issues with action bars that move away when scrolling not unlike what is happening in the latest Google Play update.











Ok, things are changing and Google still haven't really worked out everything internally for the next iteration. I'm hoping that a consistency is found soon and we can move on. Until then we have to be mindful of our implementations.

Changing familiar things is never easy. I polled the public opinion about this change on Google+ to see what the opinion in general is right now. Change will take time.


https://plus.google.com/u/0/+JuhaniLehtim%C3%A4ki/posts/Xms3aQ6LweU