5 ms·

I'm confused - what's the problem with the hamburger menu? What would the alternative be on small screens?

matchbok 8y ago
It seems to trigger even on non-mobile devices. If I shrink my viewport to a normal width (900ish pixels) the entire site is basically unusable. :/
- baddox 8y ago
  Most modern responsive design doesn't specifically target mobile vs. non-mobile devices, but rather simply the width of the browser window. In my experience a width of 900px is generally considered pretty low for a desktop browser, and toward the high end for tablets and large smartphone. Bootstrap, for instance, uses 992px as the low end of its "large" media query, which is intended for desktops.
- mdorazio 8y ago
  900px is not normal - that's tiny by today's standards. The only plausible alternative at a width that small would be to shrink the size of the text in the menu, otherwise it simply won't fit. Doing that would be worse to me for usability than switching to the hamburger.
  - matchbok 8y ago
    Sorry I don't think you're correct here. There is a ton of wasted space here. https://imgur.com/a/COfKBYM https://imgur.com/a/COfKBYM Definitely room for an actual menu there. Either way, a hidden hamburger menu makes 0 sense on a desktop environment anyway, no matter how much space you have.
    - mdorazio 8y ago
      And I don't think you're correct. There are 5 menu items + log in + the API docs button on the main header. If you want all those to fit in a sub-standard width page, you're going to end up sacrificing readability in text. If you want to propose removing a menu item to make more space, that's an option, but just saying "I don't like the hamburger - they could fit the menu somehow" is not helpful.
      - huebomont 8y ago
        What you do is fit the important stuff and hide the rest under a "more..." just because it ALL can't fit doesn't mean hiding everything is the only solution.
        mdorazio 8y ago
        What is "important" in this context? Resources and About? Do you just hide stuff under "More" from right to left as you run out of space? How many people are actually going to click or hover on "More" to find out what's under there? There's a reason design trends have been shifting toward hamburger menus for smaller layouts - it's the best design choice for usability and lack of confusion once people get used to what the hamburger icon means.
        huebomont 8y ago
        That's all stuff for the designer and content to determine. But if there's room, it's always better to show the user the choices they have than not.
  - runako 8y ago
    > 900px is not normal - that's tiny by today's standards. Wait what? That's tiny for a screen, but not for a (resizable!) browser window. Here's a shout-out for folks like me who run browser windows side-by-side.
    - mdorazio 8y ago
      Side-by-side windows are simply not used by normal users, which the vast majority of websites are designed for. The real question here is why don't you have a second monitor?
      - huebomont 8y ago
        uhh most users don't have a second monitor. and you don't just design for "most." quite a lazy mindset around here.
        mdorazio 8y ago
        The mindset around here is "everyone should design things for my extremely specific use case that 99% of users don't share". Find me stats about the % of users with desktop browser windows narrower than 900px and then we can talk.
        marssaxman 8y ago
        The mindset around here is "everyone should stop overdesigning their sites so that they only work for people in the peak of the bell curve and needlessly exclude all the less-common use cases, of which mine is an example". The web works better when site designers try to exert less control over it. Who are you to tell me how wide my browser window should be?
        runako 8y ago
        From this Show HN yesterday, nearly 25% of visitors had windows narrower than 900px: https://simpleanalytics.io/simpleanalytics.io https://simpleanalytics.io/simpleanalytics.io Most of those visitors are likely coming from HN, a community of people who are more likely than most to have multiple monitors. For the record, I multi-monitor at all my stationary worksites. But I don't carry external monitors on planes, airports, coffee shops, etc.
alehul 8y ago
Would have to search to find the exact studies, but it's been found that a hamburger menu will lower engagement and result in shorter user sessions (particularly, the user will visit less pages). The intuitive answer as to why is that you're burying a very important navigation menu by making it an extra click away (and hidden from view by default). Anecdotal side note, but when I was working on a startup in some industry, we found that our largest competitor by an order of magnitude had a navigation bar at the bottom in their mobile app, while everyone else in the space used the hamburger menu. The experience made it seem like this is common knowledge at the higher levels of app design. Even Apple has come out and explicitly spoken against the hamburger menu as a design element for iOS apps, and instead recommends tab bars.
liveoneggs 8y ago
since I don't use facebook I didn't know you were supposed to click on them until I started seeing articles about how bad they were. It opened a whole new world of menus.

It seems to trigger even on non-mobile devices. If I shrink my viewport to a normal width (900ish pixels) the entire site is basically unusable. :/

baddox 8y ago
Most modern responsive design doesn't specifically target mobile vs. non-mobile devices, but rather simply the width of the browser window. In my experience a width of 900px is generally considered pretty low for a desktop browser, and toward the high end for tablets and large smartphone. Bootstrap, for instance, uses 992px as the low end of its "large" media query, which is intended for desktops.
mdorazio 8y ago
900px is not normal - that's tiny by today's standards. The only plausible alternative at a width that small would be to shrink the size of the text in the menu, otherwise it simply won't fit. Doing that would be worse to me for usability than switching to the hamburger.
- matchbok 8y ago
  Sorry I don't think you're correct here. There is a ton of wasted space here. https://imgur.com/a/COfKBYM https://imgur.com/a/COfKBYM Definitely room for an actual menu there. Either way, a hidden hamburger menu makes 0 sense on a desktop environment anyway, no matter how much space you have.
  - mdorazio 8y ago
    And I don't think you're correct. There are 5 menu items + log in + the API docs button on the main header. If you want all those to fit in a sub-standard width page, you're going to end up sacrificing readability in text. If you want to propose removing a menu item to make more space, that's an option, but just saying "I don't like the hamburger - they could fit the menu somehow" is not helpful.
    - huebomont 8y ago
      What you do is fit the important stuff and hide the rest under a "more..." just because it ALL can't fit doesn't mean hiding everything is the only solution.
      - mdorazio 8y ago
        What is "important" in this context? Resources and About? Do you just hide stuff under "More" from right to left as you run out of space? How many people are actually going to click or hover on "More" to find out what's under there? There's a reason design trends have been shifting toward hamburger menus for smaller layouts - it's the best design choice for usability and lack of confusion once people get used to what the hamburger icon means.
        huebomont 8y ago
        That's all stuff for the designer and content to determine. But if there's room, it's always better to show the user the choices they have than not.
- runako 8y ago
  > 900px is not normal - that's tiny by today's standards. Wait what? That's tiny for a screen, but not for a (resizable!) browser window. Here's a shout-out for folks like me who run browser windows side-by-side.
  - mdorazio 8y ago
    Side-by-side windows are simply not used by normal users, which the vast majority of websites are designed for. The real question here is why don't you have a second monitor?
    - huebomont 8y ago
      uhh most users don't have a second monitor. and you don't just design for "most." quite a lazy mindset around here.
      - mdorazio 8y ago
        The mindset around here is "everyone should design things for my extremely specific use case that 99% of users don't share". Find me stats about the % of users with desktop browser windows narrower than 900px and then we can talk.
        marssaxman 8y ago
        The mindset around here is "everyone should stop overdesigning their sites so that they only work for people in the peak of the bell curve and needlessly exclude all the less-common use cases, of which mine is an example". The web works better when site designers try to exert less control over it. Who are you to tell me how wide my browser window should be?
        runako 8y ago
        From this Show HN yesterday, nearly 25% of visitors had windows narrower than 900px: https://simpleanalytics.io/simpleanalytics.io https://simpleanalytics.io/simpleanalytics.io Most of those visitors are likely coming from HN, a community of people who are more likely than most to have multiple monitors. For the record, I multi-monitor at all my stationary worksites. But I don't carry external monitors on planes, airports, coffee shops, etc.

alehul 8y ago

Would have to search to find the exact studies, but it's been found that a hamburger menu will lower engagement and result in shorter user sessions (particularly, the user will visit less pages). The intuitive answer as to why is that you're burying a very important navigation menu by making it an extra click away (and hidden from view by default). Anecdotal side note, but when I was working on a startup in some industry, we found that our largest competitor by an order of magnitude had a navigation bar at the bottom in their mobile app, while everyone else in the space used the hamburger menu. The experience made it seem like this is common knowledge at the higher levels of app design. Even Apple has come out and explicitly spoken against the hamburger menu as a design element for iOS apps, and instead recommends tab bars.

liveoneggs 8y ago

since I don't use facebook I didn't know you were supposed to click on them until I started seeing articles about how bad they were. It opened a whole new world of menus.