Utility Navigation: What It Is and How to Design It

User Tools

Utilities shape how people interact with your organization, website, and content.

Tools that websites provide vary with their size and mission, but many utility-navigation areas include:

• Contact us
• Follow us
• Locale switcher / language tools
• Log in / Sign up
• Print
• Save
• Share
• Subscribe
• Tools for changing font size
• View single page

Although the shopping cart is a core feature of e-commerce sites (you could say that it’s the defining feature), convention calls for the shopping cart icon to be found in the utility navigation as well. And, as we all know, following conventions is an easy way to improve usability and increase conversion rates. Search, another core feature, is also quite often found in the main utility area.

Even though most utilitity navigation features are secondary in nature, they are important for people under certain circumstances. Being secondary, they can be relegated to a secondary (less prominent) visual placement as long as this is done in compliance with ruling web conventions so that users can quickly find a utility when they need it.

Placement

In the past, the items in the utility navigation have been embedded in the content area, put in a sidebar, or stuck in a navigation bar. In recent years, however, many of the tools have migrated to the top-right corner of web pages. This prominent placement makes them always visible, and, in general, easier to notice. We often see users looking in that area for tools, especially for items such as Log in, Search, and My Account.

Informational websites (and site sections dedicated to news and articles) often split utilities, with sitewide tools placed top-right, and article tools top-center in the content area. Subscribe tools (newsletters, RSS, social media, etc.) are often placed in bottom navigation areas. Sharing tools frequently appear at the beginning and/or end of articles, recipes, lists, and other informational pages that people are most likely to want to share.

(At first, it might seem confusing to place utility navigation in 4 different areas, but remember that it’s only information architecture geeks who think of these things in terms of “utility navigation” vs. other forms of navigation. To the average user, tools that are used for different things are therefore different beasts and can be found in different parts of the zoo without causing confusion.)

Some organizations try to hide utility navigation under hamburger menus (3 horizontal lines) or other click-to-display elements, such as gear icons and slide-out drawers. This tidy-screen approach can backfire, though, so it’s best to test and monitor to make sure your visitors actually use these new interaction conventions and that you haven’t hidden important tools too well. It's a bad idea to ignore principles of design, even when big companies are doing that.

Recommendations

• Provide icons with text labels. People like icons, but they don’t understand them and have trouble memorizing them. Plus websites use icons inconsistently. Don’t rely on hover-text explanations (tool tips) that won’t display on touch screens. Use words, or both words and icons, for good accessibility, comprehension, and translation. Researchers find that the hamburger menu is used more when it is labeled Menu and has a border around it to make it look more like a button, for example.
• Test for both comprehension and interaction if you hide mission-critical tools under navigation icons (hamburgers, ellipses, gears, etc.) because people tend not to click on what they don’t understand. These emerging conventions work best on mobile platforms, where there is very little distraction in the user interface.
• Group utilities where people expect them: either in the top-right corner or next to the content they affect. It’s okay to blend them in with other navigation structures or to put some secondary tools in the bottom navigation area, because people tend to look at navigation areas quite closely when hunting for things they need.
• Make controls look like controls, and use typical names for them.
• Separate the two types of social-media icons. Divide the Follow us from the Share this, because they tend to look alike, but they do very different things.
• Don’t go wild with sharing tools and sharing counters, because research shows people do more sharing with their own tools and methods. Some websites have dropped embedded social-media Share and Like tools altogether, because the visual clutter and loss of visitor privacy weren’t worth the minimal engagement those tools were getting.
• Include subscription tools. Make it easy for readers to follow features, authors, and feeds.
• Follow search-tool best practices.
• Don’t use flags for locales unless there are only a few locales that share the same language (so the flags used would be familiar to most readers). Use the name of the language in its own character set instead.
• Put Log In and Sign Up next to each other.
• Use colors and buttons to emphasize the most important actions and to draw the eye to the utility area.

Examples of Utility Navigation

Test With Your Visitors

Utility navigation is becoming more mature in its conventions and placement. Whenever that happens on the web, it’s tempting to take advantage of people’s familiarity with popular websites by following their lead. In the end, though, the most usable solutions will win, so test to ensure that your navigation works for your users and that you’re not hiding tools they need.

We offer several courses on user testing, navigation, and visual design that count toward UX Certification.