Navigation UI/UX Design – 3 Key Points

The word navigation comes from a Latin word for steering a ship. For a sailor on the open sea, knowing where the ship is and where it is going can be a matter of life or death. For a website’s success, navigation design can be just as important.

Fresh Consulting’s UI Design Framework evaluates criteria for website usability. Here are three key points related to navigation:

1. Content First
2. Placement
3. Clarity

1. Content First

Create the content before sketching a single wireframe. Your message to the world should shape the navigation structure, not be confined by it. Innovative websites combine creative ideas with valuable purpose. If the content is lacking, even impeccably designed navigation can’t provide staying power. After the content is created, build navigation that can guide the user experience.

Navigation Supports Content

• Menu – The first place people look to understand what is included on the site.
• Breadcrumbs – Like chapter headings in a book, breadcrumbs give situational context. Many users do not land on the homepage, so orientation is essential.
• Filters – Information-heavy sites can be made manageable with filters.
• Links – Help users make connections between related content.

Information Architecture

Information architecture is how a site’s ideas are grouped and organized. Well-planned content should have a natural organization structure. The content mapping needs to feel intuitive to a wide variety of users.

A menu helps people visualize the information architecture. A broad, shallow architecture generally provides a better user experience because it reduces the number of clicks required to navigate, which means fewer decisions for the user. A shallow information architecture could bundle related content on one page to require fewer clicks.

Example: Google Maps API

The Google Maps API page places its content center stage. A simple horizontal menu is used for primary navigation, and the secondary navigation is placed in a low priority space on the right side. Content occupies the vast majority of the screen.

Navigation Plays Supporting Role to Great Content

In the satellite demo above, the primary navigation is understated, with small fonts and light colors. The content speaks for itself.

Content Should Dictate Navigation Structure

Great content takes a wide variety of shapes and forms. The navigation structure should match the flow of the content. “Navigation reveals content” (Steve Krug, Don’t Make Me Think). The site’s links, positioning, and labels should work together to drive the content to the forefront.

Navigation Structure Follows Content Flow

In the “Developer Stories” section, Google switches the secondary navigation from a right-positioned vertical menu to a horizontal menu at the bottom of the screen. This supports the linear flow of a vertical scrolling page.

The secondary menu uses circular photos of the developers, further integrating content with navigation, and putting people at the front of the user experience.

Normally a consistent navigation structure is recommended for a unified experience throughout the site. In this case, the sections of the site have very different purposes, and the diverging layout works well on the simple site. The content drives the navigation structure.

2. Placement

Navigation is a series of choices: Do you want to click or scroll? Read or watch? Enter data or hit the back button? Within the confines of two-dimensional space, we often must decide without seeing what will follow. A site with strong usability provides the user with organization and visual cues to aid navigation.

The placement of action choices on the page impacts how people respond. We train our brains to prioritize and filter information. For example, people who speak languages that are written left to right (like English) focus more attention on the left side of of a page; whereas people who speak languages written right to left (like Arabic) focus on the right. Research shared by Jakob Nielsen indicates people often use an F-Shaped pattern to read a page, making a few horizontal scans across the top followed by a vertical scan from top to bottom.

These behavioral patterns mean the most visible areas to place a menu are (1) across the top horizontally or (2) vertically down the left side.

Horizontal Navigation

Most sites use some form of horizontal menu. Since we read text across the page, the horizontal navigation bar is easy to scan. It has become a convention that users understand and expect.

By (largely unspoken) Western convention, right is the direction of horizontal progression–just think of the number line or written text. Left is subsequently seen as backward, even regressive. – Cennydd Bowles, Better Navigation Through Proprioception

Example: REI 1440

Horizontal navigation works well because we read left to right

The REI 1440 site employs a minimalist 3 choice menu that is only half the size of the corporate logo. The entire navigational structure is built on a horizontal foundation. Content cycles from left to right as the user filters by time, location, or activity. Again, navigation reveals content.

Vertical Navigation

Skullcandy’s Supreme Sound site takes a twist on the usual vertical scrolling page. The screen’s orientation rotates as the user follows the tangled headphone cord down the page. The vertical navigation on the right side helps orient the page position, and it provides links to jump to specific content.

Example: Skullcandy Supreme Sound

Vertical navigation supports linear flow

Vertical navigation can be useful in telling a story. For linear content, a long vertical page often works well. We are seeing more single page sites that implement parallax to tell a story visually. Vertical navigation helps users understand where they are on the page.

3. Clarity

Clear writing helps people navigate. In essence, a website is a pre-recorded communication from the developer to the user. The message needs to be understood from start to finish.

Many web conventions are effective metaphors that help our brain understand cyberspace the same way we understand physical space. Examples include an intuitive menu, clearly labeled links, and “you are here” indicators. When the right convention is not available, a simple and direct explanation should be used. Within the navigation structure, clarity should not be sacrificed for creativity.

Information Scent

When people land on your site, they are looking for something. It could be a recipe for the perfect Acai Berry smoothie, or maybe reviews for a new film. Users are always on the hunt, but in scanning mode at the same time. Frequently they will land on a page that does not contain exactly what they are looking for, and the site should offer guidance.

A great site (1) helps users know they are on the right path and (2) helps users find what they are looking for as quickly as possible. Steve Krug asserts “people won’t use your Web site if they can’t find their way around it.” (Don’t Make Me Think).

The reality is that users don’t always land on the right page; they might have several tasks to complete (whether their own or yours), and they might want to explore the website to see what else it offers. The Smashing Book #2

It’s not enough to have a clear path from the homepage to specific content. Users need clues to tell them they are on the right path. Information scent is like a trained animal using the sense of smell to find its prey. The scent must continue to grow stronger, or the animal will abandon the path. In the same way, if a page does not clearly communicate what follows, a user may abandon the site.

Progressive Disclosure

People can only digest small bits of information at a time. For complex sites with deep content, it is helpful to simplify. Progressive Disclosure offers short summaries with the option to expand more detailed content. This allows users to understand what is available, and select the most appropriate option.

Progressive Disclosure has been applied by creating a multi-tiered approach that requires users to click and load several screens. In many cases, this approach reduces usability. However, usability is enhanced by giving users a simplified starting point before deeper content exploration.

Example: Road & Track

Menu titles should be clear

Road & Track’s homepage showcases a wide variety of content from news articles to photos, video, and events. The primary navigation bar includes 9 choices. This is more than many sites, but the trade off may work if it reduces the information architecture depth.

Some of the menu titles are straightforward: Drives, Features, Motorsports, Videos, Events. But the leading title, “Go”, could be unclear. It includes secondary content items First Looks, News, Style, and Food. Someone looking for news articles might not look under Go.

The site promotes information scent by including images withinin the dropdown menus below the primary navigation bar. Secondary pages include progressive disclosure to help users scan content.

Conclusion

Changes in technology and interaction with our devices will continue to drive evolution of navigation structure. In the mean time, great user experiences are built on great content with a clear way to experience it. Navigation can be as important as the content itself because it can influence whether the experience happens at all.

Additional Resources

Brad Frost Web – Responsive Navigation Patterns

Smashing Magazine – The Elements of Navigation

A List Apart – Better Navigation Through Proprioception

Nielsen Norman Group – Is Navigation Useful?

Smashing Magazine – Planning and Implementing Website Navigation

Nielsen Norman Group – Information Scent

52 Weeks of UX – Finding Your Way