Website Navigation: How to Improve Yours and Boost Sales

Ever wandered through a store looking for a product that’s not where it logically should be? Maybe you searched and searched and finally found it. Or maybe you got fed up and left the store in a huff. Either way, it’s safe to say you were at least mildly annoyed. Who wouldn’t be?

The big question is: Do your potential customers experience that same frustration when they visit your online store? That depends—more than you think it does—on your website navigation design.

‍

Website navigation can make or break the user experience

Research shows that 60% of consumers abandon purchases due to poor user experience (UX). Among other things, UX includes website navigation structure. It’s an important thing to get right since 37% of survey participants pegged it as a big reason they’d abandon a purchase.

Remember: Your navigation bar is one of the first components of your user interface that visitors see or interact with. If it’s disorganized, cluttered, or simply not meeting your visitors’ needs, it’ll cause immediate friction for visitors.

‍

Is your website navigation standing between you and increased conversions?

Subpar site navigation causes many issues: 

• Website visitors leave quickly, sending your bounce rate through the roof and costing you sales. 
• Fewer potential customers come back to your site, meaning even more lost sales opportunities. 
• You may have more one-time customers than repeat buyers, despite trying to generate repeat business or sell subscriptions. 
• People will be less likely to recommend your brand to friends and more likely to share their negative experiences on your site. Both cost you revenue.

If all this doesn’t sound bad enough, let’s illustrate just how much revenue is at stake. Dominik Angerer, the CEO of Storyblok, whose company did the research above on UX, said, “Five purchases per shopper in missed sales may not seem like a lot. But when you scale this up to the number of potential new customers businesses are missing out on, it becomes a very significant amount of money.”

Say your typical customer buys from you five times per year. Their average order value (AOV) is $100 for an annual total of about $500. If you lose even 500 customers a year due to poor navigation, that’s $250,000 in revenue gone. Lose 5,000 customers? That’s $2.5 million that you may not realize you’re losing if your site traffic is disproportionately higher. And, of course, it only goes further downhill with more potential customers. 

The cherry on top is that bad site navigation also makes it harder for search engines to make sense of your website. That means worse rankings in search results and less organic traffic. 

In response, you may try to compensate by spending more on advertising to drive paid traffic. But without fixing the root problem and with rising ad costs, you’d be flushing money down the drain (i.e., spending more to make less).

We’ve seen several brands struggle and even shut down due to preventable issues just like this. Yours doesn’t have to be one of them. 

‍

Website navigation best practices: How to create a seamless experience for users

We’re careful about recommending “best practices” since what’s best for one brand isn’t always best for another. However, there are some that you can use as more of a checklist to help you identify potential issues with your current site navigation. This can give you a starting point for what to test.

‍

1. Mobile-friendly menus are money-makers

By 2024, 42% of ecommerce purchases—equal to about $621 billion in sales—will be made via mobile devices. That percentage will only grow in 2025 and beyond, so now’s the time to make sure your site is mobile-friendly. 

• Your menu must be clearly visible on mobile devices (e.g., hamburger menus can sometimes be hard to access). 
• Navigation should scale to the appropriate size. In other words, text shouldn’t be too small or so big that users have to scroll horizontally to read the menu items. 
• Your menu shouldn’t contain so many top-level items, subcategories, or subpages that it’s overwhelming for users.  
• Menus should respond appropriately to user interactions unique to mobile devices (e.g., taps as opposed to clicks on desktop). 

‍

2. Don’t hide your nav bar, and keep it tidy

Whether visitors are on mobile or not, your primary navigation needs to be clearly visible. They shouldn’t have to go hunting for it either due to location or a lack of color contrast that makes it hard to see against your website background. There also shouldn’t be so many menu items that you risk visitors being visually overwhelmed or suffering from analysis paralysis. 

And we can’t forget to mention hamburger menus here. On mobile, where they’re intended to be used, they’re fine since you can’t fit all menu items on the screen. But on desktop, they create unnecessary clicks and make it harder for visitors to find what they’re looking for. In our experience, they also get fewer clicks, possibly because people think of them as places for less important menu items on desktop. 

You can occasionally get away with desktop hamburger menus for company-specific or account login pages like Tentree does. 

But your main navigation—the most important pages—shouldn’t be buried within a hamburger menu. 

‍

3. Give your most important pages the spotlight 

Keep your menus dialed in. Your goals are to drive as many conversions as possible and promote higher average order values, so it’s best to leave pages that won’t directly contribute out of your main navigation. Or, at least, keep them to a minimum. This includes webpages related to shipping and return policies, partnerships, affiliate programs, and so on. Your footer navigation is often the best place for these. 

As for how to know the right pages to spotlight, your analytics data can point you in the right direction. Which collection pages bring in the most revenue? What are people clicking on the most? If you analyze the user journey of people who bought from you, which pages did they visit that contributed the most to them converting?

Once you’ve identified key pages, think about whether the top performers deserve more attention than your other shopping pages. Don’t be afraid to play with visual hierarchy. For example, we’ve built and tested Instagram story-like quick navs for several brands. Here’s one we built for DIFF Eyewear, which highlights a variety of key pages, including popular collections and best sellers.  

And another we tested for MOD Lighting, which nudges site visitors toward the brand’s most popular product category pages. 

Many more brands have had great success with similar navigation design tweaks to make top pages stand out. 

‍

4. Birds of a feather should flock together

An organized nav bar helps visitors find what they need in fewer clicks. Especially if you use dropdowns, keep like pages together. Product pages with product pages, brand information pages with brand information pages, and so on.

And here’s a little pro tip for you: Make your product pages stand out from more utilitarian pages like About Us and other brand-specific pages. After all, your main goal is to rack up sales, so pages that directly drive conversions deserve to be highlighted. 

‍

5. Label your menu items wisely

Mirroring the language your ideal customers use in your menus makes navigation easier for them. Plus, it can give you an SEO boost, helping your ecommerce store show up more often in relevant search results. 

In your analytics tool, review the queries people use most often to find you online. Also, browse relevant forums and social media sites to see how they talk about topics related to your business. Then, test the impact of using these keywords and phrases on your organic site traffic and engagement with specific pages. 

‍

3 examples of navigation bars done right

Granted, we don’t have specifics on how users interact with the nav bars below. But, across several different types of website navigation, we’ve spotted a bunch of strategic elements that are likely to make them effective. Here’s what we found.  

‍

Tentree

Tentree, a sustainable clothing brand that plants 10 trees for every item purchased, makes navigating its website seamless in more ways than one.

All top-level items in the header menu have clear labels and focus on one of two goals: 

1. Getting website visitors to shop 
2. Highlighting Tentree’s impact (to encourage consumers who share the brand’s values to make a purchase) 

The dropdown menus then narrow down navigation options by clothing type and features so visitors can find the right page in one click. On the right, there’s also a search bar to help with quick navigation. 

On mobile, this experience is consolidated into a single hamburger menu. 

Visitors can scroll horizontally through the high-level categories at the top (e.g., women's, men's, etc.) and select from the various categories underneath. 

What about the footer menu? It directs to pages that aren’t found in the main menu—ones that are secondary in importance to product and impact-related pages. We’re talking support pages and social media links. 

‍

Yellow Beauty

Yellow Beauty is a turmeric-based skincare brand with over 10,000 satisfied customers and counting. No doubt, the experience on its site has been a contributing factor. This Shopify store’s website navigation is deceptively simple. What are some positives we noticed? 

For one, the two menu items in the header menu account for different stages in the buyer’s journey. “Shop All” is for people that want to find the right skincare product for them and who are ready to open their wallets once they do. “Why Turmeric” is for the ones who need to do a little more investigation before filling their carts. Both inch site visitors toward the point of conversion. 

Hovering over “Shop All” reveals the subcategories visitors have to choose from. There are a few cues here that direct attention where Yellow Beauty wants it. 

Notice the “best value” and “save $35” badges, along with the product images. All three draw attention to the brand’s sets. Promoting them leads to higher order values than solo products. The potential for repeat purchases is also higher since customers get to try and fall in love with more than one product via their first purchase. 

Last but not least, the “Shop All” link delivers on its promise by being clickable; it matches user expectations. Plus, it’s a nice convenience for shoppers who don’t want to shop by the categories in the dropdown menu. 

‍

Blume

Latte brand Blume uses several menu types, including a header menu that expands into a left sidebar navigation menu on desktop. 

The neat thing about the “Shop Menu” is that shoppers can filter by category or by benefit. And they get a subtle reminder that Blume’s lattes aren’t just a treat—they have health benefits too. 

Mobile users have the same navigation options. The only difference is that the filters are contained within a hamburger menu.

While it’s a lot more visible than the desktop and mobile menus we just showed, the horizontal menu on the “Shop All” page does the same job.

Notice how both menus focus on actions that lead to conversions. They direct only to product pages and educational pages that endear potential customers to the brand. 

Pages that aren’t as closely linked to conversions appear in Blume’s footer menu instead. That way, they’re still accessible but don’t clutter the menus above the fold or distract from a call-to-action (CTA) that could drive sales. 

These three brands give just a few examples of ways to build out your website navigation. But how should you make the final call?  

‍

How to perfect your website navigation menu

You could just browse some similar sites and copy navigation that seems to work for other brands. But that’s a never surefire way to improve UX or drive more sales. Often, it can do more harm than good because of the differences between your brand and the brands you copy, or their ideal customers and yours. So let us walk you through our conversion rate optimization process, which we use day in and day out here at SplitBase to decrease risk and increase conversions. We call it the Testing Trifecta. 

The first step is doing in-depth quantitative research, also known as digging into analytics. As far as site navigation goes, we’d look at or recommend reviewing a mix of the following: 

• Google Analytics (or whatever analytics tool you use) to see which pages get the most clicks, which ones are the most valuable, what path users take through the site, and so on
• Heatmaps, including clickmaps and eye tracking heatmaps, to understand what areas of the site attract user’s attention the most and drive interactions
• Information hierarchy to see if navigation is organized in a user-friendly way that makes key webpages and subpages with supplementary info easily accessible

Next is in-depth qualitative research. This would mean doing usability testing, but the SplitBase team also does on-site surveys, chat support analysis, and session recording reviews to identify navigation pain points.

You’d be surprised how many CRO agencies skip this step or only do surface-level qualitative research. But it’s an essential part of the process because, while analytics data can tell you what is or isn’t working on your site, it can’t tell you the why. You need qualitative data to drill down to the reason and, by extension, find the right fix. 

Only after we’ve done quantitative and qualitative research—and extracted every last insight possible—do we move on to testing hypotheses and measuring their impact on performance. 

At this point, we might do or recommend A/B testing to determine, for example, the best placement for your navigation bar, or which design will lead to the higher conversion rate. Alternatively, use multivariate testing to figure out which version of a page has the highest-performing combination of navigation elements. The combos could explore different nav bar placements, text colors, button colors or shapes, and fonts or font sizes. 

From there, we’d apply the insights from our testing to the website design. This isn’t the last step, though. We’re firm believers in the need for continuous testing. So, in true SplitBase fashion, we’d keep doing usability testing over time to confirm that any changes were having the desired effect. If you decide to tackle this conversion rate optimization project on your own, you should do the same. 

Alternatively, if you don’t have the time, or comfort level with CRO to implement the Testing Trifecta, we’re here for you. Request a free proposal for more details on how we’d ensure that your site navigation is helping your bottom line, not hurting it.