An oral history of the hamburger icon (2019)

https://www.invisionapp.com/inside-design/an-oral-history-of-the-hamburger-icon-from-the-people-who-were-there/

by _Microft • 6 years ago

87 55 6 years ago

invisionapp.com

orliesaurus• 6 years ago

Took me a while to find why they picked a hamburger icon over anything else but here it is:

Smith: The three lines were an abstract image of what would come up if you clicked on the button—a pop-down menu.

and thats why today we still use a hamburger icon for a generic menu

p4bl0• 6 years ago

It's a good design. It has always been obvious to me that was the idea. Actually it took a bit of time for me to understand that "the hamburger icon" was the "menu icon", I saw the menu in there well before I saw the hamburger.

hnlmorg• 6 years ago

The first time I came across the menu icon it was in Oracle Applications and referred to as "the beer mug". Though I suspect the icon might have been rotated 90 degrees for that name to fit.

TeMPOraL• 6 years ago

It's a funny thing, when you first learn a computing/UI term and only much later you discover the thing it's supposed to skeuomorph / be an analog of. For me, this was icons. I've learned what they are in GUIs as a small kid. I've only discovered the original meaning of the word - religious pictures painted on wood - many, many years later.

Related phenomenon happens for people for whom English isn't their primary language. Like myself, they're likely to learn terms of modern computing on their own terms, without referring to the underlying analogies, because they don't know the non-computing meanings of English words just yet. For me, the notable examples were "desktop" and "menu", which I internalized entirely without any reference to what these words ordinarily mean in English.

I bring this up every now and then, because the experience of people of my generation in non-English-speaking countries is one big counterexample for the idea that UIs have to be "intuitive" and refer to non-computing concepts.

(As for the "hamburger menu", I of course knew what the hamburger was, but it took me a while to "see it" in that icon. Perhaps if the outside lines were rounded, instead of straight, then it would have resembled an actual hamburger.)

slavik812• 6 years ago

I found the hamburger menu very surprising the first time I encountered it. It's identical in appearance to the drag handle symbol.

The drag handle even has an obvious physical interpretation: the lines are ridges. It's a textured surface designed to be pressed upon and pushed or pulled.

the_other2• 6 years ago

I tried to read the article, but it was obscured by a popup. On my phone, the popup was so big it covered all the words in the first paragraph, so I couldn’t tell id I wanted to read the whole article.

Thanks for the summary. Thanks for doing the work to get past the popup.

I’m really glad GDPR has given people (in the EU) rights and powers over data about them. I’m SO disappointed that even design blogs have decided that analytics cookies are more important to them than usability of their site.

csunbird• 6 years ago

They just want people to be annoyed to the point where they click "Accept All" button, which they conveniently highlighted several times next to near invisible "Reject All" button, without thinking.

We need a law to make dark patterns like this illegal.

amelius• 6 years ago

I love those "save" icons with a floppy disk.

There's even an icon with a tape in that article.

cookie_monsta• 6 years ago

The floppy disk is a very enduring "save" icon. MS Word still uses it as do many other UIs.

I wonder what the kids coming up today think it is.

_Microft2• 6 years ago

One could argue that the designers had it easier back then. A floppy is a pretty tangible thing. How would you symbolize saving today when almost no saves go to removable media anymore and the removable media that we still have come in all shapes and sizes? Saving something has become pretty abstract.

pwdisswordfish0• 6 years ago

I mean I’m 30 and I have seen and used 3.5" floppies, but they were never the primary storage medium in my mind, so while I know what the icon shows, I’ve always pretty much thought of it as “save”. I doubt I have ever clicked that icon in order to save something to a floppy. There’s nothing wrong with it. Many kids today probably don’t know classic telephones either and even iOS uses one for the phone icon.

tshaddox• 6 years ago

I think this concept is overblown. Even when floppy disks were common, the depiction of a floppy disk as an icon on a button required a bit of thought (or experience/training) to understand that it meant “save this file somewhere (maybe on a floppy disk).” It’s not like the icon automatically meant “save this file somewhere that you will choose” simply because people were more familiar with floppy disks.

alpaca1282• 6 years ago

Because in my experience it's the only save icon that's consistently used for the same purpose. Many apps use icons involving arrows for most common actions, and then I have to guess if that one icon is for downloading something, for saving the file or something else entirely.

Smartphones really need a tooltip replacement. Windows Phone 8 solved it in a consistent, intuitive way and it would be great if the other big players came up with something similar. Google and Apple have the power to push such improvements through the whole app ecosystem, but there seems to be no incentive.

thekaleb• 6 years ago

On many Android apps I can long press an icon and get a tooltip.

quickthrower2• 6 years ago

I’m a hamburger fan on mobile. It allows you to shove away most of the ui which is what you want when there is limited space - especially on a site where you want to make an impact and not just fill the screen with a menu from the get go.

_Microft2• 6 years ago

Is there anyone who was so influential for icon design that they could be called the Dieter Rams of icons by the way?

https://en.wikipedia.org/wiki/Dieter_Rams

twic• 6 years ago

Susan Kare maybe? She did the icons for the original Mac. Icons on the Mac today are distant descendants of those, and icons elsewhere have been influenced, although i couldn't quantify how much.

Although Norm Cox, from this article, apparently also invented the folded corner document icon:

https://ux.stackexchange.com/questions/121802/why-is-the-fil...

jsmith45• 6 years ago

Yeah, seeing the folded corner in the hamburger menu article's set of icons made me think Norm Cox was probably the source of that too. Glad to hear my assumption was right.

mikehall314• 6 years ago

Luke Wroblewski has long been a critic of the hamburger icon, citing both that hiding key components of your application behind a burger menu is bad for engagement [1] and that the meaning of that icon as "menu" is not as well understood as we may think [2]. These claims are a few years old now, so things may have moved on -- I would be interested to see up-to-date analysis of how users interact with and understand these icons.

[1] https://www.lukew.com/ff/entry.asp?1945 [2] https://www.youtube.com/watch?v=Y-FMTPsgy_Y&t=43m45s

mjevans• 6 years ago

I find a gear or cog more conceptually engaging than the "hamburger".

Open it up and look at how it works inside, maybe tinker with it.

The three lines have no distinct relation to me that isn't artificial, as least the floppy icon is tied to something that might have a historic meaning. These days I'd probably have a checkmark and a broken checkmark to denote 'checked in' and 'not checked in'. Crucially it would probably need to be two checkmarks when fully checked in, and a single big checkmark in back with a smaller obviously broken one in front to denote an older version exists.

arrrg• 6 years ago

Gear makes sense to me for any kind of settings or configuration. However, hamburger menus are often used for actual content or feature navigation.

Who would suspect finding the, I don’t know, trends list or something behind a gear icon?

gertrunde• 6 years ago

I'm not sure why, but I'm in that camp too. I can only assume that there is some piece of shared past computer system experience I don't share with the hamburger menu people.

That icon has just never really been associated with 'menu' for me, so my eyesight just glides over it as if it's not there, and it just doesn't register as a UI component. (And that vertical ellipsis is even worse, doubly so if it repeated in multiple locations within a UI.

ralabaster• 6 years ago

Your eyesight glides over it as if it’s not there? Oddly enough, that seems perfect from an uncluttered-design standpoint. Can you still find menus when they’re hidden behind invisible hamburgers, perhaps by association with the top of the page?

ASalazarMX• 6 years ago

Conversely, the hamburger menu always meant "menu" for me, it strongly reminded me of a menu list, and it was the first thing I clicked/tapped when looking for options. Never understood the hate for it, even calling it "hamburger" feels like a straw man argument.

TazeTSchnitzel• 6 years ago

Even though I know what the hamburger icon does and regularly use it, the example in that second video of making it more button-like benefits me, because without clear cues about what's ornamental and what's interactible, it takes more time for my eyes to find things I can click on.

mysterydip• 6 years ago

I actually never made the connection between "hamburger" and "menu" until your comment. I thought everyone chose "the three lines" for menu as a stylistic choice that everyone copied from each other.

Pxtl2• 6 years ago

Far better than the new practice of using the profile image for the settings.

"To change to dark mode click the picture of your own face" is way weirder than the hamburger icon.

capableweb• 6 years ago

hiding key components of your application behind a burger menu is bad for engagement

It's still undecided and has become under further scrutinize lately if low engagement actually is a bad thing, considering everything.

Many of the biggest tech companies does nothing but optimizing for engagement, and hence we have viral outrages via social media. Addiction is also played as something that are good for companies, but we're slowly waking up to the notion that optimizing only for engagement was never a good idea for humanity at large.

milkytron• 6 years ago

...optimizing only for engagement was never a good idea for humanity at large.

I don't trust companies to have this as an incentive. Profit and revenue are the incentives, and if caring about humanity helps those, then it will considered.

tomcam4• 6 years ago

To me, it is a low point in UX and perhaps the least discoverable pattern in recent memory.

chrisseaton2• 6 years ago

Isn't this a bit dramatic? It's a button with a clear standard icon and standard behaviour. What else would you want instead?

tomcam4• 6 years ago

Isn’t it a bit dramatic to ask such a question about what was explicitly defined as my own opinion, especially considering I made no claims about universality? At this point it is what you call a clear standard with standard behavior. There was nothing discoverable about either one at the beginning.

Pxtl2• 6 years ago

The "profile picture = settings" pattern takes that prize for me.

jimktrains2• 6 years ago

Unless the profile pic is hidden in a pane that you have to slide to open that had no indication of its existence and wasn't there in the last version of the app and is in a completely different place from other apps from the same company.

aikinai2• 6 years ago

The least discoverable patterns are obviously going to be gestures. Add on top of that, modal gestures. Try to ask a new user to find iPad multi-tasking for example; it requires a specific starting state and then a hidden gesture, a long press, then another gesture.

You’re also ignoring context. Everyone already knows what the hamburger does, so it’s very discoverable. And brand new tech users who don’t know find it soon enough and then know.

tomcam4• 6 years ago

Yes, I cheerfully concede

hyperdeficit• 6 years ago

Ah, the controversial hamburger icon. I have taken to calling it the 'Junk Drawer' myself because it is the place where you put everything that you can't think of a better way to represent in the UI. I think it has a place, but it is overused as a solution to create a clean UI because it makes it easy to meet the requests from different stakeholders to include a variety of functionality.

I find it interesting that they were thinking of it in a very similar way based on this quote from the article "In your garage organization, there’s always a bucket for miscellaneous. You’ve got nuts and bolts and screws and nails, and then, stuff, miscellaneous stuff. That’s kind of what the hamburger menu button was."

scolby33• 6 years ago

Keybase uses a concrete image of a hamburger[1] for their "etc." menu, which I assume is a nod to this name. It made me chuckle when it clicked for me.

[1] https://i.imgur.com/uB5JTVE.jpg

alexjplant• 6 years ago

I learned very quickly that I don’t wear a three-piece suit to PARC: it was t-shirts and shorts, kilts … one guy walked around with a parrot on his shoulder.

Was this perhaps Dave Poole, founder of Foonly Inc. and architect of the infamous F1 that did the CGI for the first Tron? I seem to recall reading a separate short oral history where the author mentioned said parrot...

contingencies• 6 years ago

Did anyone else prefer the high contrast Bowman icons?

An oral history of the hamburger icon (2019)

Related Stories