Recently, the ever-insightful Luke Wroblewski – a.k.a. Mr. Mobile First – shared a couple LinkedIn statuses about how the hamburger menu and attached sidebar are going to vanish from mobile apps / views.
Most comments went like:
I beg to differ, I have no data sheets to show you, I'm most certainly wrong, but here's my thoughts on the subject at hand.
Hamburger menus effectively hide navigation. Users don't know what they can do in the page, they see no options.
My mother doesn't get what those stacked lines stand for, and she will successfully ignore them every single time.
There are better options. If you give your navigation a proper structure, and organize it with a tap-bar / bottom-bar, cards, tabs, you should always be able to avoid the use of a hamburger menu.
Hamburger menus are cheap. I mean, we even call them names. We don't call them "menus", or "sidebar activators", nor "off-canvas navigation"; no, we call them "hamburger menus".
If something's got itself such a silly name, it must be bad. Right?
The key here is the word possible. Off-canvas navigation exists for a reason, it's a tool with a purpose. And you should use it.
A mobile app, a website – anything dealing with information, really – should have some degree of well-thought information architecture. The basics are easy:
You are not hiding any options. The most important actions are exposed, immediately recognizable, and easily reached. The second most-important ones are also exposed. But you have more, and you should use an off-canvas navigation for those.
Wait, I'm playing heretic here, so I think you should actually use an off-canvas navigation for everything.
Yes, expose the important options, then repeat them in the off-canvas navigation alongside the other options.
Sitemaps are overkill in a mobile view, but thank god we have off-canvas navigation patterns and in mobile views we should use them instead of sitemaps.
If you read this far, chances are you know about the F-Shaped Pattern For Reading Web Content.
This is all so a win that one should never, ever, dare to question it. I mean, it's as clear a fact as drinking water is necessary for staying alive.
Fact: Navigation goes to the left. And this is it.
On a desktop web page you can rightfully expect to see a menu / sidebar / navigation thing on the left, because:
But in a mobile app, or in a mobile version / view of a web page:
And that's why – whenever I have enough menu items to justify the use of
a hamburger menu off-canvas navigation – I put it to the right.
I've also been known to put navigation to the right in web page views destined to desktop browsers, but that story is for another time.