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.