It gets to sit right next to the MetaFilter logo. But what is it?
May 13, 2015 2:00 PM Subscribe
The 'hamburger' icon is over 30 years old, and it's still a mystery to many users. Unlike the magnifying glass skeuomorph, which most people recognise as meaning 'search', the three horizontal bars used to represent 'menu' (or 'there's more stuff under here that you're less likely to need') is one of the most debated UX choices in web design.
It's used on Apple products, but Apple UX Evangelist Mike Stern has said that "their value is greatly over-stated, and they have huge usability downsides too." Some studies suggest that using the word MENU to stand for the button gets more user interaction. Google is a big fan of the hamburger (they call it a side drawer or navigation drawer) . Some other people, not so much.
Morten Rand-Hendriksen diagnosed the cause of 'hamburger bloat' in a blog post bluntly titled 'Hamburgers are bad for you':
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.
One app design team found that the hamburger decreased their user engagement by up to 50%.
Why and how to avoid hamburger menus: Even if people are aware and value a feature, this pattern introduces navigation friction since it forces people to first open the menu and only then allowing them to see and reach their objective.
Jared Sinclair on five questions to ask about whether to use the hamburger. TIME Magazine may not have listened to their designer's answers to these questions.
"I've never known what that did so I never touched it." Is the hamburger problem a case of recall being valued over recognition? Or should it just look good enough to eat?
Previously, previously.
It's used on Apple products, but Apple UX Evangelist Mike Stern has said that "their value is greatly over-stated, and they have huge usability downsides too." Some studies suggest that using the word MENU to stand for the button gets more user interaction. Google is a big fan of the hamburger (they call it a side drawer or navigation drawer) . Some other people, not so much.
Morten Rand-Hendriksen diagnosed the cause of 'hamburger bloat' in a blog post bluntly titled 'Hamburgers are bad for you':
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.
One app design team found that the hamburger decreased their user engagement by up to 50%.
Why and how to avoid hamburger menus: Even if people are aware and value a feature, this pattern introduces navigation friction since it forces people to first open the menu and only then allowing them to see and reach their objective.
Jared Sinclair on five questions to ask about whether to use the hamburger. TIME Magazine may not have listened to their designer's answers to these questions.
"I've never known what that did so I never touched it." Is the hamburger problem a case of recall being valued over recognition? Or should it just look good enough to eat?
Previously, previously.
I didn't get what this post meant by "hamburger" until I scrolled down enough to see the three-bar icon. To me it's always looked like items on a list, or maybe empty text boxes to write a list in. I'm not sure what's skeuomorphic about it, because that's what lists look like.
posted by WizardOfDocs at 2:09 PM on May 13, 2015 [23 favorites]
posted by WizardOfDocs at 2:09 PM on May 13, 2015 [23 favorites]
Is calling it a "hamburger" a programmer thing? I had never heard anyone call it that until I became friends with more coders. Non-coders never seem to use that term.
posted by Sangermaine at 2:12 PM on May 13, 2015 [1 favorite]
posted by Sangermaine at 2:12 PM on May 13, 2015 [1 favorite]
At the risk of being told I'm obtuse, I don't see said icon next to the metafilter logo. Am I looking at the site in the wrong way? Is this something that only Apple users get?
posted by Radiophonic Oddity at 2:17 PM on May 13, 2015
posted by Radiophonic Oddity at 2:17 PM on May 13, 2015
Is calling it a "hamburger" a programmer thing?
Yeah, I'm pretty sure this is where I first heard it.
posted by frijole at 2:18 PM on May 13, 2015
Yeah, I'm pretty sure this is where I first heard it.
posted by frijole at 2:18 PM on May 13, 2015
One problem I think is that it barely looks like anything. No vertical components.
Although I think users can get used to anything, if UX evanglists would stop making things difficult for everyone by taking away their shaded buttons and using color to represent clickability, then deciding to bring back flat shaded buttons for their watch (oops did I say that?)
posted by RobotVoodooPower at 2:18 PM on May 13, 2015 [3 favorites]
Although I think users can get used to anything, if UX evanglists would stop making things difficult for everyone by taking away their shaded buttons and using color to represent clickability, then deciding to bring back flat shaded buttons for their watch (oops did I say that?)
posted by RobotVoodooPower at 2:18 PM on May 13, 2015 [3 favorites]
I love that menu icon! It's so intuitive. hamburger
posted by infinitewindow at 2:24 PM on May 13, 2015 [7 favorites]
posted by infinitewindow at 2:24 PM on May 13, 2015 [7 favorites]
I only heard that this had a name relatively recently, but the issue of tacit knowledge driving UX design makes me so flippin' mad on behalf of those without tech privilege.
Radiophonic Oddity, it's there in the mobile version of the site.
posted by katya.lysander at 2:25 PM on May 13, 2015 [5 favorites]
Radiophonic Oddity, it's there in the mobile version of the site.
posted by katya.lysander at 2:25 PM on May 13, 2015 [5 favorites]
Radiophonic Oddity you're not being obtuse at all - what it should say is "if you scroll down the site long enough to get the dark blue menu bar you'll see it on the left of the Metafilter logo; but what is it?" Space did not permit!
Sangermaine - I'm not sure where 'hamburger' came from, it seems to have a whole bunch of names (including 'basement' which is even more baffling, though rather charming).
posted by Gin and Broadband at 2:26 PM on May 13, 2015
Sangermaine - I'm not sure where 'hamburger' came from, it seems to have a whole bunch of names (including 'basement' which is even more baffling, though rather charming).
posted by Gin and Broadband at 2:26 PM on May 13, 2015
katya.lysander, thank you. I was beginning to wonder if there was some mefi cabal with occult ui elements. And now I know it's the mobile mefi cabal.
posted by Radiophonic Oddity at 2:28 PM on May 13, 2015
posted by Radiophonic Oddity at 2:28 PM on May 13, 2015
In my experience a common problem with the hamburger is that it is often too small or in a non-contrasting color and so is hard to find. Of course I am at an age where presbyopia is kicking in and I explain to people that the reason my phone is so big is that I need the large type version.
But on the positive side I do know what I want for dinner tonight.
posted by TedW at 2:30 PM on May 13, 2015 [3 favorites]
But on the positive side I do know what I want for dinner tonight.
posted by TedW at 2:30 PM on May 13, 2015 [3 favorites]
I referenced a hamburger menu in a work meeting and my boss (who is no stranger to web stuff) thought it was a funny term I made up. He knew what I was talking about though.
posted by brundlefly at 2:32 PM on May 13, 2015
posted by brundlefly at 2:32 PM on May 13, 2015
I had not realised the hamburger/side drawer/navigation menu/list-thingummy was not visible on MeFi for some users (I'm on Chrome, on desktop, and see it when I scroll down the page, and blithely assumed this was universal) - so I apologise for the confusing headline. But, love it, hate it, tolerate it, can we all agree that Slate was flat-out trolling by putting it on the far right of their logo?
posted by Gin and Broadband at 2:40 PM on May 13, 2015
posted by Gin and Broadband at 2:40 PM on May 13, 2015
🍔
posted by standardasparagus at 2:41 PM on May 13, 2015 [2 favorites]
posted by standardasparagus at 2:41 PM on May 13, 2015 [2 favorites]
…So what happened to the little triangle whatsit as a menu indicator? Too old-fashioned?
posted by nebulawindphone at 2:43 PM on May 13, 2015 [3 favorites]
posted by nebulawindphone at 2:43 PM on May 13, 2015 [3 favorites]
Another good thing about MeFi Classic. No fussy hamburger menus, just like it's 1999.
posted by axiom at 2:46 PM on May 13, 2015 [11 favorites]
posted by axiom at 2:46 PM on May 13, 2015 [11 favorites]
It's worth noting that it's not part of the Microsoft design language, and thus unfamiliar to those who, for better or worse, are trained with that set of symbols. MS has taken to using a horizontal line with a down-facing triangle underneath. If you've got a recent copy of Office handy, top left corner, above the menu/ribbon text.
The hamburger thing still confuses me momentarily when I see it. It doesn't say "open me" to me at all.
posted by bonehead at 2:52 PM on May 13, 2015 [6 favorites]
The hamburger thing still confuses me momentarily when I see it. It doesn't say "open me" to me at all.
posted by bonehead at 2:52 PM on May 13, 2015 [6 favorites]
I too have never referred to this as a "hamburger" and just associated it with a drop down bar or list menu.
posted by Fizz at 2:52 PM on May 13, 2015
posted by Fizz at 2:52 PM on May 13, 2015
Not hamburger, pancakes (because you ALWAYS get pancakes in stacks of 3, right?)
posted by oneswellfoop at 2:59 PM on May 13, 2015 [6 favorites]
posted by oneswellfoop at 2:59 PM on May 13, 2015 [6 favorites]
Icons are not intuitive. Repeat that until understood. No icon is intuitive. No icon has ever been intuitive except to people who have learned a particular symbolic language.
My industry has been taken over in the last 10 years by international companies that have bought the domestics, and which have replaced keys labeled in English with keys that have "international" icons. While I suppose this solves the problem of non-English speakers being able to understand the captions, it replaces it with the problem of nobody understanding the captions. It's a very particular nuisance when trying to talk someone through diagnosing a problem over a phone and you say "Press the PRINT key," and they're unable to figure out which one that is.
See also: When I call my cable company about my internet modem, which has icons on the buttons instead of the words the reps use to try to guide me through troubleshooting.
posted by localroger at 3:02 PM on May 13, 2015 [17 favorites]
My industry has been taken over in the last 10 years by international companies that have bought the domestics, and which have replaced keys labeled in English with keys that have "international" icons. While I suppose this solves the problem of non-English speakers being able to understand the captions, it replaces it with the problem of nobody understanding the captions. It's a very particular nuisance when trying to talk someone through diagnosing a problem over a phone and you say "Press the PRINT key," and they're unable to figure out which one that is.
See also: When I call my cable company about my internet modem, which has icons on the buttons instead of the words the reps use to try to guide me through troubleshooting.
posted by localroger at 3:02 PM on May 13, 2015 [17 favorites]
I think I first heard the term when Chrome 22 replaced the wrench icon with the hamburger.
posted by aubilenon at 3:10 PM on May 13, 2015 [1 favorite]
posted by aubilenon at 3:10 PM on May 13, 2015 [1 favorite]
Not hamburger, pancakes (because you ALWAYS get pancakes in stacks of 3, right?)
Ah, you must be one of those "full stack developers" I keep hearing about.
posted by aubilenon at 3:14 PM on May 13, 2015 [44 favorites]
Ah, you must be one of those "full stack developers" I keep hearing about.
posted by aubilenon at 3:14 PM on May 13, 2015 [44 favorites]
Yeah the other weird aspect of hamburgers is when they are used to convey that something can be "held" and moved on one axis, as if there is a surface with a textured pattern to provide grip, like on the slider of a mixing panel in a sound studio. So now only do you have an icon that represents a highly abstracted list of items, but also as a skeuomorph for a textured surface. Often its not clear if you should tap the hamburger or press and slide it.
posted by rustcrumb at 3:15 PM on May 13, 2015 [2 favorites]
posted by rustcrumb at 3:15 PM on May 13, 2015 [2 favorites]
Is calling it a "hamburger" a programmer thing? I had never heard anyone call it that until I became friends with more coders. Non-coders never seem to use that term.
I hear it much more often used by designers than coders. I mean, I think anyone I work with would know what it meant, but because it's more the domain of design than programming, that's where it tends to come up. I work primarily in consumer-facing web and mobile shops.
posted by primethyme at 3:16 PM on May 13, 2015
I hear it much more often used by designers than coders. I mean, I think anyone I work with would know what it meant, but because it's more the domain of design than programming, that's where it tends to come up. I work primarily in consumer-facing web and mobile shops.
posted by primethyme at 3:16 PM on May 13, 2015
Luke Wroblewski: The mystery meat of mobile navigation
posted by a car full of lions at 3:16 PM on May 13, 2015 [4 favorites]
posted by a car full of lions at 3:16 PM on May 13, 2015 [4 favorites]
Icons are not intuitive. Repeat that until understood. No icon is intuitive. No icon has ever been intuitive except to people who have learned a particular symbolic language.
Yeah, it's true. I once sat through a usability study where one of the tasks was to save something. The user clearly saw the save button, but never clicked it. Afterwards, I asked why she didn't click that button, and pointed to it. To her the disk icon looked like a TV, and she didn't want to watch TV. That's when I gave up software and went into the family dry cleaning business.
posted by jeffamaphone at 3:22 PM on May 13, 2015 [22 favorites]
Yeah, it's true. I once sat through a usability study where one of the tasks was to save something. The user clearly saw the save button, but never clicked it. Afterwards, I asked why she didn't click that button, and pointed to it. To her the disk icon looked like a TV, and she didn't want to watch TV. That's when I gave up software and went into the family dry cleaning business.
posted by jeffamaphone at 3:22 PM on May 13, 2015 [22 favorites]
At our shop recently some random doodling on a whiteboard made the hamburger menu turn into something where each line was smaller than the one below it, and a bit of wavy lines symbolizing steam or stink were added above. This was christened the "bullshit menu," denoting a byproduct of the hamburger production process.
In the quaint olden days in which I first became aware of web dev/design, "mystery meat" was considered a thing to be avoided. Google gets such mad props for their design, and it's considered so influential, and yet I as a person who works in the industry can't understand what to do half the frickin' time when needing to do something off the beaten path in a Google product. I guess I should be happy; the design is so bad that people pay us to do things for them that they could possibly do themselves if the UI wasn't so horrible.
posted by randomkeystrike at 3:25 PM on May 13, 2015 [6 favorites]
In the quaint olden days in which I first became aware of web dev/design, "mystery meat" was considered a thing to be avoided. Google gets such mad props for their design, and it's considered so influential, and yet I as a person who works in the industry can't understand what to do half the frickin' time when needing to do something off the beaten path in a Google product. I guess I should be happy; the design is so bad that people pay us to do things for them that they could possibly do themselves if the UI wasn't so horrible.
posted by randomkeystrike at 3:25 PM on May 13, 2015 [6 favorites]
Wull--I think this icon
o --------
o --------
o --------
(like a bullet list viewed with defective vision)
... is the clearest way to denote "press here to see a list of stuff you may want to do"
But then, nobody asked me never.
posted by hexatron at 3:32 PM on May 13, 2015 [6 favorites]
o --------
o --------
o --------
(like a bullet list viewed with defective vision)
... is the clearest way to denote "press here to see a list of stuff you may want to do"
But then, nobody asked me never.
posted by hexatron at 3:32 PM on May 13, 2015 [6 favorites]
... and how about a pig icon for 'save', like a piggy bank.
Think of the massive Islamic terrorist disruption as they no longer can 'save' anything!
I'll let myself out.
posted by hexatron at 3:37 PM on May 13, 2015
Think of the massive Islamic terrorist disruption as they no longer can 'save' anything!
I'll let myself out.
posted by hexatron at 3:37 PM on May 13, 2015
Remember, the three key things about an intuitive navigation system is that they tell you where you are, and they show you where else you can goCurious what the third thing is. Hoping that it's "they can be easily turned off so that experienced users don't waste screen space on useless icons that tell you where you are," but somehow I suspect that's not likely.
And finally, the downside of being able to show a lot of options is that you can show a lot of options. Is that you will show a lot of options. The potential for bloat and misuse is tremendous. They allow you to add all sorts of stuff that your users don’t really care about.Otherwise known as the "screw anyone who doesn't use the software exactly the way I expect them to" approach to user interface design. Yuck.
posted by eotvos at 4:16 PM on May 13, 2015 [1 favorite]
Anyone who doesn't call this the "menu" icon is clearly not eating very good hamburgers.
posted by rabbitrabbit at 4:18 PM on May 13, 2015 [1 favorite]
posted by rabbitrabbit at 4:18 PM on May 13, 2015 [1 favorite]
Huh. I always associated the symbol with either a table of contents or index listing, as a means of navigating by finding the top level of the subject or place on the website you were interacting with.
Of course, every designer I ever talked to always looked at be blankly when I said that:
daq -"You know, like a book, or reference manual, you go to the table of contents or the index to find the thing you are looking for."
web designer - *black stare*
daq -"Um, ok, so how do you find anything on the website?"
web designer - "Oh, you just use google or the search function."
"But your CMS search function is pretty broken, and doesn't return anything in a usable format."
web designer - "Oh, no, the search works fine." *uses search function*
web designer - *search returns garbage*
web designer - "Oh..."
daq -"Sigh, write a navigation map and stick it as a link on the bottom. The site is laid out logically, right?"
web designer - *blank stare*
daq - *head desk*
Look, I just run the servers and network. It's up to someone else to create the content. I am not trained or really interested in being a digital librarian, I'm too much of a slack bastard. I mean, I know where everything on me desk is. Just don't move anything, or I won't be able to find it.
But my file systems are pristine, and I garbage collect every day on my computer (sorting and organizing files into their proper place). That's the beauty of computers.
Tangent: "...the issue of tacit knowledge driving UX design makes me so flippin' mad on behalf of those without tech privilege."
Oh god yes, this. I work with under-privileged populations (and even some very privileged ones) and the issue of tacit knowledge has been the bane of my existence until i figured out what was wrong. You can't just hand someone something and expect them to automatically know how to use it, especially if you are forgetting that everything you did in designing it is built up upon all the knowledge you have and just assume everyone knows the same things you do. There has to be a phrase or logical fallacy related to this. Hell, a whole host of cultural and social problems are caused by this. And I always loved Ten Thousand, by xkcd especially for how it relates to this.
posted by daq at 4:42 PM on May 13, 2015 [5 favorites]
Of course, every designer I ever talked to always looked at be blankly when I said that:
daq -"You know, like a book, or reference manual, you go to the table of contents or the index to find the thing you are looking for."
web designer - *black stare*
daq -"Um, ok, so how do you find anything on the website?"
web designer - "Oh, you just use google or the search function."
"But your CMS search function is pretty broken, and doesn't return anything in a usable format."
web designer - "Oh, no, the search works fine." *uses search function*
web designer - *search returns garbage*
web designer - "Oh..."
daq -"Sigh, write a navigation map and stick it as a link on the bottom. The site is laid out logically, right?"
web designer - *blank stare*
daq - *head desk*
Look, I just run the servers and network. It's up to someone else to create the content. I am not trained or really interested in being a digital librarian, I'm too much of a slack bastard. I mean, I know where everything on me desk is. Just don't move anything, or I won't be able to find it.
But my file systems are pristine, and I garbage collect every day on my computer (sorting and organizing files into their proper place). That's the beauty of computers.
Tangent: "...the issue of tacit knowledge driving UX design makes me so flippin' mad on behalf of those without tech privilege."
Oh god yes, this. I work with under-privileged populations (and even some very privileged ones) and the issue of tacit knowledge has been the bane of my existence until i figured out what was wrong. You can't just hand someone something and expect them to automatically know how to use it, especially if you are forgetting that everything you did in designing it is built up upon all the knowledge you have and just assume everyone knows the same things you do. There has to be a phrase or logical fallacy related to this. Hell, a whole host of cultural and social problems are caused by this. And I always loved Ten Thousand, by xkcd especially for how it relates to this.
posted by daq at 4:42 PM on May 13, 2015 [5 favorites]
Sangermaine: “Is calling it a "hamburger" a programmer thing? I had never heard anyone call it that until I became friends with more coders. Non-coders never seem to use that term.”I think a "real" programmer would call it by its proper name, Menu Button, and that its object name in the code would be similar. If I came across code that actually referred to it as Hamburger Button I would be suitably unimpressed.
As far as icons, in the absence of an easily accessible ISO standard icon library, I've long leaned on the Java Look and Feel Graphics Repository, even for web applications.
posted by ob1quixote at 4:46 PM on May 13, 2015 [1 favorite]
Um, it's hobo code. It means "this is not a safe place."
posted by oulipian at 4:59 PM on May 13, 2015 [14 favorites]
posted by oulipian at 4:59 PM on May 13, 2015 [14 favorites]
Um, it's hobo code. It means "this is not a safe place."
The one for "no use going in this direction" would also be a useful icon on a lot of sites…
posted by nebulawindphone at 5:04 PM on May 13, 2015 [4 favorites]
The one for "no use going in this direction" would also be a useful icon on a lot of sites…
posted by nebulawindphone at 5:04 PM on May 13, 2015 [4 favorites]
> If they made it a burrito we'd be talking.
Don't mention burritos to progammers, it reminds them that Monads are Burritos. And you probably don't want to learn about monads.
posted by benito.strauss at 5:16 PM on May 13, 2015 [1 favorite]
Don't mention burritos to progammers, it reminds them that Monads are Burritos. And you probably don't want to learn about monads.
posted by benito.strauss at 5:16 PM on May 13, 2015 [1 favorite]
So that's what that stupid button in Chrome means. It's also on the wrong side of the browser... should be on the left, next to File / View / Etc.
posted by MikeWarot at 6:08 PM on May 13, 2015 [1 favorite]
posted by MikeWarot at 6:08 PM on May 13, 2015 [1 favorite]
Not having ever owned an Apple computer, the first i saw this icon was when Chrome started using it. Now that I hear what it's supposed to represent, it makes sense.
But jesus Google, stealing your UI elements from Xerox by way of Apple? You win the "most derivative of the most derivative" award. Sure you aren't in the market for a "Start" button?
posted by BYiro at 6:18 PM on May 13, 2015 [2 favorites]
But jesus Google, stealing your UI elements from Xerox by way of Apple? You win the "most derivative of the most derivative" award. Sure you aren't in the market for a "Start" button?
posted by BYiro at 6:18 PM on May 13, 2015 [2 favorites]
I just noticed. If you're using the new MeFi design, there is a ≣, followed by the words "MetaFilter", followed by... the word "Menu" with a downward-pointing arrow.
The ≣ and the Menu menu conceal completely different things. Maybe they should be consolidated into one menu? I suggest replacing them with the second hobo sign for "food here if you work".
posted by egypturnash at 6:22 PM on May 13, 2015 [2 favorites]
The ≣ and the Menu menu conceal completely different things. Maybe they should be consolidated into one menu? I suggest replacing them with the second hobo sign for "food here if you work".
posted by egypturnash at 6:22 PM on May 13, 2015 [2 favorites]
We mostly call it the hamburger menu where I work, but I am so happy that this thread has largely turned to discussion of the most meaningful hobo signs for Web interfaces.
posted by limeonaire at 6:35 PM on May 13, 2015 [4 favorites]
posted by limeonaire at 6:35 PM on May 13, 2015 [4 favorites]
MikeWarot: "So that's what that stupid button in Chrome means. It's also on the wrong side of the browser... should be on the left, next to File / View / Etc."
Huh, what version of Chrome are you using? There hasn't been a File or View menu in years.
posted by octothorpe at 6:56 PM on May 13, 2015
Huh, what version of Chrome are you using? There hasn't been a File or View menu in years.
posted by octothorpe at 6:56 PM on May 13, 2015
>Huh, what version of Chrome are you using? There hasn't been a File or View menu in years.
Maybe he means Firefox, which still offers those menus but which also recently introduced the hamburglar, in the same place as Chrome's.
posted by Autumn Leaf at 8:26 PM on May 13, 2015 [1 favorite]
Maybe he means Firefox, which still offers those menus but which also recently introduced the hamburglar, in the same place as Chrome's.
posted by Autumn Leaf at 8:26 PM on May 13, 2015 [1 favorite]
The hamburger may have been created 30 years ago, but I'm not aware of any halfway-common platform that's used them until just a few years ago. In fact, I'm skeptical that the modern hamburger is actually the descendent of the original, it's a simple enough design (and obvious enough connection to a menu) that I wouldn't be surprised if it was actually coincidentally recreated from scratch.
Also, just to be extra pedantic, neither the hamburger nor the magnifying glass are skeumorphs, they are just icons suggestive of physical objects. Skeumorphism is the appearance of the UI itself as a physical object, like the shading making a button look recessed. The hamburger skeumorph is where it's used to make a knurled-looking drag handle like rustcrumb mentioned.
<ot-rant>
Can I just say "fuck flat UIs"? I'm keeping my knurled-looking drag handles, and my recessed-looking buttons, because they let the user know whether they can be pressed, slid, clicked, or what. The trend now is to strip all this away, and leave the user scratching their head wondering what they're supposed to do. To cut out any suggestion of physical presence or physical action is in my opinion giving a loud "fuck you!" to the user.
</ot-rant>
posted by bjrubble at 8:27 PM on May 13, 2015 [11 favorites]
Also, just to be extra pedantic, neither the hamburger nor the magnifying glass are skeumorphs, they are just icons suggestive of physical objects. Skeumorphism is the appearance of the UI itself as a physical object, like the shading making a button look recessed. The hamburger skeumorph is where it's used to make a knurled-looking drag handle like rustcrumb mentioned.
<ot-rant>
Can I just say "fuck flat UIs"? I'm keeping my knurled-looking drag handles, and my recessed-looking buttons, because they let the user know whether they can be pressed, slid, clicked, or what. The trend now is to strip all this away, and leave the user scratching their head wondering what they're supposed to do. To cut out any suggestion of physical presence or physical action is in my opinion giving a loud "fuck you!" to the user.
</ot-rant>
posted by bjrubble at 8:27 PM on May 13, 2015 [11 favorites]
Don't mention burritos to progammers, it reminds them that Monads are Burritos. And you probably don't want to learn about monads.
One of this year's SIGBOVIK papers (by Tom7 of learnfun/playfun fame) explained the normally inscrutable burrito in terms of monads.
posted by a snickering nuthatch at 9:49 PM on May 13, 2015 [1 favorite]
One of this year's SIGBOVIK papers (by Tom7 of learnfun/playfun fame) explained the normally inscrutable burrito in terms of monads.
posted by a snickering nuthatch at 9:49 PM on May 13, 2015 [1 favorite]
This thread is sooooo gratifying, as I hate hamburgers, flat UIs, and mystery meat navigation with a passion. To me they're so obviously user hostile that I really have trouble understanding why somebody would ever think that it's an acceptable UI to ship. I feel like I'm going crazy trying to explain to designers at work why all these trends are beyond stupid. Just because Google does it or Facebook does it does not mean that our audience will understand, or really that even Google's or Facebook's audience understands.
It's too easy for UX people to get in a culture bubble where they lose all sense of real humans. Before being granted a UI creation license, there should be mandatory 80 hours of usability study observation. And then another 80 hours of being forced to watch users be unable to navigate the designer's crappy and unintelligible UIs. Personally, I would advocate that a hamburger use should result in a 1 years license suspension, but I realize that this is a radical position. Oh, there's not a UI licensing system? Just anybody can create whatever they want and force it on people? On major websites, imposters posing as "UX designers" (what an obviously fabricated title) are forcing hundreds of millions of people to waste valuable time, adding up to several lifetimes? All for some random whim of the type of person that can BS themselves into power in Silicon Valley? Every time GMail changes their UI it's the functional equivalent of killing some number of people, in terms of cumulative time wasted. It's an atrocity, and it's gone on too long. Stop the slaughter.
If there was ever an industry that called for vigorous regulation, it's the UX cabal. They've been abusing us for too long. Call your congresspeople.
posted by Llama-Lime at 9:56 PM on May 13, 2015 [7 favorites]
It's too easy for UX people to get in a culture bubble where they lose all sense of real humans. Before being granted a UI creation license, there should be mandatory 80 hours of usability study observation. And then another 80 hours of being forced to watch users be unable to navigate the designer's crappy and unintelligible UIs. Personally, I would advocate that a hamburger use should result in a 1 years license suspension, but I realize that this is a radical position. Oh, there's not a UI licensing system? Just anybody can create whatever they want and force it on people? On major websites, imposters posing as "UX designers" (what an obviously fabricated title) are forcing hundreds of millions of people to waste valuable time, adding up to several lifetimes? All for some random whim of the type of person that can BS themselves into power in Silicon Valley? Every time GMail changes their UI it's the functional equivalent of killing some number of people, in terms of cumulative time wasted. It's an atrocity, and it's gone on too long. Stop the slaughter.
If there was ever an industry that called for vigorous regulation, it's the UX cabal. They've been abusing us for too long. Call your congresspeople.
posted by Llama-Lime at 9:56 PM on May 13, 2015 [7 favorites]
I kind of unironically miss that period in the late '90s where you could spend days wading through one terribad "windows theme" or "program skin" after another, assembling a baroque nightmare of window decorations and config files that turned your computer's interface into something that only you understood. You'd generally have to install 3 or four other unrelated utilities in order to even come close to the screenshots, and your friends/coworkers would use it to check their email exactly once. It was the ultimate in casual physical security. The only problem was that you'd often wind up with a horribly buggy operating system at the end of it because you carelessly replaced a bunch of important system files with hacks written by hacks who at best stopped tinkering when it worked for them.
Friend: "Dude how do I just close the window I have no idea what I'm looking at"
Me: "No no no you have to go up to the middle of the top of the window and pull the wooden lever looking thing to get out of it. That plasma bubbling up the scrollbars means it's thinking..."
Computer: bluescreens.
I think the current trend with flat UI and over simplified, screen filling big dumb buttons is the apogee of a violent turning away from such practices by the people who bring us software, at least I hope this is it, maybe the future will bring methods to easily customize your UI while not completely destabilizing your box.
posted by mcrandello at 12:31 AM on May 14, 2015 [4 favorites]
Friend: "Dude how do I just close the window I have no idea what I'm looking at"
Me: "No no no you have to go up to the middle of the top of the window and pull the wooden lever looking thing to get out of it. That plasma bubbling up the scrollbars means it's thinking..."
Computer: bluescreens.
I think the current trend with flat UI and over simplified, screen filling big dumb buttons is the apogee of a violent turning away from such practices by the people who bring us software, at least I hope this is it, maybe the future will bring methods to easily customize your UI while not completely destabilizing your box.
posted by mcrandello at 12:31 AM on May 14, 2015 [4 favorites]
sorry, bjrubbles comment got me all wistful. Point being, today I learned about the hamburger icon, and that explains all those crap apps I rage deleted from my cellular phone because I had no idea how to do anything with them.
posted by mcrandello at 12:41 AM on May 14, 2015 [3 favorites]
posted by mcrandello at 12:41 AM on May 14, 2015 [3 favorites]
Can I just say "fuck flat UIs"?
Oh, thank god. I thought it was just me. Also, the licensing idea above is far more charitable than I wanted to be the last time I had to hunt for a button that was barely distinguishable from the background.
(My idea was along the lines of "whip the designers bloody with willow switches and roll them in sea salt". I'm getting to that grumpy stage of life.)
posted by Mr. Bad Example at 2:43 AM on May 14, 2015
Oh, thank god. I thought it was just me. Also, the licensing idea above is far more charitable than I wanted to be the last time I had to hunt for a button that was barely distinguishable from the background.
(My idea was along the lines of "whip the designers bloody with willow switches and roll them in sea salt". I'm getting to that grumpy stage of life.)
posted by Mr. Bad Example at 2:43 AM on May 14, 2015
...turned your computer's interface into something that only you understood.
Well, its a personal computer. Why would I care if you can't use my PC?
I have to say I never heard of the hamburger, and after clicking on the first link, I still didn't know what it was. I looked up, and saw it on my Firefox screen, possibly noticing it for the first time. I clicked on it and... it looks like a collection of clickables I already have elsewhere. Why would I use such a thing?
posted by MtDewd at 4:58 AM on May 14, 2015 [1 favorite]
Well, its a personal computer. Why would I care if you can't use my PC?
I have to say I never heard of the hamburger, and after clicking on the first link, I still didn't know what it was. I looked up, and saw it on my Firefox screen, possibly noticing it for the first time. I clicked on it and... it looks like a collection of clickables I already have elsewhere. Why would I use such a thing?
posted by MtDewd at 4:58 AM on May 14, 2015 [1 favorite]
I think I've only become aware of the hamburger in the last couple of years. But then, I've always liked Xaw the best.
posted by scruss at 5:25 AM on May 14, 2015
posted by scruss at 5:25 AM on May 14, 2015
I blame Apple, mostly. It seemed, as we coasted from the late 90s into the early 2000s, like we had basically hashed out the interface issue. With the exception of some more experimental Linux distros and people who installed aftermarket utilities to make their desktop the PC equivalent of a Honda Civic with fifty pounds of extra spoilers and neon lights, everyone else had kinda settled down into a well-understood pattern.
Yeah, there were still some open issues: menu bar at the top of the screen or the window? Desktop icons auto-align to left side or right? But in general, it seemed like we were asymptotically approaching a sort of UI consensus; that we were entering a period of refinement. Which makes sense, because we've been working on this "desktop computer" shit for like 30+ years, you'd expect it to be largely standardized by now.
But then... Apple, at about the same time that they did some fairly cool stuff (iPhone), also did some really stupid stuff ("hey lets just change the interface all the goddamn time for no reason!") and a lot of people decided they were the vanguard and started emulating the stupid stuff as a sort of cargo cult, because... Apple. So we had weird colors everywhere for a while, and then we had skeuomorphism (remember leather textures? they were fun), and now we have anti-skeuomorphism or whatever the hell you want to call flat interfaces.
And more generally, now we're seeing a wholesale importation of UX elements from 'touch' devices, like phones and tablets, onto the desktop PC, where they aren't remotely useful or appropriate, and where in many cases they replace UX elements that are traditional and well-understood.
The worst idea going around right now is that if you somehow polish your turd enough, you can get an interface that will work everywhere. Which is ridiculous. You can't, you're never going to be able to, stop trying to make 'fetch' happen. There is no interface that is going to work well on my two 20" landscape displays with their associated keyboard and mouse, but also decompose well to a 4" portrait-oriented smartphone where I'm reduced to stabbing at everything with my fingers like an ape. The interface that works on one is going to look nothing like the interface that works on the other.
posted by Kadin2048 at 7:54 AM on May 14, 2015 [7 favorites]
Yeah, there were still some open issues: menu bar at the top of the screen or the window? Desktop icons auto-align to left side or right? But in general, it seemed like we were asymptotically approaching a sort of UI consensus; that we were entering a period of refinement. Which makes sense, because we've been working on this "desktop computer" shit for like 30+ years, you'd expect it to be largely standardized by now.
But then... Apple, at about the same time that they did some fairly cool stuff (iPhone), also did some really stupid stuff ("hey lets just change the interface all the goddamn time for no reason!") and a lot of people decided they were the vanguard and started emulating the stupid stuff as a sort of cargo cult, because... Apple. So we had weird colors everywhere for a while, and then we had skeuomorphism (remember leather textures? they were fun), and now we have anti-skeuomorphism or whatever the hell you want to call flat interfaces.
And more generally, now we're seeing a wholesale importation of UX elements from 'touch' devices, like phones and tablets, onto the desktop PC, where they aren't remotely useful or appropriate, and where in many cases they replace UX elements that are traditional and well-understood.
The worst idea going around right now is that if you somehow polish your turd enough, you can get an interface that will work everywhere. Which is ridiculous. You can't, you're never going to be able to, stop trying to make 'fetch' happen. There is no interface that is going to work well on my two 20" landscape displays with their associated keyboard and mouse, but also decompose well to a 4" portrait-oriented smartphone where I'm reduced to stabbing at everything with my fingers like an ape. The interface that works on one is going to look nothing like the interface that works on the other.
posted by Kadin2048 at 7:54 AM on May 14, 2015 [7 favorites]
Blogger rant about crappy web design in general.
I agree with everybody. Hamburger/pancakes is completely non-intuitive and I've been skulking around the internet since I was 12. Google is a scourge.
posted by easter queen at 8:08 AM on May 14, 2015
I agree with everybody. Hamburger/pancakes is completely non-intuitive and I've been skulking around the internet since I was 12. Google is a scourge.
posted by easter queen at 8:08 AM on May 14, 2015
But then, nobody asked me never.
Even that is a little strange. Why a bulleted list? Maybe they should make it an icon of a restaurant menu with dollar signs and pictures of food.
posted by ChuckRamone at 8:49 AM on May 14, 2015
Even that is a little strange. Why a bulleted list? Maybe they should make it an icon of a restaurant menu with dollar signs and pictures of food.
posted by ChuckRamone at 8:49 AM on May 14, 2015
Facebook is a scourge, you mean. Google, along with Apple and Firefox, and even this website are me tooers in this case. Not that they all don't deserve a whap on the nose for this crime, but if someone deserves a timeout for this, let's make sure that the real troublemaker, Mr. Zuckerberg, is the one sent to the corner without his juicebox.
posted by bonehead at 9:01 AM on May 14, 2015
posted by bonehead at 9:01 AM on May 14, 2015
It's not a Mac thing either. I've been using Macs since 1985, and the term "hamburger menu" is only something I heard a couple of months ago. I am similarly baffled by the reference, since there's nothing remotely hamburgerlike about it; it's just... a list of things. It feels like something that came from mobile phones. I've never used an iPhone; is it common there?
posted by Mars Saxman at 9:51 AM on May 14, 2015
posted by Mars Saxman at 9:51 AM on May 14, 2015
there's nothing remotely hamburgerlike about it
It very strongly resembles a particular hamburger.
posted by localroger at 10:03 AM on May 14, 2015
It very strongly resembles a particular hamburger.
posted by localroger at 10:03 AM on May 14, 2015
Ugh. Recently my credit union implemented a new design that left me going OMG WTF I just want to know what your loans rates are. Is that what you guys are talking about? Because if so then yeah, that totally sucks.
posted by rabbitrabbit at 12:21 PM on May 14, 2015
posted by rabbitrabbit at 12:21 PM on May 14, 2015
My favorite hamburger-related design tidbit was right after Apple used a fake bank app to demonstrate everything wrong with hamburger buttons and side menus, Chase updated their app to do precisely the opposite, moved all the stuff into a drawer hidden behind the hamburger, and claim the "new menu navigation and design [...] helps you locate key information and carry out tasks more efficiently."
The first time I used it after the update, I went to confirm an account transfer and logged myself out because they stuck a Log Out button in the upper-right of every screen. So much easier to find, though. 🍔
posted by frijole at 12:56 PM on May 14, 2015 [1 favorite]
The first time I used it after the update, I went to confirm an account transfer and logged myself out because they stuck a Log Out button in the upper-right of every screen. So much easier to find, though. 🍔
posted by frijole at 12:56 PM on May 14, 2015 [1 favorite]
I've never used an iPhone; is it common there?
I can't find it in any of Apple's own apps, but looking at third party apps maybe 1/3 - 1/2 of them use it. Google Maps, Dictionary.com, Yelp are popular examples.
posted by aubilenon at 1:05 PM on May 14, 2015
I can't find it in any of Apple's own apps, but looking at third party apps maybe 1/3 - 1/2 of them use it. Google Maps, Dictionary.com, Yelp are popular examples.
posted by aubilenon at 1:05 PM on May 14, 2015
Autumn Leaf: Maybe he means Firefox, which still offers those menus but which also recently introduced the hamburglar,
No hamburgers, here.
posted by Too-Ticky at 1:42 PM on May 14, 2015
No hamburgers, here.
posted by Too-Ticky at 1:42 PM on May 14, 2015
Furthermore:
A UI [element] is like a joke. If you have to explain it, it's not all that great.
posted by Too-Ticky at 1:43 PM on May 14, 2015 [4 favorites]
A UI [element] is like a joke. If you have to explain it, it's not all that great.
posted by Too-Ticky at 1:43 PM on May 14, 2015 [4 favorites]
I've recently come to enjoy browsing with web fonts disabled. This makes all the tendiest websites, that abuse fonts for navigation elements, have either rafts of random punctuation characters (sometimes they look like a nethack zoo perched on their nav bar), or lots of broken unicode boxes full of tiny little numbers.
When I want to find out what an icon does, I hover over it and see what the link is called, or worst
case, right-click and "Inspect element".
Then again, I have my linux window manager programmed (using haskell naturally) to not display any window ornaments, and control it entirely by my own inscrutable key combinations.
posted by joeyh at 4:37 PM on May 14, 2015 [2 favorites]
When I want to find out what an icon does, I hover over it and see what the link is called, or worst
case, right-click and "Inspect element".
Then again, I have my linux window manager programmed (using haskell naturally) to not display any window ornaments, and control it entirely by my own inscrutable key combinations.
posted by joeyh at 4:37 PM on May 14, 2015 [2 favorites]
Even that is a little strange. Why a bulleted list? Maybe they should make it an icon of a restaurant menu with dollar signs and pictures of food.
posted by ChuckRamone at 11:49 AM on May 14 [+] [!]
They do that already, it's called the App Store, YMMV based on platform...
skeuomorphism
Thank you kadin2048, I'd forgotten that word. I want brass trim around my windows that's the replica of something you'd find on a mid-century stereo, that is only there because glass is supposed to be framed and it's a bit remiscent of a picture frame, and maybe some dragon heads at the top corners of my window that breathe fire when I click on them and then either max/minimize my window. The fire is there because the dragon heads evoke the puking gargoyles that act as drain spouts at the tops of cathedrals. Maybe some creaking/squeeking sound effects that a real metal dragon's head would make when pivoted atop a real brass column, and some whoosh noises with the flame effects. That's what I want. And now I'm off to visit the forgotten corners of the internet to discover what I'd need to do to accomplish this in 7/8.1.
posted by mcrandello at 5:14 PM on May 14, 2015 [2 favorites]
posted by ChuckRamone at 11:49 AM on May 14 [+] [!]
They do that already, it's called the App Store, YMMV based on platform...
skeuomorphism
Thank you kadin2048, I'd forgotten that word. I want brass trim around my windows that's the replica of something you'd find on a mid-century stereo, that is only there because glass is supposed to be framed and it's a bit remiscent of a picture frame, and maybe some dragon heads at the top corners of my window that breathe fire when I click on them and then either max/minimize my window. The fire is there because the dragon heads evoke the puking gargoyles that act as drain spouts at the tops of cathedrals. Maybe some creaking/squeeking sound effects that a real metal dragon's head would make when pivoted atop a real brass column, and some whoosh noises with the flame effects. That's what I want. And now I'm off to visit the forgotten corners of the internet to discover what I'd need to do to accomplish this in 7/8.1.
posted by mcrandello at 5:14 PM on May 14, 2015 [2 favorites]
I kind of unironically miss that period in the late '90s where you could spend days wading through one terribad "windows theme" or "program skin" after another, assembling a baroque nightmare of window decorations and config files that turned your computer's interface into something that only you understood. You'd generally have to install 3 or four other unrelated utilities in order to even come close to the screenshots, and your friends/coworkers would use it to check their email exactly once. It was the ultimate in casual physical security. The only problem was that you'd often wind up with a horribly buggy operating system at the end of it because you carelessly replaced a bunch of important system files with hacks written by hacks who at best stopped tinkering when it worked for them.
Friend: "Dude how do I just close the window I have no idea what I'm looking at"
Me: "No no no you have to go up to the middle of the top of the window and pull the wooden lever looking thing to get out of it. That plasma bubbling up the scrollbars means it's thinking..."
Computer: bluescreens.
Aw, mcrandello, I so miss the desktop modding/skinning/customization days. I still have a custom brushed-aluminum theme on the XP install on my old black MacBook, plus Y'z Dock... About the closest I can get right now on an actual Mac is using an app to remove the background from my dock (can't remember which app anymore, I've used so many when the old ones inevitably break with OS updates) and Bartender to rearrange and/or hide menu-bar icons. I used to replace all my dock icons with cooler ones, but after enough updates have removed my work, I've mostly given up on keeping those looking pretty. Anyway, I remember the Aqua-Soft days quite fondly...
posted by limeonaire at 6:48 PM on May 14, 2015 [2 favorites]
Friend: "Dude how do I just close the window I have no idea what I'm looking at"
Me: "No no no you have to go up to the middle of the top of the window and pull the wooden lever looking thing to get out of it. That plasma bubbling up the scrollbars means it's thinking..."
Computer: bluescreens.
Aw, mcrandello, I so miss the desktop modding/skinning/customization days. I still have a custom brushed-aluminum theme on the XP install on my old black MacBook, plus Y'z Dock... About the closest I can get right now on an actual Mac is using an app to remove the background from my dock (can't remember which app anymore, I've used so many when the old ones inevitably break with OS updates) and Bartender to rearrange and/or hide menu-bar icons. I used to replace all my dock icons with cooler ones, but after enough updates have removed my work, I've mostly given up on keeping those looking pretty. Anyway, I remember the Aqua-Soft days quite fondly...
posted by limeonaire at 6:48 PM on May 14, 2015 [2 favorites]
« Older “Smoking is an older friend than almost anybody I... | Make it cool or I’ll kill you Newer »
This thread has been archived and is closed to new comments
I remember it seeming so ubiquitous on mobile sites that I figured it was some new built-in HTML element.
posted by kmz at 2:08 PM on May 13, 2015 [10 favorites]