Heresy: put your sidebars to the right
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:
- Hamburger menus are evil and they should be avoided at all costs.
- Data shows hamburger menus in mobile apps cause low ratings.
- Hamburger menus are difficult to reach / activate in a mobile interface.
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.
A two-part dogma, and my two-part heresy
DOGMA.1: hamburger menus are evil and they should be avoided at all costs
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?
HERESY.1: hamburger menus are useful and they should be used whenever possible
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:
- Expose the few — let’s just say 3 to 5 — most important bits (e.g.: a tap-bar / bottom-bar with actions, navigation items, …).
- Organize the second most important ones (e.g.: tabs, cards, in-canvas navigation, carousels / wizards, …).
- If some more remain, put them in a off-canvas navigation menu and use a de-facto standard icon on the toggle button:
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.
DOGMA.2: navigation belongs to the left side of a screen
If you read this far, chances are you know about the F-Shaped Pattern For Reading Web Content.
- Implication: navigation should go to the left, so users will easily notice it.
- Bonus: a left navigation sidebar offsets the main content, which ends up in more central, prominent, position.
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.
HERESY.2: navigation belongs to the right side of a screen
Fact: a year after the publication of “F-Shaped Pattern For Reading Web Content”, someone invented modern smartphones and now we are talking about Mobile First.
On a desktop web page you can rightfully expect to see a menu / sidebar / navigation thing on the left, because:
- That’s where you tend to look first: on the left.
- Occupying some space on the left makes the main content end up in a more central position, and that’s certainly a win.
But in a mobile app, or in a mobile version / view of a web page:
- The narrower the screen, the more likely becomes that you’ll be able to quickly scan a whole row with just one glance, the less important becomes putting a menu to the left.
Think of how we often center logos in a mobile view, instead of putting them to the classic left side. - You don’t need to offset the main content to make it more central and prominent because it already spans the whole screen.
- Statistically we are talking about right-handed users, who use their right thumb most of the time they spend on the page.
If you divide your phone’s screen in four quadrants, and try to reach each one of them with your right thumb while holding the phone with your right hand, you’ll find the least comfortable quadrant to reach is the top-left one and the most comfortable ones to reach are the top-right and bottom-right ones.
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.
Originally published at www.williamghelfi.com on May 15, 2016.
