Within the UX Flows column we’re defining a “UX flow” as the actions a user goes through on a website, which are directed by a UX designer. If the UX design guides a user through a process in a certain way, then it’s a flow. Sign-ups and onboarding are pretty obvious flows because they involve a few tangible steps to one clear objective, but today we’re talking about the main component that gets users to flow through a website at all: Navigation.
Navigations are the map and directions of a website and are usually what gets users deeper into the site experience. While we use the nautical term to describe it, navigation does more than just direct users: Navigation is generally the vehicle that takes users where they want to go. Navigations should help users find the information that they’re seeking from an app or website.
Navigations are most commonly thought of as a bar at the top of the page with text links, but they take many other forms all over the web. Let’s look at a few executions for navigations out there and some of their pros and cons.
A recognized standard of navigations, the text link nav gets the job done for most sites. This type of navigation, often paired with a supporting subnavigation, consists of a few text links that take users to the main sections of the site. Text link navigation often takes the form of a horizontal bar across the top or a vertical stack.
Take great care in choosing the words for your navigation. As this Smashing Magazine article points out, replacing the term “Store Locator” with “Stores” is a small tweak that can make a huge difference when users are trying to decide if the navigation items relate to their user goals.
Here are a few different ways the text nav can be implemented creatively in what we would still call a standard execution:
Cons: This approach may become cumbersome when dealing with a mega-site. The more pages added, the greater the need to think about where to situate that page within the nav. This Smashing Magazine article proposes a solution: Get rid of any and all navigations on mega-sites. Another solution is implementing a search bar that allows users to meet their specific needs.
Does anybody else wonder why these three stacked lines are everywhere? This type of hidden navigation, called the hamburger nav, hints to users to click the three-lined icon, commonly referred to as a hamburger. When clicked, this icon reveals the navigation menu. Since this form of navigation is convenient to design (and use) on mobile, we’ve been seeing little hamburgers all over the place.
But is hamburger nav really that great? An article from exis web found that users clicked on the word “menu” in a border significantly more than the hamburger icon. On mobile, this study also found that iOS users are 2-3 times more likely to tap on a menu icon than Android.
Cons: This is not your grandma’s navigation; she may not ever click on it. Research from the Nielson Norman Group found that while users universally recognize the magnifying glass to indicate a search, other icons like the hamburger icon still require labels for clarity. Putting all of your website’s main content categories into a drop-down menu may make it harder for users to discover your content, which could hurt conversions.
Icon navigations are like the standard text nav — but with a little flare. This type of navigation can be great for web products and back-end design. This approach should probably be avoided if you have a huge list of menu items. Here are some examples:
Cons: Icons separated from a descriptor can be confusing. Like the Nielson study mentions, icons must be labeled, otherwise users will be lost. Also, avoid what this article from Smashing Magazine reminds us about Picture Word Interference: “When an icon is paired with a label in a way that the user does not connect together, it becomes much harder for them to work out the intended meaning.” Make sure the icon helps — and doesn’t hurt — your message.
Outside the Box and Original
While the last three types of navigations outlined describe specific approaches to navigations, there is another approach: Be totally new and original. From experimental experiences to new intuitive approaches, the web offers some quite exciting tests of form and function.
Cons: If things get too weird, or away from the standard, users may get lost and never meet their initial goals for visiting your site.
A Note About Subnavigations, Utility Navigations and Footers
Subnavs, utility navs, and footers are elements on a site that also act as navigations, and they’re worth pointing out.
Sometimes known as secondary navs, subnavs explicitly direct users to the pages that are considered less prominent than their parent pages in the main nav. A subnavigation often becomes necessary for sites with quite a few pages, like for e-commerce or mega-sites.
An article from Adaptive Path explains that a utility nav “provides access to subsidiary tools that help the user, but it is not the core reason for the website.” Usually we find “Sign in” and “Cart” in utility navs.
Top navigations are often paired with a footer at the bottom of the page. This footer points to the pages of the site that need to be included somewhere but aren’t crucial to a user’s experience. The footer can also repeat the navigation at the top of the page, which reminds the user of the rest of the site’s content (if they scroll to the page bottom).
Two good questions to ask when designing a footer may be: “Is it necessary?” and “How can I make it relevant and engaging?”
During my research, I learned a few things to note when creating a navigation:
1. Your navigation should be well-structured and simple.
The point of navigation is to help users find what they’re looking for in the site — without stress AND without leaving the experience. What I’m emphasizing is that in a good nav, users don’t rely on the browser’s back button to get around. This is an important guiding principle: Users should never have to hit the back button.
2. Make it clear.
Not only should the language used on the navigation be clear, but any icons used also need to be clear. You may need to pair the word “Menu” with the menu icon, depending on the audience (on an agency site the hamburger can stand alone, but on a university’s website, it may not).
3. It’s all about context.
Always think about your user persona, think about the goals they have when visiting your site, and use your navigation to help them meet those goals. If the navigation is confusing to them, their goals won’t be met.
I hope my walk-through of these navigation UX flows has provided additional background for your next design. Until my next column, go experiment with some innovative navs!
Bonus: Further Reading
Here are more links for your nav adventures: