Test the navigation before designing the website

Category: Web Design and UX

A visually appealing menu is not necessarily a good menu. It can look tidy and still send visitors in the wrong direction. The problem often arises because the structure is decided in the boardroom, based on internal departments, industry terms and established product names.

Before typography, colours and components are finalised, you should therefore test whether people actually understand where to go. This does not require a finished website or an extensive research project. A simple navigation test can be conducted with a preliminary page structure, a few realistic tasks and a small selection of people who resemble your customers.

The aim is not to find the perfect menu. The aim is to uncover uncertainty, misunderstandings and dead ends while they are still inexpensive to fix.

Start with tasks, not menu items

A navigation test should be based on what the user is trying to achieve. Do not ask whether someone likes the menu or finds the structure clear. Such questions often produce polite answers that are of little practical value.

Instead, create specific scenarios:

• You are considering buying the service, but want to know what is included. Where do you go?
• You are an existing customer and need help with an error. What do you choose?
• You want to find out whether the supplier has experience in your industry. Where do you look?
• You would like a price estimate before getting in touch. What do you do?
• You have received an invoice and wonder who to contact.

The tasks should cover both new and existing customers. Many corporate websites prioritise sales so heavily that service, support, documentation and practical contact information become difficult to find. This creates unnecessary enquiries and a weaker experience after the purchase.

Create a simple draft of the page structure

Write down the top level and the most important subpages without designing them. The structure can be shown as an indented list or a simple clickable sketch. Remove images, colours and decorative elements. This allows you to test the information architecture without visual design influencing the choices.

A draft could, for example, include:

• Services
• Industries
• Customer stories
• Insights
• About the company
• Contact

This may seem clear to the organisation, but several questions remain. Are prices under Services or Contact? Do customers expect to find support under Contact? Is Industries relevant to everyone, or does it only lead to additional choices? Does Insights mean the same thing to users as it does to the marketing department?

The test should make such assumptions visible.

Ask the participant to explain their choice

Give one task at a time and ask the participant where they would start. Follow up with brief questions:

• What do you expect to find here?
• Was there another option you considered?
• Are any of the words unclear?
• What would you do if the content were not there?

Avoid explaining the menu or defending the terminology. If a participant interprets a word differently from what you intended, that is a finding. It does not help that the word is correct in the organisation’s internal language.

Note the first choice, any hesitation and the alternative the participant considered. It is particularly useful to identify tasks where several people split between two menu items. This may mean that the categories overlap, or that the names do not explain the difference clearly enough.

Look for patterns, not individual opinions

One participant may have unusual expectations. Several people making the same mistake, however, point to a structural problem. Therefore, group the findings by task and look for recurring patterns.

Typical problems include:

• Several menu items seem equally relevant to the same task.
• An important content area is placed under a name users do not understand.
• Participants look for a page that does not exist.
• An internal product structure does not align well with the customer’s needs.
• Contact is used as a fallback because the rest of the menu is unclear.
• Important tasks require the user to already know the organisation.

Do not solve every problem by adding more choices. A larger menu can make the uncertainty even greater. First consider whether categories can be merged, names made more specific, or one clear entry point can lead to several related needs.

Test menu labels as content design

Menu items are short pieces of text with significant impact. They need to be brief, while still being precise enough to create the right expectation. Here, clarity should carry more weight than distinctiveness.

Words such as Solutions, Resources, Insights and Expertise can work, but only if the target audience understands what lies behind them. A more concrete name such as Services, Customer stories, Guides or Courses may be easier to interpret.

This does not mean that all websites should use the same standard terms. The name should reflect the content and purpose. If a menu item is called Products, the page must actually provide a useful overview of the products. If it is called Help and support, users should not be met with a general contact page without guidance.

Also check whether the terms work for people who are unfamiliar with the industry's abbreviations and technical language. Plain language is both an accessibility measure and a conversion measure: More people understand what they can choose, and fewer leave because the next step seems uncertain.

Move from structure to the homepage

When the main structure works, you can test a simple page draft. Show a sketch of the homepage or a central service page and give the participant a task. Ask them to point to the first place they would click.

A first-click test like this reveals whether navigation, headings and calls to action point in the same direction. If the task is to request a quote but the participant first opens About us, the reason may be that the primary action is too vague or not visible enough. If several people click an image that is not clickable, the design should either make the image interactive or remove the indication that it can be used.

Also test the mobile view. A structure that works in a wide top menu can become cumbersome when all levels are placed in a narrow mobile menu. Important tasks should not be buried under several open-and-close steps.

Use typography and visual identity to support the choices

When the structure is understandable without graphical embellishment, the visual design can reinforce the hierarchy. Typography should show the difference between the page title, section heading, body text, link and button. Users should be able to scan the page and understand the order without reading everything.

Visual identity should not make navigation more difficult. Low contrast, very thin fonts, text over busy images and buttons that resemble decoration are common examples of expression taking precedence over function.

In particular, check that:

• text and interactive elements have clear contrast
• links can be recognised without colour being the only signal
• active menu item is visible
• keyboard focus is easy to see
• text can be enlarged without content disappearing
• click targets are large enough and have sufficient spacing

Accessibility should be tested together with the design, not added at the end. A menu that is visually logical must also work with a keyboard, screen reader and enlarged text.

Connect the findings to conversion

Good navigation is not only about users finding the right page. The way forward must also be clear once they get there. A service page should, for example, help users understand who the service is suitable for, what it includes, what needs to be clarified and what the next step is.

Choose a primary action that matches the user's level of readiness. Request a quote may be right when the service is concrete and the user is ready to buy. Book a consultation may work better when the need must be assessed first. A general Read more button, on the other hand, provides little information about what happens after the click.

Do not measure navigation only by how many people click a button. Also look at whether users reach the right content, whether they have to go back several times, and whether enquiries concern what the page actually offers. More irrelevant enquiries are not necessarily an improvement.

End with a decision list

After the test, the findings should be translated into concrete changes. Avoid a general conclusion that the menu needs to be clearer. Instead, write what should be changed and why.

1. Keep menu items that the target audience understands in the same way.
2. Give unclear categories more concrete names.
3. Move content that users repeatedly look for to the wrong place.
4. Remove or merge choices that compete for the same task.
5. Create missing pages for important user needs.
6. Test the mobile menu, keyboard navigation and enlarged text.
7. Repeat the first-click test when the page draft has been updated.

This gives designers and developers a better basis for decisions than personal preferences. At the same time, it reduces the risk of spending time on a visually polished solution that customers cannot find their way around.

The most important test takes place before the website looks finished: Can a person with a real need understand where the journey begins? If the answer is unclear, the structure should be improved before it is wrapped in typography, colours and visual identity.