Dos and Don’ts of Ecommerce Navigation
Video Transcript
You’re going to learn about the state of eCommerce navigation, some best practices, and different elements to optimize and test.
When it comes to navigation across the eCommerce space, Baymard has done a lot of research. 42% of sites failed to fully support eight key search query types performed by users. That finding is referring to this article on search queries. You can see here, and we have the URL in the video and we’ll put it in the description, and you’ll be able to see the different types of search queries. I won’t go through all of them, but you can see things like exact, slang, feature, symptom, product type. Make sure to check out this article to see if your search is targeting all of these query types.
Another finding from Baymard is that 61% of sites don’t have a hover delay. What that means is the desktop hover is very sensitive. You can see a video here that’s linked in the article and a visitor is just barely going over the navigation on desktop and it’s triggering the hover menu to appear. And that can be really frustrating and distracting, make sure that there is some type of delay so visitors aren’t getting frustrated when they’re trying to move the cursor around the screen.
And lastly, they also found that 91% of sites don’t highlight the user’s current scope in the main navigation. What this means is, for example, here on Marks & Spencer, a visitor is on this particular product and they’re able to see where they are in the navigation highlighted up here. They’re in the home category, that makes it clear where they are in the site because not everybody is navigating logically through the site. People are coming in through different parts of the store.
When it comes to best practices, you want to ensure you have a robust search. You want to optimize your categorization. And if you have a large catalog, that might include doing some card sorting exercises or user testing. You also, as I mentioned previously, highlight the scope, especially for mobile, so visitors know where they are on the site, and also provide view all options, so visitors don’t necessarily have to select a subcategory. They can see all items within a main category.
Now I’ll go through a few examples of some of these elements on different stores. For example, a shop all feature. This is going to be more typical if you have a smaller catalog. Something like these drinks here from Ollipop, so they just have a few different options. They use a shop all feature rather than showing all of the categories in the header. Same here for Fly By Jing. They have a shop all feature as well. It’s something to you should definitely test if you are considering having this type of navigation. And when it comes to search, it’s really important that your search offers different features, so that means things like showcasing products that match the keyword, like this example on the right. It even shows the sale price and the original price. Here on the left, visitors can search through products. They can also search through articles if they want. They’re able to see the reviews and they’re also able to click to see all search results, which is very important.
And on mobile, with categorization, it’s really important that you don’t over-categorize. This might mean doing some user testing to make sure that visitors can go through this store and find the items that they’re looking for. For fashion stores, often it’s broken down into these main gender options, and then you go into themed collections and then the different types of clothing that are offered. Having a shop all is also good, especially for fashion and stores where people like to browse. For example, this phone case store has a lot of categories. They might actually have too many categories. It can be overwhelming to look through all of these and decide what to look at.
If you have a small catalog, there are some other things that you can test. Something like Allbirds. Instead of making people go into the hamburger menu, you can have navigation already directly in the header that they can scroll through and click into. Eight Sleep has a shop now button right in the header, so you can already jump into the products. And for Misen, their hamburger menu contains just a few different categories and they have some images to help you clearly distinguish what each category offers.
And lastly, when it comes to desktop, you really want to optimize your dropdown. Do user testing, make sure that visitors understand where to look for certain items so that they’re not confused. And also, make sure that you have categories that can fit under multiple different categories are available within those categories. For example, lamps could be featured in living room or bedroom or other types of rooms, make sure that subcategories that can fit within different categories appear there to make it easier for visitors to find them. That’s all I have for navigation. Hopefully you found some test ideas or other elements to optimize on your store.