Hamburger Icon or MENU
I am writing this post to share a story on using a “Hamburger Icon” or having the word “Menu” for navigation on a mobile site.
A few days ago I was assigned to design the mobile site of the company. I am new in the company as well as in their discussions. I didn’t know what they have already brainstormed and concluded from it.
As many of us, I also used the menu hamburger icon for the menu but my fellow designer told me that this “Hamburg icon” will not be accepted by the top management as they think the menu word is more obvious, (and almost every new designer in the team (including him) have tried the hamburger instead of Menu word) but I was still convinced by the icon as many of the websites uses. But, just to play with it I merged the hamburger icon in the word “MENU”. I am not sure if it was right idea or wrong, but I still like it! haha.
AND…
In the design review, I was asked if I was drunk putting them (icon and word) together!? Hahaha! so this made me think more about it, why they are recommending the “MENU” word more.
I researched on few things to reach out the right position and option for it. below are the few facts I concluded.
Let’s talk about the position first:
According to Steven Hoober’s research(from 2003), The people are touching their phone’s screens or buttons held their phones in three basic ways:
- one handed — 49%
- cradled — 36%
- two handed — 15%
and One-handed use — with the
- right thumb on the screen — 67%
- left thumb on the screen — 33%
Though we chose the LEFT position for us but personally I strongly prefer to have the menu on the right side until unless you have more important thing to put there, such as Shopping Cart icon, Buy button such as apple, nixon or lacoste (you can find more options).
Good references for the designers who are facing this problem:
Fantasy.co (one of my fav agency)
Now the option (Icon or Menu):
According to the Nielsen Norman Group survey on mobile people used the hidden navigation in 57% of the cases, and the combo navigation in 86% of the cases — 1.5 times more.
- Hidden navigation: Navigation links placed under an icon (hamburger)
- Visible navigation: Links shown in a visible navigation bar.
- Combo navigation: Important links visible and other hidden.
So, to fix this problem some people have used the “Menu” word with an arrow next to it instead of hamburger icon. I think it is a midway of hidden nav and combo nav.
Users may don’t pay much attention or don’t bother opening the hidden navigation under the “Hamburger Icon” as it’s an icon which represents the listing, it’s not a dedicated icon for the main navigation. So to increase the visibility of the navigation some sites have used the word “Menu” (with and without down chevron) though it’s still hidden but atleast it is clearly communicating with the person what is HIDDEN :)
Conclusion:
Personally to me, It also depends on the nature of business and the target audience as well for the e-commerce businesses it’s better to have hamburger menu but for the informational websites, I would say the word “Menu” (with a down chevron) would be more useful.
aah… don’t forget the position, right side is much easier to approach.
Polling:
I have started the poll for this, here you can show your preference.
It’s just for 7 days.
Note: It’s my first article so all the corrections/suggestions will be highly appreciated :)
