Navigation Best Practices
Your website’s purpose, no matter your business, is to communicate with your customers as effectively as possible.
We must consider our landing pages as though they are speaking directly to our customers. In other words, imagine you’re getting coffee with them; you must be engaging and insightful, while not boring or long-winded. You must help to answer their questions as quickly and effectively as possible all while understanding why they are meeting with you in the first place.
In an ideal world, we would know exactly why a customer is visiting with us before we meet with them. That way we can have our conversation points worked out ahead of time. This is why we advocate for single topic landing pages. However today, I’m going to focus on website navigation and how to utilize it the best.
Why website navigation matters
The goal of website navigation is way-finding. Essentially, it’s a highway sign that offers indicators on where to find information or what to do next. Those indicators come in succession, just like highway signs. When we’re cruising down the highway we don’t get presented with every possible destination all at once, we get presented with a single choice. This should also be the case with website navigation. We must control the journey, not point to a distant far off place.
What are the types of website navigation?
- Scrolling and clicking: Scrolling can seem like a necessity, but we consider it a design choice. Just like a newspaper determines what is ‘above the fold’ we do the same with landing page content. Asking a user to scroll is similar to asking them to click. Offering a clickable link can help focus a user’s experience. With a click, we can be sure the visitor has made a decision to navigate in a specific direction. This offers us insight into what they are looking for.
- Menus and submenus: Menus and submenus are likely the first things that come to mind for most people when talking about website navigation. Within this category there are many, many variations; side menus, top menus, drop down menus, hover menus, thumb menus and others. These types of menus can also offer a sort of visual hierarchy of your website content, but they are also hard to navigate and generally don’t offer much in terms of specific user direction.
- Images, buttons and other icons: This type of navigation is becoming more and more desirable as it’s incredibly mobile friendly and enticing. Users have become comfortable with web iconography (gear icon is settings, person icon is account page, cart icon is the cart page, etc.) Images are typically large enough to press on a mobile device and offer quite a bit more information as to what is behind the link.
- Linked text: This is the most basic form of navigation and doesn’t require much thought or attention to detail. It’s basically associative navigation… “Oh, you like this, click here for more content just like it.” Site map pages often feature this type of content.
- Search and filtering: Website search and filtering can be incredibly helpful if you don’t know where a user wants to go (in the case of an online store, or library of information.) Or if you have so much content there’s no possible way to showcase it all. Typically, a search will result in a page with one of the above navigation systems (like a grid or list of products.)
So, what kind of navigation do we use?
Well, like most good
Basically, use as little navigation as possible. In an ideal design, there is no need for navigation at all, we would simply present each user with exactly what they are looking for. However, determining this is almost impossible. So, we use website navigation to help us (the website owner) understand what the user is looking for and to help them get where they need.
When we’re in the process of deciding what type of navigation to use we ask ourself a couple of questions:
- Am I helping the user navigate?
- Am I directing the user what to do next?
- Is it clear what is behind the link?
- Is it clear which navigation choice is best?
- Is my navigation easy to understand?
If a website’s navigation fails any of the above questions, it’s bad navigation. So, lets dive into each question and explore best practices.
Am I helping the user navigate?
All users want to do something on your site. This could be researching (looking for an answer), transactional (looking to make a purchase), or investigational (researching your company with an intent in mind). So, we need to always be directing a user to one of these actions.
Am I directing the user what to do next?
Website owners often like to present the user with an abundance of options in an effort to make sure they get where they are going. But, that is often overwhelming, confusing and it just takes time away from the user. Just like driving, we need our directions when we need them, not all at once. Analysis paralysis often leads to users navigating away from our site.
Secondly, each page cannot serve multiple masters. If your website has multiple goals, then you need to have multiple landing pages. Each page should have one topic that leads to one action.
Is it clear what is behind the link?
Website users understand that some keywords lead to specific content. The word ‘contact’ will almost always lead to a form. The word ‘about’ will almost always lead to information about the company. These navigation items are no-brainers when it comes to the content they present. However, this is not always the case. It’s best to consider the assumptions a user makes before clicking. If your users don’t know what’s behind the door, they probably won’t open it. This is where icons, images, and buttons can be very helpful. Descriptive navigation (more below) can help here as well.
Is it clear which navigation choice is best?
A user will typically know what they are looking for. So, you should know as well. You should know the actions a user wants to take (or the actions you want them to take) then make those actions abundantly clear. Good online advertising strategy and good SEO will lead users directly to their intended action. A user will already know why they are there, all you need to do is present it to them.
Is my navigation easy to understand and use?
Simple words and icons have emerged as the most used navigation items. Using complex animations and layouts can make navigating your site hard and confusing.
Also, navigation should be logical. We don’t want people to go to the cart page before they’ve visited the shop page, just like you don’t want people to see the contact form before they know what you offer. Determine your onboarding steps, and then present them simply and in order. Here are some examples:
Find Item -> Make Purchase -> See Confirmation
See Offer -> Fill out Form -> See Confirmation
Make Search -> Find Result -> Do Action
Limiting your navigation to as few steps as possible reduces the likelihood a user will give up.
What about Mobile?
Mobile navigation is tricky because we must content with a significantly smaller screen. Also, most users use their mobile devices in the vertical orientation. So, we are even more limited when it comes to horizontal elements.
We’ve all been conditioned to accept slide-out menus and hamburger () icons out of necessity. However, I would argue this is a failed attempt at mobile navigation. It’s fairly impractical to tap twice to get someplace. Mindshare uses a hamburger icon to display less important or secondary navigation. However, recent studies have shown that simply putting this information in a footer would serve us better. In fact, footer navigation is used more often than header navigation on all of the sites we manage (that have footer navigation).
Mobile navigation also lacks a mouse (obviously) so we have to instead consider the thumb. No longer is everything on the screen within reach, instead, only things within the ‘thumb zone’ are in reach. The thumb zone is typically the bottom third of the screen and (for most of us) slightly to the right. Placing menu toggles here is best practice.
Lets Talk SEO
Just like everything else on your website, navigation plays an important role
- Navigation affects search traffic and
search ranking. - Navigation affects website conversions.
Here are 6 things to ensure your navigation is working for your site, and not against it.
1) Be Descriptive:
“What we do” doesn’t actually say what you do, besides, one would hope a visitor already knows what you do. “Products”, “Services”, “Solutions”, and “About” don’t actually describe anything, you might as well say “page 1”, “page 2”, “page 3”, etc. Users will already know you have services, products, and solutions… everyone does. Descriptive navigation is better.
- Descriptive labels are good for search engines: Navigation typically appears on all pages, so it’s a good place to describe exactly what your site is about.
- Descriptive labels are good for visitors: Because navigation is in the most prominent place on a page, it’s the best place to describe to your visitors that they are in the right place.
Each page of your site (according to SEO practices) should be responsible for exactly one topic. So, your navigation should do the same. Instead of “Services” say “Web Development”, instead of “Products” say “Hoodies”.
This will help every page to have a chance at ranking higher in search results. In other words, you’ll be getting a boost to SEO for every page on your site because every page has a unique topic.
2) Avoid describing format, instead describe content.
Navigation labels such as “videos,” “photos,” and “products” tell visitors the format of the content, but not the content those formats hold. We don’t go to google and type in “videos” when we’re really looking for how to change our spark plugs. We type in “how to change spark plugs” and trust the content will be presented in an understandable way (video or otherwise). We don’t type in “products” when we’re actually looking for a new cell phone, we type in “cell phones.” Your navigation labels (and the structure of your site) should match this practice.
3) Avoid Dropdown Menus… seriously, avoid them like the plague.
Look, visitors want to get their business done quickly. Our eyes move faster than our mouses, so make your navigation visible. When a visitor decides to move their mouse, they’re likely already on their way to click.
More important than the annoyance of drop-downs is the effect they have on page visits. Drop-downs encourage visitors to skip important pages. This means they will be navigating your site without a map or directions (
4) Seven menu items seems to be about the max.
There are two reasons that limiting the number of links is a good thing. The first is that each page on your site should have exactly one topic. This helps Google and other search engines rank it by increasing that pages authority on that subject. Lots of links and many topics dilute the authority of the page and therefore decrease its search ranking.
The second reason we should limit the number of navigation links is that it will help our user’s brains hold all the navigation information. According to a Harvard professor, we can only hold about 7 items in our short term memory. So, if we follow our above advice and use the navigation to help describe our site, it only makes sense that we want our users to remember those descriptions.
5) Order your navigation appropriately.
Design and layout often overlap with psychology and the order of our navigation items are no different. The serial position effect describes a users ability to remember the beginning and end of lists. Basically, the first items are deemed more important, and the ending items are most recently read, so we remember both. The items in the middle don’t fall into either category, so we don’t remember them. This is true for short lists as well as long lists.
So, put important things first (Hoodies, Get a Quote) and usable actions last (contact pages, account pages, etc.)
6) Out work is never done.
There’s a saying among web developers, “Digital ink is never dry.” This means that we should expect to make changes even after the site has launched.
Make sure to keep up to date on analytics and use data to drive decisions. If we use our own bias or opinion to make decisions we are effectively using only a single data point when there could be hundreds or thousands. This also goes for the loudest voices. It’s almost never a good idea to ask your visitors what they want, instead look at how they behave. Actions speak louder than words.
Also, it is never a good idea to copy your
TL;DR
Pro Tips:
- Know your audience and manage their expectations. When a user arrives on your site they should already know what they want to do. This can be determined through targeted advertising, appropriate SEO strategies as well as good search excerpts and titles.
- Keep things simple. Seriously. Fewer required actions mean fewer drop off points.
- Use standard practices. Yes, we’d all like to have the fanciest tech available, but asking users to learn something new before they can even use your site is asking them to leave.
Mistakes to Avoid:
- Too many menus or too much navigation on a page. Too many options make next steps unclear and confuse visitors. We want clear choices that lead to specific actions.
- Unclear navigation location. There are only a few places that users expect navigation to be, put your navigation in those places. (The header, the footer, the sidebar.) Also, make sure it’s visible when the page loads.
- Unclear objectives. Make sure every link has a clear purpose and the content is appropriate. Also, ensure there is a single clear action that you want all users to take (contact, buy, research, download, etc).
- Encyclopedia-
esque navigation. Look, nobody wants to parse through an encyclopedia… so don’t make them. Keep it short.