An FAQ on Navigation and Usability

Peter Pan looked for the “second star on the right” to make his way back to Neverland.

Other celestial navigators turned to the Big Dipper or the North Star to find their bearings. Today, however, users rely on a website’s navigation to traverse their way through the digital universe. And it is exactly this — your navigation — that can make or break the user experience.

As a team of human-centered web designers and developers, we consider navigation a critical part of usability. After all, it’s the wayfinding system that guides users from point A to point B — in a seamless fashion, one can hope. Our clients ask us all the time about best practices in navigation, so we decided to share some of what we consider as we devise intuitive, effective navigations for a range of desktop and mobile sites. Here, we answer some of the most frequently asked navigation questions..

Q: What are the different types of navigation?

A: Many people think navigation refers only to a website’s top-level navigation, but this isn’t the case.
There are actually several kinds of navigation, all of which work together to contribute to the usability (or lack thereof) of your overall site. These include:

• universal navigation
  Also known as global navigation, this is the top-level navigation that appears on every page and is used when an organization has a number of sites, all of which need to link back to the main site.
• primary navigation
  These are the core categories of content that users access most often. Typically, this navigation exists in the same place on every page—usually across the top but sometimes along the left side.
• secondary navigation
  This works in tandem with your primary navigation and is used to make important (but not essential) information accessible from every page. Often, secondary navigation items appear as links in a prominent (but not the most prominent) place.
• utility navigation
  Your utility navigation consists of tools like contact, search, subscribe, log-in, print, and share. Users rely on these tools and look for them in a fairly prominent location.
• footer navigation
  The most underrated form of navigation, your footer navigation is located at the bottom of the site, below your main content. It can consist not only of utility tools like contact and site map but also engagement content like customer testimonials, awards, secondary task links, and brands or organizations within your parent company. Likewise, use the footer to “include links you want to be sure the user doesn’t miss, and think of it as the last sign on the interstate before the exit that keeps drivers from missing their intended destination,” says Scott Lawrence, a senior designer at Astriata.

Q: What are some common navigation mistakes to avoid?

A: Often, we see users getting frustrated when they can’t find things in an expected or reliable location.
And this actually violates one of Jakob Nielsen’s 10 heuristic principles of UX design: consistency. This can happen, for example, when a company or organization attempts to be too creative with their navigation labeling, using vague words like Connect or Journey that can mean multiple things. It can also happen when a designer integrates too many navigation cues or options, and the result is choice overload. In this instance, the attempt to make navigation easier ends up making it harder. This is why it’s important to understand how psychology influences the user experience.

Another common source of frustration comes with cascading dropdown menus that don’t stay open when users attempt to open up the next level. We don’t recommend these. As an alternative, you can consider a mega menu, which makes all of the options visible at once and eliminates the need for scrolling. Mega menus allow users to visually compare options at once, without relying on short-term memory, which can be faulty, and without having to open each individual section. This simple set-up can save users time and aggravation.

Likewise, users often get frustrated with top-level links that function as both links and hovers to open a dropdown. This is a common mistake — instead, the top-level link should only have one function. What happens is that people opt not to click on that top-level item because they think it only opens the menu. We see this in usability testing all the time.

Q: What comes first in design: the navigation or information architecture?

A: At Astriata, our team believes the design of the navigation should never happen until the information architecture (IA) is firmly in place.
Why? Put simply, the IA needs to dictate what type(s) of navigation are best suited for the site. For example, is the IA wide and shallow or narrow and deep? Is it a multi-site structure or a single site? These types of decisions will have a significant impact on determining the most user-friendly navigation for the site.

As Lawrence of Astriata explains it, “just as you wouldn’t design navigational signage for a building before the architecture was determined, you should never design the navigation of a website until its information architecture is determined.”

On the topic of IA, one often overlooked issue that relates to navigation is the use of signifiers that help users know their location within the site at all times. “These are sort of like the “you are here” signifiers on mall directories,” Lawrence says. “They can be done through unique signifiers in the menu, which highlight both top-level and subsequent-level pages, and through breadcrumbs.”

Q: What is a “mobile-first” design? Do you recommend it?

A: Mobile-first web designs are a result of the fast-growing use of smartphones, tablets, and other mobile devices among users.
Traditionally, designers have prioritized a web design for desktop computers, but a mobile-first approach flips this on its head. This means, for instance, that instead of prioritizing your desktop design, you prioritize your mobile design and then scale up from up there.

Typically, we don’t recommend a strict mobile-first approach unless you can say with certainty that the bulk of your users view content only on mobile devices. Otherwise, you’re trading valuable real estate and hiding essential information in, for example, a hamburger menu. And while hamburger menus work well on many mobile apps and sites, largely because they’re universally recognized as a navigation menu symbol, they do, in fact, hide content categories. This is why hamburger menus don’t work well on desktop designs. After all, out of sight is often out of mind.

A mobile-first approach can also limit your ability to integrate complex features that require more bandwidth. Of course, if you don’t have or need those features, then the simpler mobile-first strategy might be the way to go. It’s really a matter of identifying the habits of your users and your organization’s needs.

Q: What are some best practices of mobile navigation?

A: First and foremost, we recommend a separate navigation design for mobile, if and when possible.
We’ve also found it more effective to position the navigation menu at the bottom, as opposed to the top, because it’s easier for people’s fingers to reach. With that in mind, you can place the menu at both the top and bottom of the page. As UX experts Raluca Budiu and Kara Pernice explain in an article for the Nielsen Norman Group, repeating the navigation at the bottom of the page “is often used on mobile to prevent users from having to scroll back to the top of the page to access the navigation positioned there.”

Another possibility is a sticky navigation menu, which means the menu remains present and visible as users scroll up or down the page. This eliminates the need for excessive scrolling, which is a common user complaint on mobile devices, given the smaller screen size.

Q: In your opinion, what gets overlooked in navigation design?

A: On this, we would have to say that user behavior is too often left out of the equation but is essential to a strong navigation.
Will the user most likely visit one specific section of the website and then navigate between subsections of that section, or will they switch between top-level sections as they browse the site?

“These are the kinds of questions designers and developers need to ask user groups, and this behavior should be reflected and supported in the navigation,” says Lawrence.

Navigation might seem like a small part of web design and usability, but at Astriata, we believe small things add up and are key to creating a positive user experience. We hope you’ve found this information helpful as you consider the best navigation for your desktop or mobile sites. For more advice on a usability-focused design, read “7 Must-Do Tips for UX-Friendly Error Messages.”