Test the navigation before designing the rest of the website

Category: Web design and UX

Many website projects start with colours, fonts and homepage concepts. This gives you something concrete to discuss, but it can also conceal a more fundamental problem: customers cannot find their way around.

For a Norwegian business website, the structure and navigation should be tested before the visual design is finished. This allows you to identify unclear menu items, overlapping services and missing paths to action without having to rebuild completed page templates. The goal is not to create as few pages as possible, but to make the route to the right information easy to understand.

Start with tasks, not the organisational chart

Businesses often structure their websites around internal departments, product areas or the division of responsibilities. Customers rarely know this logic. They arrive with a task: understand an offering, compare alternatives, check whether the supplier is a good fit or contact the right person.

So start by making a short list of the most important tasks the website should support. For example, a consultancy might prioritise enabling users to:

• understand which problems the business solves
• find the right service for their situation
• assess experience and expertise
• get answers to practical questions
• contact the relevant specialist

This list is a better starting point for the structure than a complete overview of everything the business does. Each main page should support at least one important user task and have a clear role in the customer journey.

Create a structural outline without visual design

Before you design finished pages, you can describe the structure using page titles and levels. Include the main menu, subpages and key action pages. That is enough to assess whether the content fits together.

Keep the most important categories clearly separate. If «Services», «Solutions» and «What we offer» all appear in the same menu, users have to guess the difference. Such terms may seem precise internally, but often become unclear when placed next to one another.

Also look for content that lacks a natural place. If important pages repeatedly have to be placed under «About us» or «Other», it is a sign that the structure does not reflect users’ needs.

Give each menu item a clear promise

A good menu item tells users what they will find after clicking. «Services» can work when the target audience knows the category, but more specific names are often better. «Accounting for businesses» says more than «Our solutions», and «Book an on-site assessment» is clearer than «Get started».

Avoid using creative wording in the navigation simply to make the brand stand out. The identity can come through in the language, imagery, typography and interface details. The signposting itself should be predictable.

Test with realistic questions

A simple test can be conducted using a text-based menu, a clickable prototype or paper cards. You do not need a finished website. Find a few people who resemble the target audience and give them specific tasks without explaining the structure first.

Use tasks that describe a need, not the name of the page you want them to find. Instead of «Find the contact page», you could ask: «You want to speak to someone about a project in Bergen. Where would you go?»

A practical test session can be conducted as follows:

1. Choose five to eight important tasks the website should support.
2. Show the participant the menu or a simple structure without explanation.
3. Ask the person to point out where they would start.
4. Ask what the participant expects to find behind that choice.
5. Note hesitation, incorrect choices and words that are misunderstood.
6. Adjust the structure and test it again with other people.

Do not assess the test solely by whether the participant eventually found their way. A user who has to try three menu items, go back and read everything again has encountered a real obstacle. The same applies if the correct choice is made through guesswork alone.

Use typography to confirm where users are

When the structure works, the typography should make it visible. Page titles, subheadings, body text and action buttons must have clear and consistent roles. Users should quickly be able to see what the page is about, what sections it contains and what they can do next.

Avoid using many text styles that differ only slightly in size or colour. This makes the hierarchy harder to read and more demanding to maintain. Instead, define a limited set of levels that are used consistently across page types.

Readability also depends on line length, line spacing and contrast. A brand font may work well in headings but be tiring to read in long paragraphs or on small buttons. Visual identity should not make important information harder to read.

Let the identity support orientation

A clear visual identity is more than a logo and brand colours. It should help users understand what belongs together. Colour, imagery, surfaces and components can distinguish between information, examples, customer stories and actions.

At the same time, be careful about giving the same colour too many meanings. If the brand colour is used for buttons, decoration, headings and non-clickable elements alike, it becomes harder to see what is actually interactive.

Create clear rules for the most important interface elements:

• Links should be recognisable without users having to try them out.
• Primary buttons should be used for the page’s most important action.
• Secondary actions should be visible without competing unnecessarily.
• The active menu item should be clearly distinguishable from the others.
• Error messages and confirmations should have a consistent format and placement.

Accessibility makes navigation more robust

A structure may look tidy with a mouse and a large screen, yet still be difficult to use with a keyboard, screen reader or enlarged text. Accessibility must therefore be considered part of the navigation design, not as a check carried out at the very end.

Test whether all menu items and buttons can be reached using the keyboard, and whether it is easy to see which element has focus. Ensure that submenus can be opened and closed in an understandable way. On mobile, touch targets must have enough space, and the menu should not cover important content without providing a clear way back.

Menu items, links and buttons should also have names that make sense when read in isolation. Numerous links labelled "Read more" make it difficult to understand the difference between the options. "Read about business insurance" or "Explore our advisory services" provide clearer direction.

Connect navigation to conversion

Good navigation is not just about finding information. It should move users forward once their question has been answered. Each key page type should therefore have a defined next action.

On a service page, the next step might be to view relevant case studies, read about the work process or request an assessment. On a customer story, it could be to explore the service in question. On a contact page, users should understand what happens after submitting the form and what information the business needs.

Avoid placing the same generic contact button everywhere without considering the context. A specific action such as "Request a cleaning quote" sets clearer expectations than "Contact us". At the same time, the wording must match what actually happens after the click.

Conclude with a final decision-making review

After testing, the project team should assess the findings as a whole. Do not solve every problem by adding another menu item. Sometimes pages should be merged, content given a clearer name or less important material moved out of the main menu.

Before the visual design is finalised, you should be able to answer yes to these questions:

• Does the structure cover the target audience's main tasks?
• Do users understand the menu items without internal explanation?
• Are important pages accessible through logical paths?
• Does each page type have a clear next action?
• Does the navigation work with a keyboard and on a small screen?
• Do typography and visual identity support orientation?

It is far easier to change a structural draft than to rebuild a finished website. By testing the navigation early, you gain a better foundation for design, content and conversion alike. The result is not just a tidier menu, but a website that helps customers move forward without requiring them to understand how the business is organised.