Don't Make These Mobile Menu Mistakes

Mobile websites have the challenge of cramming a lot of content into a small space, while presenting it in a way that’s intuitive for a user to navigate.

An emerging trend on mobile commerce sites is to use a 3-bar icon to represent a category menu, which may be expandable or jump down to a menu on the home page.

Actionable menu buttons are a fantastic way to bake navigation into every page. Considering the growth in mobile search and that 43% of email is now opened on a mobile device (Litmus), supporting users who land deep and are unfamiliar with your mobile site is critical. The 3-bar icon is a good idea — and may be approaching convention status — but it matters how you apply it to your design.

Do: Tell the visitor where to start

Buckle identifies first-time visitors and calls attention to the menu button. Even if visitors have no clue what the 3-bar does, they know it’s a good place to start, and will soon find out it controls category navigation.

Don’t: Confuse it with your logo

Despite mobile’s growing popularity, Internet users have been trained by desktop sites that top left is logo territory. Showing 3-bar to the left of your logo is a big no-no.

How would first time, search-referred visitors to Discount Dance supply know this is navigation, not branding?

Forever 21′s right-of-logo navigation is easy to understand, but the 3-bar isn’t an obviously clickable element.

Ditto Spanx. You get the idea.

Don’t: Give it too much room to breathe

I bet you a Double Tall Caramel Macchiato that eye-tracking studies would show heavy fixations on the image, not the floating mystery 3-bar. Placing it on the far right is just as dangerous as left-of-logo.

Do: Group your category icon with other navigation elements

Softchoice’s 3-bar appears as part of a navigation menu, which is easier identified as actionable.

Alternatively, Lowe’s pairs 3-bar with its search icon.

Remember desktop Web conventions when determining the order of your icons. eBags’ 3-bar sits top-right, which traditionally is where site login or shopping cart icons are found. eBags may get more mileage from its menu by moving it to the left of Account and Cart, or grouping it with Search.

Green Mountain pairs 3-bar with Search, but a left-of-Search placement may be more intuitive, as conventionally, vertical category menus appear on the left side of a page, and “Go” buttons to the right of search fields.

Do: Label your icon

Designers — I can hear your cringing, but labeling your icons clarifies what they do. CVS adds “Menu” to its 3-bar.

If you find this too busy, a simple “Menu” button works until 3-bar becomes a proven convention.

Notice Harry and David’s Search icon may be confused with the PayPal logo resembling a search box.

Ross Simons’ menu button’s plus sign cries out “expand me!” It’s left-of-search position may be more effective than pairing it with the shopping bag icon or placing right-of-search.

But Ross Simons’ shopping bag icon may suffer from blends-too-much-with-logo-itis. In fact, any navigation button can be overlooked if it’s not styled properly.

As always, user testing and A/B or multivariate testing can tell you whether your design is working or not. Testing navigation should be one of your top priorities for a mobile optimization strategy, as balancing efficient use of space competes with clarity of your mobile site architecture.

Related Articles

9 Responses to “Don't Make These Mobile Menu Mistakes”

  1. Ian says:

    Yep, people are often too quick to quick to jump on new trends, assuming that because they are familiar with them that the rest of the population who are less familiar with technology will also be familiar with them, or assuming or even stating that they’ll somehow magically just ‘get used to it’.

    ‘Getting used to it’ takes a great deal of time and exposure.

    At this stage of the game it’s just widely used, not widely understood, it’s not yet a convention. So personally I’d never use something that uses such a vague ambiguous metaphor as three lines without labeling it, context alone isn’t enough – yet.

  2. An excellent article within case studies. Thanks

  3. Ian says:

    Another example of helpful & unobtrusive labelling, from HTC’s email client -

  4. JR says:

    It makes sense to me now that I have seen the variety of bad, good, better, best, and ambiguous implementations. I see a similar icon at the bottom of my android so this is not a totally foreign concept as Ian would suggest.

  5. Nimrod E says:

    Thanks for this article.
    UX/UI is really a big deal when it comes to app usability. Nonetheless, the effect on user’s satisfaction (measured by retention) is something that many time motivates app developers to embrace and implement the current design trend. Sometimes it works, and sometimes it makes things worse. But it’s all in the name of always innovate (or copy) and not hold back.
    I’m not so sure about labeling the icons, but most of your examples were very useful.

  6. Alex says:

    Great post and collection of mobile navigation patterns. I’ve encountered the three bar menu button in a few usability testing projects within the last year. It actually worked quite well for most users.

  7. john says:

    just because facebook does it, does not make it right….i’m having to say this over and over these days. it is interesting that you say right hand nav menu is a no-no when most ui people will say put it on the right side as most people are right handed

    • Hi John, my recommendations are not about left or right placement, but about clarity. Left of logo or top/far right can be problematic when it’s unclear that the menu icon (especially with 3 lines) is a menu (e.g. it blends in with the logo or is not proximal to other navigation elements) as in the examples above.

      • john says:

        years ago, i ran usability studies on custom software, the take away then was don’t rely on an icon alone, maybe that still holds true.

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS