Drop a line

Have a tip, or just want to say hi? Just use the form to the right!

           

123 Street Avenue, City Town, 99999

(123) 555-6789

email@address.com

 

You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

The Case of the Spinning Hamburger: Interface Chrome vs Invisible UX

All

The Case of the Spinning Hamburger: Interface Chrome vs Invisible UX

Liam Spradlin

Recently, I wrote an editorial/observational design post for Android Police about the many faces of Google's hamburger navigation drawer. The purpose of the post was to break down all the different hamburger drawers Google has implemented in the past several weeks, and how they are different from the spec Google released months ago at its I/O conference.

There are a lot of variations on the theme, all worth discussing. The most likely explanation for all the discrepancies is that different teams appear to have been using different versions of the app compatibility libraries. Of course, this in itself sounds problematic, but it's not what this post is about. This post is about one particular element implemented in several of the apps that has driven users and myself crazy since its introduction: the spinny hamburger.

Behold.

The spinny hamburger is a can of worms. It was actually created, according to Android experience wizard Roman Nurik, as an animation for vertical movements in an app, where a user enters an upper layer of the app where the hamburger menu icon wouldn't be appropriate. This makes sense, and it's a delightful animation.

But here's where things got crazy: Google implemented the animation in a variety of apps to signal the opening of the hamburger drawer, which slid under the app bar or toolbar. Users went wild.

The animation is beautiful, and it has the "fidget factor," something so delightful that users will interact with it just to see the reaction.

Jack and I even implemented the animation in Today Calendar's ongoing redesign (which we've been working on for a few months now). The problem is that it is technically out of place.

Google's design spec indicates that hamburger drawers should go over the app bar, not under it. This makes sense. After all, the drawer is almost as separate from the main UI as the system UI is. It should appear in its own context, separate from the rest of the app, to indicate its relationship to the app's various destinations. If you do this though, the spinny animation is concealed.

What interests me about this is that there has been a not-insignificant backlash over the concealment of the spinning animation. Why, users wonder, would Google create this animation only to hide it under the drawer? And why, they continue, would the nav drawer go over the app bar in the first place?

Both of these questions have been thoroughly answered, but the demand remains because the arrow provides visual chrome. Google created an interface element so alluring that - even if it was totally out of place in the experience - users demand that it needs to be implemented.

More generally, I’d optimize for consistency and rational layering before optimizing for cool animations.
— Roman Nurik, Designer/Software Engineer*

This is a pattern I've noticed elsewhere - there are times when users undeniably prefer visual chrome to thoughtful, well-informed, and consistent design practices.

As a designer restraint is key, particularly when your audience has a very discerning taste, as much of the online Android community does. Also as a designer of Android experiences, I have recently learned that there's a certain negotiation that must take place in deciding what design decisions are in good taste, what users will love, and how many of those things overlap so that they can be implemented where necessary.

Of course, the inherent question in problems like these is "who's right?" Ultimately I think the clash of wills (particularly in a case like the one of the spinny hamburger) comes from the fact that users can see decoration, but sometimes thoughtful UX is invisible to the user - the benefits of maintaining a visual metaphor, consistency, and hierarchy is unseen, but a spinning icon is very visible. So users sense more value from the animation than they do the alternative.

This doesn't exactly provide a conclusive answer, but I'm actually still not sure if there is one.

* source