5 ms·

What alternatives are there to the ubiquitous "hamburger menu" for navigation that look good on both mobile and desktop? Does anyone think that that static lin

by platz 8y ago

What alternatives are there to the ubiquitous "hamburger menu" for navigation that look good on both mobile and desktop? Does anyone think that that static links are better than flyouts?

coldtea 8y ago
>Does anyone think that that static links are better than flyouts? Only end users, but who cares about them?
- wlesieutre 8y ago
  I wanted to check out the menu at a local pizza place the other day and this was my experience: 1) Menu link, one of two important things on the entire site (the other one is hours) is buried in a hamburger menu 2) The menu is implemented as a fixed-size page designed for an iPad Mini (which they use as menus at the tables) 3) Different types of items (appetizers, entrees, pizza, drinks, etc) are in a horizontal bar across the top, with large font size. Since it's a fixed iPad Mini width, this scrolls horizontally. Less than half of them are visible at a time. 4) Individual items are listed by name, thumbnail photo, and price for each size. Want to know what toppings are on their "Eighth Street" pizza? Click on it! Then click to close that and click on the next menu item. Do this for each pizza, then try to remember what the one that sounded best was called, and probably go through half of them again to get back to it. Super efficient way to find which pizza you'd like. I think the restaurant understands in concept that they should have a website, but I don't think they care to think about it beyond that. EDIT: I just revisited this and you actually can get to the menu without the hamburger link. It's designed as one of those pages where the content is centered (vertically and horizontally) with a bunch of white space as a full page thing, so it doesn't look like you'd need to scroll, but there's actually more content (including a second link to the menu) if you try scrolling down. I'll blame this partly on Apple for taking away the always visible scroll bar indicators and partly on this stupid web design trend of giant "paginated scrolling" pages that don't look like there's anything running off screen that you'd need to scroll to.
  - titanomachy 8y ago
    Or, the cost of anything but the most basic development is prohibitive and their margins are too low.
    - wlesieutre 8y ago
      I suspect they've locked themselves in to whatever crappy menu system the iPads run on. Works well enough in-house, and the website's menu existence is an afterthought. Not great since they do takeout, but for the most part I think it's a sit-in restaurant. If the menu vendor had bothered with responsive design it wouldn't be half as bad, but "here's an iPad viewport centered in your browser" must have meet the contractual requirements. A $10/month Squarespace subscription is pretty damn cheap and IIRC you don't need to know much of anything about web development to set that up.
    - coldtea 8y ago
      Do they also cut corners with their kitchen? And the cost of web development has never been lower.
      - rat9988 8y ago
        Why do you resort to such sophism ?
        coldtea 8y ago
        What exactly is the "sophism"? That the cost of web development has never been cheaper is a fact. That the restaurant website is important -- that's how customers find out about it -- and shouldn't be left behind because of "small margins" is also not very controversial. If the margins are so small as not to afford some $1000 (or less) for a decent website, then what other corners have been cut?
      - dwaltrip 8y ago
        It is likely they don't realize or understand the actual issue. The decision-makers probably don't ever look at the menu on a mobile device. Even if they recognize that there is an issue, they may be intimidated by the prospect of finding someone who can fix it. This is in stark contrast to kitchen-related matters, which they are likely much more experienced at identifying and dealing with.
wtallis 8y ago
> What alternatives are there to the ubiquitous "hamburger menu" for navigation that look good on both mobile and desktop? Step one is to stop trying to make the same UI for mobile and desktop. You're guaranteed to end up with a result that is insultingly bad for at least one of those segments of your user base.
- deleted 8y ago
  [deleted]
- hombre_fatal 8y ago
  The issue is that you can always show more options on desktop. On mobile, you naturally have to choose fewer menu items to display. Where do you put the rest? The worst is when the mobile version doesn't have those additional menu items at all, anywhere, and certain things are simply impossible to do on mobile. Tossing the lower priority items onto an additional page (hamburger menu) when screen space is limited is often the fair and simple trade-off. "Don't use hamburger menus" is often coupled with the hand-wavy "just create novel mobile UI that doesn't need it", but the reality is that the items in hamburger menus usually don't need their own top-level button on a small screen at all. That's why they're hidden behind a click. They aren't worth the clutter, but they're still things a user may want to do. In my experience, seeing that just about everything uses the hamburger menu, like the Kindle, it's a concession users are willing to make in order to use a small device. What exactly is the trade-off here without downsides?
  - platz 8y ago
    I would not characterize the "hamburger menu" as an "additional page". I would call that a "flyout". An additional page means that you navigate away - so you'd then be navigating to a sub-page that displays more links, if you did it that way.
    - hombre_fatal 8y ago
      Agreed, I phrased it that way because, for some reason, an additional page seems more agreeable to people in these discussions, yet a hamburger menu is really just a much more convenient take on that: a quick flyout that only covers part of the screen.
elicash 8y ago
Link bars: http://growthrock.co/ecommerce-mobile-home-page-navigation/ http://growthrock.co/ecommerce-mobile-home-page-navigation/
- woogiewonka 8y ago
  Nice to see an article by Devesh linked here.
ken 8y ago
Have you used iOS? Apple rarely if ever uses hamburger menus in any of their software.

by platz 8y ago

What alternatives are there to the ubiquitous "hamburger menu" for navigation that look good on both mobile and desktop? Does anyone think that that static links are better than flyouts?

coldtea 8y ago

>Does anyone think that that static links are better than flyouts? Only end users, but who cares about them?

wlesieutre 8y ago
I wanted to check out the menu at a local pizza place the other day and this was my experience: 1) Menu link, one of two important things on the entire site (the other one is hours) is buried in a hamburger menu 2) The menu is implemented as a fixed-size page designed for an iPad Mini (which they use as menus at the tables) 3) Different types of items (appetizers, entrees, pizza, drinks, etc) are in a horizontal bar across the top, with large font size. Since it's a fixed iPad Mini width, this scrolls horizontally. Less than half of them are visible at a time. 4) Individual items are listed by name, thumbnail photo, and price for each size. Want to know what toppings are on their "Eighth Street" pizza? Click on it! Then click to close that and click on the next menu item. Do this for each pizza, then try to remember what the one that sounded best was called, and probably go through half of them again to get back to it. Super efficient way to find which pizza you'd like. I think the restaurant understands in concept that they should have a website, but I don't think they care to think about it beyond that. EDIT: I just revisited this and you actually can get to the menu without the hamburger link. It's designed as one of those pages where the content is centered (vertically and horizontally) with a bunch of white space as a full page thing, so it doesn't look like you'd need to scroll, but there's actually more content (including a second link to the menu) if you try scrolling down. I'll blame this partly on Apple for taking away the always visible scroll bar indicators and partly on this stupid web design trend of giant "paginated scrolling" pages that don't look like there's anything running off screen that you'd need to scroll to.
- titanomachy 8y ago
  Or, the cost of anything but the most basic development is prohibitive and their margins are too low.
  - wlesieutre 8y ago
    I suspect they've locked themselves in to whatever crappy menu system the iPads run on. Works well enough in-house, and the website's menu existence is an afterthought. Not great since they do takeout, but for the most part I think it's a sit-in restaurant. If the menu vendor had bothered with responsive design it wouldn't be half as bad, but "here's an iPad viewport centered in your browser" must have meet the contractual requirements. A $10/month Squarespace subscription is pretty damn cheap and IIRC you don't need to know much of anything about web development to set that up.
  - coldtea 8y ago
    Do they also cut corners with their kitchen? And the cost of web development has never been lower.
    - rat9988 8y ago
      Why do you resort to such sophism ?
      - coldtea 8y ago
        What exactly is the "sophism"? That the cost of web development has never been cheaper is a fact. That the restaurant website is important -- that's how customers find out about it -- and shouldn't be left behind because of "small margins" is also not very controversial. If the margins are so small as not to afford some $1000 (or less) for a decent website, then what other corners have been cut?
    - dwaltrip 8y ago
      It is likely they don't realize or understand the actual issue. The decision-makers probably don't ever look at the menu on a mobile device. Even if they recognize that there is an issue, they may be intimidated by the prospect of finding someone who can fix it. This is in stark contrast to kitchen-related matters, which they are likely much more experienced at identifying and dealing with.

wtallis 8y ago

> What alternatives are there to the ubiquitous "hamburger menu" for navigation that look good on both mobile and desktop? Step one is to stop trying to make the same UI for mobile and desktop. You're guaranteed to end up with a result that is insultingly bad for at least one of those segments of your user base.

deleted 8y ago
[deleted]
hombre_fatal 8y ago
The issue is that you can always show more options on desktop. On mobile, you naturally have to choose fewer menu items to display. Where do you put the rest? The worst is when the mobile version doesn't have those additional menu items at all, anywhere, and certain things are simply impossible to do on mobile. Tossing the lower priority items onto an additional page (hamburger menu) when screen space is limited is often the fair and simple trade-off. "Don't use hamburger menus" is often coupled with the hand-wavy "just create novel mobile UI that doesn't need it", but the reality is that the items in hamburger menus usually don't need their own top-level button on a small screen at all. That's why they're hidden behind a click. They aren't worth the clutter, but they're still things a user may want to do. In my experience, seeing that just about everything uses the hamburger menu, like the Kindle, it's a concession users are willing to make in order to use a small device. What exactly is the trade-off here without downsides?
- platz 8y ago
  I would not characterize the "hamburger menu" as an "additional page". I would call that a "flyout". An additional page means that you navigate away - so you'd then be navigating to a sub-page that displays more links, if you did it that way.
  - hombre_fatal 8y ago
    Agreed, I phrased it that way because, for some reason, an additional page seems more agreeable to people in these discussions, yet a hamburger menu is really just a much more convenient take on that: a quick flyout that only covers part of the screen.

elicash 8y ago

Link bars: http://growthrock.co/ecommerce-mobile-home-page-navigation/ http://growthrock.co/ecommerce-mobile-home-page-navigation/

woogiewonka 8y ago
Nice to see an article by Devesh linked here.

ken 8y ago

Have you used iOS? Apple rarely if ever uses hamburger menus in any of their software.