The 10 commandments of website navigation

Imagine that you enter a department store, ready to shop for a new t-shirt. You know the brand you want, the color you want, and you know you want 100% cotton, perfect for your sensitive skin.

Suddenly you realize the shop floor in front of you is a total mess. 

Under a sign for jeans, you find piles of sweaters and cardigans. In a large display labeled ‘baseball caps’, socks of all sizes are muddled together, along with a winter scarf strewn across the top. 

Bewildered, you glance at a map of the store, which turns out to be little help in your t-shirt-finding mission, as it only contains directions to the Garden and Kitchenware sections. 

Annoyed, you leave the store, vowing never to return.

An online customer can feel exactly the same type of frustration when a website’s navigation is confusing — not knowing where to go or being annoyed at the lack of information to help them do what they want. 

However, all is not lost. In this article, you’ll learn about design practices, site maps, and the secrets to building the best navigation for your website.  

Introducing information architecture (IA), user interface (UI), and user experience (UX) design

Before we start delving into best practices for website navigation, it’s a good idea to have a basic understanding of the following types of design:

• Information architecture (IA) – This type of design looks at the organization and structure of content. Once you understand the basics, you can help your customers find the information they need and complete the actions you would like them to take. 

• User experience (UX) – This type of design is about (you guessed it) how the user experiences your product or service and strives to make the overall feel of your website a positive one. 
  
  A UX designer will look at or conduct research to understand user needs and pain points. They will consider the user journey, look at IA to determine what a user may need, and draw wireframes that include page elements. 
  
  UX designers may work closely with web developers and content strategists to truly understand and serve the user.

• User interface (UI) – This type of digital design is all about the touchpoints between a user and your product or service, such as icons, spacing, call-to-action buttons, and responsive design. The UI designer will look at how accessible a page is, whether the colors of the text are easy to read and if the page works across different screen sizes.

Each type of design is essential when it comes to creating your website—especially your website navigation. 

A poorly executed user interface (IU) results in lousy navigation, resulting in a terrible user experience (UX). But a strong UI will make it easy for a user to figure out where to go to find what they want, producing a much better UX and therefore a much happier user. These happy users are more likely to buy something, subscribe to your newsletter, and share your products, services, and information with their friends.

Your main aim is to create easy-to-use navigation that will leave your users feeling positive about your site and what you’re offering so they leave your site feeling like they were able to accomplish what they wanted.

What is a sitemap — and why is it useful?

A sitemap is how search engine web crawlers understand your website. This includes information about the pages and files such as video and audio content. A sitemap also tells search engines the website’s hierarchy and which pages are important. 

Once you’ve created your sitemap and submitted it to Google, you can use Google Search Console to check everything is in order. It’s important to check that your links are correct to avoid disappointing visitors and web crawlers.

The sitemap will be handy when it comes to building your website navigation. After all, it will most likely have all the pages you include on your website. This means that you will be able to quickly identify the most important categories for your user and what you must include in your navigation.

The importance of website navigation

Like in the shopping example at the start of this article, if a website is challenging to navigate, users and search engines will find it hard to understand what it’s about. 

Website navigation is seen as part of Information Architecture (IA) design. Here are three reasons why it is so important to get right:

1. It affects SEO

Your homepage is typically the page with the most authority on your website. Any pages linked from here are also seen as important. If you’re not directing your users to relevant pages from your homepage, the chance for those pages ranking highly decreases.  

2. It affects traffic

The longer a person stays on your site, the more search engines will love you. If a visitor lands on your homepage and doesn’t click a link or interact with your page and heads back to the search engine results page, it shows that the user isn’t interested in your content. This ‘bounce rate’ is calculated as the percentage of people that land on a page and leave. You can find this rate in Google Analytics.

3. It affects your conversion rate

If visitors to your website don’t want to stay and engage with your content, they will leave because they can’t find what they want. You won’t drive any traffic to your product pages, you won’t make any sales, and none of those visitors will convert into customers.

Navigation types

Here are three of the most common navigation styles for websites:

• Standard horizontal – This is the most common navigation style and displays a list horizontally. 

• Drop-downs – If you have a lot of categories to cover, such as large department stores, drop-down navigation allows you to list your content easily. It expands to give the user more options. But be careful not to build in too many levels, as that can be difficult to use, especially for people who have disabilities.

• Vertical sidebar – Although somewhat dated now, a sidebar will keep your navigation in one place. If you haven’t got many categories, it’s still a valid option for your navigation. 

When you’re designing your navigation, it’s essential to understand how many pages you will be linking to. If the number is high, then drop-downs are a perfect choice, but if it’s fewer than seven, standard horizontal is best. Most websites use standard horizontal, so it’s quick and easy for your web visitors to know what to do. 

The 10 commandments to follow

Now that you have discovered why good navigation is so important, and the three most common navigation types, it’s time to give you the rules for getting it right.

1. You shall write for the user – As soon as your user lands on your website, they will see the navigation bar. Avoid using overcomplicated, confusing, or vague language — use popular words or phrases to tell them what you have to offer. On the Namecheap navigation bar, you’ll find words like Domains, Hosting, and WordPress. You won’t find words like TLDs, Hosting services, or open-source content management systems.
   
   Think of your audience. If the majority wouldn’t understand an industry-specific term, don’t use it. This is also important for search engine optimization (SEO). If your navigation is descriptive and well structured, it helps search engine crawlers identify which of your pages are important. 

2. You shall try to minimize the number of items in your navigation – It’s very easy to overwhelm your visitors if you include too many options in your navigation. Less is more. The more succinct your categories and labels are, the better they are for search engine optimization (SEO) as well. 

3. You shall try to minimize navigation levels – When you minimize the number of clicks it takes for a customer to reach specific information on the site, the more satisfied a customer will be. The Nielsen Norman Group confirms that “…the deeper a hierarchy becomes, the more likely visitors are to become disorientated.”
   
   A flat hierarchy with easily recognized categories helps the user to find what they’re looking for quickly. However, if your website has a huge number of categories, which could overwhelm the customer, it may make sense to add another level ahead of these categories to make it simpler. 

4. You shall update your navigation based on user flow – Google Analytics offers a report on user flow. If your homepage is the main page where your users interact with your website, you can view which of the navigation items are used and which are not.
   
   Make a point of checking this now and again to get a true idea of which paths are most used. If many navigation items aren’t clicked on, just remove them, or rename items if you think it’s not clear enough to the user. 

5. Your navigation shall not be hard to find – Don’t try to be inventive with your navigation bar. Place it horizontally across the top or vertically on the left-hand side. If it’s difficult to locate, your visitors will get frustrated and are more likely to bounce back to the search engine results page and find another website instead. 

6. You shall consult the site map to decide positioning – By using the site map to create your navigation you will quickly know which pages are the most important, and therefore should be of the highest priority. There’s no point in burying the most important page deep within your menu. It needs to be front and center for the user to find.

7. You shall design for navigation for mobile too – Fingers are different sizes, so account for this when it comes to links. Make sure they’re big enough. Think about reducing the items in your navigation and displaying the important pages first. 

8. You shall use hover-over effects – If a user has their mouse over some text, it’s a good idea to show them where they are so they can easily see what they are doing. It’s the equivalent of using your finger to point where you are on a map. You can also change the text color so it stands out. The clickable text needs to be obvious to the user so that they can interact with it.

9. You shall test your navigation on different screen sizes – Don’t forget that your website visitors will be on a number of different devices with various screen sizes. Make sure it’s easy to navigate if a user is on a tablet or desktop. 

10. You shall be inclusive – Web users are not all the same. Some may be visually and hearing impaired or may have cognitive and learning disabilities, impacting website experience. Good navigation should be good for all users, so pay attention to contrasting colors, the ability to change font size, use descriptive labels for links and buttons, and offer keyboard access. You can find out more about guidelines and web accessibility standards at W3C.

A successful navigation

Carefully considered navigation is the key to a successful website. It’s a way of getting the important information in front of the user, making it easy, informative, and fast, resulting in a positive experience that will keep them coming back for more. 

Hopefully, this blog post has provided some helpful guidance for planning your own website navigation.