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 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 important to get right, since 37% of survey participants cited 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 return to your site, resulting in even more lost sales opportunities.
You may have more one-time customers than repeat buyers, even though you're 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 gets worse with more potential customers.

The cherry on top is that poor site navigation also makes it harder for search engines to understand your website. That means worse search rankings 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 better 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 you can use as 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. Treat your nav as a conversion element, not a utility

Most brands think about nav like a filing system: "what are our categories, label them, done." That framing is wrong for DTC.

On mobile, the nav bar is often the first thing visitors interact with after the hero loads, especially on homepage traffic from paid social, PR, and direct. People aren't reading down the page. They're orienting themselves, and the nav is their map.

If your highest-AOV collection is buried two taps deep, that's not an information architecture problem. That's a revenue problem. Nav isn't where you organize the store. It's where you route attention toward the products that convert. Once you reframe it as decision architecture, every navigation decision becomes a testable hypothesis rather than a design preference.

2. Mobile-friendly menus are money-makers

Global mobile commerce now accounts for roughly 60% of all ecommerce sales worldwide, with revenue surpassing $2.5 trillion. Over the last decade, mobile commerce revenue has more than quadrupled, driven by mobile-first apps, faster internet speeds, and simplified checkout flows. For many brands, mobile generates the largest share of online revenue, and the ones still treating it as an add-on are losing conversions and repeat customers.

That means your mobile nav deserves its own treatment, not a shrunken version of desktop. Most teams design the desktop nav first and then squeeze it down for mobile. That's backward, given that 70-85% of your traffic is on a phone.

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 rather than clicks on desktop).

Two mobile nav formats that we've seen disproportionately outperform:

Icon-style nav: Small visual tiles for top collections instead of text-only menu items.
Instagram-story-style horizontal scroll: Circular thumbnails with category labels, mimicking a familiar mobile interaction pattern.

Both work because they remove the cognitive load of reading a menu and replace it with pattern recognition. Visual nav also lets you preview product categories in a way text never can.

3. 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 because of its 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 visitors are visually overwhelmed or suffer 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 on company-specific or account login pages, as Tentree does.

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

Here's a pain point we hear on prospect calls constantly: "Our homepage is gorgeous, but doesn't feel shoppable; people don't realize there's more than three products." This is especially deadly for brands whose traffic comes mostly from PR or media coverage you don't control, so visitors land on the homepage instead of a curated landing page.

The collapsed hamburger nav, plus the big hero video pattern, destroys product discovery. If the visitor has to tap to open the nav, then read through it, then choose a category, then browse, you've added three steps before they see a product. Most won't make it.

The fix: Expose product entry points directly on the homepage and in a persistent nav. Quick-shop collection tiles above the fold. Visible category links in the header. A "shop all" CTA that doesn't require any taps to surface. Brand immersion is fine, but not at the cost of product visibility.

4. Reorder by revenue, not by org chart

The default failure mode: nav order reflects how the brand thinks about itself ("here are our four product lines, in the order we launched them"), rather than how customers buy. The fix is to let data drive the order.

Three data sources to triangulate:

GA4 page-path analysis: Which collection and product pages are actually in the highest-converting purchase paths?
Shopify LTV-weighted purchase frequency by collection: Not just first-order revenue, but which categories produce repeat buyers.
Heatmaps: Measure revenue per click, not raw clicks. A nav item with fewer clicks but higher AOV downstream beats a popular item that doesn't convert.

The top revenue-driving collections go first. Everything else gets demoted. We've seen monthly revenue lifts of $27K to $83K across beauty, fragrance, fashion, and apparel clients from this single change.

5. Give your most important pages the spotlight

Keep your menus dialed in. Your goals are to drive as many conversions as possible and increase average order value, so it's best to keep 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 which 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 most to their conversion?

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.

6. Segment before you decide

Aggregate data lies. If you reorder nav based on "all users," you're averaging behaviors that should be treated separately. At minimum, segment by:

Traffic source: Paid vs. organic. Intent and product awareness are completely different.
Device: Mobile vs. desktop. Browsing patterns diverge sharply.

Paid mobile traffic often wants the hero product or the offer they clicked on. Organic desktop traffic is often in research mode and wants category exploration. If those two segments need different nav, that's also your strongest case for personalization: swap the nav order dynamically based on source and device. This is one of the highest-ROI personalization plays because nav is touched by nearly every visitor.

7. For multi-SKU brands, add "shop by" filters in or near the nav

Once you know your revenue paths from the data work above, make those paths explicit in the nav. This is what we call the Best Path to Purchase framework:

Shop by concern (skincare, supplements, wellness)
Shop by format (capsules, gummies, liquid, powder)
Shop by use case (morning routine, post-workout, travel)
Shop by collection or kit

The point isn't to add more menu items. It's to match how customers actually decide. A skincare buyer doesn't think "I want a serum." They think, "I want to fix my hyperpigmentation." Nav that mirrors their decision frame converts dramatically better than nav organized by product type.

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 smooth in more ways than one.

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

Getting website visitors to shop
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 in the main menu, secondary pages that are less important than 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 who want to find the right skincare product for themselves 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 can try and fall in love with more than one product during their first purchase.

Last but not least, the "Shop All" link delivers on its promise by being clickable and aligning with user expectations. Plus, it's a nice convenience for shoppers who don't want to shop by category 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 offer just a few examples of how to build 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 the navigation that seems to work for other brands. But that's never a 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 users' 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 conducted 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 run or recommend A/B testing to determine, for example, the best placement for your navigation bar or which design will lead to a higher conversion rate. Alternatively, use multivariate testing to determine which page version 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 your site navigation helps your bottom line, not hurts it.

Frequently asked questions about website navigation

How do I know if my website navigation is hurting conversions?

Look at two things first: your bounce rate on high-traffic pages and the drop-off rate between your homepage (or landing pages) and your product or collection pages. If visitors are landing and leaving without clicking deeper into the site, navigation friction is a likely culprit. Heatmap and session recording tools can confirm it by showing you where people click, where they hesitate, and where they give up. If your analytics show that visitors who do navigate to product pages convert at a healthy rate, but very few make it there, the nav is the bottleneck.

Should I use a hamburger menu on desktop?

In most cases, no. Hamburger menus hide your most important navigation behind a click, and on desktop, there's no reason for that since you have plenty of screen space. We've consistently seen that visible, always-exposed navigation gets more engagement and drives more clicks to product and collection pages than a collapsed menu. The exception is for secondary pages like account settings, support, or company info, where a hamburger can work without hurting conversions.

How often should I test my website navigation?

Nav should be an ongoing experiment surface, not a one-time redesign. Because nearly every visitor interacts with it, even small changes can have an outsized impact on your funnel. We recommend testing nav changes the same way you'd test PDP elements or checkout flows: form a hypothesis based on your quantitative and qualitative research, run an A/B test for at least three to four weeks, and measure the downstream impact on revenue per visitor, not just clicks. Anytime you launch new collections, shift your product mix, or see a meaningful change in your traffic sources, it's worth revisiting your nav structure.

What's more important: the order of nav items or the labels I use?

Both matter, but order tends to have the bigger revenue impact because it determines what visitors see and click first. Items on the left side of a horizontal nav or at the top of a mobile menu get disproportionately more attention. That said, labels can make or break clarity. If your customers think in terms of "concerns" or "use cases" rather than product-type categories, matching their language in the nav labels can meaningfully improve engagement. The best approach is to test both: reorder first based on revenue data, then run label tests to fine-tune.

My brand only sells one or two products. Does nav even matter?

Barely. If you have a tight product line of one to five SKUs, your homepage should function more like a landing page than a traditional store. The page itself becomes the funnel: hero, value props, social proof, demo, FAQ, CTA. In that scenario, a minimal nav (or even no nav beyond a logo and a cart icon) is usually the better choice. Over-engineering the navigation to feel "like a real ecommerce site" adds friction for the visitor without adding value. Put the design effort into the page itself.

How do I decide which collections belong in my main nav?

Let data drive it, not your org chart. Look at GA4 page-path analysis to see which collection pages appear in your highest-converting purchase paths. Cross-reference with Shopify data on LTV-weighted purchase frequency by collection to identify which categories produce the most valuable repeat buyers. Then layer in heatmap data, but measure revenue per click rather than raw clicks. A nav item that gets fewer taps but leads to higher AOV downstream is more valuable than one that gets the most clicks but doesn't convert. The top revenue-driving collections go first in your nav. Everything else gets demoted or moved to a secondary position.

‍