Mar 03 2014

UX Flows: How to Create Navigations that Guide Your User to the Goal

UXflows_Navigations_Feature

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.

The Standard

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:

Whiteboard gif

You’ll have to visit the site to see how the Whiteboard logo shrinks into the sticky navigation, which is a delightful interaction for users.

Zipper Galeria screenshot

By taking it out of a container and connecting it with dotted lines, Zipper Galeria rethinks the traditional text nav.

Helen Tsanoss Heinman’s website screenshot

Helen Tsanos Sheinman’s website uses a text navigation that is anchored with dots. Moving the navigation to the bottom of the screen puts more focus on the imagery and creates a more experiential effect that appeals to her users.

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.

The Hamburger

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.

Squarespace screenshot

Squarespace isn’t the first place that I’ve seen what we at dt call a sidecar navigation, but it’s a pretty popular example. The page shifts to the left to reveal a list of menu items.

Teehan + Lax screenshot

Teehan + Lax take a new approach of overlaying the whole screen with the navigation. This full screen takeover allows for more copy to navigate users, and this takeover experience fully engages users.

Big Spaceship screenshot

The left alignment and pairing with Big Spaceship’s logo make this execution of the hamburger menu icon unique. Adding the page title next to the nav and company name makes the navigation experience focused with more clarity.

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

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:

Brit + Co. screenshot

Brit+Co. relies on icons to help users filter content. These icons further a fun and exploratory experience of this browse-centric site.

Triplagent screenshot

The icons on Triplagent are fun to interact with, and the icons paired with titles bring clarity.

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.

The Official Squarespace blog gif

The Official Squarespace Blog takes an intuitive approach to a navigation that works well for a blog: The number of moves the user will take to find content is few. Essentially, users need to find more posts — and more specifically, the four different types of posts they are looking for. Plus, the left and right swiping feel like a magazine.

The Source site

I wish The Source had been my graduate school thesis. I see this website as a piece of artwork and the internet is the medium. The navigation not only takes users to the other interviews, but also to points in the videos where there is a pattern or similar topics. The navigation draws a powerful thread that creates meaning.

LGBT Museum screenshot

The National LGBT Museum does away with a traditional navigation and uses links on the page to navigate users through the experience. The concept is interesting, but this approach needs to be carefully executed to remain clear.

Pharrell's 24 Hours of Happy screenshot

Pharrell Williams’s 24 Hours of Happy uses an experiential nav acts as another layer of engagement for experiencing the breadth of this 24 hour music video. Also, this nav helps users find Pharrell’s scenes easier with a P button.

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.

Subnavigations

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.

Polygon screenshot

Polygon uses a clever subnav that breaks down content. This way, visitors can target exactly the reviews that are relevant to them.

Utility navs

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.

InVision screenshot

We see InVision’s utility nav in the soft gray text above the main nav. True to form, “LOGIN” is there, plus other information that may be useful to customers.

Footers

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?”

trevorhenry.ca screenshot

trevorhenry.ca repeats the navigation and the footer — as well as a scroll-to-top arrow.

Takeaways

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:

Killing Off the Global Navigation: One Trend to Avoid

Some Twitter banter on the hamburger icon

Planning and Implementing Website Navigation

The Ambiguous Hamburger Icon: Is The Icon Mystery Meat To Users?

About the Author:

MK Cook is a UX designer at digital-telepathy who channels her boundless energy and curiosity toward designing killer interactions and interfaces. She’s also a bicycle commuter, gourmet pizza baker and wannabe bee-keeper. Find her on Twitter and Google+.

Leave a Response

8 Responses

  1. Mar 05 2014
    Jenn

    Interesting article. Only qualm is that I wish there were links to the websites of the examples given. Being able to easily interact without having to guess what the site is (in some cases) would be lovely

  2. Mar 07 2014
    Damien Elsing, Copywriter

    It’s amazing how much of a difference small tweaks can make. Simplicity really does seem to be the key. Thanks MK.

  3. Mar 10 2014
    Erin

    MK- As a recent graduate and newbie to UX design, your blog was very informational and inspiring for me. Thanks! I look forward to reading more of your posts.

  4. Mar 11 2014
    Ali Mohamed

    I think it is a very interesting article. Thanks for sharing that!