The Hamburger Paradigm
What makes our apps easy to navigate and why
You could have mistaken the title off an episode straight from The Big Bang Theory but as much as I’d love to write about Sheldon’s love for hamburgers and The Cheesecake Factory this post is about navigation in apps. What makes them easy to navigate and why I believe hamburger menus, side-navs, basements etc are terrible primary navigations. I shall refer to this pattern from now as the navigation drawer.
First seen at Xerox Parc, this list-menu interaction was popularized by Facebook and Path in what seemed like a great a way to navigate around an app. It saves space, looks greats and you could fit a bunch of stuff in there! Awesome. In the last few years many apps jumped on board and now the ‘three-lined-symbol’ sitting at the top has become a familiar mobile pattern to people.
But now those apps have taken a turn. Many high usage apps have already redesigned their navigation on iOS into a tab bar. These apps include Path, Foursquare, Vine and even Facebook (see above). This got me thinking. Why the change?
I used to think the drawer wasn't always the best solution for primary navigation. There are already compelling arguments against the drawer. Those include task efficiency (number of taps), lower discoverability, thumb zones and engagement metrics:
What’s out of sight is out of mind
The best case against the navigation drawer I've seen, is from a WWDC 14 talk by Mike Stern of Apple “Designing Intuitive User Experiences”. I agreed with Mike and it made me think. He talked about easy navigation being an important factor for an intuitive app and it boiled down to three simple questions:
Where am I?
Where else can I go?
What will I find when I get there?
Many of the interactions in our screens nowadays are metaphors of real world experiences — it’s what makes them intuitive. Suppose I place a plate in front of you of some food you don't like, you’re instinct would be to slide it away. In the real world, you are swiping away something you don't want like just like you are swiping to delete an email. Turning on a power socket switch is a lot like tapping switches on or off. These are the kinds of intuitive interactions we should be aiming for.
So how do we make navigation intuitive?
I found myself thinking a lot about those three questions framed by Mike and came to realisation that easy navigation in app is a lot like…
…navigating in the real world.
Turns out the real world does a great job of all three of them.
Imagine yourself in an unfamiliar town. You immediately look around to find out where you are. You spot places — perhaps a church, the train station or even some signs. Pretty quickly you’ve built a sense of understanding of where you are. Now you know you have a choice of places to go to and you know what to expect once you get there. You walk right up to the bus stop and expect to catch a bus. How’s that for intuitive navigation?
Tab bars on iOS also do a pretty good job.
The active state of a tab bar tells you where you are. It also shows you where else you can go, presenting all of your choices and progressively disclosing the rest of your app’s content. The icons and labels also provide a good explanation of whats inside of each section of the app. Pretty intuitive.
Navigation drawers, however do a terrible job of the first two questions especially.
As a form of primary navigation it sucks because you have no idea where you are in the app and what choices you have, because the actual menu is off the screen. This gets amplified when you dive into a view and that familiar hamburger icon gets replaced with the back button and now you're lost.
Instead of having a chest of draws with labels on them you now have one mysterious draw with all of your stuff. If your primary navigation is a metaphor for a drawer (to expose content beneath), they are likely to be…
… filled with junk.
Do we kill the hamburger?
Don't go writing off navigation drawers just yet because I do believe it is an interaction that has some use - perhaps not so much for primary navigation but more so for secondary content. An example I like is Slack for iOS. They use the drawer to show Open Channels on one side and Files on the other. It works because it isn't your primary navigation, it saves much needed space for the messages, the icon never gets replaced with anything and you always know where you are with the title in the Nav Bar. Sweet. (Note how they went for hashtag icon instead of the hamburger)
Saying that, there are apps where I feel the navigation drawer may be a bad choice. I wanted to look at one I feel could benefit with a redesigned tab bar. So purely for experimental purposes I wanted to see if I could redesign the information architecture of one of my highly used apps — Pocket. I love using Pocket but one of my biggest gripes with their app is the lack of discoverability for primary content and the number of taps it requires to navigate around as I tend to go to Archive & Favorites a lot. That takes at least twice as many taps.
With a tab bar it is far more discoverable and quicker to switch between sections with just one tap. Progressive disclosure can be used for secondary content under More. The result I believe is a far easier to use app and increase engagement.
Stashing your primary navigation into a drawer with an hamburger icon is where it gets confusing. Using the pattern where it makes sense could be useful. Before thinking up your navigation system it may be useful asking yourself questions on what your apps goals and needs are.
Is tab bar the only solution?
Mobile interfaces are fairly new and we are only just seeing the potential of Natural User Interfaces. On mobile we are still exploring many ways of navigation through the use of transitions and gestures.
Naturally, the current constraints of mobile is that everything sits in our screens of which we directly manipulate with our fingers. What’s really exciting is what we come up with in the future. What intuitive navigation systems will exist combined with the future of our interfaces ?
Every app will have it’s own goals and needs. It’s up to you to take all of that into account and design an intuitive navigation. Don't feel like you are limited in solutions but just remember easy navigation is a lot like navigating in the real world:
Where am I?
Where else can I go?
What will I find when I get there?
Thanks for reading. If you haven't yet watched Mike Stern’s talk I highly recommend you check it out — “Designing Intuitive User Experiences”
