8 ms·

Why and how to avoid hamburger menus

150 points by Jacqued 12y ago

jayshahtx 12y ago
www.Fortune.com just moved to this menu style
- csmcsqrrl 12y ago
  They had to label the hamburger itself as "Menu" too -- I bet user testing revealed that people had no idea how to get to the rest of the site. Its pretty rare in websites, though, which could partially explain that.
bennyg 12y ago
Sometimes you just have a shit-ton of navigation items, and it makes more sense to put them in the hamburger drawer, rather than drill-down into a tab bar further, which can take you out of your current context.
- justizin 12y ago
  information architecture does tell us that people have to be much more engaged to navigate with more choices, and that 7 is about the top-end of what people will really process. 3 is your lowest engagement upper limit, people already need to be moderately engaged to process 5 choices, and they need to be really focused for 7. These principles apply to people focused on using a computer with a large screen in front of their face, and surely degrade on smaller devices with distractions around. if you have a shit-ton of navigation items, get rid of some, because having fourteen is _not_ increasing engagement.
  - bennyg 12y ago
    Good luck fitting 7 on a tab bar. Sometimes, in the real world, clients want things a certain way and you are paid to make them that way. I would like less navigation options, but a big app has multiple things. That's just a fact of life sometimes - regardless of information architecture theory.
Touche 12y ago
Google+ on Android recently got rid of the sidebar navigation and replaced it with a clever dropdown that expands to the full menu.
efbenson 12y ago
It is a newer pattern so I would expect there is friction. The problem is if there is any serious amount of depth to your app you need to overflow the access to the other features somehow and this is, in my opinion, a good way to do it. I think that given enough time and it becomes a pretty common pattern the pain of discoverability that the article brings up will not be an issue. Most of the arguments brought up in the article are only valid in apps with focused small sets of functionality. I think the move Google did with the Google+ app is a good(bad) example, they got rid of the hamburger menu in favor of a combination of several menus (bottom menu with a expanded menu at the top). I find trying to find things in this new app painful. The hamburger menu excels as a landing point or a dashboard access to functionality.
theg2 12y ago
My instinct told me what the article is claiming, but there just aren't any other compelling alternatives that will surface the content and serve as a solid navigation on many small screen devices. We're still in infancy on small and touch screen devices and we don't have a ton of reliable data as things are still changing too fast. It's something to keep in mind but does anything have any alternatives when you have more than 5 items?
- josephschmoe 12y ago
  The way I'm currently doing it is to have two buttons: The Hamburger Icon and a context-sensitive button on the right. This way my two most important pages get heavy traffic without removing the ability to access the other pages which get used less often. Hamburger icons are great for large numbers of pages no one uses particularly often, but are necessary for the app to work (Settings, Profile, etc.) and as a fail safe to always be able to navigate to where you want. The way to access you main pages should be baked into them (links, buttons, action bars) on the page itself.
- marcosdumay 12y ago
  All that tale makes me remember the mouse history of: Two buttons... No, one buttom! No 5 buttons that you can program! Nope, 4 buttons and 2 scroll weels! We'll settle over something good enough for most cases, but it'll not be the sandwich alone, and I'm quite sure we'll stop using it at desktops on due time. Also, we'll probably need to rethink some APIs for getting a real option.
- pbreit 12y ago
  Yes: 3 or 4 icons(w/ labels) at bottom with "more..." If necessary. Like all the apple apps. The hamburger is just a cop-out so you don't have to think very hard about your app design.
  - theg2 12y ago
    If you app has sections (say...a news app) this actually is a big issue. Not every app is about sharing photos.
moron4hire 12y ago
Since when is it called a "hamburger menu"? I had no idea what it meant until actually reading the article. Names for generic things should be able to convey their own meaning. It smacks of trying too hard to be a person who coined a phrase. My app has more than 4 views and one of the views needs to have as much of the screen available to it as possible, because a big chunk of the screen will be taken up by the keyboard. One menu button is better than trying to fit everything into 4 or 5 screens and having 5 buttons constantly taking up space at the bottom of the screen. And I don't think that's "rare". It might be "rare" if your conception of apps is Facebook and SnapChat, but there there is a huge gap in the market for apps of real value that enable users to do real work in ways they can't do with a larger computer. Apps focused on helping users do work rather than selling ads to users will probably always grow in features over time. You can't get all of that to fit in 4 or 5 screens.
- zevyoura 12y ago
  > Since when is it called a "hamburger menu"? I had no idea what it meant until actually reading the article. I haven't heard the phrase "hamburger menu" before, but the image is often referred to as a hamburger icon.
- look_lookatme 12y ago
  Pretty much everyone I work with refers to them as a "hamburger button".
- robbyking 12y ago
  "Stacked" menus on the web have been called hamburger menus since at least the late 90's; I remember hearing the term in design meetings as far back as 1998. A Google Image Search for "Web Hamburger Menu" also brings up images of the type of menu the author is describing[1]. 1) https://www.google.com/search?q=hamburger+menu&safe=off&espv=2&source=lnms&tbm=isch&sa=X&ei=DvaNU73ZC4v2oASnrYG4Cw&ved=0CAYQ_AUoAQ&biw=1767&bih=922#q=web+hamburger+menu&safe=off&tbm=isch https://www.google.com/search?q=hamburger+menu&safe=off&espv...
corporealshift 12y ago
I like the approach to this article, and the demos it provided. I think there's a place for both, but I don't think that the "more" in the basement navigation is anywhere near as good as an actual menu. The problem is still that many people don't know that the hamburger icon is a menu icon, but with it's growing use I think that will change quickly. Unrelated, but did anyone else think the title was related to food? That's the first thing that popped into my mind when I read "hamburger menu"
kylerush 12y ago
The hamburger menu experiments by James Foster are interesting, but the problem is that they assume the primary goal is navigation clicks. Rarely is a navigation click a bottom line business metric for a company. Almost always you want the user to convert into a customer for whatever you are selling. A more compelling experiment would be one that shows results for both a primary action of new visitor to customer as well as nav click conversions. The fact that fewer users click on the navigation is not necessarily a bad thing.
- themodelplumber 12y ago
  One of the key itches this article scratches is the issue of the hamburger menu that just appears in a design mock because it's how things are done nowadays. It's almost insulting to deal with people who care so little about the "bottom line business metrics" you mention that they throw things in there, like the hamburger, without justification in context. It's not even a question of business metrics at that level. It's simply a question of thinking about how you want people to interact with your website, and a lot of designers (using the term as generically as possible--anybody who is planning a site, be they a graphic designer or developer) don't even get that far.
  - mfrommil 12y ago
    Agreed. There may be cases where a hamburger menu makes sense, like a news app where you can switch between sections. The article shows a solution with the search bar moved to a more prevalent position and other menu options dropped to the bottom - this makes sense if users reach destination pages in the app via search. It's good to think about but I think the article missed the point of starting with the objectives first (customer's needs) and working backwards to find which menu layout is best.
wuliwong 12y ago
tldr;? Don't have more than 5 navigation options. Why? Because the solution offered is if you really must have more than 5 navigation items, use a hamburger. Oh I forgot, the "scrollable" navbar is a second "solution". AWFUL. This article is as bad as I thought.
antidaily 12y ago
Counterpoint http://mattdsmith.com/hamburger/ http://mattdsmith.com/hamburger/
- kevinwang 12y ago
  This article seems to be solely about the icon itself, whereas the OP's link is concerned also with the slide-out sidebar menu as a whole.
HNJohnC 12y ago
A quick rule of thumb: if the title or the opening of the article for any technique do not contain some form of the phrase "when to use" or "under these circumstances" and instead contain absolutes like this title then you automatically know you are in for a slog to get any kind of general benefit from reading the article. People these days seem incredibly quick to publish articles without considering how limited their perspective might be and thus the responsible way to present the information.
- themodelplumber 12y ago
  A quick rule of thumb: When a headline appears on the front page at HN, that headline alone is enough of a signal for 99% of HN users. It says, "a number of people are thinking about this. We need to talk about this." Forget what the article says, just read what the headline is shouting from its highly-upvoted position. If you don't like the article, fine. But "let's talk about hamburger menus and practically invisible navigation" is a worthwhile signal.
  - personZ 12y ago
    A very small minority of HN readers can propel something to the front-page with ease, with relatively few votes: Right now, two hours in, this has earned the arrows of a miserly 59 users. Undoubted thousands of others have browsed it and moved on, with by most measures is the opposite of the up arrow. I'm not speaking to the specifics of this submission, but the "it's on the front page therefore it has merit" argument is not reasonable. Topics that are particularly contentious (and feelings about UI is one of them, particularly when people are motivated by disagreements with co-workers about UI direction) tend to make the front-page with ease. Tomorrow - Why "hamburger" menus are the bestest. Also, TDD is the best, and so is NoSQL.
    - themodelplumber 12y ago
      > "it's on the front page therefore it has merit" I didn't say that. Why the quotes?
insky 12y ago
I don't get why these menus can't just appear as overlays. I am not a fan of having to scroll to a menu it can be disorientating. Like on a web page: you read and move down the page, you want to glance the menu, you have to go back to the top (home button) and then try and find your place in the text again. Overlays, popup menus, would be better there also. In my mind a website should be able to register actions with the browser, and that would get tied in with the device/app navigation.
jbb555 12y ago
I read part of the article but as they didn't seem to explain what a "hamburger menu" was, something I've never heard of, I gave up.
- radio4fan 12y ago
  "hamburger menu" refers to a menu which pops out when you click on the 'menu' icon, which looks a bit like a stylised hamburger. => ☰
- gdewilde 12y ago
  A hamburger menu is a single menu button (with horizontal lines on it) that folds out into a (much to) big list of menu items.
- pbreit 12y ago
  If you couldn't figure out what hamburger menus are after reading part of the article (presumes my including seeing the 3 images of such at the top) then you just weren't trying.
- 205guy 12y ago
  I agree that the article was not effective in introducing the topic and the problem space. I'm interested in mobile ui, but not familiar with all the new terminology, so this article was difficult to read. I scrolled down until I got to the conclusion, which was fortunately fairly clear, and then went back to understand the beginning. It didn't help that the screen animations were too fast and lacked context. They also lacked user motions. Aren't there some standard ways of displaying tap and swipe events on a mobile screencast?
gopher1 12y ago
First off, two of their "studies" simply compared the hamburger icon to different types of icons, but the functionality remained the same (slide out). Only one looked at changing the navigation entirely. Second, this is not so much a reflection of fly-out/slide-out navigations as it is a reflection of the fact that on mobile you just have less screen real estate period. Nowhere in that article is there a real reckoning with that fact. I've yet to be convinced that fly-out/slide-out/hamburger navigations are worse than the alternative when you have lots of items to display. Either way you're not going to be displaying something, and whatever is not immediately visible will receive reduced engagement. If your home page/screen is full of navigation items, something else will be hidden instead. Not to mention the article provides solution for cases that have many navigation items - something that is very common.
- mortenjorck 12y ago
  The article's citation of the Twitter app is one I'd call a fine example of a UI that could benefit from a side drawer. Twitter has completely overloaded two of their four bottom tabs: First, the Timelines tab has several horizontally-navigated views that are spatially disorienting when positioned against the tab layout and feel conceptually muddy under the "Timelines" category. Second, the "Me" tab is also home to tangentially-related functionality such as searching for users and help, and has its own often confusing navigation that might be better expressed in a consistently laid-out side drawer.
- jakejake 12y ago
  I kinda thought the same thing. Finding the perfect navigation can be a huge challenge for larger apps. Though I agree with the article that it's important to analyze and be critical of your app structure as much as possible. As far as the article mentioning user engagement stats, it probably matters a lot what the point of the app is. If you're trying to get a social app off the ground and your users literally will not spend 15 seconds learning to use it - you have to put everything in their face. If you're making a vertical market app or something where the users need it to do actual work - they might appreciate a quick, single-click access to a large menu vs clicking through multiple levels of tabs.
Pxtl 12y ago
Imho, Windows Phone actually has the best approach to menus. Useful icons are listed along the bottom without text labels. If you want more info you hit the "..." button and that introduces the text labels and additional menu items. A best-of-both-worlds approach that means there's one place to click when you don't know what to do, and it's already tied into vague unlabeled icons giving you the options.
- yalooze 12y ago
  Do you have a screenshot you could share that shows this in action? I'm interested to see exactly how this works.
  - Pxtl 12y ago
    http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff431813%28v=vs.105%29.aspx http://msdn.microsoft.com/en-us/library/windowsphone/develop...
    - talmand 12y ago
      So, it's an advanced slide-out nav tray with a non-hamburger icon? Interesting method.
    - shanghaiseo 12y ago
      As one not familiar with Windows phone, this nav bar seems pretty appealing to me. Thanks for sharing.
idealform01 12y ago
The interesting thing about it though is how fast it's being adopted. Right now it might have some poor performance in some instances but I think eventually it will be so prevalent that the hamburger icon will turn into a convention people understand.
jimejim 12y ago
Facebook is one that comes to mind when I read this since they started with the side hamburger style, but have switched to the standard tab bar on iOS in more recent versions. They show the current version in the article, but didn't mention the transition. I'd be curious to hear from someone at Facebook if they're around today since I've heard they're pretty data-driven.
pbreit 12y ago
For content sites, it's probably fine. But for more functional sites, a lot of hamburger usage seems to be simply avoiding having to put some energy into your app's design. Most of the apple apps put the buttons at the bottom and include a "more" if necessary. My sense is the hamburger became more prevalent when it was used by default in Bootstrap, et al.
DonHopkins 12y ago
Food for thought and further research: Now that fast food menus have become a popular but unhealthy user interface metaphor, people should consider picking pie menus, which are faster and tastier than hamburger menus. https://en.wikipedia.org/wiki/Pie_menu https://en.wikipedia.org/wiki/Pie_menu "Hold the flick and hold the presses, spatial borders won't upset us, all we ask is that you let us swipe it your way."
- Amokrane 12y ago
  +1000. Why limit the actionable area to unveil a menu to an icon at the top left part of the scree (hard to reach on big screens), while the whole screen could be actionable.
  - DonHopkins 12y ago
    One problem with traditional menus and other UIs on any kind on touch screen is that you can't see through your hand, which covers up what you're pointing at, so user interfaces designed for a mouse driven cursor don't work well. I'm developing 3D Augmented Reality pie menus for Pantomime, that you pop up by touching the edge of the screen (which is easy when you're holding the phone), which pop up in the center of the screen where you can see them, you control them by tilting, they stay in the same position in 3D "augmented reality" space, and they provide nifty continuous animated feedback! That way the actionable area is the entire space around you -- a LOT larger than the screen! With normal cursor driven pie menus on a big desktop screen, the further you move the mouse, the more angular precision and leverage control you gain over the selection. Pantomime 3D AR pie menus let you tilt to point out a lot further than the edge of a tiny phone screen! http://pantomimecorp.com http://pantomimecorp.com By the way: we're looking for investors, and we just won first place in the Digital Media / Mobile category of the Launch Silicon Valley Startup Competition! http://www.newswest9.com/story/25616093/pantomime-corporation-wins-launch-silicon-valley-startup-competition-with-interactive-augmented-reality-and-virtual-reality-platform http://www.newswest9.com/story/25616093/pantomime-corporatio... David Levitt tells the story at 1:45: http://veetle.com/index.php/search/video/kctv8?play=94493d4b4906b345b7f7659f3adbe38f http://veetle.com/index.php/search/video/kctv8?play=94493d4b... Please contact us if you're interested in learning more about Pantomime, or know other people who would be! https://www.youtube.com/watch?v=OtGIx9uqc4w https://www.youtube.com/watch?v=OtGIx9uqc4w http://vimeo.com/96265274 http://vimeo.com/96265274
hawkharris 12y ago
It's refreshing to see an article that follows up its criticism by suggesting concrete solutions.
lurkinggrue 12y ago
Gah! All those low battery icons on those screen shots are driving me crazy.
mabramo 12y ago
I thought this was going to be an article about actual hamburger menu's. On that note, I would like to share a bit of information about the best burger I've ever had. I made an account just for this. If you are ever in the NYC area and you enjoy hamburgers, go to the Minetta Tavern in Manhattan. You will not be disappointed. I consider myself at least an intermediate burger-eater and Minetta carries the single best burger I have ever had. It is called the Black Label Burger. To me, it is a 9/10 where the next best burger I have had is a 7/10 and my average rating is a 4/10. Personally, I find cheeseburgers to be the best, but the standard Black Label Burger at Minetta has none. It is a testament to its greatness that I didn't add anything to the burger and it still is my favorite. Look up the Black Label Burger. I can't get to the article while at work.
code51 12y ago
Trading off screen space for feature visibility cannot be good for content-heavy applications. You can always trigger or "force" interaction on the user but you can't force content on a user after you lose screen space. I'm sick of reading late criticisms about standard stuff that made its way into Android guidelines. There was the Dashboard, then there was Navigation Drawer, now Google+ completely changed a few things altogether. If you want to make all features so visible, then why not use Dashboards ? In one screen, you list all critical features and in subsequent screens you have all the space for content. [Ignoring the fact that Dashboards make the app look old] Or heck, we had real Menus before that, magically, heroically placed in lower part of the screen! Not an ActionBar on top of the screen where you strain your thumb in mega screens. But no... definitely no. Everybody has to advertise something else.
pasiaj 12y ago
The problem can easily be solved by replacing the hamburger menu with this newly created revolutionary bacon menu: https://twitter.com/designsapiens/status/473925065500033024/photo/1 https://twitter.com/designsapiens/status/473925065500033024/...
cmapes 12y ago
I think like most things in good UI design, the rule is: "Make common user tasks as friction-less as possible." Now, when a common user behavior is to use the main menu to switch between many different places in the app, then yes, hiding that menu from the user introduces an additional step. That creates additional friction. A permanent menu would be a good idea in that case. But, if the most common use case involves a user mostly navigating from a main page (like a timeline or feed), then hiding the menu becomes less of a big deal. They will "organically" navigate through content from the timeline. Therefore allowing more space for the main element (the timeline) makes sense and increases the quality of the user experience. As a plus, removing items from the screen helps make the action that you'd prefer the user to perform more obvious. That increase conversions in a context when you want the user to do certain things. Lets focus on good UI/X design, which is often case dependent. No need to evangelize one particular approach and condemn another as being worthless (especially when you have weak reference studies).
jebblue 12y ago
Just when I get the hang of using them in designs, now they're not OK?
colmvp 12y ago
Low discoverability and less efficiency are not necessarily bad. If I need to have specific functionality available but it's not something I use 90% of the time, then I gain nothing by making it more visible and efficient. If anything, interfaces may become more cluttered.
kevinwang 12y ago
Is the main image of the article not showing for anyone else? I can't see it at all. I'm talking about http://lmjabreu.com/post/2014-05-14-how-and-why-not-to-use-hamburger-menus/airbnb_redesign-03ff834d.svg http://lmjabreu.com/post/2014-05-14-how-and-why-not-to-use-h...

150 points by Jacqued 12y ago

jayshahtx 12y ago

www.Fortune.com just moved to this menu style

csmcsqrrl 12y ago
They had to label the hamburger itself as "Menu" too -- I bet user testing revealed that people had no idea how to get to the rest of the site. Its pretty rare in websites, though, which could partially explain that.

bennyg 12y ago

Sometimes you just have a shit-ton of navigation items, and it makes more sense to put them in the hamburger drawer, rather than drill-down into a tab bar further, which can take you out of your current context.

justizin 12y ago
information architecture does tell us that people have to be much more engaged to navigate with more choices, and that 7 is about the top-end of what people will really process. 3 is your lowest engagement upper limit, people already need to be moderately engaged to process 5 choices, and they need to be really focused for 7. These principles apply to people focused on using a computer with a large screen in front of their face, and surely degrade on smaller devices with distractions around. if you have a shit-ton of navigation items, get rid of some, because having fourteen is _not_ increasing engagement.
- bennyg 12y ago
  Good luck fitting 7 on a tab bar. Sometimes, in the real world, clients want things a certain way and you are paid to make them that way. I would like less navigation options, but a big app has multiple things. That's just a fact of life sometimes - regardless of information architecture theory.

Touche 12y ago

Google+ on Android recently got rid of the sidebar navigation and replaced it with a clever dropdown that expands to the full menu.

efbenson 12y ago

It is a newer pattern so I would expect there is friction. The problem is if there is any serious amount of depth to your app you need to overflow the access to the other features somehow and this is, in my opinion, a good way to do it. I think that given enough time and it becomes a pretty common pattern the pain of discoverability that the article brings up will not be an issue. Most of the arguments brought up in the article are only valid in apps with focused small sets of functionality. I think the move Google did with the Google+ app is a good(bad) example, they got rid of the hamburger menu in favor of a combination of several menus (bottom menu with a expanded menu at the top). I find trying to find things in this new app painful. The hamburger menu excels as a landing point or a dashboard access to functionality.

theg2 12y ago

My instinct told me what the article is claiming, but there just aren't any other compelling alternatives that will surface the content and serve as a solid navigation on many small screen devices. We're still in infancy on small and touch screen devices and we don't have a ton of reliable data as things are still changing too fast. It's something to keep in mind but does anything have any alternatives when you have more than 5 items?

josephschmoe 12y ago
The way I'm currently doing it is to have two buttons: The Hamburger Icon and a context-sensitive button on the right. This way my two most important pages get heavy traffic without removing the ability to access the other pages which get used less often. Hamburger icons are great for large numbers of pages no one uses particularly often, but are necessary for the app to work (Settings, Profile, etc.) and as a fail safe to always be able to navigate to where you want. The way to access you main pages should be baked into them (links, buttons, action bars) on the page itself.
marcosdumay 12y ago
All that tale makes me remember the mouse history of: Two buttons... No, one buttom! No 5 buttons that you can program! Nope, 4 buttons and 2 scroll weels! We'll settle over something good enough for most cases, but it'll not be the sandwich alone, and I'm quite sure we'll stop using it at desktops on due time. Also, we'll probably need to rethink some APIs for getting a real option.
pbreit 12y ago
Yes: 3 or 4 icons(w/ labels) at bottom with "more..." If necessary. Like all the apple apps. The hamburger is just a cop-out so you don't have to think very hard about your app design.
- theg2 12y ago
  If you app has sections (say...a news app) this actually is a big issue. Not every app is about sharing photos.

moron4hire 12y ago

Since when is it called a "hamburger menu"? I had no idea what it meant until actually reading the article. Names for generic things should be able to convey their own meaning. It smacks of trying too hard to be a person who coined a phrase. My app has more than 4 views and one of the views needs to have as much of the screen available to it as possible, because a big chunk of the screen will be taken up by the keyboard. One menu button is better than trying to fit everything into 4 or 5 screens and having 5 buttons constantly taking up space at the bottom of the screen. And I don't think that's "rare". It might be "rare" if your conception of apps is Facebook and SnapChat, but there there is a huge gap in the market for apps of real value that enable users to do real work in ways they can't do with a larger computer. Apps focused on helping users do work rather than selling ads to users will probably always grow in features over time. You can't get all of that to fit in 4 or 5 screens.

zevyoura 12y ago
> Since when is it called a "hamburger menu"? I had no idea what it meant until actually reading the article. I haven't heard the phrase "hamburger menu" before, but the image is often referred to as a hamburger icon.
look_lookatme 12y ago
Pretty much everyone I work with refers to them as a "hamburger button".
robbyking 12y ago
"Stacked" menus on the web have been called hamburger menus since at least the late 90's; I remember hearing the term in design meetings as far back as 1998. A Google Image Search for "Web Hamburger Menu" also brings up images of the type of menu the author is describing[1]. 1) https://www.google.com/search?q=hamburger+menu&safe=off&espv=2&source=lnms&tbm=isch&sa=X&ei=DvaNU73ZC4v2oASnrYG4Cw&ved=0CAYQ_AUoAQ&biw=1767&bih=922#q=web+hamburger+menu&safe=off&tbm=isch https://www.google.com/search?q=hamburger+menu&safe=off&espv...

corporealshift 12y ago

I like the approach to this article, and the demos it provided. I think there's a place for both, but I don't think that the "more" in the basement navigation is anywhere near as good as an actual menu. The problem is still that many people don't know that the hamburger icon is a menu icon, but with it's growing use I think that will change quickly. Unrelated, but did anyone else think the title was related to food? That's the first thing that popped into my mind when I read "hamburger menu"

kylerush 12y ago

The hamburger menu experiments by James Foster are interesting, but the problem is that they assume the primary goal is navigation clicks. Rarely is a navigation click a bottom line business metric for a company. Almost always you want the user to convert into a customer for whatever you are selling. A more compelling experiment would be one that shows results for both a primary action of new visitor to customer as well as nav click conversions. The fact that fewer users click on the navigation is not necessarily a bad thing.

themodelplumber 12y ago
One of the key itches this article scratches is the issue of the hamburger menu that just appears in a design mock because it's how things are done nowadays. It's almost insulting to deal with people who care so little about the "bottom line business metrics" you mention that they throw things in there, like the hamburger, without justification in context. It's not even a question of business metrics at that level. It's simply a question of thinking about how you want people to interact with your website, and a lot of designers (using the term as generically as possible--anybody who is planning a site, be they a graphic designer or developer) don't even get that far.
- mfrommil 12y ago
  Agreed. There may be cases where a hamburger menu makes sense, like a news app where you can switch between sections. The article shows a solution with the search bar moved to a more prevalent position and other menu options dropped to the bottom - this makes sense if users reach destination pages in the app via search. It's good to think about but I think the article missed the point of starting with the objectives first (customer's needs) and working backwards to find which menu layout is best.

wuliwong 12y ago

tldr;? Don't have more than 5 navigation options. Why? Because the solution offered is if you really must have more than 5 navigation items, use a hamburger. Oh I forgot, the "scrollable" navbar is a second "solution". AWFUL. This article is as bad as I thought.

antidaily 12y ago

Counterpoint http://mattdsmith.com/hamburger/ http://mattdsmith.com/hamburger/

kevinwang 12y ago
This article seems to be solely about the icon itself, whereas the OP's link is concerned also with the slide-out sidebar menu as a whole.

HNJohnC 12y ago

A quick rule of thumb: if the title or the opening of the article for any technique do not contain some form of the phrase "when to use" or "under these circumstances" and instead contain absolutes like this title then you automatically know you are in for a slog to get any kind of general benefit from reading the article. People these days seem incredibly quick to publish articles without considering how limited their perspective might be and thus the responsible way to present the information.

themodelplumber 12y ago
A quick rule of thumb: When a headline appears on the front page at HN, that headline alone is enough of a signal for 99% of HN users. It says, "a number of people are thinking about this. We need to talk about this." Forget what the article says, just read what the headline is shouting from its highly-upvoted position. If you don't like the article, fine. But "let's talk about hamburger menus and practically invisible navigation" is a worthwhile signal.
- personZ 12y ago
  A very small minority of HN readers can propel something to the front-page with ease, with relatively few votes: Right now, two hours in, this has earned the arrows of a miserly 59 users. Undoubted thousands of others have browsed it and moved on, with by most measures is the opposite of the up arrow. I'm not speaking to the specifics of this submission, but the "it's on the front page therefore it has merit" argument is not reasonable. Topics that are particularly contentious (and feelings about UI is one of them, particularly when people are motivated by disagreements with co-workers about UI direction) tend to make the front-page with ease. Tomorrow - Why "hamburger" menus are the bestest. Also, TDD is the best, and so is NoSQL.
  - themodelplumber 12y ago
    > "it's on the front page therefore it has merit" I didn't say that. Why the quotes?

insky 12y ago

I don't get why these menus can't just appear as overlays. I am not a fan of having to scroll to a menu it can be disorientating. Like on a web page: you read and move down the page, you want to glance the menu, you have to go back to the top (home button) and then try and find your place in the text again. Overlays, popup menus, would be better there also. In my mind a website should be able to register actions with the browser, and that would get tied in with the device/app navigation.

jbb555 12y ago

I read part of the article but as they didn't seem to explain what a "hamburger menu" was, something I've never heard of, I gave up.

radio4fan 12y ago
"hamburger menu" refers to a menu which pops out when you click on the 'menu' icon, which looks a bit like a stylised hamburger. => ☰
gdewilde 12y ago
A hamburger menu is a single menu button (with horizontal lines on it) that folds out into a (much to) big list of menu items.
pbreit 12y ago
If you couldn't figure out what hamburger menus are after reading part of the article (presumes my including seeing the 3 images of such at the top) then you just weren't trying.
205guy 12y ago
I agree that the article was not effective in introducing the topic and the problem space. I'm interested in mobile ui, but not familiar with all the new terminology, so this article was difficult to read. I scrolled down until I got to the conclusion, which was fortunately fairly clear, and then went back to understand the beginning. It didn't help that the screen animations were too fast and lacked context. They also lacked user motions. Aren't there some standard ways of displaying tap and swipe events on a mobile screencast?

gopher1 12y ago

First off, two of their "studies" simply compared the hamburger icon to different types of icons, but the functionality remained the same (slide out). Only one looked at changing the navigation entirely. Second, this is not so much a reflection of fly-out/slide-out navigations as it is a reflection of the fact that on mobile you just have less screen real estate period. Nowhere in that article is there a real reckoning with that fact. I've yet to be convinced that fly-out/slide-out/hamburger navigations are worse than the alternative when you have lots of items to display. Either way you're not going to be displaying something, and whatever is not immediately visible will receive reduced engagement. If your home page/screen is full of navigation items, something else will be hidden instead. Not to mention the article provides solution for cases that have many navigation items - something that is very common.

mortenjorck 12y ago
The article's citation of the Twitter app is one I'd call a fine example of a UI that could benefit from a side drawer. Twitter has completely overloaded two of their four bottom tabs: First, the Timelines tab has several horizontally-navigated views that are spatially disorienting when positioned against the tab layout and feel conceptually muddy under the "Timelines" category. Second, the "Me" tab is also home to tangentially-related functionality such as searching for users and help, and has its own often confusing navigation that might be better expressed in a consistently laid-out side drawer.
jakejake 12y ago
I kinda thought the same thing. Finding the perfect navigation can be a huge challenge for larger apps. Though I agree with the article that it's important to analyze and be critical of your app structure as much as possible. As far as the article mentioning user engagement stats, it probably matters a lot what the point of the app is. If you're trying to get a social app off the ground and your users literally will not spend 15 seconds learning to use it - you have to put everything in their face. If you're making a vertical market app or something where the users need it to do actual work - they might appreciate a quick, single-click access to a large menu vs clicking through multiple levels of tabs.

Pxtl 12y ago

Imho, Windows Phone actually has the best approach to menus. Useful icons are listed along the bottom without text labels. If you want more info you hit the "..." button and that introduces the text labels and additional menu items. A best-of-both-worlds approach that means there's one place to click when you don't know what to do, and it's already tied into vague unlabeled icons giving you the options.

yalooze 12y ago
Do you have a screenshot you could share that shows this in action? I'm interested to see exactly how this works.
- Pxtl 12y ago
  http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff431813%28v=vs.105%29.aspx http://msdn.microsoft.com/en-us/library/windowsphone/develop...
  - talmand 12y ago
    So, it's an advanced slide-out nav tray with a non-hamburger icon? Interesting method.
  - shanghaiseo 12y ago
    As one not familiar with Windows phone, this nav bar seems pretty appealing to me. Thanks for sharing.

idealform01 12y ago

The interesting thing about it though is how fast it's being adopted. Right now it might have some poor performance in some instances but I think eventually it will be so prevalent that the hamburger icon will turn into a convention people understand.

jimejim 12y ago

Facebook is one that comes to mind when I read this since they started with the side hamburger style, but have switched to the standard tab bar on iOS in more recent versions. They show the current version in the article, but didn't mention the transition. I'd be curious to hear from someone at Facebook if they're around today since I've heard they're pretty data-driven.

pbreit 12y ago

For content sites, it's probably fine. But for more functional sites, a lot of hamburger usage seems to be simply avoiding having to put some energy into your app's design. Most of the apple apps put the buttons at the bottom and include a "more" if necessary. My sense is the hamburger became more prevalent when it was used by default in Bootstrap, et al.

DonHopkins 12y ago

Food for thought and further research: Now that fast food menus have become a popular but unhealthy user interface metaphor, people should consider picking pie menus, which are faster and tastier than hamburger menus. https://en.wikipedia.org/wiki/Pie_menu https://en.wikipedia.org/wiki/Pie_menu "Hold the flick and hold the presses, spatial borders won't upset us, all we ask is that you let us swipe it your way."

Amokrane 12y ago
+1000. Why limit the actionable area to unveil a menu to an icon at the top left part of the scree (hard to reach on big screens), while the whole screen could be actionable.
- DonHopkins 12y ago
  One problem with traditional menus and other UIs on any kind on touch screen is that you can't see through your hand, which covers up what you're pointing at, so user interfaces designed for a mouse driven cursor don't work well. I'm developing 3D Augmented Reality pie menus for Pantomime, that you pop up by touching the edge of the screen (which is easy when you're holding the phone), which pop up in the center of the screen where you can see them, you control them by tilting, they stay in the same position in 3D "augmented reality" space, and they provide nifty continuous animated feedback! That way the actionable area is the entire space around you -- a LOT larger than the screen! With normal cursor driven pie menus on a big desktop screen, the further you move the mouse, the more angular precision and leverage control you gain over the selection. Pantomime 3D AR pie menus let you tilt to point out a lot further than the edge of a tiny phone screen! http://pantomimecorp.com http://pantomimecorp.com By the way: we're looking for investors, and we just won first place in the Digital Media / Mobile category of the Launch Silicon Valley Startup Competition! http://www.newswest9.com/story/25616093/pantomime-corporation-wins-launch-silicon-valley-startup-competition-with-interactive-augmented-reality-and-virtual-reality-platform http://www.newswest9.com/story/25616093/pantomime-corporatio... David Levitt tells the story at 1:45: http://veetle.com/index.php/search/video/kctv8?play=94493d4b4906b345b7f7659f3adbe38f http://veetle.com/index.php/search/video/kctv8?play=94493d4b... Please contact us if you're interested in learning more about Pantomime, or know other people who would be! https://www.youtube.com/watch?v=OtGIx9uqc4w https://www.youtube.com/watch?v=OtGIx9uqc4w http://vimeo.com/96265274 http://vimeo.com/96265274

hawkharris 12y ago

It's refreshing to see an article that follows up its criticism by suggesting concrete solutions.

lurkinggrue 12y ago

Gah! All those low battery icons on those screen shots are driving me crazy.

mabramo 12y ago

I thought this was going to be an article about actual hamburger menu's. On that note, I would like to share a bit of information about the best burger I've ever had. I made an account just for this. If you are ever in the NYC area and you enjoy hamburgers, go to the Minetta Tavern in Manhattan. You will not be disappointed. I consider myself at least an intermediate burger-eater and Minetta carries the single best burger I have ever had. It is called the Black Label Burger. To me, it is a 9/10 where the next best burger I have had is a 7/10 and my average rating is a 4/10. Personally, I find cheeseburgers to be the best, but the standard Black Label Burger at Minetta has none. It is a testament to its greatness that I didn't add anything to the burger and it still is my favorite. Look up the Black Label Burger. I can't get to the article while at work.

code51 12y ago

Trading off screen space for feature visibility cannot be good for content-heavy applications. You can always trigger or "force" interaction on the user but you can't force content on a user after you lose screen space. I'm sick of reading late criticisms about standard stuff that made its way into Android guidelines. There was the Dashboard, then there was Navigation Drawer, now Google+ completely changed a few things altogether. If you want to make all features so visible, then why not use Dashboards ? In one screen, you list all critical features and in subsequent screens you have all the space for content. [Ignoring the fact that Dashboards make the app look old] Or heck, we had real Menus before that, magically, heroically placed in lower part of the screen! Not an ActionBar on top of the screen where you strain your thumb in mega screens. But no... definitely no. Everybody has to advertise something else.

pasiaj 12y ago

The problem can easily be solved by replacing the hamburger menu with this newly created revolutionary bacon menu: https://twitter.com/designsapiens/status/473925065500033024/photo/1 https://twitter.com/designsapiens/status/473925065500033024/...

cmapes 12y ago

I think like most things in good UI design, the rule is: "Make common user tasks as friction-less as possible." Now, when a common user behavior is to use the main menu to switch between many different places in the app, then yes, hiding that menu from the user introduces an additional step. That creates additional friction. A permanent menu would be a good idea in that case. But, if the most common use case involves a user mostly navigating from a main page (like a timeline or feed), then hiding the menu becomes less of a big deal. They will "organically" navigate through content from the timeline. Therefore allowing more space for the main element (the timeline) makes sense and increases the quality of the user experience. As a plus, removing items from the screen helps make the action that you'd prefer the user to perform more obvious. That increase conversions in a context when you want the user to do certain things. Lets focus on good UI/X design, which is often case dependent. No need to evangelize one particular approach and condemn another as being worthless (especially when you have weak reference studies).

jebblue 12y ago

Just when I get the hang of using them in designs, now they're not OK?

colmvp 12y ago

Low discoverability and less efficiency are not necessarily bad. If I need to have specific functionality available but it's not something I use 90% of the time, then I gain nothing by making it more visible and efficient. If anything, interfaces may become more cluttered.

kevinwang 12y ago

Is the main image of the article not showing for anyone else? I can't see it at all. I'm talking about http://lmjabreu.com/post/2014-05-14-how-and-why-not-to-use-hamburger-menus/airbnb_redesign-03ff834d.svg http://lmjabreu.com/post/2014-05-14-how-and-why-not-to-use-h...