Ecommerce Guide to Mobile Navigation

Hey friends! This article was originally published on EcommerceIllustrated in 2016 - screenshots may be old but the theory stands! Will refresh with newer examples soon. Follow #ecomillustrated for updates

In Ecommerce Illustrated’s chapter on?Site Navigation Design and Usability, we covered the concept of?Catalog and Merchandising Architecture (CAMA), and how to optimize flyout navigation, or “mega menus” – a strong design trend for desktop ecommerce sites.

But mega-menus don’t ‘fly’ on smartphones. The industry has had to reinvent navigation to fit only a few inches of space – birthing new conventions like hamburger menus that continue to challenge designers and mobile shoppers alike.

This chapter explores the design and behavior of header navigation, category menus and footers, with dos and don’ts for each.

Mobile header navigation

The 2-3 inches of portrait-mode smartphone space you have to display your most important links must be used efficiently. This is why icons are more popular than text links on mobile sites than their tablet and desktop cousins.

A typical mobile commerce header menu will include the company’s logo (doubling as home page link), a “hamburger” icon to represent category navigation, a search icon, and a cart link. It may also include links to a store locator, customer service, account/sign or a click-to-call telephone number or icon.

Under Armour’s mobile menu follows mobile design conventions

While there are no “rules” for how to design your header menu, there are usability guidelines you should follow.

9 Tips for header navigation

1. Don’t skimp on the menu

Surprisingly, I’ve encountered a handful of sites that display navigation only on the home page. Remember, visitors referred from social media, mobile search, email and other websites often land on category and product pages, and may never hit your home page during their visit.

2. Ensure your logo is recognizable

Lenovo truncates its logo to an icon, which may not be recongizable to those familiar with the brand. Again, not all visitors will view your home page, and they need to know which site they are on.

3. Label ambiguous icons

In the Lenovo example above, the header menu contains several icons. While a few are universally recognizable (phone, email, cart and search), the less obvious hamburger menu, suitcase, human head may be problematic.

The safer approach is to pair labels with icons to make them very clear.

Sports Authority and Indigo both label their store locator, cart and menu icons.

Sports Authority labels its hamburger “Menu,” Indigo labels it “More” and other retailers label it “Shop.” Each of these labels indicate the function of the icon, though you may wish to validate optimal label text with A/B testing.

4. Treat the menu as a primary call-to-action

There’s a good reason why Diamond Candles’ menu is candy pink.?A/B testing concludes?it’s worth an extra couple hundred thousand dollars per year in revenue compared to non-colored menu button variations.

Your navigation menu is arguably your most important home page call-to-action on mobile, as home page content (featured products and offers) may be attention grabbing or contextually relevant, but don’t put your visitor in control of his or her buying journey. A contrasting button color is one way to make it stand out. If it blends in with secondary, tertiary and arbitrary navigation elements, it will likely cost you real dollars.

If you’re A/B testing your mobile site, make menu link design your focus until you find an unbeatable winner.

5. Don’t make users search for search

The search box is another essential element of your home page, supporting visitors who know what they want to find (and are more likely to have purchase intent and be closer to conversion). It’s also very useful to in-store shoppers who want to pull up product information and reviews fast.

So whether you opt for a search icon or visible search box (a recommended A/B test), it’s critical that search is easy to spot. If you use an icon, place it in the upper-right corner, where years of desktop applications and websites have trained users to find it. If you use a search box, it’s most visible when surrounded by color.

Using Sports Authority and Indigo again as examples, notice which one is most easy to identify as the search function:

Sports Authority’s design uses the simple “Search” label in the white field, and a magnifying icon as the execution button – both clearer than Indigo’s wordy label and “Go” button.

A surprising number of m-commerce sites sandwich search behind the hamburger menu. Not only does it make search hard to find, but adds an unnecessary step to access it.

Ghiardelli’s search is buried behind it’s hamburger menu

Unlike most mobile commerce sites, Pandora’s hamburger menu does not include category navigation (rather, categories are found under both Jewelry and Gifts). The hamburger hides both search and account links. While its top-right placement may be the first place scan for search and log-in, it’s not intuitive that these links live behind bars.

6. Don’t menu-mash

If you must leverage the menu for more than just category links, make sure to design them effectively.

Cabela’s puts?everything?behind the burger, and not in an organized way. Sign In and Register are buried – as is the?shopping cart, which is ideally visible in the top right corner along with the quantity of items currently in cart. (And the label “Departments” may not be intuitive for shopping categories to boot).

KellyCo hides both Cart and Checkout behind Account!

Though Crocs chooses to tuck Sign In and Store Locator in its main menu (users may prefer them as header links), it makes the effort to visually distinguish them from category options.

Similarly, Sports Authority uses color to distinguish categories from other links.

7. Don’t place links too close together

It’s tempting to push links behind hamburger menus to conserve header menu space, just as it’s tempting to squish icons together.

Focus Camera’s icons are too close together, and leaves them prone to “accidental activation.”

Recommended touch interface spacing guidelines vary, but keep in mind the average human finger pad is 10 to 14mm wide. Pixel size can vary by device and screen density, so rule-of-thumb (or finger tip) is to err on the side of bigger targets and more spacing between them. Apple, for example, has?recommended minimum target sizes?of 44×44 pixels and 8 pixels spacing.

8. Avoid social icons in header navigation

Links to your social profiles are not primary calls to action, and shouldn’t hog your header real estate — no matter how hot Instagram is hyped to be — they take visitors?away?from your site! Save them for your footer menus.

9. Consider a pinned menu

Make your mobile website more app-like by pinning links to the bottom of the screen. Not only does this free up header menu space, it’s thumb-friendly and visible no matter how far the user scrolls.

Guess’ uses an app-like, pinned menu

If you experiment with this approach, choose your links wisely. A pinned menu never disappears as the customer browses the site, and should contain only what customers need quick access to throughout the journey (shopping menu, cart, search, etc.)

Nordstrom and REI’s mobile apps provide quick thumb access to frequently used items

Because this approach is not conventional on the mobile Web, use A/B and user testing to validate its effectiveness with your site and customers.

Category menu design and behavior

1. Use symbols appropriately

Unless you have a very simple catalog, you have both parent and child categories in your product menu, and must support sub-navigation.

There two most common ways to handle sub-navigation are expand / collapse (+ -) where clicking + reveals sub-menu links (and clicking – hides them), and forward / back (> <) where clicking > replaces a higher level menu with a sub-menu, and < moves back.

Sports Authority’s category navigation slides forward and back

While it’s possible to use a combination of expand and collapse with forward and back behavior and symbols, it’s neither necessary nor optimal. Choose either expand / collapse or forward / back menu behavior and use it consistently, with the appropriate, conventional symbols.

In the example above, items with > lead to sub-category product lists. However, the > is not necessary to indicate moving forward to a product list and adds to visual clutter. Links to product lists don’t need symbols.

An alternative way to design your menu is to use rotating markers, like Smarthome. (Notice that the deepest layers of sub-navigation are not marked with symbols).

Smarthome uses rotating markers to indicate expanded and collapsed options

2. Use visual nesting with expand / collapse

When presenting sub-categories in an expand / collapse menu, visually reinforce your hierarchy with indentation. Flush left-aligned lists are harder to read and digest. (It’s also better practice to show collapsed menus by default versus Moosejaw’s bare-it-all up front approach).

Another way to nest subcategories is with a “split menu,” like Boden’s, though this works best for menus with only two levels of navigation.

3. Visually “chunk” your menus

The larger your catalog, the longer your menus. Toss in thematic merchandising (e.g. New Arrivals, Trending, Top Rated and Clearance) and your users’ eyes may glaze over…

To facilitate scanning and comprehension, make sure there’s a visual separation between distinct link groups. For example, use colored headers.

4. AVOID ALLCAPS

ALLCAPS makes menus harder to read than mixed-case, especially when using light-on-dark text. Considering text is smaller on mobile screens than desktop, it’s especially important to optimize type style.

5. Think alphabetical

If your sub-menu contains a long list of sub-categories, consider listing them in alphabetical order. Users will quickly recognize this organization scheme.

If your list is relatively short (up to 9 list items), consider ordering them by popularity or importance.

Footer menus

Footer menus may contain less-important links, but should still be “usable.”

1. Design for readability

Avoid tiny type and low-contrast between type and background. Users should be able to see and effectively hit the right links!

2. Link to desktop site

Believe it or not, some visitors will prefer to pinch and zoom around your desktop site, especially if your mobile version is missing content or is significantly different than the desktop site they’re used to.

Tip: Label this link “Desktop Site.” If you label your desktop version “Full Site,” visitors may assume your mobile site doesn’t carry all products .

3. Open social links in a new tab

Social links shouldn’t crowd out your header menu real estate, but they’re fine in your footer – just make sure you open these links in a new mobile tab.

4. Ask for an app download

If you do have a retail app (whether you should or shouldn’t is the subject of a future chapter of Ecommerce Illustrated), consider linking to it in the footer menu.

5. Put customer service links in your footer

Though mobile’s hot, we’ve all been trained by desktop sites to find customer service information, including Shipping, International, Help and Contact Us in footer menus. Don’t be afraid to repeat these links in your footer menus.

Looking for more ecommerce design and usability tips? Follow the #ecomillustrated hashtag!