We use cookies to improve your experience. Please read our cookies policy here.

×

Web design tips and examples for effective site navigation

6 minute read

Graham Charlton
Graham Charlton

When visitors arrive at your website, in most cases you’ll want to encourage them to look around and view multiple pages.

This may be encouraging them to browse and find products they’re interested in buying, or simply helping them to find out more about your products or services.

This is why easy and effective navigation matters. It enables your users to find what they are looking for, or to discover interesting pages and content as easily as possible.

Good UX (User Experience) matters here, as hard to find information and unclear navigation causes frustration, which can lead to people simply abandoning your site and looking elsewhere.

In this article, I’ll look at why navigation matters on websites, some examples of how websites use navigation to achieve different aims and some best practices to consider when planning or improving navigation.

What is website navigation?

Website navigation is the information and links you provide to guide visitors to different pages of your website. It’s the signposts that tell people how to get from one area of the site to another.

It can be a navigation menu at the top of a page which provides links to different sections of the site. It can also be the links within a booking form or checkout process, which direct users through the different stages and make it clear how they need to proceed to complete a booking or make a purchase.

Why website navigation is important for UX

Website navigation is one of the key factors affecting the user experience on a site. If people can’t find what they want on a site or can’t move from page to page easily, this is a poor experience.

It’s also one which will affect your business. If customers arrive with the intention of making a purchase or booking and can’t find what they want due to poor navigation, this can have a negative impact on business revenues.

Also, most website visitors will move around your site using navigational links. Up to 30% of web visitors use site search, (a figure which will be much lower for many sites) which means the vast majority are using links to move around.

If website navigation feels easy and intuitive to the user, this helps to create a more pleasing on-site experience. It saves them time wasted trying to second guess the site to find things and makes it much more likely that visits will end up in conversions.

Website navigation examples

There are a number of different ways of presenting navigation options, which can vary depending on the site or the purpose of specific pages.

For example, the navigation on a desktop website will sometimes present more options to the visitor, while mobile sites tend to hide or slim down options to save space.

Main navigation bar

This is the most common way to present navigation options, especially on a site’s homepage.

The example below shows the main navigation on the John Lewis website. It’s a site with thousands of products, and lots of separate departments, so it needs to help people find the section they want.

Online shoppers are familiar with options presented like this, and it can make sense to follow convention as visitors will know where to look and how to use this style of navigation.

John Lewis main menu

Image source: www.johnlewis.com. © John Lewis plc 2001 – 2021. April 2021

The point of a menu like this is that it allows people to browse the site in a number of ways to cater for different preferences.

They can choose the most relevant department for them or browse the sale or by brand. The choice and ordering of options is important here as it can drive traffic to the areas of the site you want to promote.

Ideally, the choice of these options would be data driven. For example, you may spot that many visitors head towards sale pages and decide to put these in your main navigation to make them easier to find.

Another benefit of the main navigation bar is that it can easily be used across the site, allowing people to navigate from wherever they happen to land on the website.

Sidebar navigation

For main navigation, the top bar is generally more useful than side bars for e-commerce sites. However, sidebars can be useful on some sites and for some e-commerce navigation.

For example, this photographer’s website uses sidebar navigation to present options and leave much of the page free to showcase examples of his work.

Mike Kelley website

Image source: www.mpkelley.com. April 2021

Sidebar menus can be useful for presenting longer lists of navigation options which simply wouldn’t fit horizontally without being untidy or too complex.

On e-commerce sites, sidebars can be useful for this reason especially in areas such as secondary navigation. This is the page you reach after clicking one of the options (Home & Garden in this case) from the main navigation bar on John Lewis.

By presenting the options vertically in the sidebar, John Lewis can present its 50+ options in a way that’s easier to view and use.

John Lewis Home & Garden webpage

Image source: www.johnlewis.com/home-garden/c500006. © John Lewis plc 2001 – 2021. April 2021

Drop down menus

Drop-down menus are another form of secondary navigation which help websites to present multiple navigation options to users.

This is the John Lewis dropdown for Home & Garden, which presents all of the options within that department. It’s a useful way to present these in one single view and can help to speed up navigation for users.

The key here is to present options in an organised way so users can take all the choices in.

John Lewis dropdown menu

Image source: www.johnlewis.com/home-garden/c500006. © John Lewis plc 2001 – 2021. April 2021

Footer navigation

Footer menus have a specific function on most sites. Commonly, they are there to present options that some users will need but that don’t need to be as prominent.

This includes options such as links to customer service contact options, account logins and terms and conditions.

Links to some of these options should be presented outside the footer too. For example, a more prominent customer service link can be useful elsewhere, while delivery and returns information should be shown on or linked to from product pages.

John Lewis footer menu

Image source: www.johnlewis.com. © John Lewis plc 2001 – 2021. April 2021

Hamburger menus

Hamburger menus are used by many sites for mobile, as they save space on a smaller screen.

Here’s an example from ao.com, with the three line hamburger menu opening up to show links to the various departments within the site.

AO mobile menu

Image source: ao.com April 2021

However, there has been some criticism of hamburger menus. For example, research suggests that hamburger menus are worse from a UX perspective as they make content less discoverable.

It recommends that, if your site has just four main categories then these are better presented as links than hidden behind a hamburger menu.

Another option, as used by ao.com on their homepage, is to use alternative options to show categories to reduce the potential downsides of hamburger menus.

Best practices to consider for website navigation

Whichever navigational method your site has, it’s important to think about some key best practices.

1. Use clear headings

Labelling is important with navigation, as users typically scan information on a webpage quickly. Language and text should be clear and designed to avoid any confusion.

2. Follow convention with navigation

There’s no need to reinvent the wheel with web navigation. As Jokob Nielsen once said, “users spend most of their time on other peoples’ sites, so they expect yours to work the same way.”

In the case of navigation, this means they’ll look for navigational links where they are used to seeing them. This means using a top bar for the most important links and using sidebars and drop downs to present secondary navigation.

3. Think about the structure of your navigation

If you’re creating navigation from scratch or improving current navigation, think about the structure of your site.

The diagram below from Pi Datametrics shows an ideal navigation structure, where the biggest blue dot is the homepage, the next biggest dots are the main categories and so on.

Logical navigation like this makes sense and is predictable to users, while following this structure with internal linking throughout also works well from an SEO perspective.

Website structure diagram

Image source: www.pi-datametrics.com/blog/how-to-boost-visibility/ © 2021 Pi Datametrics. April 2021

4. Add clear space between navigation links for mobile

Navigation needs to take account of mobile users, and one key factor is making navigational links easy to select without user error.

Space links apart so that they can be selected easily by touchscreen users to avoid user error. This is also one of the criteria used in Google’s Mobile Friendly test.

5. Make sure menus stand out from the background

If a site design is busy and colourful, menus won’t always stand out. Make sure they can be seen easily by using font size or colour. A little background shading or colour, as used by ASOS below can help the menu work with the rest of the page.

ASOS website menu

Image source: www.asos.com/men © 2021 ASOS. April 2021 

6. Navigation should work alongside business goals

While it’s important to consider UX at all times, navigation can also be used to direct visitors towards your most important pages.

These may be your most popular products or perhaps a page for requesting a quote or making a booking or even pages which convert well.

Use data to find your best performing pages and make them easy for users to find.

In summary

I think the key theme here is to make website navigation as obvious and easy to use as possible.

It’s about clarity of links and language and clear placement of navigation menus so that users can find them with the minimum of effort.

Good navigation improves the user experience on your site and makes it more likely that visitors will find products or services, while a clear structure also helps Google to crawl and index your site more effectively.

Please note: The examples shown here are for illustrative purposes only. Nominet is not endorsing the companies or products shown.
Graham Charlton

Graham Charlton is Editor in Chief at behavioural marketing company SaleCycle. He has previously worked for Econsultancy and Search Engine Watch, and has written several best practice guides on e-commerce and digital marketing. Follow him on Twitter

Sign up to the UK Domain newsletter

Get all our monthly news and updates direct to your inbox