Site: US UK AU |
Nexcess Blog

To Hamburger Or Not To Hamburger — A UI Question

March 1, 2016 1 Comment RSS Feed

HamburgerThe number of users who access sites on mobile devices has increased dramatically over the last few years, both as an absolute number and as a proportion of site traffic. In many areas of the web, mobile users now outnumber those who visit sites from desktop or laptop machines. The predominance of smaller screens has put designers to the test — how can we accommodate users on smaller screens without giving them a degraded experience, without leaving out the parts of a website that have traditionally been considered essential?

One solution is the hamburger menu. Hamburger menus are a now well-understood method of pushing navigation UI elements offscreen to save space. There is an ongoing debate in the design community, with designers and pundits lining up against each other — some think hamburger menus are the best thing since actual hamburgers, and some think they are the UI equivalent of sweeping trash under the rug.

Hamburger menus have been accused of reducing the visibility of essential user interface components, forcing users to make more clicks than necessary, and encouraging bad habits in developers who tend to shove everything they can’t find a place for on their main pages under the hamburger.

According to designer James Archer:

“Hamburger menus navigation operate under a simple principle. On the surface, it seems self-evident that if the user wants the navigation menu, they can just click on it. However, if you dig deeper, you’ll realize that users often don’t know quite what they want, and they rely on site navigation to nudge them in the right direction by telling them what their options are and what content they should be looking at.”

In mobile applications, there are a number of alternatives to hamburger menus. One of the most popular is the tab bar, which you can see at the bottom of apps like Twitter’s. While tab bars can work on mobile websites, a different approach might be to change how we think about site navigation altogether.

Do You Really Need Everything In Your Nav Menu?

We need the hamburger menu because navigation menus tend to be stuffed with content deemed essential by some stakeholder in the design process. That works well (or at least it fits) on the desktop, but on mobile we have to take all that cruft and put it somewhere.

But does your site really need 3 levels of navigation with 10 top-level items in its nav bar? It might, but there’s a simple way to find out — test for user interactions with the menu bar. If almost no-one clicks on an item, then why is it there? Make every item in the nav bar justify its presence.

A slimmed down nav bar may not need to be hidden away at all, as we can see from these examples of mobile navigation.


We can go beyond thinking about the Nav bar and consider this: how many of your users will use a nav bar at all? One of the paradigmatic uses of the hamburger menu on publisher’s sites is to offer category navigation, or some other method of surfacing content. According to Kim Lau of Atlantic Digital, surfacing content via the navigation bar is probably the wrong approach.

“Most of the negative arguments against the hamburger have focused on its lack of use and/or a lack of comprehension by users in testing. I’d argue that the use of navigation is always fairly low, and that generally when you put things on a second screen, you are implicitly indicating that the information behind it is secondary to the primary purpose of the page. By this nature, the use of the menus is low, or should be.”

If you’re going to use a hamburger item, you’d better make sure that you don’t rely on it as the primary means of surfacing new content. There are better ways to do that as part of the site’s main design — widgets for featured content, related content, popular content and so on.

If you really want to hide something behind a hamburger menu, you’d better be sure that it isn’t an essential part of your site’s navigation or engagement strategy. And if it isn’t — then why include it at all?

Posted in: Webmaster