Why It’s Like 1995 on the Mobile Web Right Now

1995-internetAnother post on mobile menus?

You may recall, GetElastic posted Don’t Make These Mobile Mistakes and Mobile Menus: Hold the Hamburger already.

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.

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

Unconventional icon

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:

hamburger-menu

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).

poppin

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.

stack

In fairness, the Chairish marketplace needs to separate Sell and Browse. Text links may serve as a better navigation option than a compact menu.

browse-menu

DarbySmart’s skinny burger with dropdown indicator is creative, but might not be recognized by enough users.

darbysmart

Unconventional placement

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.

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).

qvc-menu

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.

farfetch-menu

Missguided’s Shopping Bag, Search, Country Selector and Currency links are all more prominent than the menu, which may leave visitors misguided.

menu-missguided

The RealReal menu competes with Consign (which is text-labeled) and high level category links (text-labeled).

realreal

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.

hatchery

Busy backgrounds

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.

aerolife

Norwegian Rain commits a few sins here. It’s logo is nearly invisible (light on dark, very faint), as is its hamburger.

norwegian1

As the home page image swaps itself out (carousel), the situation worsens (can you spot the menu or read anything?)

norwegian-2

The problem persists on category pages.

norwegian-3

Disappearing menu

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.

klwines

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.

kl-hanging

don't-leave-me-hanging

Other sites’ hamburger menus disappear for no apparent reason.

phillip-lim-menu-2

Phillip Lim’s minimalism leaves customers stranded on product pages.

phillip-lim

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.

wine-menu


Related Articles

© 2017 Get Elastic Ecommerce Blog. All rights reserved. Privacy Policy. Site Admin · Entries RSS
The opinions expressed here are of the individuals and do not necessarily reflect the views of Elastic Path.