The navigation of your eCommerce site is how users find, and most importantly, purchase what they’re looking for from your brand. On average, visitors spend about 23% of their attention on the header section of your website, which includes your navigation.

According to Shopify, when a user lands on your site, you have about 10 seconds to convince them to stay. So, the user experience of your site navigation can make or break a visitor’s buying decision and their perception of your brand.

This article will discuss eight best practices to improve your eCommerce navigation user experience.

On This Page: show

eCommerce Navigation: What is UX, and Why is it Important?

UX design, or user experience design, is the process of designing a product or system in a way that provides an excellent experience for its users from start to finish.

The Nielsen Norman Group defines user experience as: “all aspects of the end-user’s interaction with the company, its services, and its products.”

You want your users to have a positive experience with your product or service, and UX is a crucial part of that goal. Good UX can clearly define your customers’ journey and lead them on a path that results in conversions for your business.

Because if your customers have a great experience with your brand, they will be more likely to use your product or service again. Over time, this positive experience builds customer loyalty.

Now, here are eight best practices for improving your eCommerce navigation UX.

1. Make your product menu easy to scan

If reaching your product pages feels like a chore, you can expect many users to write your brand off for good. Therefore, potential customers need to be able to locate and scan your product menu and main categories quickly.

According to the Baymard Institute, overcategorization is the most impactful category-based navigation issue for eCommerce sites. Poor organization of product categories can be more devastating than site bounces; it may lead to permanent brand damage.

Here are a few tips to make your menu easy to read, scan, and understand:

Stay away from long vertical drop-down menus that go below the fold. If a user has to scroll down to see your full navigation menu, it’s too long.

Break your product categories into small chunks that are ordered logically.

Utilize parent categories and subcategories to categorize your products.

Use typography, icons, and visual hierarchy to help users quickly scan your menu.

Pictured below is the navigation menu from Mack Weldon. All menu items fit entirely above the fold, and the product categories are clearly defined by parent categories and subcategories.

2. Use Widely Accepted Iconography

Icons are a great way to communicate something quickly, and visually. However, the icons you use must be instantly recognizable.

Before using an icon, think about how it may be used on other eCommerce sites or apps. You will lose potential customers if it isn’t immediately clear what will happen when a user clicks your icon.

Universally recognized icons include:

A magnifying glass for search.

An envelope for email.

A printer icon for printing.

In the example below, Rothy’s uses a magnifying glass for search, a basket for cart, and a human profile for the account page.

Additional iconography tips:

Users will look for the search bar or magnifying icon at the top right or top left corner of a webpage. They’ll also look to these corners for their shopping carts, account page, or store locator. It’s always best to place icons where users expect them to be.

3. Give Users Visual Cues on Links

When a user hovers or clicks on a link in your navigation, the text should change its appearance. This best practice may seem obvious, but CXL found many sites violated this guideline.

Users expect visual cues on websites to determine whether an element is actionable. On your navigation menu, give users simple visual cues, so they know what is clickable and what is not. Familiar visual cues when hovering over a link include a changed background, changed text color, or an added/removed underline.

In the picture below, the text changes color when a user hovers over an item on True Botanicals’ navigation menu.

4. Make Your Logo Clickable

Whether users are browsing on their mobile devices or desktops, the UX choice to make a brand logo redirect to the homepage has become an industry standard. Today, the majority of users will expect this to be true across all eCommerce sites.

If your logo doesn’t take users back to your homepage, your users will likely become confused and frustrated. While some visitors may look for a home button, it’s easier and more intuitive for most users if your logo returns to the homepage.

For example, clicking the Four Sigmatic logo on any page of the brand’s website will redirect you back to its homepage.

5. Include Thematic Resources and Guides in the Main Navigation

We may think that every user who visits our site knows exactly what they want to purchase, but that’s simply not true. Only some people know what they want. And new users, in particular, might need to be more familiar with your product catalog or brand.

In addition, some users need more guidance, like the type of help they would receive from a sales associate in a store. You’re missing a conversion opportunity if your navigation doesn’t offer users this help.

As the Baymard Institute recommends: “Consider including thematic resources and guides in the main navigation.” Guides and resources help users figure out what they are looking for and narrow their choices. The resources also work as inspiration to purchase other products.

Pictured below is Sephora’s main drop-down menu. The “Help Me Choose” column on the far right of the menu includes links to quizzes, guides, and other resources to help users figure out what product they may want or need. Each resource offers users practical advice, provides them with free value, and acts as an effective part of Sephora’s sales funnel.

6. Try Adopting a Sticky Navigation Bar

A sticky navigation bar allows users to move quickly between main category pages by acting as an anchor throughout your entire website. Alongside drop-down menus for subcategory links, a sticky navigation bar offers easy access to essential website features and helps create a seamless user experience.

While a sticky navigation bar takes up screen real estate—especially for mobile users—using sticky navigation has been found to increase conversions by 10% across eCommerce sites.

In the image below, users browsing through M.Gemi’s products can always access additional category pages at the top of their screen.

7. Vertical Navigation versus Horizontal Navigation Menu

While a horizontal navigation menu is more common and familiar for users, a vertical navigation menu may benefit certain brands. For instance, if your brand has too many categories to fit along a horizontal navigation structure, you may need to lower font size or overcrowd menu items. Opting for a vertical layout instead can keep your main navigation bar clean and organized.

In addition, vertical menus placed on the left side of the screen can be easier for users to scan and read. For example, research from the Nielsen Norman Group has found that 80% of a user’s attention is spent on the left side of the screen over the right.

However, if a vertical menu hides category pages below the fold, a horizontal navigation bar is a far better option. As we mentioned above, links to category pages should not fall below the fold where users would need to scroll.

Additionally, a hamburger menu should be avoided with vertical menus because they have the potential to lower the visibility of your vertical menu items.

8. Mobile Navigation UX

With 72.9% of all online shopping happening on mobile devices, your brand’s eCommerce navigation should accommodate both desktop and mobile sites.

As you’re designing or optimizing your mobile UX, keep in mind that:

A mobile site needs to be compact. Smartphones have drastically less screen real estate than desktop computers.

Fingers are less precise than mouse pointers. The Nielsen Norman Group recommends that the interactive elements on your mobile site have touch points of at least 1cm x 1cm in size. This is especially true for your mobile site’s navigation elements.

A hamburger menu, while common for mobile sites, may benefit from an additional “Menu” label. Some users may not be familiar with a hamburger menu icon, so the extra “Menu” label can provide clarity.

Hover drop-down menus should be clickable on mobile. Hover elements simply do not work on mobile devices.

eCommerce Navigation: Conclusion

These eight best practices are just a few of the many ways to optimize the UX of your eCommerce navigation. Overall, a navigation system aims to give your customers confidence while browsing your site. Clear, concise, and attractive navigation will increase customer satisfaction and your online sales.

And, if you want to learn more about setting up a UX design process, check out this guide.

About Anatta

Anatta is a premier eCommerce partner that provides turnkey digital product teams for iconic DTC brands including Rothy’s, Athletic Greens, Molekule, and Four Sigmatic. Anatta’s team of certified NNG and Baymard designers helps brands create engaging user experiences that attract customers and increase revenue. Contact Anatta to learn more.