Ecommerce and Retail • Ecommerce Design
The Power of Good Website Navigation, and How to Harness It for More Conversions
03 Jan 2019 • 12 min read
Navigation is the process of moving through a space. That space can be physical, such as finding our way around a museum, or virtual, like attempting to find a product on a webstore. It’s an activity of primary importance.
Polynesians of old were supreme navigators, creating the ancient art of wayfinding to establish new settlements, by navigating their boats across vast areas of ocean using nothing but modest vessels, simple charts, and the natural elements above their heads. These capable people are an illustration of what can be achieved with exceptional navigation.
When it comes to your webstore, navigation is more than just the menu. It’s every single tool that your customer uses to find their way around your site. This includes the category menu, site search field, breadcrumbs, and more. Every available method has the potential to enhance your customers’ wayfinding skill, which is why designing good navigation is so important. By equipping your customers with top-notch navigational tools, they’ll effortlessly sail through your webstore like experts.
Helping your customers to discover more will result in you selling more.
Businesses with the best ecommerce navigation examples are in a much better position to succeed. Here are some ways in which you can empower your customers with superior navigation, using design best practices.
Product categories allow your customers to explore your inventory, either with a specific item in mind, or in a more casual manner. Categories can be broken down two main components: labels, and design.
Ideally, the labels that you use for your categories should reflect the wording that your customers would use, and there’s a couple of great ways to do this.
Language used within your industry vertical is language that your customer will likely understand, making it a valuable area of research. Map out the category trees of businesses similar to yours, and compare them to each other to get an idea of what is standard within your industry.
Step into the shoes of a user experience (UX) professional and invite some of your customers for a card-sorting exercise. In the instance of product categories, this involves writing down a range of your products onto cards, and asking your participants to group them into categories that they define (this method is referred to as open card-sorting.)
Here are the simplified steps for completing card-sorting for product categories:
You’ll want to encourage them not to create too many sub-category levels - each additional level makes navigation harder.
When the task is over, you’ll end up with a category structure that has been decided by those who are best suited for the job - the people who are actually browsing your categories. This exercise is also a great way to build a relationship with your customers, helping to turn them into fully-fledged advocates who’ll hit the buy button more often!
This article goes into much more detail on how to run a successful card-sorting exercise.
After completing the above exercises, you may find that it makes sense to place the same sub-categories under multiple top-levels, in which case go for it. Your primary aim is to create effective navigation; it doesn’t matter if there’s duplicate categories.
Some of your customers might have an “I want the latest thing” mindset, in which case you’ll benefit from adding a what’s new category. This could include all your products, sorted by when they were added to your inventory.
It’s also great idea to include a home link as the first item in your category navigation, as this provides users with a way to “start over” if they become lost in your site.
Once you have the content finalised for your categories, it’s time to consider the design.
Product categories are a principle form of navigation, so should stand out from the rest of the site, and adhere to well-tested conventions. This means displaying your categories in a horizontal navbar, and possibly highlighting them with a strongly-contrasting background colour.
You should also consider making your categories “sticky” when scrolling, so that they’re attached to the top of the browser at all times, and so readily available. Research suggests that almost half of users who arrive at an internal page on a site will use the menu to continue browsing, so it’s vital to ensure that the category menu is readily available.
For mobile users, the category menu would typically be hidden from the page, and can be revealed by clicking on a hamburger icon. Given that 72% of Australian smartphone users make shopping purchases on their mobile device, it’s crucial that your categories are easily accessible on mobile.
Introducing a mega menu - a large drop down menu that shows a selection of top-level categories, some sub-categories, and often a product - has shown to promote effective navigation for webstores.
When viewing a category, consider highlighting or emboldening the category menu link, to offer an additional visual indication of the current position within the webstore. The effect should be clear - try not to be too subtle!
Finally, ensure that the top-level category is clickable, as some customers may want to see an overview of what’s available before navigating into sub-categories.
Some shoppers know exactly what they want, and the search bar is the swiftest way in which they’ll get it.
Search can be broken down into three distinct areas:
Given the importance of search for first-rate navigation, the search field should be positioned in the header of your webstore, clearly distinguishable on the page. The magnifying glass icon is a universally associated image for search; using this icon as part of the go/confirm button for the field will result in people spotting it more quickly. This button should be both clickable, and executable by pressing the enter key, to cater for the shortcut-users among your customers. Within the search field itself, advisory placeholder text such as “Search movies, games” can provide a handy clue as to what kind of content can be searched.
Immediately after a search has been performed, visual feedback should be offered through the use of either a progress bar, or a spinner, which communicates to the customer that their search is progressing as expected.
People do things differently, so it’s important to be flexible in with the search terms that can be used. A blow dryer to one person might be a hair dryer to another, or they may even use the terms interchangeably! These kind of nuances must be considered for an excellent search function. With Neto, you can list product name synonyms as part of a product’s search keywords field, helping your customers to find the product that they need, whatever their preferred term for it. You can even go one step further and add common misspellings in this field, making your search even more powerful.
The returned search results should include both full and partial matches, for example showing results for headphones when searching for Sony headphones. It’s best not to return results where the letters are within a word - such as showing headphones when searching for phone - as these will typically convulate the results. Also, displaying the number of results will give the customer an idea of how long they want to spend browsing through them.
Control can be extended by adding filters and sorting options to the search results, including filterable elements such as price, category, and brand. This fine-tune searching will make it easier for your customers to find their desired product, and comes as standard with all of Neto’s themes.
If the search didn’t produce the desired results, the customer’s original terms should be saved in the search field, so they can be easily edited and quickly re-searched.
A concept borrowed from the Hansel and Gretel fairytale, breadcrumbs illuminate the path on which you’ve travelled. They show your current position in a webstore, and the steps that are taken to arrive there. Breadcrumbs help you to “get your bearings”, and as such, are a key navigational tool.
It’s important to show breadcrumbs on every single page, the exception being the checkout page, where you want customers to focus solely on completing their purchase. Each step that makes up the path to the customer’s current location should be separated by a > symbol, in addition to being clickable, allowing them to easily navigate to a different page.
The product page is an ideal place to present similar items to the customer, which are great for those who don’t want the hassle of making their way through your category tree again.
Cross-sells - while primarily a marketing technique - can also enhance navigation by allowing quick access to other products, in the hope of selling more.
Some shoppers may view multiple products before committing to a purchase, so displaying a recently viewed items section on the product page allows them to quickly jump back to previous items. This feature is great for the category page too.
Convention is a key aspect of UX, and an important part of great navigation. Applying a conventional layout to your webstore will help to ensure that your customers “just get it”, because they’re already familiar with what’s in front of them. By intuitively understanding the layout, navigation becomes much easier.
Some examples of conventional patterns would be displaying utility menu items such as my account and track order somewhere in the header of the webstore, a position in which they’re typically found. Any methods of navigation such as your utility links, category menu, and search field should also appear in the header, and maintain a consistent position throughout the site, allowing customers to quickly learn the layout.
Other typical conventional elements include displaying large, clear page titles on every page; eye-catching call to actions for your add to cart and checkout buttons; category filters in a sidebar, and less important links in the footer of the webstore, such as about us, terms and conditions, etc.
--
By building exceptional navigation, your customers will cruise through your site with ease, exhibiting the skill of wayfinding Polynesians. Not only will they be able to complete their purchases with little friction, they’ll also be more likely to return because they’ve had an enjoyable experience. Investing the time to create a remarkable ecommerce navigation structure is a worthy undertaking for the success of your business, helping you convert more, more often.
Want to learn more about website design? Check out Why You Should Take UX Seriously for some tips on UX Design and applying it to your Retail Website or Inspiring Ecommerce Designs Part 2 for some UX Design Examples.
