The navigation bar answers many user questions. How do I find what I want? What products are in my size/colour? What have I added to my cart? It’s a central information hub and a universal feature for online shoppers.

We interviewed Laura Walpole, one of our in-house developers about navigation bars, great UX and well-planned customer journeys. After completing a Fine Arts degree in Sculpture, Laura naturally travelled towards the digital arts, working as a brand manager for a social media network and progressing to own her own branding agency. Not satisfied with only working on design and aesthetics, she studied as a developer and now heads up some of our biggest clients at We Make Websites.

Why is a well designed navigation bar important and how can it help convert customers?

It’s the central hub for all activities, from the start to finish of the buying process, the navigation bar is where customers instinctively go to find information, products or their basket. It’s why a fixed navigation bar works so well, especially in e-commerce. It is comforting to have that there, and a poorly thought out customer journey can impede users, causing them to bounce off your store or shop with your competitors.

There are three things a nav bar should do:

1. If a customer knows what they want, it should facilitate them getting to that product as quickly as possible.
2. If a customer doesn’t know what they want but knows your brand, it should inspire them and take them to somewhere where they can find something you think they would like to purchase.
3. And then it should also communicate what you are about, as a whole brand, not just the one thing they came for

When a customer lands on your site via a desktop or mobile device, you have up to 10 seconds before they leave. You have to communicate a lot in a small amount of time. That means you have up to 10 seconds to make sure a user knows what your brand is about, what you are selling and what makes you stand out from your competition. And an action that has carried over from mobile is scrolling from the top to the bottom of a page, desktop users now replicate this. How do you tempt customers to view further pages and products?

Images can be misleading, for example, brands that specialise in sunglasses. Usually, this is accompanied by beach imagery, so does that company sell sunglasses, bikinis, holidays? This is where a well designed navbar can help customers make purchase decisions and understand your brand a bit further in a short amount of time.

Are there any good rules that should be followed when designing a navbar?

There are a few “laws” that are a good basis for developing an e-commerce site as a whole. Such as you should never have more than 7 options on a navigation bar. A psychology study by George A. Miller states that the human brain can remember up to 7 things (plus or minus 2), and this can be applied to customers browsing your store. If you offer too many options or make it too complex then customers will feel frustrated and leave the site.

The second is called ‘Hicks Law’. Hicks Law is the time it takes to make a decision increases as the number of alternatives increase. Which sounds obvious, right? But this kind of law is broadly used for user experience because it makes complete sense. We give the user more options, the more confused they become about what they should click to get where they want to go.

A good rule to stick to is the first few options on the navigation bar, and the last few, get the most clicks and traction. And the options in the middle can be forgotten. This theory is supported by analytics and heat maps such as Hotjar. It’s important to think about the structure of your site and sales often occur from the first or last option on the navbar; it’s where customers look first. Your hierarchy and naming also play a part, really think about the structure of your site and test, test, test. Use the prime piece of real estate at the start and the end to generate sales.

Should you add a search to your navigation bar?

Analytics is key to understanding how customers are using your store. ASOS has just redesigned to include a massive search bar in the top nav. It’s a lot larger than before and highlighted in a different colour. Most people know what ASOS’s catalogue is, and analytics will support this change as customers are going direct to products rather than browsing.

Search is really powerful. As your customers become more educated on who you are and what you sell, they can rely more on themselves and less on you hand-holding and creating the journey for them. They can say, “I want a green dress” and go straight in there at the search bar. Or “I know you’re famous for great shoes, I want them”. And so, they start to determine their own journeys and a smart search function can get them to check out much faster.

Your last point, get your brand ethos across in the navigation bar, how would you approach that?

It’s more the importance of naming your collections correctly. Well known brands can play a bit more with this and customers know what to expect. Starter brands might want to play it safe to get those important returning customer first. If you have a tone of voice, and that brand tone of voice is really loud and playful, then try and work that in, because that is a part of your brand and what makes you different.

If you were to rename the “About Us” section to something different, such as “Origins”, could you confuse customers?

I would test it. And if it’s negative impact, change it right back. If your customers are loving it, then mess around with it some more. You can test for a day, you can test for three hours, (obviously, that’s not as helpful) but you would want a certain chunk of time. And of course, there’s always A/B testing. See if it makes any difference.

What are the big nav bar no’s?

Do not put all your products under a product category. You’re missing out on the opportunity to give customers a preliminary insight into who you are and what you sell. If your navbar just says “Products, About Us, Contact Us” you’re not giving any ideas or inspiration, it could be any other store. And you’re missing out on the opportunity to convert customers, especially those that visit from a mobile device. You are essentially hiding all your important information.

The other thing is simple development laws, such as ‘x’ closes the browser window and links are underlined or a certain colour. You should always consider this in your design. So if your font is underlined, or in a certain colour, consider if this is going to build frustration when a user thinks this is a link and it takes them nowhere. You may have to give away a small part of your aesthetic for a good user journey.

Things that should be in a navigation bar include a logo or homepage link, some type of search, your cart and your primary collections. If there’s room, you can consider adding in delivery information or contact information, however, this can be achieved through graphics or banners below or above the navigation bar. But test what works and use your analytics to see what your customer's attention is drawn to.

Three e-commerce stores doing navigation differently:

They are champions of the filtered search. When you first arrive here, you can see that the nav bar is a giant search bar. Once you start typing, Arket offers suggestions to popular collections. Once you start to search, this wonderful colour wheel and filter options drop down. They do not split genders automatically in the navigation, it’s an option. So you can search for a product, say green top, and you’ll be able to view all results, then filter down by gender. It’s really forward thinking.

Arket doesn’t have a massive product back catalogue like ASOS, they focus on quality and sustainability, which is shown through the ‘Where it’s made filter’. I feel like this is the future of search and it’s really fun and playful, again putting some of their company style and ethos into the navigation bar.

Burberry has a more classic navigation style, however, I feel it works well with their brand. From the front page, customers are able to direct search products they want, that then leads to multiple filter options. They minimize the navigation bar at logical points through the journey, which allows them to show their beautiful brand imagery with no distractions. It really portrays a high-end catwalk brand. This is all about those big brand moments and celebrity endorsements. And there are nice touches like hiding the main navigation and offering you just filter options, but if you need to get back to the main header category, when you move your mouse to the top, the navigation bar comes back. This site offers a lot of space for their products and imagery which is all in keeping with the ethos of the brand.

It would be rude not to mention the masters of e-commerce, especially after their redesign. ASOS stock so many products that they know that browsing is a bit of a chore, it can end up with scroll fatigue, so they've introduced this giant search bar and focused on their filter options, rather than overarching categories.

What they have introduced is a new style of category, 'Shop by product’, ‘Shop by activity’, ‘Shop by occasion’. So, rather than making these separate collections and hiding them somewhere else, we are navigating to the same stuff in all of these things, they are just giving you more options of how you want to navigate. Activity is probably more helpful than leggings, in this sense. I want to start running, I want activewear. However, I might not think of all the products I need to start running. It’s an interesting way to increase AOV, as potential runner might not intentionally search for water bottle, headphones or sweatband, but it’s all here in this collection.

Big thanks to Laura for an in-depth look at what is a very important part of the customer journey for e-commerce brands.