Navigation design is crucial for an optimized user experience

Tips for user-friendly navigation design

Published in

UX-Design | Content Strategy

6 min readMar 27, 2023

Your website navigation is the first point of interaction for most users on a website. Many Users don’t even scroll down but first, check out the menu options to quickly determine whether a site is for them.

If they cannot find what they are expecting or looking for, most users will leave within less than 15 seconds.

Subsequently, user-friendly navigation is crucial for a successful website and impacts overall useability. Navigation can support many goals — user retention, brand recognition, lead generation, and increasing search engine traffic.

This post will discuss the fundamental principles for designing user-friendly and accessible navigation. Secondly, I will talk about the menu design process and techniques that you can use to improve conversions via your navigation.

Let’s start

Basic Principles for navigation design — with examples

1. Provide active states & hover states for orientation

It’s essential to highlight the active state of a website’s navigation to help users keep track of their location on the site. This can be done by changing the color of the active link (or highlighting it in another way)

Use hover states to show users what is clickable.

Examples

slack.com uses a classic underline to showcase clickable items.

allianz.at uses color and underlining to highlight the active category.

Here are some more comparison examples:

2. Stick to conventional patterns

If there are any areas in web design where you can be creative — it is not the navigation.

This is where you should stick to conventional patterns.

Here are some to look out for:

✔️ Display the Navigation in a horizontal bar on the top of the page
✔️ Don’t hide the menu behind a burger unless it’s necessary (e.g., mobile)
✔️ Place the Logo in the top left corner and link it to the home page
✔️ Limit the number of items to approx. 7–9 Items

Why should you stick to this?

The short answer: Almost all “other websites” use it, making it a convention.

And since your users spend most of their time on “other websites”, this is the concept they are most used to.

So while you me be forgiven for breaking the rules if you are a world-famous brand, everybody else fares better with sticking to widely accepted concepts.

Here is an additional example of hidden navigation:

Beware that every rule has exceptions, and every design decision depends on the use case. I’m sure there are cases where hidden navigation or a hybrid solution can have its benefits.

For the sake of this guide, however, I want to keep things simple and refer to studies that have shown that hidden navigation has hurt useability:

📋Hamburger Menus and Hidden Navigation Hurt UX Metrics
📋How does hidden navigation impact user experience?

In doubt, Usability Testing can always help you to determine what is better for your purpose and your users. Thankfully, I have written a post about that, which you can read here:

Usability Testing — the why, the what, and the how

There are so many reasons why usability testing is essential. I am sure that would be a blog post on its own.

medium.com

3. Divide primary & secondary navigation

Suppose you have secondary navigation items, like login, registration, or a search bar. In that case, it’s essential to cater these items to the different user groups and visually separate them.

asana.com sticks to conventional patterns and also divides the navigation into sections.

4. Design an accessible menu

The most essential factors in designing for accessibility are ensuring readability (large enough text sizes, appropriate fonts), sufficient contrast, and defining focus states.

✔️ Provide large enough menu items that are readable, have enough contrast, and are easy to touch or click on.
✔️ Provide focus states to help users navigate the site with a keyboard
✔️ Use descriptive, short titles for your menu categories. Don’t make the navigation difficult to read.

💡Extra Tipp: Avoid using industry-specific jargon or abbreviations.

5. Consider using a mega menu

Mega menus can help organize large amounts of content, and you can use menu headings to structure them. While they tend to be overwhelming, they can also provide users with a rapid overview of your products and services without the need to click through several sites.

asana.com uses a mega menu to show their services at a glance

Mega menus are suitable for sorting large amounts of content.

Mega menus have a ton of content — and therefore require a lot of consideration for structuring and organizing them. They must be carefully designed. Otherwise, they can quickly become a user nightmare.

The navigation design process

A sitemap is an excellent way to plan a website’s navigation before designing it. This can help ensure that the navigation is organized and easy to use. It’s essential to develop the navigation with the visitor in mind and to allow visitors to find relevant information quickly.

There are a ton of tools you can use to visualize this, like Miro or Lucidchart. Or Gloomaps.

Great places to gather the relevant categories for your sitemap are your keyword research or user research data (for example, from tree testing or card sorting).

When it comes to designing navigation, there are often two significant challenges:

➡️ Sticking to/Reducing to the most relevant pages
➡️ Prioritizing them accordingly

Using navigation for optimized conversions

Very often, navigation is an underestimated conversion tool. Here are a few things you can do to improve conversions via your navigation:

✔️ Insert a clear CTA (e.g., Free-Trial, Contact, Quote, etc.)
✔️ Experiment with sticky navigation — in combination with the first
the point, this will keep a CTA in front of your users across the whole page
✔️ easier navigation will improve the findability of products and will increase the conversion rate in itself

Summary

Navigation is crucial for website useability. Therefore, you should design it with extra thoughtfulness.

Here are the points mentioned:

#1 Use active states & hover states
#2 stick to conventional patterns
#3 divide primary & secondary navigation
#4 design an accessible menu
#5 consider mega menus for large amounts of content — but design them carefully

If your navigation is off, your site becomes practically unusable. Since navigation is a global element, an improvement can enhance the whole site’s quality.

It’s worth it.

Here are more of my UX-related stories

Bring the Action — designing CTAs

Learn how to design CTAs that are well written, designed and placed