This is the fourth in a series of blog posts on UX best practices. The series shows how you can increase revenue by optimizing the customer experience — from page design to payment.  Read the previous, UX Best Practices: The Product Detail Page. 

Imagine walking into a retail store and being unable to find what you want; products may be haphazardly arranged, or you may be overwhelmed with too many choices, and there is no one to guide you. You leave, frustrated, and the retailer loses a sale. This is precisely what happens online when shoppers can’t find what they’re looking for. The culprit? Oftentimes, bad navigation.

Navigation is, of course, a critical tool in the online shopper journey. Poor organization, an overabundance of category links, and usability issues can easily frustrate shoppers and lead to abandonment. Your navigation should provide a high-level overview of what you offer, and get shoppers to the product they are looking for quickly. Designing effective navigation requires a balance between catalog architecture, merchandising strategy, brand goals, and user experience design. Consumer trends in mobile shopping – our latest Shopping Index shows enormous growth in mobile traffic and orders – also present additional considerations designers must take into account.

How you organize and design your navigation is highly dependent on your business and the size of your product catalog. What works for one brand or retailer may not work for another. Be sure to test the impact that changes to your navigation will have on your KPIs: examine crucial metrics like abandonment, add-to-cart rate, conversion, increases/decreases in search usage, and time on site.

The following best practices are based on the review of thousands of retail websites, extensive heat mapping studies, Commerce Cloud benchmarking data, and industry statistics. Take these general best practices into consideration as you look to optimize your navigation in a way that makes sense for your business.

Best practices for mobile navigation

Designing for touchscreens brings about a whole different set of UX best practices when compared with web. Mobile and desktop sites should be visually consistent so multi-device shoppers are comfortable and confident picking up where they left off, but desktop and mobile navigation should not be identical. The needs of mobile shoppers are wholly unique, and navigation should reflect that. Check your current mobile navigation against these design best practices:

• Prioritize link position. Determine your most important categories, and position those links first. Put your most-used utility links (order status, store locator, sign in, loyalty program, customer service) at the bottom of the menu so they are easily accessible. Time is of the essence with mobile shoppers and they are very task-oriented. Give them direct and quick access to what they need.

• Optimize menu usability. The hamburger menu (the 3-bar menu icon that triggers a sliding drawer menu) makes it possible to layer in sub-category links but can quickly become cumbersome. The menu remains hidden until the user interacts with it, which isn’t ideal for product discovery but is a space-saving compromise on mobile. If you use a hamburger menu, be sure to test usability and interaction, and be careful how deep you go with your links, and be sure to provide an obvious way to exit out of the menu.

• Use the right font. Readability is more important on small screens, so Sans serif fonts are recommended over thin typefaces that can be difficult to read. Be careful with font size. A good place to start is 16pt body type with headings that are at least 1.6X as large as the body type. Line height should be slightly larger than font size.

• Keep contrast in mind. Be sure there is enough contrast between text color and background color. Gray tones can be especially difficult to read. Remember that phones are used in a lot of different environments, often outdoors. Be mindful that eyes strain to read screens in sunlight.

• Design for touch. The average index finger is 45-57 pixels. The cursor is a very precise tool, but fingers – not so much. It can be very frustrating when you fat finger a link and waste a page load going to a page you didn’t intend to visit. Give shoppers plenty of space to click on menu links by using CSS to add padding and line-height specific for tablets and mobile.

• Use recognizable icons for utility links. To add a visual break from a long list of text links, use icons for utility links like store locator, customer service and order status. Be sure the icons are clear and conventional symbols all shoppers will recognize.

Category hierarchy: broad or deep?

Your navigation should guide the customer to the product they are looking for and help them discover new products along the way. When deciding how deep to go with the sub-categories in your navigation, consider the size of your product catalog, buyer context, and your target market’s shopping behavior.

If your product assortment is relatively small, you may benefit from high level navigation options. Rather than pushing shoppers to narrow categories with fewer products, you can increase product discovery by using broader categories. Filtering options within broad categories will help the customer further narrow product choices.

Chrome Industries (above) has a relatively small product catalog and uses parent categories (woven shirts, tees, etc.) in navigation.

On the other hand, if your product assortment is wide, you may benefit from using narrower sub-categories within your navigation to get shoppers to a product quicker. However, be mindful of overwhelming shoppers with too many sub-category links, which can lead to frustration and abandonment.

The Converse site below shows navigation drilled down to deep category results, which reduces the number of page loads and additional filtering required of the shopper. Shoppers can get to products quicker, which is especially important on mobile where, according to Commerce Cloud data, the average session is 6.8 page views.

While adding more sub-categories might seem like a reasonable tactic to help shoppers find what they are looking for, it can actually hurt add-to-cart rates. Commerce Cloud benchmark data reveals that sites with more than eight categories see an add-to-cart rate of approximately 3-8%, while sites with 6-8 categories have an average add-to-cart rate of 11%.

Best practices for mega menus on desktop

Mega menus, a type of expandable menu in which links are displayed in a two-dimensional dropdown layout, have popular with designers because they can accommodate a lot of links. However, this doesn’t mean they are always user-friendly. Small design tweaks can help shoppers more efficiently browse through mega menus:

• Prioritize link position. Heat mapping studies prove that visitors read a desktop website from left to right, then down. Position your most important category and subcategory links on the left side and use the right side of your nav for less popular categories or thematic merchandising categories.
• Keep navigation above the fold. When navigation falls below the fold, it creates usability issues that require visitors to use the scroll bar to discover menu options.
• Don’t go full bleed with navigation drop-downs. Users can get trapped within navigation when it is full bleed because moving the cursor out of the nav zone becomes nearly impossible.
• Provide visual separation to guide the eye. Columns of text links can cause cognitive load and eye fatigue. Guide the eye down the columns within your menu using something like a boundary line and appropriate white space to create separation.
• Make text easy to scan. Be sure there is enough contrast between the text color and your background color for readability. Use font styling and color to offset the text of headers and sub-categories but limit the use of all CAPS, which can be difficult to scan.

As you can see, Columbia Sportswear has a lot of categories and sub-categories in their mega nav, but their navigation is completely above the fold and easy to read thanks to whitespace, leading boundary lines, and font styling.

Product findability is critical to an ecommerce business. If shoppers can’t find the product they are looking for, they can’t buy it. Use the best practice guidelines outlined here, and revisit your navigation on mobile and desktop. Look for opportunities to optimize and be sure to test any changes you implement. Small optimizations to improve usability can have a big impact on the shopping experience, and ultimately sales.

Want even more? Read our next post in the series: UX Best Practices: The Checkout Flow