3

In his article Zoltan Kollin provides several alternatives to hamburger menus. Removing app solutions we're left with:

More

Show primary options, hide others under "more".

enter image description here

Progressively collapsing

On smaller screens, show whatever you can and hide everything else under "more".The bigger screen, the more items are visible.

enter image description here

Scrollable navigation

Swipe right to see more options.

enter image description here

Now the question is there any research (A/B tests, etc.) about which of these works best on websites? Is there any research about how better these vs hamburger (or even worse?).

Improve this question
2
  • I think there are plethora of answers, and it is more a matter of googling for "UX patterns menus", "UX patterns navigation" etc. to find some inspiration. Plus, if you search this site you will find this question was asked many times (and answered, though never fully, as given the nature of the problem there always will be another option).
    – Dominik Oslizlo
    Apr 19, 2017 at 8:13
  • @DominikOslizlo, my question is rather about how do these work vs hamburger (e.g. A/B tests, research) than about alternatives per se.
    – Runnick
    Apr 19, 2017 at 8:19

3 Answers 3

Reset to default
3

The Nielsen/Norman Group have done some research into this:

https://www.nngroup.com/articles/hamburger-menus/

Summary: Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases.

Our quantitative usability testing of hidden menus (such as hamburger icons) and visible menus (such as links across the top of pages) reveals that:

  • Hidden navigation is less discoverable than visible or partially visible navigation.

    • When navigation is hidden, users are less likely to use navigation.
    • If people use hidden navigation, they do so later in the task than if it were visible.

  • Hidden navigation provides a worse user experience than visible or partially visible navigation does, in both mobile phones and desktop user interfaces. This finding holds true across multiple UX metrics including users’ assessment of task difficulty, time spent on task, and task success.

  • On desktops, hiding navigation degrades the experience and the navigation discoverability more than it does on the phones.

  • Hiding the navigation mostly affects content that is not directly accessible through an in-page link.

Improve this answer
4
  • This article is the de facto answer for this question. However, our own testing has shown that nowadays, peaple is lost if they don't see the hamburger icon or similar, with average responses of up to 2 seconds slower. I think the explanation is users got educated to look for this element, thus not having it causes friction.
    – Devin
    Apr 19, 2017 at 14:53
  • 1
    @Devin At the end of the NN/Group article (it was published last year) they say the following "If your site has more than 4 top-level navigation links, the only reasonable solution is to hide some of these. We did find that the usability penalty imposed by hidden navigation is very present on mobile, but it is smaller than on the desktop. Thus, we recommend making this design tradeoff because the usability of an expandable navigation menu is far better than that of alternative designs", so I am not surprised your own testing suggested something different.
    – SteveD
    Apr 19, 2017 at 15:06
  • gotcha :) As a matter of fact I didn't follow the link, I just thought it was the same they had for years so didn't bother to check and didn't see that last part. However, we found this even with fake apps where we had only 2 navigation elements, yet there was a 2 seconds average, with ranges going from a few milliseconds to 7 seconds. I'm publishing a paper on these findings (sadly, in Spanish) around mid-May, but if the occasion arises, will try to share the most important items here
    – Devin
    Apr 19, 2017 at 18:03
  • @Devin so in short: from your experience people now look for hamburger on mobile? When they face alternative design like in example, it's actually slower than hamburger? is this only phone behavior, or also on tablets?
    – Runnick
    Apr 22, 2017 at 16:52
0

Hamburger menus often times are less efficient than other menu types, see this article for example.

I've noticed in my personal work that hamburger menu are never the solution, a bottom navigation bar is mostly what works best for the websites I work on, but you'll have to test that on your own site to determine what works best for your visitors.

Also, see this answer on a related question here on UX.SE

A good alternative would be a bottom menu with a maximum of 5 items in it. Here are some examples:

Spotify menu

enter image description here

Facebook menu

enter image description here

Various other menu's

enter image description here

Improve this answer
7
  • Thanks. Those are great examples. I'm targeting websites though and bottom navigation bar with icons is not that common pattern on the web.
    – Runnick
    Apr 19, 2017 at 11:09
  • @Runnick The same type of menu can be used at the top of the screen though, which is quite common in websites. Furthermore, it's more user friendly to have a menu at the bottom of the screen, which is why a lot of apps use this nowadays, and quite a few websites are moving in that direction aswell. I'd atleast test it if I were you! Hope it helps :)
    – MJB
    Apr 19, 2017 at 11:51
  • Spotify as an example of good UX?
    – Devin
    Apr 19, 2017 at 14:45
  • @Devin I'm giving examples of this type of menu, which works well. I'm not insinuating that the entirety of spotify is good UX.
    – MJB
    Apr 20, 2017 at 6:15
  • It was a joke :)
    – Devin
    Apr 20, 2017 at 15:22
-2

it is always the user testing which gives you the proper solution about how your designs would succeed. try incorporating these in your product and conduct user testing

Improve this answer
1
  • 1
    Yes, so my question is about if somebody already did some testing and what they got as a result
    – Runnick
    Apr 19, 2017 at 9:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.