Hamburger Menus and IA Challenges

If you’ve been around any websites or mobile apps lately, chances are good that you’ve run into this guy:

That, my friends, is what’s collectively known in our industry as “The Hamburger Menu”.  A catch-all interface element that traditionally exposes all the available user interface choices on a website or mobile app.  Its prevalence has become rather seductive because it seemingly solves a lot of problems, specifically “How am I going to fit all my options into a tiny space?”.

Now, I’m not about to get on a soap box and decry these things from on high – there are some legitimate uses for a menu that contains a bunch of hidden choices.  However, the operative term in that statement is “Hidden”, and that is almost always problematic.

Whenever you have to hide something from a user, you always run the risk of them not seeing it or missing its significance completely. Users don’t typically try out every interface element you show them.  They tend to scan around and zero in on something that catches their eye.   A catch-all menu interface is tempting – but it’s always in everyone’s best interest to whittle down the available options and expose all the things the user is expected to do:

This is the entirety of the mobile twitter interface.  It’s important to note that there are many more things you can do in the twitter app, but this is what they’ve exposed.  Every other function is within a contextual control somewhere else in the app. This is always an excellent method to simplify things and only expose controls where they’re needed.

You can also utilize a mixture of the two – like Facebook does:

Here you’ll see the top four global options that the majority of Facebook users need to do at any given time.  Since Facebook does have quite a few other things that their users might need to do (manage groups, see events, etc), they put them all behind a hamburger menu on the far right.  You’ll notice that they’re also labeling it “More”, so it families with the other icons as well as identifying itself so the user knows what it is.

In general, it’s a good idea to label your hamburger menu just in case a user isn’t familiar with the icon.  There have been some great tests on these issues, and we urge you to have a look at the findings. In a perfect world, your interface should directly mirror the top level of your information architecture, without anything hidden or obfuscated.

“That’s great, but my app HAS to have more than I can show on the screen at one time. “

Does it?  If you have the luxury of being able to create your mobile experience first, you have a great opportunity to view your information architecture through a new lens.  If there’s content that doesn’t need to be there, get out the scalpel.  Even if you’re not designing mobile-first, I bet you can still find some places where you can slim down your sitemap.

“Yeah, yeah, but your scientists were so preoccupied with whether or not they could that they didn’t stop to think if they should.”

     -Dr. Ian Malcolm, Jurassic Park

The elegance of any interface lies in its simplicity.  If you can have the patience and fortitude to wade through all the stakeholder issues, pet projects, and user stories – and saying “no” when appropriate – you can come out the other end with a great interface that tests well and delights your users.  It’s the most challenging labyrinth we have to navigate as designers, and it’s the most important.