Your online storefront should be easy to navigate and should help shoppers discover products quickly. Good site navigation enhances the shopping experience and increases sales and profits.
Website design includes a thorough understanding of user experience patterns, preferences, conventions, and branding. While design should express your brand’s personality and values, it should also provide familiar and intuitive navigation that users recognize.
Small changes can make a world of difference in global navigation -- for example, the navigation that appears on every single page of a site -- may significantly impact shoppers and their ability to discover products.
To enhance eCommerce navigation, consider these three suggestions.
In most cases, the top menu bar of the eCommerce navigation bar should include a set of general product category labels. These are usually single words that describe a wide range of products.
Users should be able to scan the menu navigation bar and instantly understand what those labels represent within the store context.
For an example, let’s take a look at the menu navigation bar for MEC. The product labels first identify who might use a product, such as “Men,” “Women,” and “Kids”. Further down the navigation bar, the labels change when it makes better sense to describe a sport or an activity, resulting in labels like “Climb,” “Bike,” “Hike,” or “Camp”.
When possible, arrange categories in a hierarchy so it breaks down lists and seamlessly moves the shopper along from general departments to specific products.
On Canadian Tire’s eCommerce website, the top level of product navigation starts at “Outdoor Living,” and then continues to break down products that could fit into that category, such as “Patio Furniture,” and further into specific “Patio Chairs”.
Many website designers discourage hover-based navigation, as well as dropdown or flyout menus, for multiple reasons. However, on eCommerce websites, because of so many products and categories, these kind of “mega menus” are still quite common.
There is a subtle difference that can make these really effective; by making the top level of the navigation bar a link.
In 2013, the Baymard Institute lead a survey of eCommerce sites, ranking them for user experience on the homepage and category pages. One of the survey’s findings was that shoppers expected the top level of a dropdown or flyout menu and any headings in that menu to be active links.
On Canadian Tire’s website, as an example, the top-level navigation labels are links to separate landing pages. When a shopper clicks “Ideas,” or “How-To’s,” they get the expected result, a landing page of summer ideas or how-to’s.
For more on eCommerce solutions, contact us or see: Consumer Psychology & the Checkout
Blog Tweetables:
“Your online storefront should be easy to navigate and help shoppers discover products quickly.” Tweet this!
“Website design is an understanding of UX patterns, preferences, conventions and branding.” Tweet this!
“Arrange categories in a hierarchy, breaking down lists to move the shopper along to specific products.” Tweet this!