11 navigation changes (across the funnel) to improve conversions

Today’s online shoppers are obsessed with convenience—and that includes navigating a site without friction.

In one of KoMarketing’s Web Usability Reports, 37% of the respondents said a poor site navigation experience was enough to make them want to leave the website completely.

Many online resources focus primarily on product search and the transition to the checkout, but there’s more to eCommerce navigation. Providing a painless navigation experience is crucial for eCommerce successes. Unfortunately, many eCommerce brands underestimate this.

A study found that improving website navigation increased conversion rate by 18.5%.

We studied some of the best eCommerce navigation designs of 2021 to learn how successful eCommerce businesses provide customer-first navigation experiences for their online shoppers, and we learned 15 things.

The insights in this post will equip you to command revenue growth on your site and create a seamless experience for your customers.

Continue reading to find out.

Home Page 

We learned five things dissecting website navigation models of some top eCommerce brands. Implementing the lesson will make your homepage navigation sweet.

1. Categories: the more the merrier 

Sometimes, keeping it too simple might not be helpful enough. 

The more categories and sub-categories you’ve, the more straightforward it becomes for shoppers to find the right products. However, ensure that it’s well organized and clear to the visitors. 

Here’s how Macy’s is doing this.

Pro tip: Dive into your site’s Google Analytics to view your customers’ navigation flow in the Behavior Flow report.

Seeing the web pages from where they dropped off and learning why would help you optimize their navigation path, making it more seamless and customer-first.

Also, check out their search terms in the Search Terms report under Site Search in the Behavior reporting tab.

Create categories based on use cases rather than the product. 

Additionally, add a ‘What's new’ category for returning visitors and a ‘What's hot’ category for the trend followers. 

2. Showcase the items on sale prominently 

Clearing the items on sale benefits the customer and the business. 

The CMO Council found that 55% of consumers want a price reduction and in a different study, 75 percent of consumers reported scouring their inboxes for discounts.

Discounts drive marketing, make finding discount products intuitive for shoppers.

Have a separate ‘On sale’ category to make it easier for shoppers looking for heavily discounted products. Here’s an example below.

Shoppers don’t have to waste their time surfing the website for discounts—the link is easy to spot on the navigation bar.

On the navigation menu shown above, the website uses a navigation link, “Deals,” marked red so it stands out. Clicking on the menu link would take shoppers straight to a vast repository of discounted products.

3. Use live chat to make shoppers navigate smarter

About 41% of shoppers expect to see the live chat on websites.

55% of U.S adults reported they’re likely to abandon a site if they can’t find an answer to a question. Use a live chat on the site to help shoppers navigate smartly.

Ask questions about what they need to solve, what kind of product they’re looking for, and their budget to help show them the best options. 

Have clickable options as responses to make it intuitive and easy for the visitor. 

Canyon provides a sticky live chat on all the websites’ pages, perhaps to reassure shoppers that help is at hand throughout their onsite experience.

Clicking the live chat icon gives shopper options to chat with customer service and find help through knowledge base articles (which helps when live support is not available) or track their orders.

⚡ Action Items

• Use categories and subcategories to make finding the right product straightforward.
• Create categories based on use cases.
• Add a ‘What’s new’ and ‘What’s hot’ categories to streamline navigation for returning and new shoppers, respectively.
• Make it easier for shoppers to find all discounts in one place.
• Use the live chat to make navigation smarter.

Site Search

Shoppers that use site search are 2.4 times more likely to buy, spending 2.6 times more than non-site search users.

Here’s how to provide pain-free navigation experiences for site search users.

4. Autocomplete with images 

Autocomplete helps the customer save time. 

With images, it helps them compare products on the fly, get to the product page faster and get done with buying far quicker. 

Here’s an example from AO Retails.

5. Eliminate no matching results (the biggest customer repellent)

Find out how many search terms return ZERO results on your site’s search. 

The higher the number, the more revenue you are prone to losing. An easy way to fix this is to serve intelligent recommendations within search results that show ZERO results. 

Fix your search to show results for synonyms, spelling errors and related search terms. 

Amazon shows results no matter how irrational you may think the search term is.

Below the search results, Amazon recommends products based on the shoppers browsing history.

⚡ Action Items

• Provide auto-complete with images.
• Fix no matching results.
• Show search results for related terms, synonyms and spelling errors.
• Provide product recommendations based on search history.

Product and  Product Details Pages

Only 18% of the popular US and UK eCommerce provides good or acceptable user experience; the other 82 percent lurk behind in the mediocre or poor range.

Optimizing product page navigation for shoppers could help you join the 18 percent. 

Let’s explore how, taking clues from some successful eCommerce navigation examples.

6. Cut to the chase, ‘Buy Now’

We tried this out for one of our clients, and it saw a 20 percent increase in conversions. Simple, yet effective to direct visitors to the checkout page and close the deal faster. 

You could drop your domain address for a complete and free site audit.

7. Leave a breadcrumb trail

Use breadcrumbs to let shoppers leave navigational trails as they browse the website.

Breadcrumbs allow users to keep track and maintain awareness of their locations within websites. It makes it easy for them to retrace their steps without memorizing links or losing trails.

Here’s how Best Buy uses breadcrumbs to ensure shoppers don’t get lost on their website.

8. Help customers make the buying decisions 

Visitors can get irritated having to open multiple tabs and toggle to compare products. Make it easy for them by offering a comparison chart and related products. 

Currys allows shoppers to compare up to four products at once, and they make this very straightforward.

First, visitors pick the products they want to compare.

Clicking the Compare Products button runs the comparison in a few seconds and redirects them to the comparison page.

Here’s how the result looks.

⚡ Action Items

• Cut to the chase; eliminate distractions.
• Use breadcrumb to make navigation painless, especially for websites with deep-level categories.
• Make product comparison straightforward.

Pro tip: use this guide to optimize your product pages to drive more sales.

Checkout Page

About 70% of shoppers abandon carts, and of course, this is incredibly frustrating. Providing excellent checkout experiences could help reduce cart abandonment.

Here’s how.

9. Your customers might need a walkthrough 

Add splash walkthroughs or a snippet for each field to guide customers in checking out. As this is a crucial step for you and your customers, it won't hurt to provide extra help.

Best Buy uses postal codes to estimate shipping and delivery. Here’s how they guide shoppers on that on the checkout page.

10. Keep the paperwork short! (minimize form fields)

People hate long forms, whether digital or on paper. Keep fewer form fields and close the loop quicker. Split tests the form fields to find the optimum field number. 

Use guest checkout to cater to shoppers that don’t want to fill out a form.

LuckyVitamin collects only email addresses for guest checkouts.

11. Always say 'Thank You' 

Always have a thank you page to guide customers on what next after placing the order. Make them know when to expect the order, how they will receive their invoice or other stages.

Amazon tells shoppers how they’ll receive delivery updates on the ‘Thank you’ page.

⚡ Action Items

• Walk shoppers through how to successfully checkout.
• Use split-tests to find the optimum form field size.
• Provide a guest checkout option.
• Use the ‘Thank you’ page to guide shoppers on the next steps.

Mobile Site

eMarketer estimates that mobile eCommerce could reach $3.5 trillion in 2021—this is a staggering 72.9 percent of global eCommerce sales. 

Brands that fail to cater to mobile users risk getting left behind. Use these mobile website navigation best practices in addition to the quick changes above to stay in the loop. 

⚡ Action Items

• Use a hamburger icon in the eCommerce menu design to indicate navigation. 
• A/B test the navigation menu’s location, such as the top bar, the bottom of the window, or as a sticky.
• Make it easy to tap, click and scan links.
• Add a search box that’s always visible.
• Put the most popular products or categories at the top and within reach.
• Use a homepage design that enables visitors to accurately infer what the site sells in less than 12 seconds—that’s the human attention span.

Frequently Asked Questions (FAQs)

1. What are the 4 ways customers navigate on eCommerce sites?

Customers' navigational flow helps eCommerce founders understand what shoppers want, the paths they follow to get to the value they want, and how to improve their experiences.

To provide them this information, we studied how typical online shoppers navigate eCommerce websites.

And here’s what we found. 

a) When customers know what they want

Customers navigate an eCommerce site differently when they know what they want.

They head straight to the search bar from the homepage to search for the product they want to buy.

Next, they browse the search results for the right product and click through to the product page to learn more about the product.

If it’s what they want, the customers click on the CTA button to initiate the checkout.

Here’s how their typical navigation path looks.

Homepage (1) → Search Bar (2) → Search result page (3) → Product details page (4) → CTA (5) → Cart View Page (6) → Checkout (7).

Typically, the nav path of shoppers in this category would require about seven steps.

Fact: shoppers that use the search bar are 1.8 times more likely to buy than average shoppers—always make their experiences seamless.

b) When customers are window shopping

About 2/3rd of online shoppers window-shop on their smartphones for fun.

Window shoppers usually start their product search from the product category page, from where they navigate to the product details pages and add the product to the cart if they love it.

They repeat these processes until they’ve had their fun, usually bouncing on the checkout page.

Here’s how their navigation flow looks.

Homepage (1) → Menu bar (2) →  Product category page (3) → Product details page (4) → Add to cart (5) → Repeat steps (6) → Cart view page (7) → Checkout (8). 

Fact: 77 percent of online window shoppers make impulse purchases, and 70% will return to purchase within the first hour of seeing the product.

c) When customers are doing some research

The navigation flow of this type of customer always depends on their traffic sources.

Here’s how it looks for those coming from organic search result pages.

Organic Search (1) → Product details page (2) → Product reviews and images (3) → On-site or off-site comparisons of products or brands (could be on social media as well) (4) → Add to wishlist or cart (5) → Checkout (6). 

Here’s how it looks for direct traffic.

Homepage → Menu bar (1) →  Product category page (2) → Product details page (3) → Product reviews and images (4) → On-site or off-site comparisons of products/brands (could be on social media as well) (5) → Add to wishlist or cart (6) → Checkout (7).

Browse abandonment or cart abandonment is quite likely for this type of customer.

Pro tip: the customer might need a nudge or two from other sources such as email to convert.

Create a retargeting audience of shoppers that: 

• Scrolled to the product reviews (use 70 percent scroll tracking) 
• Added to their wishlist or 
• Cart but didn’t checkout.  

Serve them personalized offers.

d) When customers are hungry for discounts

Customers that are looking for a discount have more predictable navigation paths.

The customers usually start their product search from an offer pop-up.

Or a homepage sales banner, or straightforward navigation to the discount page, if the website has one.

Here’s how their navigation path looks.

Homepage (1) → Pop up or homepage banner regarding the sale or discount page (2) → Sale category page (3) → Add to cart (4) → browse based on other products on sale (5) → Cart view page (6) → Checkout (7).

These customers are likely to be active on the category page, trying out different filters to identify the best value for their money. 

Pro tip: these categories of customers are the most likely to buy. Upsell and cross-sell at the cart view page or checkout page. 

Here’s a non-pushy way to upsell and increase your average order value.

2. What are the common navigational problems customers face on eCommerce sites?

eCommerce brands spend billions of dollars yearly to bring visitors to their websites—Amazon alone spent close to $7 billion in 2019.

But the average eCommerce conversion rate in 2020 was 2.86%, meaning less than three in every 100 site visitors converted into sales. Sometimes poor site search experience and navigation contribute to this.

So, we put together some of the common site-search and navigation challenges eCommerce shoppers face to enable you to streamline user flow.

a) Product browsing 

The product category is usually shoppers’ first port of call when browsing products. It could be disappointing to discover the eCommerce website offers only fewer categories.

Also, a deep category structure that requires shoppers to go through tiring sub-categories selections before finding the right product could hamper seamless navigation.

Here’s how AO Retails uses a modest product category structure to make navigation sweet.

Another common pitfall is product pages with fewer details.

It’s disheartening to get to the product page only to discover there are not enough details to make an informed decision. The truth is most customers want to learn about a product before buying.

Amazon doesn’t slack on this.

Some product pages don't showcase credibility and social proofs. 

Marketing is trust-based, and most shoppers want to be sure they’re not making mistakes with their purchases. They want PROOFS!

Here is what we saw on a TheNorthFace’s product page.

Clear images on the product pages are the closest a shopper can get to experience the product in real life, and when these are lacking, shoppers could navigate out of the website.

Amazon uses multiple images, shot from different angles to give shoppers a seamless experience, and shoppers can also zoom by hovering the mouse on the products.

‍

Giving shoppers options makes site search, and it could increase conversion, but most product pages lack this.

Amazon also does this so well.

Here’s a quick rundown of some typical eCommerce navigation challenges shoppers face when browsing products.

• Fewer product categories
• Not enough details 
• Lack of trust 
• Poor images and copy 
• Lack of options 

b) Site search

Over 7 in every 10 websites completely fail site search expectations.

In an era where shoppers are crazy for instant gratifications, an eCommerce search bar that lacks autocomplete features could be harming its sales conversion. 

Implementing autocomplete can boost sales and conversion by close to 24%.

Customers expect a clever search bar that both autocompletes and recognizes spelling errors. AO Retails is a classic example of eCommerce brands that’s smashing site search navigation.

Relevant product searches that return zero results are another site search challenge eCommerce visitors face. And nothing could be more disappointing than this. 

Here is a rundown of the common navigation challenges shoppers face when doing a site search. 

• No Autocomplete 
• Can’t recognize spelling errors 
• Zero results on search 
• Slow load time 
• Autocomplete with no image

c) Filtering and sorting

Shoppers crave convenience, relevance and speed.

No one probably has the time and even patience to dig through search results or product categories—most shoppers want results on the fly. 

Product sorting and filtering provide guided navigation tools that help eCommerce shoppers customize their navigation experiences. 

A complex sorting and filtering user interface could be challenging for them; keeping it simple is always the best bet.

Here’s how AO Retails simplify theirs.

Too many options could be overwhelming to shoppers, so the company keeps it manageable. AO uses different sorting attributes and filters for each product category to deliver relevant experiences to shoppers.

Here are the typical customers’ navigation challenges for sorting and filtering.

• Complex UI 
• Too many options 
• Not enough filters 

Now, What Next?

Start implementing the changes now! 

• Make users’ experience on the homepage sweet.
• Implement seamless site search and eliminate no match search results.
• Make it effortless for shoppers browsing the product category pages.
• Provide enough details on the product pages and use navigation trails to help shoppers retrace their steps.
• Remove frictions on the checkout page.
• Cater for mobile users.

Every site has different frictions and might require a bottom-up approach to deal with its unique navigational issues.

Use this free eCommerce site audit tool to unmask the navigational frictions in your website completely, make users' navigation experience sweet and invariably, increase the checkout rate