An oral history of the hamburger icon (2019) | Hacker News Reader

An oral history of the hamburger icon (2019)

invisionapp.com

87 points_Microft55 comments

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

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.

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?

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.

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?

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.

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.

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.

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.

> 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.

> ...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.

> > ...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.

Wait, are you saying that you prefer for corporations to act like amoral psychopathic profit maximizers?

I don't think there's any preference here; it looks to me like 'milkytron was just describing how it (unfortunately) is now.

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."

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

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.

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.

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.)

To this day the only way I associate "hamburger" with that icon is memorization through constant hammering.

I’m a native English speaker, but I’m pretty sure this thread is the first time in my life that a computer menu and a food menu have come in contact in my mind. Of course they’re the same, and that’s why they called it a menu on the computer, but they’re just so far apart in real life they have zero association in my mind, like homonyms that don’t have a shared meaning.

Same, but I think a computer might be my first use of a menu.

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.

On which OS/DE?

It was used in iOS and Android applications [1]. That was where I found it most confusing. Website headers would look exactly like those dragable items.

Windows previously used similar texturing in a few places, including for scrollbars in Windows XP through to Windows 7 [2]. I think it was also used in other contexts, but I can't find a screenshot.

[1]: https://i.stack.imgur.com/s9fSU.jpg [2]: https://cdn.evilmartians.com/front/posts/scroll-to-the-futur...

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.

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.

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

Surprisingly, that's called the GDPR! Sadly, there are still no cases where comapnies are fined hard that will stop others from even considering dark patterns (at least in consent).

I attempt to resist this abusive behavior by refusing to click "accept", ever: instead, I use uBlock Origin's element picker to remove the overlay, then carry on as though it never existed.

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.

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

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

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.

How do you think people discovered what it does if it's not discoverable?

Flailing

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

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.

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.

Yes, I cheerfully concede

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

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

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.

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.

Upload? Perhaps a vertically flipped download button. Download is often just a fat, downward pointing arrow. I might add a cloud in there.

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.

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.

The first Macintosh did not have anything else than floppy disk to save to. No hard drive. It was an obvious metaphor.

Also, in those days computers were usually not networked. If you wanted to transfer a file, you saved it to removable media. Commonly a floppy.

Your thought was "I need to save my file to this floppy here and give it to Jenny". It was a very obvious icon, top of mind, for people working with computers in those days.

There's a lot wrapped up in that icon:

- rendering a physical embodiment of the digital work - more specifically, making a thing you can hand to another person so they can use it - also specifically making a thing you can physically store somewhere "safe" - a distinction between temporary and permanent versions of the digital content

Today we don't use physical media for any of these things. Display, exchange and long-term storage can all be accomplished without going to the physical realm.

How else might we represent this graphically?

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.

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

Huh, you're right. Good to know it already has a system in place for that.

> 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...

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

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

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...

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.

Did anyone else prefer the high contrast Bowman icons?

Reply on news.ycombinator.com