Website design is continually evolving, but one thing that never changes is the importance of the user journey and their experience through your website. A well thought out navigation bar will form the structure and backbone to your site. Navigation affects:
- Web traffic – Google looks favourably on sites with a user-friendly navigation, determining the level of traffic you receive from search
- Conversions – The ease of use of navigation within a site can be correlated with the number of visitors converting into customers.
Why is a navigation bar important?
As a central information hub and the familiar site organiser, the navigation bar is where users instinctively go to quickly find the page, information, a collection or a product they want. There are three key things a navigation bar should do:
- Assisting the user to find the product or information they need as quickly as possible.
- Directing customers to an area of the site to inspire purchases when they do not know what they need.
- Communicate your brand and what the business represents.
Anything which stands in the way of these key navigation requirements may force visitors away from your store in search of more relevant products and information on competitor sites. The navigation bar forms such pivotal role in retaining users on a website. If a user doesn’t find what they require within 10 seconds on either a desktop of mobile device, they will leave and resort to other product and information providers.
Your site must communicate and be easily navigated in a short space of time. You must represent your brand, cleverly highlight what you sell and express the distinctive features which differentiate your site from others.
A well-designed navigation bar will help visitors make purchase decisions quickly and help them understand the brand in a short period of time.
Designing a navigation bar for desktop and mobile
Designing your web navigation for desktop is the one of the first tasks undertaken, however with responsive design and Google recently announcing its ‘mobile-first’ indexing strategy, websites will now be largely indexed and ranked based on the sites mobile version. This means it would be amiss to ignore how visitors navigate through your site using a mobile (or tablet) device. Key criteria when designing for mobile devices include:
- Consider the importance of links shown on desktop. Be selective based on mobile user requirements to establish a clean and easy to use mobile site.
- Generally the attention span of mobile users is significantly shorter than a desktop user. Owners must consider this when designing a simple to use navigation structure, which is suitable and quick to use.
- Make sure ‘tap targets’ on mobile are efficient and large enough for users with sizable fingers. Users will get increasingly frustrated if functionality is too difficult on mobile.
Image 1: Engagement by users on different devices. With Google’s ‘mobile first’ indexing strategy, design must be focussed on every device.
Navigation bar tips
A relevant paper published by psychologist, George A. Miller, debates that the human brain can only manage and remember up to 7 items (plus or minus 2). Putting this theory into a website context, a navigation bar should never include more than 7 different options on the top level. If you insist on making your navigation complex and difficult to follow, customers will simply get frustrated and look elsewhere. (The paper by George A. Miller is called “The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information”).
George isn’t the only man with a theory on this sort of thing. Hicks Law, named after William E Hick and Ray Hyman, describes how the decision time increases with the range of choices available. More options will ultimately provide more confusion, delaying their transition from search to checkout completion.
A tip from us at Odd Panda and the analytical experts is to concentrate on the first few options and the last few options on the navigation bar, which generally receive the most clicks and traction. Based on heat maps and analytics, this is where customers look first so the structure of your navbar plays a key role in simplifying the user journey which will then lead to generating more sales.
Navigation bar sins – What to avoid!
There are certain prerequisites that owners are best avoiding when it comes to your website navigation. The advice we would give is:
- Don’t compile a full list of products as part of your website navigation. Give potential customers the opportunity to explore freely what is available on your site, otherwise you’re directing visitors away from what your brand is about and other products they wouldn’t have considered.
- Think about providing more personality with your navigation bar page links. Try and stand out from competitors and imagine it as an opportunity to convert customers.
- Ensure the user experience when designing your store. Are page links reactive when hovered over, are they responsive like other links on your site, does text perform similar to a link despite not actually linking anywhere? Avoid user frustration by providing an easy to follow user journey and good user experience.
Image 2: Search feature used by ASOS on their website
Navigation bar with search
We’ve already discussed that analytics forms an important role in getting your navigation just right. Businesses such as ASOS, have replaced their entire navigation bar with an oversized search bar instead as this is where most users navigate their site from.
A navigation bar, however, is encouraged to simplify and categorise the user journey, but a search facility, especially for e-Commerce stores, is incredibly influential. Rather than following the pre-set user journey, users can take it upon themselves to locate what they are after using a smart search facility to locate items based on certain search criteria e.g. ‘Skinny Jeans’. This is a ‘win win’ for both owner and customer as purchases can be made much faster and more often due to the ease of use of a search facility.
A search tool can also be used in conjunction with a navigation bar, it doesn’t have to replace it. Search can prove invaluable for web visitors, but most importantly it can be a useful learning experience for a website owner to get to grips with most common searches. If you decide to integrate a search feature, it should be available throughout every page of the user journey, not just on the home page.
Tracking analytical results and metrics based on search criteria can provide valuable information about how you should improve your navigation. This includes:
- Addressing most popular search terms which don’t have any relevant pages or products. These are pages or products which your business should be looking to introduce.
- Examine the searches people are making to find your products, are there similarities? You should consider altering the terminology of items on your site to keep in-line with popular searches of that page or product.
- Does it seem like visitors are using the search tool instead of your navigation?. If so, you should check whether links within your navigation are broken or whether it is simply causing confusion.
Using drop-down menus
Although we emphasise the importance not over-complicating and confusing visitors to your site, often the best way to collate relevant pages and products is by using drop-down menus. It allows you to combine a list of page links and/or products into a smaller real estate position under one top level heading.
Certain elements to consider when using drop-down menus include:
- They are slightly unpredictable on touch screen devices like tablets and mobile platforms.
- The heading title for the drop-down should be clear and definitive.
- They should not be overused. Providing drop-down menus from every top level heading will lead to confusion and frustrate users in their search of finding what they need.
- Drop-downs are sometimes met with misinterpretation for what the visitor needs to do. Some drop-down menus work on hover, others on click. At Odd Panda we favour showing the drop-down when the visitor hovers over the top level heading, but also allowing them to click the top level heading without transferring them to a relevant page.
That covers drop-down menus, but more specifically what about mega menus which has a slightly different functionality…
When to use mega menus
Mega menus are ideal for retail sites, where category options exceed a number deemed suitable for a drop-down menu. It’s also perfect for a categorising a diverse range of products. Alternative businesses uses would be for sites with a large range of services on offer. Odd Panda have designed and developed a number of sites that employs a mega menu to display their products and services, however we have only encouraged its usage when we felt it as appropriate.
Mega menus, although not appropriate for every site (especially non-eCommerce stores), are the perfect navigational experience for visitors when delivered well. They provide the opportunity to present many options at once, even in conjunction with icons or images to make decisions easier.
Preparing and designing your navigation bar isn’t as straightforward as you may have thought, and we hope this blog has given you food for thought and inspiration about what you can do to maximise visitor retention.
While designing your navigation you must focus on the importance of SEO. A search optimised site has a page for each service or product, each team member of category. Your site should avoid making a ‘services’ or ‘products’ page unless it links to other search optimised pages. Finally, for SEO purposes ensure your site works well for desktop and mobile users, but also for search engine robots. A good user journey will be reflected in results shown on your sites analytics, so it’s important to get this right.
Your website analytics is the closest friend you have. They have the answers to all your problems, pointing out what needs attention and what is working well. Don’t ignore your closest friend. Do an evaluation of your site, test everything and ensure the functionality and navigation is having the desired effect. You’ll be amazed at the results.