Process guideline
A guidance on how to tackle the process of creating a user friendly navigation.
Establish your groups of content
Map out all the content that your website will consist of. Both content that is planned to go live in the nearest future, as well as content that potentially will be a part of your website in the future. Together with relevant stakeholders, preferably the users of your website, divide the content into groups that feels natural and relevant. Assign each of the groups of content a fitting title. We recommend two ways to go about this:
- A card sorting workshop with stakeholders
- An unmoderated card sorting activity using the tool: Optimal Workshop
Arrange the groups of content
When you have your groups of content, it is time to look a the IA. Your amount of content groups should determine how you arrange your content and also what kind of global navigation pattern you should choose. Here are some rules of thumb:
- If your amount of categories exceeds twelve a mega menu might be the way to go
- Place the most visited pages in the top of the information architecture
- Keep your users jobs to be done in mind when prioritising the groups of content
Test your proposed IA with tree testing
When you have arranged your groups of content into an IA diagram, it is a good idea to test it with your users. In that way, you are able to identify any challenges and optimisation opportunities. before your design plays a role and influences the experience. Ideas on how to conduct your tree testing:
- Unmoderated tree testing on Optimal Workshop
Merge your IA into your design
Using the navigation guidelines, it is time to turn your information architecture into design. Based on your needs, choose the element that makes sense. When you have chosen a navigation element, check if it exists in the design system. If it does, read about the component usage. Here you can get a more detailed understanding of when to use it and when not to use it, as well as best practices related to that specific component. If you don’t find a navigation element that fits your needs, please reach out to the design system team, as we strive towards constantly improving and shaping the design system to fit your needs.
Test the navigation of your website
When you have designed your website, testing the navigation is essential. Get your user to find their way to different parts of the site and see if their behaviour indicates that some navigation paths are too difficult to find and requires changes.
Best practices
Some best practices to look to when creating your navigation
Minimise navigation options
Avoid overwhelming the user, in stead you want to minimise the navigation options. If a user has too many options, it is easy to get insecure about whether to go in one directions or another. This creates a higher risk of not finding what you are looking for. Instead you want to strive towards using clear and easy understandable labels, that are easy to distinguish between.
Minimise the steps and avoid deep navigation
You want your user to quickly find the place where they can complete their ‘job to be done’, or reach the content they are looking for. This can be achieved by cutting out unnecessary clicks and not forcing the user to go through a deep path to reach their destination. Instead let it be up to the user to filter if they prefer and don’t force the user down a deep structure.
Prioritise consistency
A consistent navigation structure will help your user build mental models. Just like in real life, it is easier to navigate when you know the route and which turns to take. Being consistent in your navigation will help your user learn their way around faster.
Don’t use breadcrumbs, when there is no hierarchical structure
Breadcrumbs works really well as a navigation pattern that helps your user see their path, understand where they are on the website, and help them easily navigate back to previous pages. However, it is really important to use them correctly. Breadcrumbs does not make sense if the user is not able to click on the previous crumbs and see a page that is a level higher in the hierarchy. Breadcrumbs also don’t make sense on the first page a user lands on after using the main navigation, as they have simply not taken any route / path yet.
If in doubt: reach out to the Design System Team
The navigation guidelines can hopefully guide you in the right direction and help you answer the questions you might have. However, there will most likely be scenarios that the guidelines don’t cater to - yet. In those cases, or whenever you feel the need, please don’t hesitate reaching out to the Design System team. The guidelines are an ongoing process and are not set in stone, as we strive towards making them as useful and good as possible.
Types of navigation
Mega menu
The mega menu should be used if it will give the user a better overview on a content heavy website. To avoid clicks and a deep structure, we recommend a mega menu that displays all options at once, categorised by headlines, to create a full overview with one click. The mega menu can either be triggered in the primary, if there is no secondary navigation, or in the secondary navigation if that is present. The mega menu includes the secondary navigation labels if it is present.
Dropdown menu
If your website is not content heavy, a mega menu does not make sense. Instead at smaller dropdown menu is the way to go. The navigation links are therefore able to trigger either a mega menu or into dropdown items.
Burger menu
The burger menu is the mobile version of the global navigation. It is a combination of the navigation bar, the primary navigation, the secondary navigation and the mega menu / dropdown list.
Jumplink navigation
Jumplink navigation is for long pages with a lot of content, where the goal is making the user scroll less. Instead you provide them with a table of content, consisting of anchor links, that will take them to the section they are interested in. It should not be used to navigate between pages, but navigate to a section of a page. Don’t use it, if your don’t have a long page with a lot of scrolling. On mobile we recommend making the sub navigation collapsible, so it doesn’t take up too much space.
Breadcrumb
The breadcrumb component is for the user to easily get an overview of where they are on the website, as well as providing an easy way to jump back in the information structure. It is important that the different crumbs represents an actual page that the user can navigate to. The breadcrumb should only be used, if the site has an hierarchical structure. On mobile we should use the back arrow button, with the previous page, in the structure, as the label.
Quick links / navigation buttons
The quick links can be used to give the user a shortcut to a different page or to a subpage of the page that the user is currently on. The idea is not to use it as a filter.
Internal navigation links
The internal navigation link should navigate the user to a page that relates to the section of the page they are currently reading about. It would usually be on a landing page where the user has the option to navigate to different parts of the website based on a short sneak peek. The internal navigation link is usually used as a read more option.
Back arrow
The back arrow is used as an alternative to the breadcrumb. Both in terms of it being the mobile alternative to the breadcrumb. But also when the breadcrumb does not make sense. If the website only has two layers, the breadcrumb does not provide any value, here the back arrow is just a valuable.
Global search
Search is an important part of the navigation at any website, as it is the users way out if they get lost or can’t find what they are looking for. We recommend having a global search that is easy to find for the user no matter what page they have landed on. This is why we have included it in the global navigation.
In page search
On pages with a lot of products or articles to choose from, it makes sense to include a local search functionality. In that way the user don’t have to use a lot of time trying to find the specific product or a product category they are looking for.
Tab bars
The tab bars should only be used for navigating within a section of a page, where you want to alternate between views within the same content. It should not be used to navigate to different areas / pages. You don’t want to use a tab bar if your user might need to see content within the different tabs at the same time.
Tags
Tags are used to associate the current page with some overall keywords that the user might want to navigate to, if they weren’t able to find the information they were looking for on the current page. It make sense to place tags in the button of the page, as this is where the user is able to know if they want to know more about a related subject or if they have gained the knowledge they came for.
Decision tree
A decision tree for when you need some guidance on what type of navigation element, that would make sense to use.
On page navigation
General recommendations
- Make sure you have condensed your content so it is as precise and clear as possible. Don’t include irrelevant information that does not help the point of page come across. Or worse, that confuses the user and makes them give up.
- When the content is as condensed and precise as possible, consider whether it is best suited for one page or several pages. How do you make this decision? Here are some things to consider:
- When you are showing everything in one page, makings the page extremely long, the user can experience large loading time
- Users are willing to scroll through long pages if they find the information relevant for their specific need. But if your page includes sections of information that most likely are not relevant for all users or only for some, it might be better to divide it into several pages. For example, if one user has a job to be done, that could be solved with only a part of the information and later on they have another job to be done, that could be solved with another part of the information: divide. However, if the user has a job to be done, where all the information presented in a cohesive way is necessary, go with one page
- If one page is fitting for your users goals and needs, and the page is long, then you should consider if and what type of on page navigation that could help the page be more comprehensive for your user: In page links, tabs or accordions.
In-page links / jump links
In page links / jumps links presented in a table of content view are good for helping users go to relevant sections, as well as providing an overview of the content of the page. If you have a long page, where all the information is strongly related, and where it does not make sense to split it into different pages, jump links presented in a table of content can be a help for the user. Jump links are best for article type pages where all of the content is related. It is a good idea to provide some kind of ‘back to top’ link as well, so the user is able to find their way back to the table of content again, when then they are done reading the section they initially was interested in.
Tabs
Tabs are best suited different views of the same page. They are designed for the user to easily navigate back and forth between different views. “In-page tabs are supposed to keep users on the same page while alternating between related views. The intent is to reduce users' cognitive load by chunking content and progressively disclosing it upon selection. Strictly speaking, each in-page tab should have the same layout but with different data.” NN group. Tabs can be difficult for users to find if the content within the tabs are too long - meaning if the user start to read the content and scrolls for a long time, they might get lost and not end up finding their way back to the tabs. Especially because the first tab is selected by default and the user therefore not necessarily has interacted with the tabs yet. This means important content might be hidden behind the resisting tabs.
Accordion
Accordions are used to formatting several short content sections into sections, where the user easily can get an overview of the informations provided and get answers to what they are looking for. It is important not to use accordions for long sections of content, as the user then will have a hard time regaining an overview.
