The Hamburger is Bad for You

A couple of weeks ago I came across this tweet from Luke Wroblewski:

It asks a the simple question about people’s general understanding of the hamburger icon and links to a larger conversation on Twitter on the topic. If you don’t have the time to read through the 20+ tweets here’s the gist: Anecdotal and somewhat scientific evidence indicates people do not intuitively understand the hamburger icon as an indicator of a menu but have to learn its function. Pardon me as I feign shock and surprise.

A hamburger by any other name…

Did you ever wonder where the hamburger came from? I’m not talking about the incredibly inaccurately named ground-beef-patty-between-too-buns meal option here nor the first use of the hamburger as a symbol for a menu. I’m talking about the actual hamburger icon itself. If you think it was invented by Apple or some genius designer you are about a mile and a half off. The hamburger is actually a symbol known as a “triple bar” used in logic and math to mean absolute equivalence or identical. I have stacks of notebooks full of logic trees and calculations littered with these hamburgers from my philosophy days. And that’s where they should have stayed. Instead this symbol, technically described as “a = sign with a third line”, has become a staple of modern mobile, flat, and no-UI design. The triple bar has become identical to an unintuitive and uninformative user experience. Oh, the irony!

Edit April 8, 2014: According to this article the first known use of the triple bar as a UX icon was on Xerox photocopiers. Thanks to Steve M.G. for the tip!

The Fictional Origins of the Hamburger

For the past week I’ve been theorizing as to the origins of the hamburger as a menu icon. I say “theorizing” because I don’t have the patience nor desire to dig up the actual origin of this idea. Here’s what I imagine happened:

A designer at a company named after a fruit … let’s call it “Pear” … is making a new user interface for the company’s new phone called the oPhone. Said designer discovers that there is very little screen real estate on the oPhone and decides to hide the context menu under an icon. “Hey, Stefan” he shouts across the room to the boss: “What is the universal icon for a menu?” “How would I know Johan” Stefan responds. “Just rip some underused icon from the database like we did with the Abilities button on our keyboard!”

And thus the hamburger was born. (The accuracy of this fictional account is irrelevant).

After its introduction as a menu icon the hamburger has become prevalent throughout the web and in web applications (I can see it in the top right hand corner of Chrome as I write this indicating the settings menu). But the hamburger is also used for several other things in those same applications, most notably to indicate that items in a list are draggable and sortable. Which makes little more sense than its use as an indicator of a menu.

The Meaning of the Hamburger

It’s pretty obvious why the hamburger is meant to indicate a menu: If you really want to it kind of maybe just possibly theoretically might maybe look a little bit like a vertical stack menu. In the same way that the letter ‘L’ looks like a shoe.  The problem of course is that it doesn’t look like a menu unless you already know that it’s supposed to look like a menu. What we have here is a classic case of theory dependence and tacit knowledge: The designer and everyone involved in the application being built know from experience that the hamburger means a menu and thus they assume it’s intuitive. What they fail to remember is that the first time they encountered the hamburger they did not know what it was and had to be told like in the screen grab in Luke’s tweet:

So what does the hamburger look like? Ignoring the actual meaning of the triple bar here is an unordered list of things it does look like:

  • A hamburger
  • Three shelves
  • The jQuery UI accordion
  • The black keys on a keyboard seen from the top at a 90 degree angle
  • A crosswalk
  • … three black lines

In truth the triple bar / hamburger only looks like a triple bar, because that’s what it is. It is only through an incredible feat of skeuomorphism it comes anywhere close to looking like a menu. Which is strange considering the reign of the hamburger was brought on by the move away from sekuomorphism. So the hamburger is really an anti-pattern!

No hamburger for you!

You may have noticed that my designs never feature hamburgers. The theme you are currently looking at has replaced the hamburger for the word “Menu” which in my view is far more descriptive. And when I use icons I try to use ones that indicate actions (arrows, plus or minus, etc) because I am cognizant (I mean “mindful” – gotta stay on trend) of my own theory dependence and work to keep my knowledge focal.

I believe in providing criticism only when it is constructive and I truly wish I could serve up a new and perfect menu icon to solve the hamburger bloat once and for all. Sadly I don’t, at least not yet. In place of this I have a couple of suggestions to curb the desire to use a hamburger as a menu icon:

  1. Try using the word “Menu” instead
  2. Consider using a down arrow or another active icon
  3. Reconsider the menu position and function
  4. Use an off-canvas menu and use a tab with an arrow to indicate active interaction

There is a lot of chatter about the unintuitive nature of the hamburger in UX circles right now and I have no doubt that in due time someone will come up with a new and better icon. It might even be you! In the meantime I urge you to abandon the use of the triple bar as anything other than what it actually is for – logical identical – and find better solutions to your menu woes.

Further reading

Mobile Navigation Menus and Great User Experience – Newfangled



Foundations of UX: Logic and Content – new course

Foundations of UX: Logic and Content - new course with Morten Rand-Hendriksen

How can we communicate clearly through design and development? That is the question I attempt to answer in my latest release from titled Foundations of UX: Logic and Content. The course looks at communication, web design, and User Experience through the prism of philosophy to find out how we communicate and also how we can use logic and common sense to create meaningful user experiences and ensure that the message we try to communicate is received as intended.

More than just an introduction to logic and how humans and computers use it to understand the world this course outlines the foundational mindset I myself use whenever I approach a project, whether it be in design, development, or even project management or music. In preparing for the course I took a step outside myself so to speak to identify where and how my background in philosophy impacts the way I do things. The result is a course quite unlike anything I’ve ever done before that draws equally from philosophy and design and development practices to present a different way of thinking about what we create and how we create it. 

I would like you to watch this course more as a conversation than a list of techniques handed from me to you. The examples and ideas in the course are meant to spark (even in some cases provoke) further discussion both in your own mind and also with your colleagues, friends, and family, and help you rediscover communication in its purest form. And once you’re done watching, I’d love to take part in that conversation and take it further. So watch the course and leave your thoughts and ideas in the comments below and let’s explore logic, content, and communication together!

From the course description:

Foundations of UX: Logic and Content looks at how designers, developers, and content creators can use the ancient art of logic and reasoning to improve user experiences and facilitate communication. Morten Rand-Hendriksen looks at the principles of logic, how computer logic and human logic differ, and how these differences can be used to improve communication.

The core idea of logic is to create a system in which communication is clear, precise, and unambiguous, which is (or at least should be) the goal of any website or other communication.

Topics include:

  • How humans communicate
  • Comparing human and computer communication
  • Speaking logically
  • Using logical arguments
  • Understanding the limits of computer logic
  • Formatting information for humans
  • Communicating with logic
Authored Content

Authored Content, Episode 10: UX Ethics, Connected Watches, Drawscript and the Web Standards Project

User Experience expert Dave Hogue joins the Authored Content crew to talk UX Ethics and black patterns. Also discussed: Google and Apple connected watches, Drawscript for Illustrator and the mothballing of the Web Standards Project.

Join the ongoing conversation: and our Google+ Community:

Links from the talk:

Google Watch
Glass, Filter Bubbles, and Life Streams – Connecting the Dots
Build Collaborative Apps with Google Drive
World Wide Maze

Watch the video and join the discussion!

You can watch all the episodes of Authored Content on YouTube (playlist), like Authored Content on Facebook, and join the Authored Content Community on Google+.

My Book News

My book is featured in the Canadian User Experience Blog

One of the people responsible for my company switching to Microsoft Expression as our main web publishing platform is Qixing Zheng – a UX (User Experience) Advisor for Microsoft Canada. Qixing and her colleague Paul Laberge have been instrumental in both our transition to this new platform and also in getting me to the point where I was able to publish a book about Expression Web 2.

Today Qixing published a short article on the Canadian User Experience Blog about the book as well as my recent article in the Expression Newsletter. So here is a link back to the blog, a great place to get info, tips and tutorials on Microsoft and their products, customized for Canucks, “straight from the source” so to speak.