Optimize navigation for mobile ecommerce sites

Contributors

@andreea-macoveiciuc-content-expert


Business Benefits

Lower site bounce rates, improve user experience, and increase conversion rates.


Place navigation menus at the top of your site’s visual hierarchy and use dropdowns or slideovers to show sub-items.

Use the word Menu instead of the hamburger icon to add clarity to your navigation menu.

Don’t assume that all users understand your hamburger icon refers to your website’s menu and make it easy for users to find your navigation menu.

Avoid multi-level navigation whenever possible - stick to 2-3 layers

For example, Shoes > Women’s Shoes or Shoes > Women’s Shoes > Nike.

Use filters and sorting to organize products that can’t be contained in shallow menus.

For example, selecting Shoes > Men’s Shoes in a navigation menu could lead users to a product list where they can filter by brand or sort by shoe type, thus eliminating the need to add multiple additional layers to the navigation menu.

Add sticky navigation bars to eliminate the need of scrolling all the way back up to the top of the page.

Adding a sticky navigation bar with filters and sorting options to search results pages or product lists can streamline and make navigation more convenient for users, since there’s no need to constantly go back up to the top to adjust filters and sorting options.

  • Add sticky navigation bars whenever it doesn’t distract attention from other important site elements.
  • Use a plugin like Sticky Menu, Sticky Header (or anything!) on Scroll for WooCommerce.
  • Ask your web developer to implement this feature if you use a different platform or aren’t sure how to configure the plugin.