Another post on mobile menus?
And Conversion XL posted the excellent mobile menu A/B testing study just last month. (The testing gain amounts to a few hundred thousand dollars of mobile sales a year, not bad).
So why another post?
The Conversion Scientist Brian Massey summed up on Twitter why mobile menus deserve attention, testing and as many blog posts as the Interwebs can contain about fixing them.
Mobile Menus: Hold the Hamburger?-GetElastic: Comments:It’s like 1995 on the mobile web right now. In the 90s,… http://t.co/qRqpNRNFUd
— Brian Massey (@bmassey) October 21, 2014
Dude, ‘it’s like 1995 on the Mobile web right now.’ Srsly.
Sure, mobile websites look a lot more slick than desktop sites in the 90s – some even more beautiful than their current desktop companions. But there’s a glaring usability problem on many sites. The most important navigational tool of your entire mobile experience too often is the most subtle piece of the mobile storefront.
Jakob Nielsen advises that icons need to first and foremost communicate meaning and be fast to recognize. Besides being hard to spot, the 3-bar menu is still not understood by enough mobile users.
Six worst-offending hamburger menu mistakes
Though not universally recognized yet, hamburger (or as I prefer to call it, the “Adidas”) is the closest we have to a conventional menu icon. The classic stack looks a little something like this:
Some designers take creative license and invent their own icons. Poppin combines the menu with search, which looks similar to the cart icon. Users may not intuit that the icon serves both search and browse (which is never seen on desktop).
Some sites use a 3-dot-stack, like Chairish. In Chairish’s case, this is not the category menu (that is found under ‘Browse’), rather it’s a drop-down for the Sign In link. Because it’s placed in the conventional top-left position for global navigation, it’s guaranteed to trip up a lot of visitors. Sign In is typically top-right.
In fairness, the Chairish marketplace needs to separate Sell and Browse. Text links may serve as a better navigation option than a compact menu.
DarbySmart’s skinny burger with dropdown indicator is creative, but might not be recognized by enough users.
The above is an example of unconventional placement, as is WebUndies, which places its menu to the right of the search box, where it may be confused with a search “Go” button.
Conversely, QVC’s left-of-search-box placement may be subject to banner blindness, as other design elements are more colorful and prominent. (Though points for labeling the icon and making it look like a clickable button).
Competition with other elements
It’s not farfetched to assume many visitors will recognize the menu link left of Farfetch’s logo. Some may not understand it’s an actionable element, and may assume it’s part of the logo.
Missguided’s Shopping Bag, Search, Country Selector and Currency links are all more prominent than the menu, which may leave visitors misguided.
The RealReal menu competes with Consign (which is text-labeled) and high level category links (text-labeled).
Hatchery’s menu competes with nothing, which may be its own problem. Grouping a menu with at least one other clickable tool (cart or search, for example) gives context, rather than looking like a piece of flair.
Contrasting colors for text and calls to action have been critical to web usability for a couple decades, so it’s surprising to see them ever used on mobile.
Aerolife’s menu is styled like a bubble, which looks like the logo’s and homepage’s bubbles, and has an oddly shaped hamburger. If a visitor does recognize it as a menu, it’s unclear whether the menu or the “Explore” button is the best thing to click.
Norwegian Rain commits a few sins here. It’s logo is nearly invisible (light on dark, very faint), as is its hamburger.
As the home page image swaps itself out (carousel), the situation worsens (can you spot the menu or read anything?)
The problem persists on category pages.
Not all sites use a hamburger menu. In fact, of the Internet Retailer Hot 100, 23 sites had no menu icon at all (trust me, I checked each one out myself).
KLWines, for example, uses a home page menu.
Drill down by category and you can navigate by breadcrumb. But land on a product page, and there’s no way out. Brutal considering much mobile traffic will come directly from search, social and email to product pages.
Other sites’ hamburger menus disappear for no apparent reason.
Phillip Lim’s minimalism leaves customers stranded on product pages.
Designing Your Menu Test
Even if you don’t commit the above sins, consensus in the conversion community is you should be testing mobile menus. Menu labels tend to win over hamburger icons (as in this reader case study shared on GetElastic). So make sure your test includes a few different approaches to styling and at least one variation that uses a text label.
Measure bounce rate, page views, time on site, engagement with the menu (vs reliance on search) and of course revenue and conversion rates.
Need inspiration? Check out these approaches to mobile menus. Consider testing several of these.
The State of Mobile Commerce [Infographic]