It goes without saying for most Android enthusiasts that the side-navigation drawer is a hot point of contention right now. With the introduction of material design, Google emphasized information hierarchy heavily, giving advice in its design specifications on how to arrange just about everything, including side navigation. According to the specifications (and Googler Roman Nurik), the "correct" behavior for the side drawer is to slide in as a sheet of paper over the entire canvas, including the app bar or toolbar.
The issue with the new navigation drawer paradigm is that it has not been followed consistently by Google. It could be argued that Google implemented a placeholder drawer design in some places because the support libraries were not available, or to maintain fidelity with other drawers on pre-L systems since Android Lollipop is not actually released yet. The rebuttal to the first point would be that Google has worked with unreleased libraries from L for some time now to implement new treats before anyone else could. To the second point, this would be an acceptable answer if the drawers in Google's recent updates maintained internal consistency, which they don't. The inconsistencies could probably be chalked up to independent teams using different tools for different projects, but on the bright side there is some hope that Google is working on bringing things more into line.
The Spinny Arrow
One of the solutions Google came up with between pre-L and L designs was the spinning arrow animation. As Roman Nurik has explained, this animation doesn't actually belong in a navigation drawer interaction. It's a beautiful bit of interface chrome, but it's worth looking at why it doesn't belong.
The animation was created for instances where a hamburger button appeared consistently, but the user entered a secondary view on top of the first. For an example of this, see the yet unreleased Google Search update. The hamburger icon lives in the search bar, so when the user transitions to the bar with search suggestions, the icon transforms into an arrow.
The navigation menu ultimately belongs on top of everything - this arrangement maintains visual and informational hierarchy, and keeping this consistent provides a better experience for users hopping between various apps.
Variations on the Theme
With the arrow out of the way, let's take a look at the various hamburger menus Google has in place at the time of writing. For now, we'll take a look at nine variations on the theme, all but one of which are currently in active circulation. If I've missed any, feel free to post them in the comments.
The first screenshot (number 1), belonging to Google's Play Newsstand is close to being correct. Its flaw is that it still houses the arrow animation, which is ultimately hidden by the drawer itself. Additionally, like number 7, the user's avatar is surrounded by a white border. This is an interesting issue because it brings up an important question about an app's internal consistency. The Play suite of apps (including Movies and Newsstand pictured as 7 and 1 above) have used avatars with a cool white border for a long time now, so is it acceptable to carry this paradigm to the drawer? Since the overall hierarchy of the drawer is maintained, it seems reasonable.
Number 2, which belongs to the new Google Search app, is again close, but the typography is unique to the app. It's a common theme in Google Search, but probably not best for the drawer itself. Additionally, there are icons for Settings and Help & Feedback, where there are none in Google's specification.
Moving on to number 3, we have something even more interesting - in this shot we see a stubby hamburger icon with what appears at first to be correct use of iconography and list items, but on closer inspection the icons are ever so slightly off from the 16dp key line, and the divider before "Settings" is a style usually found separating information in the actual interface. Again we have unnecessary icons beside Settings and Help & Feedback, items which - according to spec - should be deemphasized from the rest of the drawer.
Number 4 is hangouts. This is a whopper. Hangouts uses a non-standard profile picker paradigm, doesn't deemphasize Settings or Help & Feedback, and does not overlap the tab or app bars. It also uses the old hamburger indicator at the top, which embeds itself in the side of the frame when activated.
Number 5 belongs to Inbox. Here we see a standard profile picker with some admittedly awesome flair - a swipe interaction that switches accounts. Elsewhere we have colored iconography (perhaps useful in this context but ultimately off-kilter with spec), and a weird sticky bottom sheet for Settings and Help & Feedback which, again, have their own icons. The question of the sticky bottom sheet is an interesting one - Inbox is focused on managing email, and provides the option of creating custom bundles. The navigation drawer, in that case, can grow very long. It would seem that the intent was to keep Settings and Help & Feedback visible at all times for ease of access, but a question remains about whether this emphasis is the right choice.
Number 6 is Google's Photos app. This drawer is very close to being correct, except that it does not overlay the app bar, and still uses the spinning arrow icon. The profile picker and iconography/typography appear correct, however.
Number 7 is Play Movies. This, along with 1 as discussed above, is close, but the spinny arrow is still hiding behind the drawer. The unique thing about this drawer, which it shares with Play Music and Play Books, is a toggle button in the drawer. This sort of interaction inside a drawer is primarily limited to the Play Suite, and isn't necessarily a problem - after all, it's deemphasized, and it's an action that benefits from appearing next to the app's primary destinations, as it directly changes how the app actually presents information.
Number 8, which belongs to Drive, has a non-standard hamburger icon that doesn't animate at all, while the drawer itself does not overlay anything. The variances in this drawer don't appear to serve any specific purpose for the app itself.
Number 9, the Play Store app, adds an additional gray highlight to the currently selected view like Movies and Newsstand, and uses the spinning arrow animation. It seems that the drawer wants to overlay the app bar, but gets stuck with the dimmed background visible on top.
Finally, number 10 is everyone's favorite, the "no drawer" implementation which I've admittedly included as a joke, though the notification panel doesn't overlap the app bar. This, however, is a tricky problem because the app bar changes when the drawer is opened to include additional UI elements like the button for clearing notifications.
Not pictured above is today's Play Books update, which introduces another kind of arrow animation which - again - is overlapped by the navigation drawer. Otherwise the drawer aligns with other Play apps.
Also not pictured (because it is neither released nor readily available for users to install without extra steps) is Calendar, which actually inserts checkboxes into the nav drawer, but Calendar's interface is another beast entirely, and until we see it closer to release, things could still change.
What Now?
As a user, a developer, or a designer, the natural reaction to these inconsistencies is frustration. For the user, it's frustrating to never quite be sure what you'll encounter when you open the nav drawer. As a developer, it's frustrating to get mixed signals on what you should do for your own app. And as a designer, it's frustrating to get mixed signals on what you should be reaching for in your designs.
With something as deserving of consistency as a navigation drawer, it's easy to react this way.
That said, there are sometimes reasons behind the madness, as I've tried to explain for each instance above. I would say that there are a few key tenets of the navigation drawer that should absolutely remain consistent if at all possible:
- The navigation drawer should overlap the app bar
- Profile pickers (large and small) should maintain consistency and unity in style and typography
- The way list items are styled (iconography, typography, and color highlight) should feel familiar between all apps
- Actions secondary or tertiary to the app's primary destinations (Settings, Help & Feedback) should be consistently deemphasized as list items
Outside of these tenets, I think there can be affordances for individual apps. For example, keeping the list items "familiar" doesn't mean that they all need to be styled exactly the same. Iconography for instance should be relevant to the app. In the case of Inbox, the completely new paradigms introduced are heavily reliant on color, so coloring the first items in the drawer may make sense to reinforce the ideas they represent. Essentially, variances outside these tenets that don't "break" or heavily disturb the familiarity of experience in the navigation drawer may be acceptable, if they're necessary for the given app.
Final Thoughts
Besides the affordances taken for individual apps and the misuse of admittedly beautiful animations, what we can see from this collection of navigation drawers is that the teams working on Google's suite of apps are at least to some extent disparate pods, each iterating on their own design visions while keeping hold (however loose it may appear) on the central design guidelines Google is working hard to push to the community.
For those of us working on creating apps, all we can do is attempt to make sensible, logical UI decisions based on the specifications and our projects' needs (while keeping things familiar), and hope that Google will do the same.
For those of us using apps, it's the same story - the experience may be inconsistent now, but it is clear with recent updates that Google is on the move, working to give its apps a fresh and familiar feel.