6 ms·

It is almost always preferable to have all of your options available to the user at all times. However, it's very important to make the distinction between apps

It is almost always preferable to have all of your options available to the user at all times. However, it's very important to make the distinction between apps and websites when talking about a hamburger menu. A tab bar is great in an iOS app with a limited scope of functionality. That just doesn't work a sprawling news site covering dozens of topics. A small, product-focused website may even be able to get away with showing all of their navigation options at once. For many sites, however, it's unfortunate, but sometimes you just need a well-organized junk drawer inside a hamburger menu.

eridius 11y ago
But there's almost always a better way to present it to the user. If I'm viewing a news site, I'm not going to think that the hamburger menu is where I go to find the Lifestyle section. If you absolutely must hide your sections behind a menu, there are practically infinite different menus that make more sense. The hamburger menu only makes sense when it's the literal junk drawer of the app/site, when there's no possible way to categorize its contents with anything more than the completely generic 3 horizontal bars. But primary navigation elements are not junk and don't belong there.
- CognitiveLens 11y ago
  > "infinite different menus that make more sense" This a a little hyperbolic. If you want surface a link to the Lifestyle section, then you also have to accept that links to about a dozen other sections need to be visible as well - on mobile, this would lead to about a third of the visible page (or more) being consumed by navigation links. Alternatively, you put the nav at the bottom of the page, but I would argue that doing so makes it less accessible/visible than it would be in a hamburger menu. The real challenge is not when you're trying to put 3-4 links or nav-groups in a hamburger menu, but when your site structure is so flat/shallow that you have a dozen or more equally-viable nav/action options for users. Except for the NBC example in the article, the nav in the examples can be distilled into a narrower, deeper structure. The article author doesn't appear to realize that on NBC news, the hamburger-equivalent "more" menu still appears at mobile widths. Sometimes it really is a decent solution.
  - eridius 11y ago
    You seem to have completely missed the entire point of my comment. In no way am I saying that a news site needs to have a link "Lifestyle" visible to the user at all times. In fact, you quoted directly from the most relevant point, the bit that says that there are practically infinite different ways to design a menu that avoids the problem of the hamburger. As a trivial example, you could have a single menu labelled "Sections" with a disclosure arrow, and mousing over / tapping it would then reveal a list of all sections. It's functionally identical to the hamburger in actual usage, but because it's called "Sections" (and only contains sections, not arbitrary junk), it becomes an obvious thing for users to interact with if they're looking for the Lifestyle section.
    - CognitiveLens 11y ago
      > You seem to have completely missed the entire point of my comment This is a little hyperbolic. You've basically recommended a labeled hamburger menu - 'Sections' instead of 'Menu' - and text labels definitely have a demonstrable advantage over icon-only buttons, but the OP isn't advocating for text labels instead of the hamburger icon (see NBC example that had a labeled hamburger menu originally), it's proposing that the menu items be surfaced into tabs, segmented controls, and lists. That's not viable on sites with a flat structure. nytimes.com uses the hamburger icon with the 'Sections' label, as you suggest, but it's important to acknowledge that this is just a variation on the theme, not a complete rejection of the 'menu items hidden behind something else' principle, so we need to be precise about the problems that a hamburger menu can and can't solve.
      - eridius 11y ago
        It's not just about labelling, it's also about not putting everything into the same generic menu. And I completely agree with the original article that anything[1] that you can pull out of the menu entirely and turn into a top-level element, you should. But freshyill's comment was specifically about large sites, such as news sites, that have too many elements to put them all at the top level. And in the context of that, I'm saying that the hamburger menu is still the worst solution you can come up with. If you must hide things behind menus, group them in a way that makes sense, with a label that tells the user immediately what the menu will contain. If the user has to actually open the menu to find out what's in it, then you've already lost, because it means the user won't know to click on that menu when searching for a thing that happens to be in it. For a news site, if the user wants the Lifestyle section, they'll probably understand that clicking on a menu named "Sections" is likely to give them what they want (or perhaps clicking on a menu labelled "More" right next to a few of the most popular sections such as World News). What they won't figure out without guessing blindly is that a menu with an icon of 3 horizontal stripes is where they can find the sections list. So basically, what I'm saying is that if you must use a menu, label it appropriately, and only put relevant items in that menu. If you have a bunch of things that aren't related to each other, they should be in different menus. A real hamburger menu is only appropriate for items that the vast majority of users are expected to never click on, and for which you're ok with making it hard to find for the rare user that actually does need it. [1] Well, anything that you want users to actually click on.
- emodendroket 11y ago
  > If I'm viewing a news site, I'm not going to think that the hamburger menu is where I go to find the Lifestyle section. Well, if there is such a menu, where else would it be?
  - eridius 11y ago
    Practically anywhere else. If I really wanted to find it, I'd probably eventually click that hamburger menu, but the only place that I'd be even less likely to look for it is the footer of the page. In a mobile app it makes a lot more sense, because screen space is so limited and the hamburger button will occupy one of the prime navigation points in the app UI (typically the upper-left or upper-right navigation button slots), so there's obviously not very many possibilities to find something, but even there, if you can possibly avoid using it, you should. As the original article demonstrates, hiding your navigational elements, even on mobile apps, significantly reduces user engagement. In a desktop website, I can't think of any reason why I would ever use a hamburger menu. Other, more specific menus, sure (e.g. "Sections" in a news site). But if I see the hamburger menu, besides thinking that it's really out of place when not in a mobile app, I also will instantly assume that it's the place to find things that I probably will never need. Basically, if it's something that you might put in the footer of your site, then hiding it in a hamburger is fine. If you think it's something that enough users will want such that the footer would be inappropriate, then don't put it behind a hamburger either.
shampine 11y ago
I keep reading these articles about how awful hamburgers are but so far not a single one addresses menus that have more than 3-5 items. I manage sites that we have kicked around ideas for how to deal with the menu better, but the size of what is in that menu makes all the proposed ideas I've seen not feasible. So I'm right there with you that it is unfortunate, I wish these articles had more in way of solutions than just regurgitating what we've heard for a while, hamburgers suck.
- nthj 11y ago
  Somewhere along the way I realized that design skill has as much to do with making convincing business cases for simplifying your business offering as it does with what design patterns we use. Approached this way, these types of articles help in the same way software design patterns do: perhaps refactoring the code will improve the smell, but its also possible we have an unnecessarily complex business problem ("50 more news categories than anyone will ever actually browse through", for example), and we need to make a case for simplifying the architecture.
  - davidkatz 11y ago
    This is an important point. You contribute most as a designer when you control or influence whatever is necessary to get to good design. In most cases, the largest levers of influence are not in which design patterns you use, but in the business decisions that make things simple or complex.
- deleted 11y ago
  [deleted]
- jamesarcher 11y ago
  In retrospect, I should have clarified what I meant by recommending the 3- to 5-item menu in the article; I was assuming the need to consolidate the menu to that many items on mobile, even if it wasn't so consolidated on larger views. There many need to be a "junk drawer" as others here have mentioned, or maybe those secondary items rely on navigation in the content itself. I think the best practice might be to pare down the navigation to the most important items, so at least those have visibility in a mobile context. However, these are still new design patterns being established, so nobody really has solid answers yet.
JoshTriplett 11y ago
> That just doesn't work a sprawling news site covering dozens of topics. Then have a menu named "topics" (or whatever marketing says to call areas of news). Still makes more sense than a menu whose icon means nothing more than "this is a menu" (and doesn't reliably convey that to everyone).
- kagamine 11y ago
  "topics" is also how untested, new fangled things like book stores and libraries work. People are also far more likely to side scroll menus on mobile. I'm not saying it's great design, but the option is there. ITunes store, that example of perfect design /s, uses side scrolling a lot too but it only really (half) works and only with the apple mouse. I really hate hamburger menus on desktop because as you say, it only says "this is a menu". On mobile: navigation, on desktop (FF & Chrome) it means options. And then on Chrome they have tried to shoe-horn everything into a stupidly small pop-up where half the options are just links to open more options. It's hardly a step up from a menu bar.
moron4hire 11y ago
What if we made the tab bar show the last 4 recently used items, plus "other" to open a drawer to show everything else? But if one of the top 4 is selected, it doesn't move within the list, it stays where it is.
- shogun21 11y ago
  It might be confusing for the user that the top navigation bar is constantly changing based on whatever item they happened to use last.
  - moron4hire 11y ago
    That's what I mean by not moving an item if it's already in the top 4. Do most people use all of the features of any given app? I can see things like news sites being able to get by with this, as I suspect the general use case with news sites is to only have a few sections one cares about. Or maybe it's a Markov chain! Move an item in the list by a random proportion weighted by how frequently that item has been used in the past! Infrequently used items have a low probability of making it into the most-recently-used list, where they would supplant more frequently used items. Or more direct: just always sort items by how frequently they've been use over time, but never allow the top 4 to be rearranged, even if one of the "lower" items gets used more. Or more simple: just let the user choose which items they want to pin to the front view.
justwannasing 11y ago
In the article, it shows NBC News, which is "a sprawling news site covering dozens of topics".

eridius 11y ago

But there's almost always a better way to present it to the user. If I'm viewing a news site, I'm not going to think that the hamburger menu is where I go to find the Lifestyle section. If you absolutely must hide your sections behind a menu, there are practically infinite different menus that make more sense. The hamburger menu only makes sense when it's the literal junk drawer of the app/site, when there's no possible way to categorize its contents with anything more than the completely generic 3 horizontal bars. But primary navigation elements are not junk and don't belong there.

CognitiveLens 11y ago
> "infinite different menus that make more sense" This a a little hyperbolic. If you want surface a link to the Lifestyle section, then you also have to accept that links to about a dozen other sections need to be visible as well - on mobile, this would lead to about a third of the visible page (or more) being consumed by navigation links. Alternatively, you put the nav at the bottom of the page, but I would argue that doing so makes it less accessible/visible than it would be in a hamburger menu. The real challenge is not when you're trying to put 3-4 links or nav-groups in a hamburger menu, but when your site structure is so flat/shallow that you have a dozen or more equally-viable nav/action options for users. Except for the NBC example in the article, the nav in the examples can be distilled into a narrower, deeper structure. The article author doesn't appear to realize that on NBC news, the hamburger-equivalent "more" menu still appears at mobile widths. Sometimes it really is a decent solution.
- eridius 11y ago
  You seem to have completely missed the entire point of my comment. In no way am I saying that a news site needs to have a link "Lifestyle" visible to the user at all times. In fact, you quoted directly from the most relevant point, the bit that says that there are practically infinite different ways to design a menu that avoids the problem of the hamburger. As a trivial example, you could have a single menu labelled "Sections" with a disclosure arrow, and mousing over / tapping it would then reveal a list of all sections. It's functionally identical to the hamburger in actual usage, but because it's called "Sections" (and only contains sections, not arbitrary junk), it becomes an obvious thing for users to interact with if they're looking for the Lifestyle section.
  - CognitiveLens 11y ago
    > You seem to have completely missed the entire point of my comment This is a little hyperbolic. You've basically recommended a labeled hamburger menu - 'Sections' instead of 'Menu' - and text labels definitely have a demonstrable advantage over icon-only buttons, but the OP isn't advocating for text labels instead of the hamburger icon (see NBC example that had a labeled hamburger menu originally), it's proposing that the menu items be surfaced into tabs, segmented controls, and lists. That's not viable on sites with a flat structure. nytimes.com uses the hamburger icon with the 'Sections' label, as you suggest, but it's important to acknowledge that this is just a variation on the theme, not a complete rejection of the 'menu items hidden behind something else' principle, so we need to be precise about the problems that a hamburger menu can and can't solve.
    - eridius 11y ago
      It's not just about labelling, it's also about not putting everything into the same generic menu. And I completely agree with the original article that anything[1] that you can pull out of the menu entirely and turn into a top-level element, you should. But freshyill's comment was specifically about large sites, such as news sites, that have too many elements to put them all at the top level. And in the context of that, I'm saying that the hamburger menu is still the worst solution you can come up with. If you must hide things behind menus, group them in a way that makes sense, with a label that tells the user immediately what the menu will contain. If the user has to actually open the menu to find out what's in it, then you've already lost, because it means the user won't know to click on that menu when searching for a thing that happens to be in it. For a news site, if the user wants the Lifestyle section, they'll probably understand that clicking on a menu named "Sections" is likely to give them what they want (or perhaps clicking on a menu labelled "More" right next to a few of the most popular sections such as World News). What they won't figure out without guessing blindly is that a menu with an icon of 3 horizontal stripes is where they can find the sections list. So basically, what I'm saying is that if you must use a menu, label it appropriately, and only put relevant items in that menu. If you have a bunch of things that aren't related to each other, they should be in different menus. A real hamburger menu is only appropriate for items that the vast majority of users are expected to never click on, and for which you're ok with making it hard to find for the rare user that actually does need it. [1] Well, anything that you want users to actually click on.
emodendroket 11y ago
> If I'm viewing a news site, I'm not going to think that the hamburger menu is where I go to find the Lifestyle section. Well, if there is such a menu, where else would it be?
- eridius 11y ago
  Practically anywhere else. If I really wanted to find it, I'd probably eventually click that hamburger menu, but the only place that I'd be even less likely to look for it is the footer of the page. In a mobile app it makes a lot more sense, because screen space is so limited and the hamburger button will occupy one of the prime navigation points in the app UI (typically the upper-left or upper-right navigation button slots), so there's obviously not very many possibilities to find something, but even there, if you can possibly avoid using it, you should. As the original article demonstrates, hiding your navigational elements, even on mobile apps, significantly reduces user engagement. In a desktop website, I can't think of any reason why I would ever use a hamburger menu. Other, more specific menus, sure (e.g. "Sections" in a news site). But if I see the hamburger menu, besides thinking that it's really out of place when not in a mobile app, I also will instantly assume that it's the place to find things that I probably will never need. Basically, if it's something that you might put in the footer of your site, then hiding it in a hamburger is fine. If you think it's something that enough users will want such that the footer would be inappropriate, then don't put it behind a hamburger either.

shampine 11y ago

I keep reading these articles about how awful hamburgers are but so far not a single one addresses menus that have more than 3-5 items. I manage sites that we have kicked around ideas for how to deal with the menu better, but the size of what is in that menu makes all the proposed ideas I've seen not feasible. So I'm right there with you that it is unfortunate, I wish these articles had more in way of solutions than just regurgitating what we've heard for a while, hamburgers suck.

nthj 11y ago
Somewhere along the way I realized that design skill has as much to do with making convincing business cases for simplifying your business offering as it does with what design patterns we use. Approached this way, these types of articles help in the same way software design patterns do: perhaps refactoring the code will improve the smell, but its also possible we have an unnecessarily complex business problem ("50 more news categories than anyone will ever actually browse through", for example), and we need to make a case for simplifying the architecture.
- davidkatz 11y ago
  This is an important point. You contribute most as a designer when you control or influence whatever is necessary to get to good design. In most cases, the largest levers of influence are not in which design patterns you use, but in the business decisions that make things simple or complex.
deleted 11y ago
[deleted]
jamesarcher 11y ago
In retrospect, I should have clarified what I meant by recommending the 3- to 5-item menu in the article; I was assuming the need to consolidate the menu to that many items on mobile, even if it wasn't so consolidated on larger views. There many need to be a "junk drawer" as others here have mentioned, or maybe those secondary items rely on navigation in the content itself. I think the best practice might be to pare down the navigation to the most important items, so at least those have visibility in a mobile context. However, these are still new design patterns being established, so nobody really has solid answers yet.

JoshTriplett 11y ago

> That just doesn't work a sprawling news site covering dozens of topics. Then have a menu named "topics" (or whatever marketing says to call areas of news). Still makes more sense than a menu whose icon means nothing more than "this is a menu" (and doesn't reliably convey that to everyone).

kagamine 11y ago
"topics" is also how untested, new fangled things like book stores and libraries work. People are also far more likely to side scroll menus on mobile. I'm not saying it's great design, but the option is there. ITunes store, that example of perfect design /s, uses side scrolling a lot too but it only really (half) works and only with the apple mouse. I really hate hamburger menus on desktop because as you say, it only says "this is a menu". On mobile: navigation, on desktop (FF & Chrome) it means options. And then on Chrome they have tried to shoe-horn everything into a stupidly small pop-up where half the options are just links to open more options. It's hardly a step up from a menu bar.

moron4hire 11y ago

What if we made the tab bar show the last 4 recently used items, plus "other" to open a drawer to show everything else? But if one of the top 4 is selected, it doesn't move within the list, it stays where it is.

shogun21 11y ago
It might be confusing for the user that the top navigation bar is constantly changing based on whatever item they happened to use last.
- moron4hire 11y ago
  That's what I mean by not moving an item if it's already in the top 4. Do most people use all of the features of any given app? I can see things like news sites being able to get by with this, as I suspect the general use case with news sites is to only have a few sections one cares about. Or maybe it's a Markov chain! Move an item in the list by a random proportion weighted by how frequently that item has been used in the past! Infrequently used items have a low probability of making it into the most-recently-used list, where they would supplant more frequently used items. Or more direct: just always sort items by how frequently they've been use over time, but never allow the top 4 to be rearranged, even if one of the "lower" items gets used more. Or more simple: just let the user choose which items they want to pin to the front view.

justwannasing 11y ago

In the article, it shows NBC News, which is "a sprawling news site covering dozens of topics".