One of the most critical elements of a high converting eCommerce website is the navigation.
We know, statistically, that providing customers with a great website user experience is hugely impactful on conversions.
With an intuitive navigation, your customers can quickly find what they’re looking for.
Additionally, with more than 70% of website visitors now on mobile devices, the navigation becomes even more critical. We have such a small amount of real estate on a mobile device screen, so the way we design our navigation plays an even bigger role.
Plus, if you include all the right design and interactive elements you’ll give them nice little hits of dopamine as they successfully navigate on your site, and you’ll find your conversion rate will go up significantly.
In this article, we’ll go through the most common mistakes we see eCommerce businesses make all the time with their navigation, as well as her top tips for getting this critical component of your website right.
What is website navigation & why is it important?
Your website navigation doesn’t just refer to the top menu but includes the footer menu, filters and search.
In a nutshell, how easy is it for a visitor to navigate your store and find what they are looking for.
A website’s navigation affects the store’s average conversion rate, user-friendliness and also has an impact on organic ranking and therefore impact traffic.
It is imperative to review your navigational structure continuously to make it easy for customers to find what they are looking for.
Top menu navigation
We recommend 5-6 top menu links but some websites with big catalogues will ultimately end up with more than 6. Which is fine as long as it is well structured and adds value. But we challenge you to try and stick with 5-6 menu items if possible.
Our attention spans are not as long as they used to be, by offering less options you are less likely to overwhelm a visitor with choice.
Fewer links also means more link juice is transferred to these main category/collection pages.
One of the biggest mistakes we see in ecommerce is a website with multiple top menu links, most of them being links to information pages and only one “shop” link where you find the main menu nested within this one link.
Not only does this make for poor user experience but it is also not best seo practice. Customers won’t be searching “shop” when they are looking for your products.
Make it easy for customers to find what they searched for by adding high search terms to the top menu. Customers are more likely to stick around when there is a direct link to the search query they used to find your store.
What to include:
- Links to collection and/or product pages (be concise and descriptive – a customer shouldn’t be surprised when they click on the link)
- About Us page if space permits
What to exclude:
- Links to Information pages
- Links to other websites
- Links to free stuff
- Links to Reviews
- Links to social media
- Link to “home”
How to structure your top menu navigation
Ultimately this will be very dependant on the size and variety of your catalogue and no 2 stores will look the same but here are a few key rules to remember:
- List your main product first: If you have a best selling product that outperforms other products on a month to month basis, list is first. Make it easy for customers to find this product.
- Represent all main product categories (collections) on the top menu and list any sub-categories (collections) in a drop down menu. Ensure sub-Categories includes a ALL link for that category.
- Add categories to make it easier for customers to find what they are looking for e.g. shop by type, shop by age, shop by brand.
Footer menu navigation
How to structure your footer navigation:
As mentioned above it is best practice to list all links to information pages on the footer. Not only will this reduce the risk of distracting customers from making a purchasing decision but most customers expect to find these links on the footer and might miss them if you list them on the top menu.
This doesn’t mean you can just dump all the links to the information pages into one footer column. Instead we recommend structuring the footer column based on the type of information the page contains. E.g. list all policies in one column, list about us, contact us, faqs and blogs in an About Us column etc.
Filters
Filters can be very helpful to improve your stores average conversion rate if used correctly. If a customer uses a filter to minimise the amount of products they view on collection pages they tend to be searching for something more specific and it is likely that they are lower down the buyer funnel ready to make a purchase.
Similarly to a top menu, plenty of thought should be given when setting up a filter. Ask yourself (and your customers) how they shop. Would they look for a specific colour, or a specific size? Perhaps they are looking for a gift in a certain price range?
By setting up these helpful filters you make it easier for customers to find exactly what they are looking for – the golden rule is to get a customer to the checkout process in the shortest and quickest way possible.
Another consideration when it comes to filters, is how you set it up. Shopify natively offers an option to set up filters based on tags and most Shopify 2.0 themes allow you to set up filters as menus. There are also lots of apps you can use to set up filters that will use available sizes or variants to filter products.
Mobile menu navigation
The volume of users using mobile vs desktop is growing by the day and therefore it is very surprising to see how many stores don’t factor in how their menus and filters display on mobile devices.
Here are our top 5 recommendations for setting up menus + filters on mobile:
- Always use a solid background for the top menu
- Ensure the menu is mobile responsive and that sub-headings collapse beneath top menu links
- Ensure menu links are large, easy to read and spaced out (easy to click on)
- Preferably you want to collapse footer links beneath column headings instead of listing all footer links in one long row
- Ensure the Filter is mobile responsive and that it collapses on mobile. You don’t want customers to have to wade through page after page of filter links and options before reaching the product grid.
Visual navigation
Just because the number of visitors using mobile is on the rise doesn’t mean you shouldn’t also optimise your navigation for desktop.
- Don’t reinvent the wheel. Most websites uses a horizontal display on desktop (and a hamburger in the top left corner on mobile). Stick to familiar design constructs so that you don’t require your customers to expend too many brain calories trying to figure out where to find stuff! (Spoiler alert – they won’t!)
- Leave enough space between links especially if top menu links contain multiple words e.g. kids swimwear
- Use a dark, clear font on a solid background. Customers can’t find what they are looking for if they can’t read the links.
- Add a hover colour so it is clear they are about to click on a link (take action)
- Logo placement is dependent on the amount of links you have, either top left or middle of your banner.
Read more about other costly mistakes eCommerce websites make
I wrote another article that details 10 costly mistakes eCommerce businesses make that impact sales conversions. You can check that one out here.
Wants some help getting more traffic and sales?
Book a complimentary eCommerce Growth Strategy session with us today. There’s no obligation to buy at the end of it, and I guarantee you’ll walk away with a much better plan for how you’ll grow your business and achieve your goals than you have right now!
