Seven principles of effective digital navigation
1. Momentum
2. Unity
3. Twins
4. Minimalism
5. Clarity
6. Fidelity
7. Magnetism
1. Momentum
Design for forward momentum. Designing digital navigation is not that different from designing navigation for a road. You always want to be able to help people maintain their momentum and get to their destination as quickly as possible. The essence of momentum is to help people move forward, and this is the essential purpose of navigation — to help people move forward.
Yes, there may be some navigation to help people move backwards (do a U-turn) but that should be minimized. Always assume that the page that person is on is the page they want to be on. How do they move forward from this page so as to get to their final destination (assuming that the page they are on is not in fact their final destination).
So, for example, when you choose “musical instruments” on the Amazon website, the vast majority of the navigation becomes focused on helping you choose a musical instrument.
· The search is filtered to musical instruments
· Most of the horizontal navigation is about musical instruments
· All the left side navigation is about musical instruments
· All other products and services have been squeezed into a single link: Shop by Department
Navigation should help people maintain forward momentum. Focus on the task. Trust people that they are where they want to be. If they’ve made a mistake they can use search or hit the Back button. The job of navigation is to get them to the end of their journey as quickly as possible.
2. Unity
Navigation should be as unified as possible — kept together in the same physical space. There’s nothing worse than having pieces of navigation put all over the place without any real logic as to why. Of course, it may make sense to separate certain types of navigation (login, my account, etc.), but the core navigation — particularly about the products and services — should be as unified as possible.
Disparate, disunified navigation is a common mistake, particularly on older websites. Why? The website launches with a poorly designed navigation. Someone tries to fix the problem by adding some more navigation (but doesn’t remove the old malfunctioning navigation.) Little by little, new pieces of navigation are added, all trying to address specific issues.
Before you know it, there’s a spaghetti junction of disparate, overlapping and competing navigational models all over the page and the whole thing is a mess. This is also a very common mistake made by those who don’t understand the Top Tasks approach. They add a little section to their website navigation called “Top Tasks”. This just adds to confusion and clutter and makes the customer experience even worse, as people try and navigate through a hodgepodge of navigation approaches. To reemphasize: Top Tasks is an approach for the entire customer experience (including the tiny tasks). If you’re not going to use it for your entire environment, you’re much better off not using it at all.
This was the Liverpool City homepage around 2010:
1. This left side navigation was some sort of poorly designed central government initiative. It never really worked but councils / municipalities were afraid to remove it, so they started adding what they believed were more useful navigation.
2. Such as “Most popular”. So, clearly the navigation on the left side is “Unpopular”? Most popular is a bit like badly implemented Top Tasks, except that now its competing with a plethora of other unpopular navigation on the page, and contributing to an even more confusing customer experience.
3. “Do it online”? What on earth does that mean to a normal person? Is the other navigation “do it offline”? This, again, was a central government initiative, a promotional campaign to encourage the introduction of online services. However, it got embedded in the navigation of a great many council websites, creating duplication and confusion. And, of course, nobody dared remove it because they thought that there must be a good reason that everybody else was using it. But the reason everybody else was using it was because everybody else was using it.
4. “My Neighborhood”? If you’re looking for the library in your neighborhood, will you find it there? No. My Neighborhood was council jargon for a limited set of services.
5. “Benefits advice”. Why isn’t it under Most popular? Why is it on its own? Maybe they forgot to add it to “Most popular”, and then didn’t have room and had to add it as its own very special little box?
Liverpool City did a Top Tasks analysis and then radically simplified its navigation, unifying it and focusing it on the top tasks of its citizens.
3. Twins
After spending years watching all sorts of customers attempt all sorts of tasks, we have noticed certain core navigational patterns emerge. One of the most essential navigational patterns is what we call Twins. For a great many tasks, there are two dominant journeys or paths that customers would like to take. Consider the following tasks:
· Download the latest firmware for the RV042 router.
· Find the waiting times for Child and Adolescent Mental Health Services.
· What is the lowest price service for a 2015 Prius Active?
· Did more people die of heart attacks in Canada than in France in 2010?
People tend to think about the above type of tasks in two ways:
1. From an Object point of view
2. From a Subject point of view
Download the latest firmware for the RV042 router.
· Object: I want to get to the RV042 homepage then look for the firmware to download
· Subject: I want to get to the download software section and then look for the RV042
Find the costs for Child and Adolescent Mental Health Services.
· Object: I want to find the Child and Adolescent Mental Health homepage and then look for costs information.
· Subject: I want to go to the costs section and then look for Child and Adolescent Mental Health services.
What is the lowest price service for a 2015 Prius Active?
· Object: I want to get to the Prius Active homepage and then look for service costs.
· Subject: I want to go to the Service section and then find costs for a Prius Active service.
Did more people die of heart attacks in Canada than in France in 2010?
· Object: I want to get to the Canada or France homepage and then find a link for health.
· Subject: I want to get to the Health homepage and then find a link to heart disease and then find information on Canada and France.
Around 2010, OECD had a very convoluted navigation, as can be seen from the following screengrab of the homepage.
· Along the left side was a whole range of navigation options, including: Browse, Find, Resources for, Online Services, Opportunities, and Scam Alert.
· On the right side, there was a navigational option called “Don’t miss”. Here’s a tip: if you want people to miss something, put it on the right side. Practically nobody looks there.
· We completed a Top Tasks exercise with OECD and found that there were Twins. OECD customers think about tasks in two basic ways: Countries and Topics. When we showed this evidence to OECD, they changed to the following simplified structure, which very much stresses countries and topics.
4. Minimalism
Nobody is at your website or app to gaze lovingly at your navigation. “I didn’t like the Grand Canyon itself, but I did enjoy the fonts they used on their signposts,” said nobody, ever (except maybe a graphic designer).
Navigation should not draw attention to itself. It should take up as little space as possible while still being functional and helping people get to where they want to. If your customers are spending a lot of time staring at your navigation, that is most definitely a problem. If the navigation was clear, they could quickly scan it and then choose what they needed to do.
Try and keep the navigational space on your page as minimal as possible. Obviously, the extreme of this is the disastrous hamburger menu, which hides navigation entirely at the top level of the site. Why was the hamburger such a disaster?
1. It used an icon and icons are an awful form of navigation, particularly when they have no words associated with them. So, why do so many sites use icon-only navigation?
a. Because they look cool. Many traditional designers think words look ugly. If they can’t get rid of the words, they’ll try to make them as invisible as possible with unreadable grey text.
b. Because icons save space.
c. Because icons save localization costs. (Everybody in every language gets equally confused.)
2. The hamburger was implemented at the top level of sites in order to channel customers towards promotions, and other marketing and communication initiatives. The idea was to decide for the customer what journey they should go on — not a good idea on the Web.
The use of minimalism does depend on where exactly on the site you are. If you are on the homepage of a site like gov.uk, which seeks to deliver a massive range of services to an entire population, then it can make sense to dominate the page with navigation.
Why? Because the first thing that the vast majority of people want to do when they arrive at such a page is to search or click on a link that will help them continue on their journey to complete the task they came to do. However, once you get to a specific benefit, the navigation is minimized so as to focus on the content for that particular benefit.
5. Clarity
From a navigational point of view, what does the following mean to you?
· Resources
· Tools
· Knowledge Base
· Tutorials
· Documents
· Data sheets
· Manuals
· Videos
· Frequently Asked Questions
· Quick Links
· Useful Links
· Do It Online
· Solutions
· Top Tasks
It would be generous to say that they are unclear. Formats are terrible forms of navigation. What is a document? What is not a document? How is a document different from a manual? What is a tutorial? Is a tutorial a document? Is a data sheet a document? And are all these things resources? Most of the aforementioned are print concepts, totally unsuited to a quality digital environment. Instead of data sheets, why can’t we say technical specifications? Instead of having documents, have installation, configuration, pricing, etc.
One of the laziest and least useful forms of navigation that grows like a weed on the Web is “Frequently Asked Questions.” If someone comes to your website with a question, how do they know its frequently asked or not? FAQs are one of the worst examples of organization-centric thinking. The organization knows it’s a frequently asked question. The customer does not.
Let’s say customers are constantly asking about prices. What should you do? Create a link in your navigation called “Pricing”, of course. FAQs are the ultimate in design laziness. Instead of actually organizing for the customer, let’s just dump a bunch of stuff into an FAQ. (Most of the stuff you find in FAQs are not even frequently asked.)
The following shows a real example (I did not make it up, I promise you) from a website of frequently asked questions gone wild.
“Madam, would you prefer General, Customer Service, or plain old frequently asked questions?”
Tools is a terrible form of navigation. It is an awful approach to separate tools and content. People want to book a flight, not find a tool. And videos? Oh, I haven’t seen a video in days. Any video will do. And Solutions? What does that mean? Sure, it’s marketing nirvana, but we have seen countless customers get confused and annoyed when they clicked on it. Delivering solutions may be good strategy but as a form of navigation it is worse than useless. In fact, it is dangerous because it is a classic example of a dirty magnet, something I’ll explain in more detail later.
The best and clearest navigation link is a task. The best link tells you what it is — but just as importantly — tells you what it’s not. “Costs” is what it is. “Costs” is not “Schedule”. The clearest links often avoid verbs such as “find” or “get”. Stripping away the verbs allows you to start with a more unique word. Don’t use “Get Pricing”. Use “Pricing”. Unless the verb is absolutely essential, strip it away. Focus on the essence of the task.
6. Fidelity
If most links were married they’d be getting divorced, because they never keep their promises. A link is a promise. Navigation is a promise. Don’t say “Book Now!” when it’s actually five steps to book. That’s like saying on a road sign “New York Now!” only to then explain that New York is 80 miles away. It really annoys people. Good navigation gives people a sense of what’s involved in the journey: how many steps, how long it will take, what exactly they will get. A link is a promise. Keep your promises.
7. Magnetism
The magnetism of a navigational link is made up of two elements:
1. Clean magnetism: It’s ability to get people to click on it for the tasks it can help them complete.
2. Dirty magnetism: Where people click on it for tasks it can’t help them with but they think it can help them.
A good navigational link maximizes its clean magnetism while minimizing its dirty magnetism. Thus, an overall magnetism score is calculated by subtracting the dirty magnetism score from the clean magnetism score.
Summary
1. Momentum: Keep people moving forward
2. Unity: Make navigation as unified as possible
3. Twins: Design for the journeys customers are on
4. Minimalism: Have navigation take up as little space as is practical
5. Clarity: Navigation must immediately communicate what it is — and what it is not
6. Fidelity: A link is a promise. Navigation should keep its promises
7. Magnetism: Maximize clean magnetism. Minimize dirty magnetism
