Are you evaluating an existing digital product and not sure where to start? Perhaps you need some guidance on how to drive a strong user experience with navigation?
This post will look at three navigation principles I use in my day-to-day work practice as a UX consultant. These include:
- Information Architecture (IA) which aligns with users’ mental models (i.e. how they would expect features and content to be structured).
- That the means for navigating the structure is easily identifiable and consistent throughout.
- That the number of navigation options provided is reasonable.
Feel free to incorporate the following framework into your own UX workflow!
What is “Navigation” for Digital Products?
“Navigation” describes the means through which a user moves through websites and applications. It is part of the broader Information Architecture of structure and function.
An important component of navigation is also “way finding” or “sign posting”, which relates to letting people know where they are through different cues and treatments. Each page of the website or software may be the only one viewed by the user, so some context is important in relation to their goals.
- The information architecture aligns with users’ mental models and how they would expect features and content to be structured in the site or application.
Defining the Structure
It is important to define the IA before designing navigation. A card sort can be done to organise the different pages into different categories. You can do this with a user group–where you solicit a number of target users and ask them to arrange the different labels into groups–or use expert design,
There a number of tools you can use to define the structure of your website or software.
Does the CTA Lead Where the User Expects?
The trust and credibility of your site hinges on small things like spelling errors, but also on things like alignment between buttons/links and where they lead.
For example, if the user is on a product page with a call to action that says “Buy Now” you would be expecting to be taken to a page with a cart to purchase the product.
You should minimise the number of call to actions per page, or at the least give them different visual weight.
Are the Menus in Familiar Places?
Look at the context of what you’re designing. People are accustomed to seeing navigation, such as menus in consistent places.
For example, iOS phones have the menu at the bottom of the screen, whereas Android tends to show navigation options in a hamburger menu. You might want to check out a site such as pttrns.com to view navigation patterns which have been crafted for a specific platform.
- The means for navigating the structure is easily identifiable and consistently available throughout the site or application.
Are things where you expect them? Is the structure clear and consistent?
The total user experience is built up from everything the user encounters. Building upon what we know of navigation and all of the different components that it’s made up of.
For example, websites adhere to standard conventions, when designed well.
The different components, using a website as an example may include Logo & Branding, Navigation Changes/Visual Design Changes, Contextual Cues, Wizards/Steps, Breadcrumbs, URLs, Headings and even the Window Page Title!
The Economist indicates where you are with
- Logo and branding
- Navigation-bar interaction
- Page heading
- Article heading
- Contextual cues
- The number of options provided is reasonable (i.e. no more than 5-7 items at any one time)
In any interface product, whether it be an iOS app or website, you should keep the number of provided options at a minimum.
You don’t want the user to be lost, or to be confused by the structure of your website. The number of options provided should be reasonable.
In my experience, having too many options can overload the user and be counter-productive to what you’re trying to achieve as a business. You should have a small, targeted number of frequently used options.
I will often ask the product owner, or whoever has the domain knowledge, what would be the options that the user uses the most and prioritize these as what is shown first.
In the example above you can see the drop down options available on the BBC’s website. The top level of options comprises eight items. The drop down option with (more) options has a number of different links that the user can access if they need to access more things.
In sites like this it doesn’t make sense to order things alphabetically, but sort things out by the order that they are most frequently accessed. If you have an existing site you can set up some analytics to determine what they have been, or set up some type of card sorting activity.
For a typical site, it should be pretty simple to lay out seven or so links on each page in a consistent manner. If you’re working on a larger scale site, which has a significant information architecture, you will need to carefully consider how you structure your links.
There are several principles which drive strong user experience with navigation. You should identify and understand the heuristics and principles which are used to define navigation. Firstly, as a reminder of good design practices and secondly to evaluate existing products.
The fundamental structure of a website, the IA and the different pages, labels and links should match what the user expects. Furthermore, it pays to think about the context of your product/site and consider any platform conventions or patterns that users are familiar with.
Use this as a guide to build a consistent and intuitive experience. Furthermore, you should consider the most important pages or options and include them in the top of the page. In my experience, having anymore than seven nav options visible is overdoing it. Other less important options, such as “settings” can be revealed when needed.
Are you in the business of defining the IA/navigation? Are there any other principles that you use to drive a strong user experience? Add your thoughts in the comment section below!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post