20

I have a client who INSISTS on using TWO hamburger menus in their app: one in the top left, one in the top right. This is to basically mirror functionality from two related websites: one uses the left hamburger, the other the right.

This seems to violate design principles that I intuitively know but cannot verbally express.

But can anyone think of how I can explain why this is wrong and indicates some fundamental misunderstanding of UI design?

Improve this question
7
  • 1
    What does each icon do when you click on it?
    – Izhaki
    Commented Apr 16, 2015 at 23:31
  • 1
    How about a hotdog to go with that? or 2. This is a good example to not doing everything the client asks you to do. Maybe Ask the client to give a logical reason.
    – Blue Ocean
    Commented Apr 17, 2015 at 3:28
  • If your client absolutely insists on it, why not evenly distribute the content between the two sides and have one button that opens both drawers when pressed? Its his loss, remember
    – blaizor
    Commented Apr 17, 2015 at 4:30
  • 2
    How would a user have any clue as to which one to tap at any given time? When a client insists on something stupid, if viable, see if you can do some ad-hoc user testing. Sometimes data will change their mind.
    – DA01
    Commented Apr 17, 2015 at 5:51
  • Check Material's action buttons for a better alternative to those 2 hamburgers, you can easily replace the hamburger icon for something better, and you can expand the menus in different ways, like drawers or bottom sheets
    – Devin
    Commented Apr 18, 2015 at 14:51

5 Answers 5

Reset to default
19

To expand on Tohsters answer, one hamburger menu is already detrimental enough so adding a second one is only going to confuse matters more.

If the client cannot be persuaded to follow other avenues then it's probably best to start looking at ways to make the best of a bad situation. (this blog post expands on this https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/)

  • Adding "menu" next to the hamburger. This can increase user interaction but does not fix the problems with the menu itself.The following give some numbers in the increase in interaction. (http://moovweb.com/blog/hamburger-menu-handy-tool-or-useless-icon/) (http://exisweb.net/menu-eats-hamburger)

    Summary : Adding menu to the hamburger, or just simply menu on it's own increases click rate. An example of this is an image taken from exisweb.It's not a huge difference but it's enough to convince you that simply adding menu will increase interaction.

    enter image description here

  • Tab bar or side bar. I would say at the minute for a resource heavy
    site with a lot of content a sidebar is the best option at the
    minute, whereas a tab bar with limited menu options is by far the
    best option for a forward facing site where you need to instantly
    show the user your most important features quickly and obviously. (http://kong.vn/ios-navigation/)

The aspects to take into consideration are :

  • Space taken

  • Visibility of items

  • Accessibility

  • Getting back to a starting point

  • Action button / performing an action.

Taking into account of these, Tab bar can be much more beneficial in all aspects except space taken, in which it will always be a fixed element on your page (otherwise it'll just be another side bar!). Not to say side bar doesn't have it's place as if you have a lot of content and actions, they have to be displayed somehow.

I would give more links but my reputation currently prevents me from doing so, this is something I did some research on before but I was still not able to get enough solid evidence to move away from a hamburger menu for our mobile site at the minute.

You are the professional in this situation so it's your job to do your best to convince him this isn't the smartest avenue to go down, alternatively if this is just one job and not a repeat task it might be easier to grit your teeth and split the content on each side with one hamburger menu.

Improve this answer
3
  • 2
    If you have more links then you can paste them as plain text and we can amend them to links for you. More research evidence is always going to be useful! Can you also cite the relevant summaries of those links? If the links go down (which happens annoyingly often on the web) then this answer isn't really going to help anyone anymore (we really need answers self-contained with links as the citations rather than just links).
    – JonW ♦
    Commented Apr 17, 2015 at 8:43
  • 1
    Certainly. I have enough reputation now so I can post the rest with a summary of the findings.
    – ChuckaniPhone5satyourheid
    Commented Apr 17, 2015 at 9:18
  • This is a fantastic answer, enough so that I removed the single hamburger from my app immediately after reading it. Users instantly liked the simpler interface!
    – Lee Harrison
    Commented Apr 18, 2015 at 16:41
15

This is a terrible idea

You're right to be suspicious.

One hamburger already sucks...

Hamburger menus don't test very well to begin with. Here is Apple's UX lead on the subject, and more articles here and here, but to summarize:

  • They hide links and content from the user instead of presenting the user with direct options.
  • The hamburger icon is placed at the top of the screen where users tend to ignore it.
  • The hamburger icon is not familiar to many users (but this is changing).
  • They facilitate sloppy design because designers can pile loads of links and content carelessly into the drawer.
  • They can be hard to reach for mobile users with larger screens when they are placed on the top right or (worse) top left.
  • They test poorly in A/B and other user testing. See this article which has additional links you can follow.

...and two hamburgers are even worse

Each one of the reasons above is made worse by adding another hamburger menu. In addition to facilitating more hidden content and sloppy design, you will add more ambiguity to users who now have to decide/remember/decode which menu is appropriate for what feature.

For some alternatives to the hamburger menu, this question may be helpful:

Improve this answer
3
  • 3
    +1 Good sum up and good backing articles. Happy 10k btw.
    – Alejandro Veltri
    Commented Apr 17, 2015 at 2:38
  • This answer certainly isn't wrong, but I'd take the linked articles with a large grain of salt. Whether a hamburger menu is good or bad is heavily dependent on context. Sometimes it really is a good solution.
    – DA01
    Commented Apr 17, 2015 at 5:55
  • 1
    You're right. I've used hamburgers before also. This answer was intentionally inflected because the OP asked for scaffolding to support an argument against 2 hamburgers,that's all
    – tohster
    Commented Apr 17, 2015 at 6:32
5

I think this is a good example for asking the question "What does the client need?" vs. "What does the client want?". So if I understand your question correctly, your client wants to present two websites under one address and probably also under one one design.

Whether this is a good idea or not is not within the scope of my answer – for now I just try to understand what he/she actually wants – and resulting from that what he/she actually needs.

So IMHO the task seems to be to find a layout / navigation structure, that a) 'explains' to the user that they're dealing with two different website and at the same time makes the both websites usable / navigatable.

So what you could do is to e.g. switch between the two sites via tabs – then you couls show only one Hamburger Icon at a time and try to explain to your client, that the other Hamburger is 'hidden'.

  • site A) is active –> Hamburger A) is shown

enter image description here

  • site B) is active –> Hamburger B) is shown

enter image description here

Of course this might bring along new problems / new questions: What is displayed on the 'inactive card'? Can you still see the inactive / greyed-out Hamburger Icon of the inactive Site – or just a background color / logo etc.? But maybe thinking about the task differently – ("two websites in one" rather than "two Hamburger Icons on one site") – can bring up other ideas and lead to other solutions than just having two Hamburger Icons.

Improve this answer
2

Here is some advice for you:

  1. First, confirm to your client that you respect his/her opinion. Don't argue!
  2. Second, clarify with him/her that you create a product for users, not for yourselves.
  3. Third, organize usability testing and invite your client to participate.
  4. Then, create two prototypes, one the way your client wanted, and other the way you want. Or maybe have just one prototype with two menus.
  5. Last, conduct usability testing in your client presence. Or share with him your findings after.

No one likes to confirm that he/she is wrong after someone pointed on this. But if we found out it by ourselves, it's much easier. Make your client find out that having two menus is not the best idea because of research you have done together. Make it his/hers decision, not yours.

Hope it helps. Good luck!

Improve this answer
2
  • 1
    Good answer. Showing user tests is a great way to convince clients.
    – Sam Pierce Lolla
    Commented Apr 22, 2015 at 1:58
  • 1
    There's another piece you may be hinting at... our job as designers is to create UI that solves people's problems. If you allow clients to dictate the solutions, you're cheating them out of the value they're paying for: an expert "UI maker". Showing the client their concerns are heard is essential... now explain to them that this decision is yours to make, and that they're in good hands!
    – Sam Pierce Lolla
    Commented Apr 22, 2015 at 2:03
0

My two cents:

Two hamburger or shall i say two same navigation model is definitely confusing.

First of all it takes up precious real estate that to when we are dealing with small screen.

Second, navigation is an important aspect and when the user is shown two redundant ways to navigate, she will get confused to which one should be followed. No amount of text or demo would be helpful here as this is completely against the users' mental model. Bringing real life example- its like bringing a traveller to crossroad and telling her both the roads lead to the same destination, there is no difference in distance, landscape etc, now choose which way you want to travel. Why add this confusion.

Hope this helps. :)

Improve this answer

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.