7 ms·

An oral history of the hamburger icon (2019)

87 points by _Microft 6y ago

orliesaurus 6y 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 6y 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 6y 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 6y 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.)
    - p_l 6y ago
      To this day the only way I associate "hamburger" with that icon is memorization through constant hammering.
    - aikinai 6y ago
      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.
      - pbhjpbhj 6y ago
        Same, but I think a computer might be my first use of a menu.
  - slavik81 6y 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.
    - pbhjpbhj 6y ago
      On which OS/DE?
      - slavik81 6y ago
        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 https://i.stack.imgur.com/s9fSU.jpg [2]: https://cdn.evilmartians.com/front/posts/scroll-to-the-future-modern-javascript-css-scrolling-implementations/windows_scrollbars-8d49827.png https://cdn.evilmartians.com/front/posts/scroll-to-the-futur...
- the_other 6y 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 6y 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.
    - zinekeller 6y ago
      > 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).
    - marssaxman 6y ago
      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.
amelius 6y ago
I love those "save" icons with a floppy disk. There's even an icon with a tape in that article.
- cookie_monsta 6y 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.
  - _Microft 6y 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.
    - pbhjpbhj 6y ago
      Upload? Perhaps a vertically flipped download button. Download is often just a fat, downward pointing arrow. I might add a cloud in there.
  - pwdisswordfish0 6y 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 6y 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.
quickthrower2 6y 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.
_Microft 6y 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 https://en.wikipedia.org/wiki/Dieter_Rams
- twic 6y 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-file-icon-usually-folded-from-the-right-corner/121803 https://ux.stackexchange.com/questions/121802/why-is-the-fil...
  - jsmith45 6y 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 6y 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 https://www.lukew.com/ff/entry.asp?1945 [2] https://www.youtube.com/watch?v=Y-FMTPsgy_Y&t=43m45s https://www.youtube.com/watch?v=Y-FMTPsgy_Y&t=43m45s
- mjevans 6y 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 6y 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 6y 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.
tomcam 6y ago
To me, it is a low point in UX and perhaps the least discoverable pattern in recent memory.
- chrisseaton 6y 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?
  - tomcam 6y 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.
    - chrisseaton 6y ago
      How do you think people discovered what it does if it's not discoverable?
      - tomcam 6y ago
        Flailing
- Pxtl 6y ago
  The "profile picture = settings" pattern takes that prize for me.
  - jimktrains2 6y 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.
- 6y ago
hyperdeficit 6y 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 6y 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 https://i.imgur.com/uB5JTVE.jpg
alexjplant 6y 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 6y ago
Did anyone else prefer the high contrast Bowman icons?

87 points by _Microft 6y 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 6y 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 6y 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 6y 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.)
  - p_l 6y ago
    To this day the only way I associate "hamburger" with that icon is memorization through constant hammering.
  - aikinai 6y ago
    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.
    - pbhjpbhj 6y ago
      Same, but I think a computer might be my first use of a menu.
- slavik81 6y 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.
  - pbhjpbhj 6y ago
    On which OS/DE?
    - slavik81 6y ago
      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 https://i.stack.imgur.com/s9fSU.jpg [2]: https://cdn.evilmartians.com/front/posts/scroll-to-the-future-modern-javascript-css-scrolling-implementations/windows_scrollbars-8d49827.png https://cdn.evilmartians.com/front/posts/scroll-to-the-futur...
the_other 6y 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 6y 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.
  - zinekeller 6y ago
    > 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).
  - marssaxman 6y ago
    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.

amelius 6y ago

I love those "save" icons with a floppy disk. There's even an icon with a tape in that article.

cookie_monsta 6y 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.
- _Microft 6y 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.
  - pbhjpbhj 6y ago
    Upload? Perhaps a vertically flipped download button. Download is often just a fat, downward pointing arrow. I might add a cloud in there.
- pwdisswordfish0 6y 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 6y 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.

quickthrower2 6y 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.

_Microft 6y 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 https://en.wikipedia.org/wiki/Dieter_Rams

twic 6y 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-file-icon-usually-folded-from-the-right-corner/121803 https://ux.stackexchange.com/questions/121802/why-is-the-fil...
- jsmith45 6y 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 6y 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 https://www.lukew.com/ff/entry.asp?1945 [2] https://www.youtube.com/watch?v=Y-FMTPsgy_Y&t=43m45s https://www.youtube.com/watch?v=Y-FMTPsgy_Y&t=43m45s

mjevans 6y 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 6y 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 6y 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.

tomcam 6y ago

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

chrisseaton 6y 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?
- tomcam 6y 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.
  - chrisseaton 6y ago
    How do you think people discovered what it does if it's not discoverable?
    - tomcam 6y ago
      Flailing
Pxtl 6y ago
The "profile picture = settings" pattern takes that prize for me.
- jimktrains2 6y 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.
6y ago

hyperdeficit 6y 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 6y 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 https://i.imgur.com/uB5JTVE.jpg

alexjplant 6y 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 6y ago

Did anyone else prefer the high contrast Bowman icons?