Jul 20, 2017
Glossier’s Mobile Navigation
Why We Abandoned The Hamburger Menu
Ever wonder why your keyboard is laid out the way it is?
It must be because someone smart, at some point, spent a lot of time comparing endless combinations of different orders of letters, optimizing for the highest typing speed, right?
The QWERTY layout of modern keyboards (named for the order of the first six keys on the top left letter row) became popular with the success of a Remington typewriter in 1878. It’s widely accepted that this particular layout became a convention, not as a result of detailed testing and optimization, but because of Remington’s impressive sales numbers and copycat competitors that raced to manufacture similar models.
This is counter-intuitive, because we generally assume that conventions like QWERTY are a result of superior performance, a “survival of the fittest.”
Steve Krug once said: “As a rule, conventions only become conventions if they work,” but I’ve come to realize that this is a somewhat idealistic view. Instead, I would contend conventions become conventions if enough people assume they work. While many are grounded in thorough research, others are simply based on companies copying a seemingly successful competitor, assuming that whatever they are doing must be the best possible solution — Remington’s sales are skyrocketing, so the QWERTY layout must be the way to go. This halo effect, the tendency for an impression created in one area to influence opinion in another area, is a common cognitive (and design) bias that contributes to the emergence of conventions.
Don’t get me wrong — it’s generally good practice to adhere to conventions in design. They can be incredibly valuable in helping users navigate your product and more often than not, it’s wise to respect them. But there are some cases in which they emerge for the wrong reasons and aren’t backed up by any real evidence.
The hamburger menu is one of them.
The hamburger or sidebar menu is a list icon typically placed in the top left corner of a user interface.
Its three lines vaguely resemble a bun-burger-bun stack, hence the delicious name. It gained popularity on mobile sites and native apps as designers were trying to fit elements from the desktop navigation into much smaller spaces.
At first glance, it’s a seemingly elegant solution. You can add an endless number of navigational elements and options into the side drawer while boasting a clutter-free, Marie Kondo’ed main navigation. Designers are happy. Business people asking for more links are happy, too.
Unfortunately, adding more and more links to the side navigation is the equivalent of stuffing things under the couch in an effort to clean up your apartment. It appears immaculate, but really, you’re sitting on top of a huge mess.
The main issue with the hamburger navigation is that it assumes users would either know all treasures hidden behind it or take the time to learn about all of their available options. But that’s not how our minds work, and it’s not how users actually navigate.
Think of it this way: When was the last time you took the time to read a user manual before testing out a new hardware device you bought? No one opens the manual unless they run into a major problem. The average human will push buttons and turn knobs right away. The same is true for websites. We click or tap on the first thing that even vaguely resembles what we’re looking for making the hamburger navigation the equivalent of a printed user manual for your site.
Like most e-commerce companies we used to have a hamburger menu on Glossier’s mobile site. We simply assumed that it would be the best solution, given that nearly all of our peers were doing the same. Simpler times.
We were able to take every single link from our desktop navigation, organizing them neatly in a drawer:
Sure, finding the product you were looking for was a few taps away, but really all you had to do was to open the side menu, open the right sub-category, and there it was!
Our mobile conversion rate was lacking far behind other devices, and user interviews and recordings of visitors navigating our mobile site revealed why: Especially new users had a hard time figuring out what we were actually selling. They were able to recognize that we’re a “beauty company”, but the product lineup was not immediately clear to them. And they weren’t opening the menu unless they absolutely had to.
It made perfect sense. Sidebar menus are simply not glanceable and require effort on the user’s end. And hidden content equals less discoverability. Additionally, navigating anywhere requires at least one extra click/tap. Enough reasons to look for alternatives.
We quickly realized that other e-commerce sites were not a very promising source of inspiration. The hamburger was ubiquitous—it had become a design convention that no one in our field was challenging it seemed. There had already been a few prominent examples of media companies and social networks ditching it and an abundance of articles and research arguing against sidebar menus as a primary navigation, but e-commerce hadn’t caught on yet.
This is why we looked at Facebook rather than Amazon, Instagram rather than Target. The result was an exposed tab bar that made our mobile site look a bit more like a native app than a responsive web app:
The menu is sticky, so it’s always right at your fingertips. And the categories open a product list with images (our product names aren’t the most obvious to new users), mimicking the experience of shopping in a physical store and grabbing products off a shelf:
The new menu also forced us to eliminate existing links, streamlining and decluttering the experience. The results were positive across the board: A lower bounce rate, higher conversion rate, and higher average order value on mobile devices. Our assessment: Hamburgers are food. Don’t play with them.
Of course every business is different and there’s no one-size-fits-all approach to user experience design. A sidebar menu has its advantages (It makes a great secondary navigation for example!) and you might be better off with a hamburger than a tab bar. But don’t assume it’s the right solution just because everyone else is doing it.
Key takeaways:
- Design conventions are important, but sometimes they emerge for the wrong reasons. Make sure to test and validate what works best.
- The halo effect is real. Benchmarking is an important part of research, but don’t assume a feature or design works just because a successful competitor is using it.
- The hamburger navigation has seen a steep decline in the industry as a whole but it remains stubborn in e-commerce. It’s time to catch up.
- Embrace constraints and use them to your advantage. It’s a good thing if you can only fit a limited number of links in your mobile navigation layout.
- Whatever you decide on, make sure to test it. The sidebar menu didn’t work for us, but it might just be the right solution for you.
More on hamburger menus:
