Hamburger diet

Tomorrow we have the build conference coming up, one of my hopes is a more stabilized design guideline for the Windows 10. So I wanted to look into one specific navigation pattern that is used on mobile web sites, Android, Firefox OS, iOS (although in disguise) and still not officially, on Windows Phone. I am, as the title implies, talking about the dreaded hamburger menu.

Unable to find the origin of this brilliant hamburger view. It's just to brilliant to not include it

Unable to find the origin of this menu. It’s just to brilliant to not include

This has caused quite a stir among Windows Phone fans and at first I thought it to be odd and out of placed, but you should always be ready for change.

To start with, I think Microsoft is doing the right thing to straighten up the interaction and keep navigation on top and actions on bottom. It’s a good general rule for complex applications. However, never forget that primary navigation and primary action should always be right in the view and not tucked away in hidden menus.

What’s wrong with the hamburger menu?

Of course the hamburger is not the ultimate navigation solution, the perfect pattern just don’t exist. Just consider it another tool in the toolbox. I believe that now it’s has gotten common enough for people to understand and interact with. However, as with every pattern, you need to know the pitfalls. So, apart from being fattening, let’s look at the burger problems:

  • It’s uses a non-descriptive icon that don’t describe the content
  • It’s in a hard hard-to-reach place right on top of the screen
  • Stuff in the burger is out-of-sight and out-of-mind
  • It can easily turn into a junk folder with unrelated content

So let’s break this down and see what we can make out of it.

Non-descriptive icon

Well to be honest, every phone interface is filled with non-descriptive three something icons. Just look below, the bottom triple icon bar is my favorite.

three

But used consequently and in the right context they actually makes sense to the user, to look into a few:

  • Vertical dots in the upper right corner and on android – Oh, that’s always actions.
  • Three horizontal dots + more text on iOS – yep more navigation is hiiden away here.
  • Three dots in the right lower corner on Windows Phone – that’s more items on the action bar.

Used right, the non-descriptive icon still makes sense. Just don’t use it out of it’s place or in the wrong platform. And for the hamburger menu in the context of mobile web, Android and Firefox OS it’s an expected behaviour for extended navigation.

Hard-to-reach

Granted, the upper left corner is hard to reach for righthanded one hand use. That is also the reason the hamburger should be for less used navigation. You shouldn’t use it to navigate your folder structure on OneDrive. In a file browser, navigating folders is the main case. But consider the mail appl, in here you spend 95% of your time in the inbox navigating mail in the inbox is the main case. But navigation outside of the inbox is secondary and It makes sense to use for that navigation.

Out-of-sight, out-of-mind

This is the one that have gotten most people to hate the hamburger. And it actually relates the above case. I think the main problem is that using the hamburger people think that all navigation should be moved up here. That is not the case. Use it for stuff that less used and things you actually don’t want to clutter your view. As an example, look at the twitter application:

wp_ss_20150424_0004

If we were to add a hamburger here for more functionality doesn’t mean you should move the main feed, notifications, hastags and user feed into the hamburger. But, the hamburger fits for shifting between user account views, saved hastag searhes and user lists. Stuff that you don’t use that often. And don’t forget the ability to pin some of those views to your start screen.

And actually, this method is not different from what iOS is doing with their bottom tab, you know the more icon that’s actually iOS take on the hamburger. And here’s a secret: the three dots is just hamburger before assembly.

Oh no – a junk folder

Yeah, this is actually the worst part of the hamburger. But it’s not the hamburger that is the problem. This will happen with most navigation patterns if you misuse them. If you mindlessly keep adding stuff to it or if you fail to note the difference between action and navigation (yes there are corner cases) this would fail on any navigation pattern. Just consider what would happen if you add actions to some headings in a pivot or using an action in the action bar as at tab.

Conclusion

There are no easy answers for any navigation pattern. Just don’t start out assuming you will need a hamburger. In the same way you should not assume a panorama or a pivot is needed for an application to be a Windows Phone application.

Often developers expect Microsoft to create templates that are easy to start with to get you going. It may seem like a good idea, but now the store is littered with panorama and tile apps in the store. If we don’t start focusing on good navigation structure before adding another hamburger I fear we will end up with 90% hamburgers in the store soon.

Leave a Reply