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 three-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 three-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 three-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 to believe that the top left of the web page is logo territory. Showing three-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 a navigation icon and not branding?
Forever 21’s navigation icons to the right of the logo are easy to understand, but the three-bar on the left 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 fixation on the image, not the floating mystery three-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 three-bar appears as part of the navigation menu, which is easier to identify as actionable.
Alternatively, Lowe’s pairs three-bar with its search icon.
Remember desktop web conventions when determining the order of your icons. For eBags, the three-bar sits top-right, which is traditionally 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 three-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 you cringing, but labeling your icons clarifies what they do. CVS adds “Menu” to its three-bar.
If you find this too busy, a simple “Menu” button works until three-bar becomes a proven convention.
Ross-Simons’ menu button’s plus sign cries out “Expand me!” Its left-of-search position may be more effective than pairing it with the shopping bag icon or placing it 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 or not your design is working. 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.