The Problem With The Hamburger Icon




  • 1 The image shows the original interface element ("menu button") on the Xerox Star. Still from a ACM CHI 1990 conference video, https://vimeo.com/61556918.

    After its rapid and quite global adoption the "hamburger icon" is starting to face some critique. One of the writings on the subject is "The Hamburger Menu Doesn't Work" by James Archer, subtitled "It's a beautiful, elegant solution that gets it all wrong, and it's time to move on": http://deep.design/the-hamburger-menu/

    And it's in this article that we find the following passage, describing the common notion of this widget (not necessarily representing the views of the author):

    "This design pattern accomplishes a major goal by preserving precious real estate on mobile, tablet, or other small screens, and it’s consistent with the logic of the progressive disclosure design pattern." (James Archer)

    Right? Just a moment, — "and it’s consistent with the logic of the progressive disclosure design pattern."

    And this is the crucial misconception. Progressive disclosure as defined and used by Xerox is about objects and related actions. And it's all about visible objects!

    (Mind the classic example of a square in a drawing application: Clicking the shape discloses editing functions and displays handles to size the object.)

    "A subtle thing happens when everything is visible: the display becomes reality. The user model becomes identical with what is on the screen. Objects can be understood purely in terms of their visible characteristics. Actions can be understood in terms of their effects on the screen. (…) In Star, we have tried to make the objects and actions in the system visible."
    (Designing the Star User Interface; David Canfield Smith; Byte, Issue 4/1982)

    And here is the real problem: The hamburger icon as used today has no other object but the global context. By exposing context to the global context, it's a mere apropos without an object the user might relate to.

    When Norm Cox designed the original icon for the Xerox Star user interface, it was a visual anchor for a menu revealing contextual functions to the visible content of the document. (Like selecting rows, etc.1) This is notably something else than the global, quite abstract context of a site navigation, disclosing navigational functions to address off-screen content.

    Today's hamburger icon is just a paradigmatic misunderstanding.

    To put this more clearly:

    The hamburger icon/menu (as used today) introduces a metaphor of its own that is not consistent with progressive disclosure as used elsewhere in common interfaces (see above). It's more a "and here is the rest that you may be missing"-icon that isn't motivated by any consistent notion of the interface, but by concern for screen real estate. As a user, we may not assume the content of the menu but by empirical knowledge and by considering functions that we are missing and that may be hidden somewhere. Being related to the visible content only by negativity, it essentially breaks the model of the display as an on-screen reality.

    Rather than being yet another interface element, the modern hamburger menu is the application. Its content may be related to only by expectations and assumptions regarding the extent of the application's basic functionality. Arguably, in the light of this considerations, the icon is communicating rather sparsely what it is and what it does. (Actually, it exposes a global, unrelated view on the basic extent of the app.)

    While its use may be arguable for an application (esp. mobile apps), it's highly problematic, when used in web sites and web applications.
    (The difference: While in the former case it's located rather in the window chrome, thus relating to the viewport as an object, it's part of the view in the latter – like a wormhole to the global context.)

    –––––
    Edit: Maybe things were clearer, if we were calling the Hamburger icon a (contextual) break-out button.
    Are three stacked lines communicating a break-out? Hardly.


  • Discourse touched me in a no-no place

    [source]



  • @PJH said:

    [source]

    Yep, thought it might be of interest here. :-)



  • Mommy!!! People adopted my icon and aren't using it the way I want.

    You have to share.

    But that will set expectations, and my ivory tower will fall.

    Well, maybe you need to understand that UI adapts to user expectations, and users don't adapt to your expectations.

    But, but, my ivory tower mommy.



  • @xaade said:

    Well, maybe you need to understand that UI adapts to user expectations, and users don't adapt to your expectations

    The only problem being that UX testing shows that there are problems with understanding the icon in the real world. So, it's about designers' ivory tower, and their neglect for users and (consistent) user models.



  • @xaade said:

    Well, maybe you need to understand that UI adapts to user expectations, and users don't adapt to your expectations.

    Have any of the mobile developers using the hamburger menu concept done usability testing on it?

    What were the results?

    You can't assume that because some UI element is popular that it's usable or even a good idea at all. A lot of bad ideas propagate around in IT without sufficient study.

    (Hell, the default Gmail interface this minute is using the "auto-hiding menu" concept that was already tried and failed in Office 2000 and Windows 2000. This is where Boomzilla swoops in and tells me it's ridiculous when I say nobody in software learns from past mistakes.)


  • I survived the hour long Uno hand



  • @noland said:

    So, it's about designers' ivory tower, and their neglect for users and (consistent) user models.

    I was more or less pointing out this.

    When Norm Cox designed the original icon for the Xerox Star user
    interface, it was a visual anchor for a menu revealing contextual
    functions to the visible content of the document. (Like selecting rows,
    etc.[1]) This is notably something else than the global, quite abstract
    context of a site navigation, disclosing navigational functions to
    address off-screen content.

    Why do you hit Ctrl+S to save?

    There's no visibility to that option.

    It's not emergent!

    It's because the expectation is set.

    If users expect for a hamburger to give them global context, and they use it to do so, it is viable.

    The point where the reality interjects is after usability shows that it's not viable.

    So arguments of, "I meant it to be this", are not good arguments.



  • @blakeyrat said:

    You can't assume that because some UI element is popular that it's usable or even a good idea at all. A lot of bad ideas propagate around in IT without sufficient study.

    A hurray to the combo-box[1]!

    [1] most notorious interface element ever
    (Now matured somewhat into the type-ahead feature and finally making some sense.)



  • @blakeyrat said:

    This is where Boomzilla swoops in and tells me it's ridiculous when I say nobody in software learns from past mistakes.

    No, this is where I swoop in and roll my eyes at your limited thinking where you take a case of confirmation bias and then generalize it to the point of absurdity.

    @blakeyrat said:

    Hell, the default Gmail interface this minute is using the "auto-hiding menu" concept that was already tried and failed in Office 2000 and Windows 2000.

    Doesn't seem like that to me. I mean, it hides stuff, and there's a "more" button that shows more stuff, but it's consistent and stuff only appears at the bottom. I don't remember the office menus working like that. But I'm not sure if I didn't configure my gmail at some point in the past so I'm not seeing the default any more (I certainly haven't done anything like that recently).



  • @noland said:

    type-ahead feature

    And that's where I point out that the entire direction of this article is bollocks.

    If you want to switch from a hamburger to a context site on a frontpage to a service, count me out.

    I don't care that you've proven that people, when giving an arbitrary page, will scan sites for words of interest and click them. That doesn't make a site built like that any better than hamburgers. This means they're doing the best they can given a POS UI.

    Hamburgers may not be the best solution, but it's a step in the right direction. Placing what you expect users to want to do in a single menu is a good thing, because you're trying to up-front the most used features of the site.

    The real solution may end up being every site providing AI backed search features.

    Hell, I find my way on sites more efficiently using google to search the site.



  • @xaade said:

    Why do you hit Ctrl+S to save?

    There's no visibility to that option.

    Now, one of the traditional mantras of interface design is about visibly laying out all there is. In this case, it's an annotation to the "Save" item in the applications file-menu.

    I'm aware that we're currently moving from topological interfaces (spatially revealed knowledge) to ontological interfaces (memorized gestures and shortcuts) in the context of full screen apps.
    But this doesn't necessarily say that WordStar was a great thing.
    (At least you may want to include a printed manual book and some printed reference charts, just like WordStar did.)



  • @noland said:

    Now, one of the traditional mantras of interface design is about visibly laying out all there is. In this case, it's an annotation to the "Save" item in the applications file-menu.

    I worked on enterprise software where Ctrl+S was "Search", and F12 was save, based on XMIT of previous terminals.

    I argued that it may be time to change because the next generation is going to expect things differently.

    People always behave this way

    1. Expectation
    2. To your door delivery
    3. Contextual / Spatial searching.

    The fact that the article identifies the third as how people behave, is because the first two failed them.



  • @noland said:

    UX testing shows that there are problems with understanding the icon in the real world

    Case in point, me.

    I hadn't come across it before, as it showed a stack of papers (to me) I assumed it accordioned the page into time related segments or something and never clicked it.

    It was only when someone mentioned discovering an option in there I found out it was a whole menu. Made it easier to navigate the site after that...



  • @xaade said:

    Hamburgers may not be the best solution, but it's a step in the right direction.

    Please mind that this is not about providing means for a quick access to a topological upper level of the application. (As for mobile apps, this is really a sine-qua-non.)

    It's about why the icon specifically doesn't work that well and proves to be a problem, at least to some users. (Reasons: It introduces a new metaphor that is not working like all the other interface metaphors and it isn't communicating clearly that it is about accessing fundamental features.)



  • @boomzilla said:

    Doesn't seem like that to me. I mean, it hides stuff, and there's a "more" button that shows more stuff, but it's consistent and stuff only appears at the bottom.

    The point is, the average user thinks the hidden items have disappeared. Labeling the button "more" instead of the label Windows 2000 used (which I think was just an ellipsis) might make the concept better, but it's still a shitty concept and I can still guarantee nobody at Google Central has done any usability testing of it. Because the testing would have shown them it was a shitty concept.



  • I think the reason why it worked for me, was that my phone is android and it has a hamburger for the context menu.
    Windows also has a hamburger button for its context menu.

    But in both cases, I had to be shown that feature in use.

    Now I have that expectation.

    The reason why developers like it, is because they either already have that expectation, or they have that expectation once they implement it.



  • @xaade said:

    I think the reason why it worked for me, was that my phone is android and it has a hamburger for the context menu.Windows also has a hamburger button for its context menu.

    This was also – as I tried to line out in the text – the use of the original Xerox Star "menu button".
    The problem: Today's use is not about a contextual menu to a visible object. If I do not want to address any option of the currently visible content, I might never have an urge to call the contextual menu. In this case, I'm prone to miss the application's features. So it should be a "global features" button, but not a "contextual options" button.

    [Edit] "Replace this content by something completely unrelated else" is not really a contextual option to the visible content.



  • OK, the problem is stated ( :fa_bars: sucks) what is the solution for a context menu icon?

    :fa_plus_square: is always used to add content

    :fa_life_saver: is for help

    :fa_list_alt: Might work but resembles :fa_bars:

    :fa_hand_spock_o: means it's time to update to FontAwesome 4.4



  • And this is why, deliver to my door, comes after expectations.

    Once the user has exhausted expectations, they will view the content they are directly seeing, if that doesn't answer their question, they will context search.

    Facebook is popular because it uses a deliver to user method of providing content, over the old context navigation of myspace (which obviously suffered from other reasons, but this was a major one).

    The problem with the social sphere is cultural, it hides content that challenges the scope of personal experience in favor of exposing content you'll like, creating echo chambers.

    But in application sites, this is what you want. You want to deliver content. You want emergence rather than discovery. People don't navigate by discovery. When's the last time you heard, "I really wanted to contact the government to get a replacement driver's license, and instead of giving up and calling them, I kept fooling around until I forgot what I was doing and discovered personal car plates. Isn't that cool?" instead of "I really wanted to contact the government.... license, their site sucks."



  • Maybe some kind of icon embracing the idea of going to an upper level (../)?



  • @boomzilla said:

    @blakeyrat said:
    Hell, the default Gmail interface this minute is using the "auto-hiding menu" concept that was already tried and failed in Office 2000 and Windows 2000.

    Doesn't seem like that to me. I mean, it hides stuff, and there's a "more" button that shows more stuff, but it's consistent and stuff only appears at the bottom. I don't remember the office menus working like that. But I'm not sure if I didn't configure my gmail at some point in the past so I'm not seeing the default any more (I certainly haven't done anything like that recently).


    Google has done some atrocious things over the years with the gmail interface, and the vanishing buttons thing is one of the worst. When you arrive in your inbox display (on a real desktop browser), you can plainly see that there is no way to use that mode to delete messages. Look at it! Where is the delete button? OK, there's some weird symbols, let's use the gear to change settings (no, that's not inherently obvious - I just tried pointing at things until I found something whose tooltip said "settings" or something like that).

    Now I have words instead of stupid symbols, and there's still no delete button...

    But there are checkboxes by the messages. What are they for? No idea, maybe they select messages? Yes, and now I can delete messages.

    But why didn't it tell me (by having a visible and disabled button) that this was possible before I wasted time pointing at everything and changing settings?

    And what about the incident a while back, when they changed the interface so that it deleted most of my contacts? Well, no, it didn't, but the contact display area's scroll bar wasn't there anymore. Until I pointed my mouse at that area, whereupon it appeared.

    No, Google's UX people are fucknuts.



  • Oh, and not only are their UX people fucknuts, but the fucknut who specified a maximum of 500 characters for feedback on major changes to the gmail interface is also a fucknut.

    500 characters was nowhere near enough for me to express the depth of my spitting contempt for what they had done.



  • @xaade said:

    Once the user has exhausted expectations, they will view the content they are directly seeing, if that doesn't answer their question, they will context search.

    So, if I'm new to an application: Expectations? Just like any other service? (All are the same, but why is then yet another one, if it doesn't matter?)

    And there is really some sort of deeper problem with full-screen apps and about the "magic" of the on-screen reality. As these have stopped to visually reveal the knowledge and are referring exclusively to off-screen space and cultural context for extended functions, they break the consistency of the visually exhibited "world" and prohibit the forming of a consistent user model. This might be fine for simple single-use apps (showing at once all there is), like a note-pad, but when things are starting to become more complex, the Hamburger icon kicks in – masquerading as a contextual feature.



  • I'm sorry, but I don't understand this post. I've read it three times, and I'm still not sure what you mean to say.



  • @xaade said:

    I'm sorry, but I don't understand this post. I've read it three times, and I'm still not sure what you mean to say.

    Sorry, tried to make a point on what "expectations" may mean in the natural hunting grounds of the Hamburger icon. Especially, if applications stop to exhibit their features and are hiding them away instead. What I'm expected to expect as a user? (E.g., is anything with a blue logo yet another Facebook? Where would I know from that it is not so? Cause, you know, I subscribed to this app when there was just this landing page announcing cryptically the "next big thing". Loved the suspense anyway, wondering what it would be all about. Ah, first of all things visit the Hamburger icon.)



  • @noland said:

    anything with a blue logo yet another Facebook? Where would I know from that it is not so?

    From the wider range of business marketing expectations and knowledge of copyright and trademark laws.

    @noland said:

    Ah, first of all things visit the Hamburger icon.

    Reasonable expectation if every site did it.

    I mean, people are demanding their start button back if windows tries to remove it.

    Again, my original post wasn't about the effectiveness of the icon.

    #It seems I completely misunderstood the original post.


    My impression was that

    "I made the hamburger icon for a context menu."
    "People are using it for a global menu. They are wrong for doing so."



  • @xaade said:

    It seems I completely misunderstood the original post.

    Some of your comments made sense to me, anyway. And yes, while the post is mostly about why there are performance problems with the specific icon, it also comprehends some criticism on the whole idea of what are essentially non-disclosing interfaces. At least, if you do so, because screen real estate, please chose an appropriate icon design.
    (Communicating the global context and the fundamental extent of an app's or a site's functionality as a context to a deeper navigational item – i.e. some specific content – is leading any idea of hierarchy ad absurdum. At least, it's not progressive disclosure. [Edit:] And yes, by tradition the Hamburger icon is a contextual options icon. And that's also what it was designed for to communicate.)


  • BINNED

    @Eldelshell said:

    :fa_life_saver: is for help

    That doesn't scream help to me in the slightest. Help is a question mark of some kind

    @Steve_The_Cynic said:

    scroll bar wasn't there anymore. Until I pointed my mouse at that area

    I think Apple was the first to start removing scrollbars on desktop. Twatburgers


  • BINNED

    @xaade said:

    I'm sorry, but I don't understand this post. I've read it three times, and I'm still not sure what you mean to say.

    I wonder how many people want to write exactly this when they read one of your posts?



  • Feel free.

    I totally understood his second post.

    (I think I'm getting better at communicating.... slowly....)



  • @Eldelshell said:

    :fa_life_saver: is for help

    Took me a while to realize the crosshairs was a life-preserver.

    ...



  • Am I getting better at communicating?
    [poll]

    • Yes
    • No
    • Getting worse
    • What's this about?
    • Ponies
      [/poll]


  • @Jaloopa said:

    That doesn't scream help to me in the slightest. Help is a question mark of some kind

    :+1:


  • The Cold Doesn't Bother Us Anyway

    @Jaloopa said:

    That doesn't scream help to me in the slightest. Help is a :wtf: symbol of some kind

    FTFM



  • @Jaloopa said:

    That doesn't scream help to me in the slightest. Help is a question mark of some kind

    Interestingly there are some ambiguous icons that are not causing much of a trouble (while not really nice anyway).

    E.g.: Looking glass for both search and zoom, also, the other way round, search both symbolized by binoculars and by a looking glass.

    So it's both about building a tradition and about comprehensive signaling.
    (Needless to say, the Hamburger icon fails on both.)

    [Edit] Things I've seen for help: light bulb, lifebelt, question mark, "Help" menu.
    To keep things trendy, we may want to include the troll face. ;-)


  • mod

    @noland said:

    Maybe some kind of icon embracing the idea of going to an upper level (../)?

    So instead of an icon that has developed some basic recognition among basic users, let's adopt an icon that only has any meaning to users with a high level of technical literacy, and even then it barely applies in the situation in which it is being used.



  • @abarker said:

    So instead of an icon that has developed some basic recognition among basic users, let's adopt an icon that only has any meaning to users with a high level of technical literacy, and even then it barely applies in the situation in which it is being used.

    What's better in using an icon that has developed some basic recognition over the last 30+ years for something quite unrelated? – Just because some designers are new to the show, it doesn't mean that users are to forget what they've learnt. Next year we will use a pin for sharing, because that's were you do it at Pinterest and the next generation ("Decadials"?) hasn't learned about pinning or making things sticky yet?
    BTW, "../" was not meant as an idea for an icon, but as an illustrating comment to the concept of moving up in a hierarchical structure. (Icons are especially meant to replace such things.)

    Edit: But this is just musing. The real problem is that there are real world problems with it. Keeping going, like "people have to learn, people will adopt, it's building up recognition", doesn't really help, while there are deeper, more systematic concerns.
    One of the problems is, the Hamburger icon being not much better than "../". The "menu button" icon is meant to be associated/relating to an object – it's gaining its definition from this very object. (That's what it is used for for some decades: an anchor to a popup-menu providing contextual options or presets.) As a stand-alone item, it hasn't any meaning at all, or "some undefined menu" at best. And treating "undefined" as synonymous to "global", is really tech-centric thinking.



  • @noland said:

    [Edit] Things I've seen for help: light bulb, lifebelt, question mark, "Help" menu.
    To keep things trendy, we may want to include the troll face. ;-)

    That would be appropriate for the quality of most help files I've tried to use, in whatever format.



  • It occurs to me in reading this discussion that the problem may well in part be not which icon you pick for a particular action, but the fact that you pick an icon rather than leaving the gdmh(1) words there.

    (1) An initialism for a series of profanities.

    Of course, since we call a menu with the word "File" at the top the "File menu", and the one with the word "Edit" at the top the "Edit menu" (and so on), we would (il)logically replace the icon of the "Hamburger menu" with the word "Hamburger".

    Hmm. Maybe not.



  • @noland said:

    So, it's about designers' ivory tower, and their neglect for users and (consistent) user models.

    I've long thought of the hamburger menu as representing three slices of the cheese that sadistic UX hipsters love moving about for no better reason than the enjoyment they derive from fucking with the rest of us.



  • @Steve_The_Cynic said:

    500 characters was nowhere near enough for me to express the depth of my spitting contempt for what they had done.

    Mine either.



  • @xaade said:

    Am I getting better at communicating?



  • I think that the context you are looking for is "This web page", or "this application".

    I don't really see the fuss; people have understood for decades that clicking :fa_apple: also pulls down a menu with assorted items that did not make it into anywhere else.

    The bottom line is that usages change, and what is intuitive for us is not intuitive for our kids, and was not intuitive for our grandparents.

    For example, I have to regularly clean the TV screen at home because my kids try to select which program to watch next on it. "Use the remote! It's streaming, you can't just skip ahead!"

    Another example: I overhead some students a while back when they found a 3.5" disk: "Cool! Someone has 3-D printed the save icon!"



  • My first thought on reading that:
    Xerox invented the hamburger menu? I always knew hamburgers were the worst.

    On reading further:
    Oh I see, modern hamburger menus aren't consistent with Xerox's original design philosophy. Well then I guess they're not so bad after all.


  • Discourse touched me in a no-no place

    @Jaloopa said:

    I think Apple was the first to start removing scrollbars on desktop.

    They're not removed, they just only appear when you scroll. The fact that this makes it hard to see where you are in something, an occasionally useful thing, is by the by.

    @Jaloopa said:

    Twatburgers

    Quite


  • BINNED

    @dkf said:

    makes it hard to see where you are in something

    It also removes the visual cue that you are in something scrollable at all


  • Discourse touched me in a no-no place

    @Jaloopa said:

    It also removes the visual cue that you are in something scrollable at all

    That's much less of an issue in practice. The scrollbar shows when the content is first displayed, and a scroll-gesture (varies by input device; two-finger up-down swipe on my touchpad) makes the scrollbar show up again.



  • I see the hamburger menu as a "you have a tiny screen so we hid EVERY option behind an extra click".

    Want content? It's already there. Want actions? They're in the menu. Simple.

    IMO a single menu is better than separate menus with ambiguous terms like "tools" or "file".



  • @Mikael_Svahnberg said:

    I overhead some students a while back when they found a 3.5" disk: "Cool! Someone has 3-D printed the save icon!"

    Oh, bless.

    I knew I was getting old when young mr. flabdablet asked me in all seriousness what my favorite Internet game was when I was a kid.


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.