Would You Like Fries With That?

The rule of thumb for an designer who strives for excellent user experience, is for a user to get anywhere on a website in 2–3 clicks (Kemp, 2014). Having a hamburger menu already uses up at least 33% of those clicks.

Problems

What is it?

Where did this menu trend come from? How many people actually understand what three little lines on a web page mean? Hard to say. It’s accepted that users do not recognise the hamburger icon as a single link, but if a website is aimed towards an older demographic, the icon would be almost unknown to that age group (Budiu, 2011).

One extra click

Using a hamburger icon on your website adds an extra action to your navigation. Reaching a particular page on a navigation bar usually takes one click. To get to a page with a hamburger menu usually takes at least two clicks — one on the menu icon and the other to the targeted page.

The hamburger menu tends to be used because designers aren’t fully committed designing the mobile view first. Designers tend to create a website, which should look good both on laptop’s screen and mobile device. But in order to solve these hamburger icon problems, let’s take a look at this idea:

With mobiles and tablet traffic slowly overtaking desktop traffic, a shift must come with how these navigation bars are designed (Mullins, 2015). Let’s say you go the desktop-fist approach — you’ve finished your great design and then you think, how can we put all 13 of these menu buttons with drop downs onto a responsive mobile site? Let’s throw everything in a hamburger menu and hope for the best. Right?

Wrong. If designers fully embrace a mobile-first approach to web design, and apply it to content as well as information architecture, then will the hamburger icon be a part of history.

Budiu, R. (2011). Usability of mobile websites and applications: Design guidelines for improving the user experience of mobile sites and apps. Fremont, CA: Nielsen Norman Group.

Kemp, J. (2014). Reduce UX friction: Friends don’t let friends use hamburger menus. Retrieved from http://www.demacmedia.com/design-user-experience/reduce-ux-friction/

Mullins, C. (2015). Responsive, mobile app, mobile first: untangling the UX design web in practical experience. In Proceedings of the 33rd Annual International Conference on the Design of Communication (p. 22). ACM.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.