Navigation is one of the fundamentals that have a direct connection with usability. Without a good navigation system in place, users will struggle whenever they interact with a website. That’s why all websites should be designed in a way that allows users to both navigate easily and find what they are looking for through searching and browsing.
Intuitive navigation doesn’t happen by chance. It’s a result of detailed research and planning. In this article, I want to describe what to consider when working on website information architecture to help you design an intuitive navigation structure for your website.
Why is your site navigation structure so important?
A site or an app without a defined
structure is just a random collection of pages. The structure will help users
understand the relationship between individual pages and navigate from one page
to another.
The difference between website Information Architecture and navigation
UX designers sometimes merge the concepts of information architecture (IA) and navigation. It’s true that these concepts are closely related, but they are not the same. Information architecture informs and guides the website navigation design.
Information architecture is the way that we arrange the parts of something to make it understandable.
Abby Covert, How to Make Sense of Any Mess
IA defines site content and functionality, while a website’s navigation is a collection of user interface components and patterns that helps visitors find information and functionality. Navigation components include global and local navigation menus, breadcrumbs, contextual links, and so on. In order to be effective, navigation should always accommodate the full scope of content and functionality of a site.
Example of Information Architecture. Image credit interaction-design.Guiding principles for website navigation structures
The primary goal of navigation is to help
visitors find information through functionality and encourage them to take
desirable actions.
Self-evident
When working on navigation, remember that no matter which page the visitor comes from, they must be able to find what they need on that page and other pages of the website. Good navigation should feel like an invisible hand that helps users find their way around a website.
Visible
Hidden navigation patterns (such as hamburger menus) increase the chances that users can overlook navigation options. It’s a well-known fact that what is out of sight is out of mind. Even when the users know that navigation is hidden behind a certain element such as a hamburger icon, they can easily forget navigation options because they are not in direct view. That’s why the navigation should be visible and placed where users expect to find it on a website.
Visible navigation always wins over hidden navigation. Image credit LukeW.Content organization models
A content organization model is an organizational structure that defines the relationship between web pages. A model of the content organization serves as a foundation for website navigation structures. The product design community established some efficient models of the content structure. Knowing them is important to choose an appropriate information structure for your website.
Let’s take a look at the most common
models.
Single page model
A single page contains all required
information and navigation options. The single page model is ideal when a
digital product requires minimum content. This model works best for landing
pages.
Flat model
In the flat structure, all the pages are
equally important, and they are put at the same level of hierarchy in the
navigation system. This model works best for small websites.
Flat structure content organization model. Image credit WebFX Blog.Hierarchical model
A hierarchical
model shows the information hierarchy from the main elements to their
sub-categories. It is the default model for large websites.
It’s possible to
define a strict hierarchical model and a co-existing hierarchical model. In the
strict hierarchical model, child pages are only linked from its parent page.
A strict hierarchical model for content. Image credit WebFX Blog.In the co-existing hierarchies model, child
pages may be accessible from multiple parent pages/higher-level pages.
Co-existing hierarchies pattern. You can travel from page to page on the same hierarchical level. Image credit WebFX Blog.How to create a good navigation structure
Website information architecture has a direct connection with navigation—IA helps create a solid foundation for the future navigation system. That’s why it’s vital to define the IA before designing navigation. IA will help to handle the volume and complexity of the content and design better navigation.
1. Create taxonomy
Taxonomy is the practice and science of classification. Creating a taxonomy is an extremely important step in building your website’s structure. In the case of IA, it’s an attempt to group different unstructured pieces of information and give them descriptions to create a more structured design. The most important technique that allows taxonomizing the content is card sorting.
IA should always be formulated with the
target user in mind. Thus, as soon as you have the content, conduct a series of
card sorting sessions with your target audience to arrange it. The point of the
activity is to see how users perceive the website’s content pieces.
When you understand how your content should
be organized, you can design proper pages and define a logical URL structure.
2. Define website’s structure
After you create a taxonomy, you need to
define a website’s structure. A website’s structure should clearly define a
website’s various page levels, priorities, categories, and hierarchies. The
goal at this stage is to define the essence of a website’s hierarchy.
It’s recommended to take a broad to narrow approach in organizing your content because this is well-aligned with the way people expect to interact with content (going from general to specific).
Amazon uses a broad-to-narrow organization of content. The homepage acts as a navigation hub for the various categories of products. Image credit Amazon.3. Creating navigation elements
Once a website’s
hierarchy is established, the next step is to implement it in design. The navigation
structure should offer a natural flow of information, and this happens
when designers select a proper navigational
element for each type of content.
Consider various types of navigation:
- Primary navigation. Primary navigation is global navigation that is available on all pages. This navigation contains global navigation options and enables users to get to the main sections of a website from every location.
- Secondary navigation. Secondary navigation supports primary navigation by providing context-relevant options.
- Contextual navigation (also known as tertiary). Contextual navigation supports content by providing specific options. Those can be local links for product details pages on a search results page.
Primary, secondary and tertiary navigation. Image credit Steveschoger.Things to remember when designing website navigation structures
Strong homepage
Your homepage should act as a navigation
hub for your visitors. It’s vital to link to the most valuable pages from your
homepage. By doing this, you improve findability (your visitors are more likely
to find the relevant content) and show search engines what pages are the most
important.
Mental model of the users
A mental model is an explanation of someone’s thought process about how something works in the real world. Mismatched mental models are a common problem among product designers. Product team members tend to fall into the trap of the false-consensus effect. Often times projecting their behaviors and reactions onto users, design layouts, and navigation according to their needs, not the needs of their users.
To create a strong website navigation, you must start with thorough user research. Begin by learning your users’ needs and behaviors and map your content to the persona that represents your target audience.
Three-click rule
The three-click rule suggests that a user
of a website should be able to find any information with no more than three
mouse clicks. This rule will help you prioritize information. Ideally, your
important pages should be 2-3 clicks away from your homepage, and anything that
is 4-5 clicks away should be less important.
Communicate current location
Failing to indicate the current location is
probably the single most common mistake. “Where am I?” is one of the
fundamental questions users need to answer to navigate successfully. Assure
visitors that they’re in the right place by making it clear where they are.
You can make your site’s navigation structure
clearer by adding breadcrumbs to your pages. Breadcrumbs are clickable links
that are usually visible at the top of a page. They reflect the structure of
your site and help visitors determine where they are on your site.
Breadcrumbs are an integral part of many large websites such as eCommerce online stores; BestBuy uses breadcrumbs for its product categories. Image by Best Buy.Be consistent
Be consistent in the navigation format and
design decisions. Consistency increases the predictability of the website.
Predictability makes users feel safe and secure. Thus, if you choose to use the
top-aligned menu on the home page, don’t suddenly make it a sidebar on other
pages.
Consider cognitive abilities
There is not much information that a human brain can hold forefront at a given time. The number of objects an average human can hold in short-term memory is 7 ± 2. It means that if you have a lot of navigation options in your navigation structure, you cannot provide all of them all at once. When the navigation system contains too many links or is too wordy, it becomes difficult to scan and comprehend. As a result, content becomes less findable. Instead of showing everything at once, you should chunk the information and provide it to users gradually.
Verizon uses a technique of progressive disclosure for the top-level navigation options. Image credit Verizon.As soon as a user hovers over the “Small and medium” option, two nested options become visible.
Proper labeling for navigation options
The correct label gives users a proper
understanding of what to expect from clicking on a link. It’s recommended to
use simple and concise labels for navigation options—one or two words written
in a way that everyone can understand the meaning. Ensure you use a
standardized naming convention. For example, when users want to find a page
with a list of products, they expect to see an option with a label “Products,”
not “We offer.”
Evaluate website navigation structures in the context of the user journey
Users’ journeys are rarely linear. Most of the time, their path to conversion involves multiple entry points and touchpoints, and this has a direct impact on the navigation system. When navigation and labeling are ready, outline the whole structure, and create a sitemap. Define a scenario of interaction and evaluate what pages users will visit to complete this scenario.
A template for the travel agency website. Image credit Visual Paradigm.Use your analytics data to inform your navigation structure
It’s always important to keep your business goals in mind (what you want people to do on your site) when working on your navigation. Match business goals with actions that people actually take on your site and design IA around that. It’s possible to utilize analytics for that. Use tools like Google Analytics or Hotjar to understand whether your current navigation model is working for your users and your business goals.
Hotjar shows what objects visitors interact the most. Image credit Hotjar.Follow mobile-first thinking when working on navigation
When you start with IA for a mobile device,
it forces you to put what’s most important on the page. Mobile-first thinking
will help you prioritize both content and navigation options. So at the time
when you start working on desktop design, you will have a clear picture of what
navigation options you will include and in what order you want to show on
individual pages.
The Guardian website has a well-prioritized list of navigation options. Image credit justuxdesign.Conclusion
Navigation is a conversation between users and the system. A good navigation structure is an effective conversation that reflects user behavior. That’s why the process of navigation design should put the user front and center. Users should be involved in all steps of product design—from creating an information architecture to the final testing of website navigation on various types of devices. And always measure the effectiveness of your navigation design from the user perspective—adapt it to user mental models, evaluate navigation in context of a user journey, support user on every step by indicating their location and optimize navigation for mobile browsing.