Defining the navigation is one of the first things on the to-do list when starting a website project. The two crucial things to consider when designing a website navigation are information architecture (IA) and the navigation menu.

Information architecture (IA)

IA is the skeleton of the website, as it is the structure of the site. A good way to start IA is to think about it from a URL perspective. If the homepage is always “www.sample.com”, then the URL for other pages should look like this “www.sample.com/page”. This simple exercise is a good method to map out the whole site and also useful for SEO purposes.

An IA diagram often looks something like this:

In the picture above, each little box is a page on the site. This is a standard way of displaying the structure, but one suggestion from our experience is that it’s better to have the URL info attached to each page when we show it to our clients.

IA diagram attached with URL:

The reason is that with the URL attached it’s less confusing for clients to understand the hierarchy, meanwhile, it prevents them to confuse it with the navigation menu.

How to decide what pages are needed?

A key part of the navigation design is to know which pages will be on the site. The majority of this information comes directly from the client and should be based on the goals for the new website, as well as user needs. For a redesign project, it’s not a bad idea to use the previous website as a reference. However, you shouldn’t look at it too much as the point is to improve from the old site and not get too hung up on old ideas.

Another recommendation is to do some research on competitors’ websites and see which methods, content and structure they are using. Last, but not least, as a rule of thumb, try to limit the pages of the website, only keep the ones are really necessary.

Methods/tools

As mentioned in the previous section, the pages on a website should also be based on user needs, but how do we know what those needs are?

The tools listed below are some that we use to get this info:

• Google Analytics

Google Analytics, a bit of a no-brainer really, is an efficient and easy tool for UX designers. It gives a holistic understanding of the users needs. Some of the most valuable information can be found under the “Behaviour” tab. From here you can see what content users consume and the priorities of the content.

• FAQs

If there is a FAQ section on the website, designers can find some useful information there. The list of frequently asked questions might give some clues on how to arrange the hierarchy of the site. It also helps to design the menu better.

• Customer support

Similar to FAQ, customer support teams know a lot about users. Unfortunately, they are not always reachable for consulting as some companies don’t have dedicated customer support or they have out-sourced the service. Yet, it’s a good channel to learn about the users, so if possible, try to get a hold of the support data – is there something, for example, that the users are asking often that could be added to the website.

• SEO

Search Engine Optimisation is a key part of any website and it should be taken into consideration from the very beginning when designing the navigation and structure of the site. If you’re not a SEO wizard we recommend to consult SEO professionals to make sure the site is technically and structurally SEO-proofed.

We have been working with Suuntaus, a SEO company, and based on their tips, you should check at least these when planning the navigation and structure of your website:

• URLs (these should follow the same logic throughout the site)
• Page Titles (these should make sense for Google and the content)
• Heading hierarchy (consistency throughout the site!)
• Breadcrumbs (good for SEO and user experience)
• Language tags (consistency and clarity for the users)
• Call to Action buttons

Questions

In addition to a set of tools, remember to talk to your client. Here are some key questions to ask:

• Who are the target users of the site?
• What do the users want to know about the company/ products / service? (Check if there’s data on this, not just someone’s opinion)
• What does the client want to highlight about their company / products / services?
• Can we rank the importance of pages based on users’ needs?
• How can we ensure the website supports the sales goals of the client company? What are the calls-to-action (CTAs) on each page?
• If there are too many pages what can we leave out?

Every now and then, client’s interests can conflict with the needs of users’. What can we do in this situation?

Well, the ideal way is to find obvious evidence (thorough research with the help of the tools/methods above) that proves the needs of users. If there isn’t any, we try to push for a compromise and a testing period – once we have the needed data, the site can be developed to the right direction.

Navigation menu

How do we decide what’s on the menu and what kind of menu do we use?

It is important that users understand the menu, including the text content on the menu items, the relationship of the main menu items and its’ sub-menu items, as well as the UI design pattern (Common user interface solutions for visual and interaction problems.) used for the menu. To reach this, we often make several revisions of the navigation menu and test them on different people before agreeing on the final menu structure.

Usually the menu is changed for the following reasons:

• Clients want to highlight or remove some content
• Products / services are updated
• SEO purposes

Despite the content of the website, choosing which UI design pattern to use on the menu also affects the navigation.

A Horizontal navigation menu is the most commonly used one, where the menu items are visible at a glance. Some favour a vertical navigation menu because it can hold a lot more items than a horizontal one. The hamburger menu (See picture below, where the menu is marked with 3 lines) is also a popular choice nowadays because it works well on mobile devices. However, because it usually takes the form of a hidden navigation it can be a bit tricky on desktop view as it needs an extra click to view the whole menu.

Source: lmjabreu.com

For simple websites, it’s usually easy to make a decision about the main menu and which UI pattern to use. But for a website with a complex structure you need to think thoroughly and test different options.

Methods/tools

The following methods / tools are our favourites when designing the navigation menu of a website.

• CRAP

Robin Williams (NOT the actor nor the singer) has a UI principal called CRAP: “C” stands for “Contrast”, “R” means “Repetition”, “A” is “Alignment”, and the last letter “P” represents for “Proximity”, which is a good one to apply when designing the navigation menu.

The idea in Proximity” is to group information/items belonging to the same group in the same area. On the website, similar thoughts can be applied when designing a sub-menu — wrapping items similar to each other together.

• Cards sorting (On Post-its)

Cards sorting is a good method to find out the categories for grouping items. Write down all the menu items based on the site structure, one for each Post-it note, then place them around. Focus on what clients want to highlight first, then check the navigation order from the users’ perspective, and make sure these two match.

Questions

Here are some questions to help with decisions on the navigation menu:

• Do users know where to start when they see the main menu?
• Are the sub-menu items related to each other?
• Which UI patterns to use so that users know where they are and they can still navigate themselves between different pages?
• How can we reduce the number of clicks?

Navigation is always flexible, there isn’t a strict rule to judge whether it’s perfect or not. As long as users are not lost on the site, they know where they are, where to find the content they want and how to jump to other pages, the navigation is fulfilling its purpose.

A key thing to remember is to keep it simple. Too many items on the menu is not a good idea, not only will it make the menu look messy but it also causes the navigation to lose its meaning as a tool leading the users and improving the user experience on the website.

Key takeaways

Here I shared some ideas about designing navigation for website and how to get hands on it. Some takeaways for you:

• Start your navigation design with Information Architecture (IA). It’s important to figure out what pages you need first and then continue to navigation menu.
• Use different methods, tools and resources to find out users’ needs and make sure the needs make sense regarding clients’ business goals.
• Ask questions when it’s necessary. They will help you to find out the missing information.

If you’re interesting of reading more about navigation design, I recommend to check out these:

Efficiently Simplifying Navigation, Part 1: Information Architecture

Efficiently Simplifying Navigation, Part 2: Navigation Systems