Navigation

Navigation is important in UX design because it allows users to move through an interface and interact with content. Good navigation should be easy to use and understand, and it should help users find the information they need quickly and easily. Navigation can be created using various elements, such as menus, breadcrumbs, and buttons.

Don’t Hide Items Away in a “Hamburger” Menu

Few UI patterns can be as controversial as the hamburger menu. Over the past five years, it’s become the de facto way of offering a menu on small displays, typically as a website scales into mobile or tablet width using responsive design:

Figure 29.1: The dreaded hamburger

Research shows (from Hamburger Menus and Hidden Navigation Hurt UX Metrics, https://www.nngroup.com/articles/hamburger-menus/) that hamburger menus:

• Slow down discovery time for users
• Increase perceived task difficulty
• Increase the time it takes to complete a task

Simply put, the hamburger menu hides items away from users and makes them less discoverable. Additionally, because the menu is hidden, users can’t gain a sense of “where they are” in the product.

It’s worth noting that since the research linked above was undertaken, users have been exposed to the hamburger...

Make Your Links Look like Links

Links, or hyperlinks, are the basis of the web and were one of the key advances when Sir Tim Berners-Lee invented HTML in 1989. In the original browsers, clickable links were blue, italic, and underlined. They looked gaudy and out of place, but that was the point: it was a brand-new concept and users needed a way of telling a link apart from the rest of the text on the page.

Fast-forward to the present day and the practice of styling links has largely been abandoned in favor of only highlighting them when they’re hovered over or, worse, adding no visual affordances to them whatsoever.

The style-on-hover approach is less than ideal: users on touchscreen devices have no hover state. Meanwhile, users with a mouse end up “hunting” for links by hovering over parts of text bit by bit, hoping to find a link, or just never finding them at all.

Figure 30.1: A gov.uk page with clear links and nice controls

When adding...

Split Menu Items Down Into Subsections, so Users Don’t Have to Remember Large Lists

Humans are better at some things than others. We’re really good, for example, at drawing a pretty picture of a flower, but we’re not so good at instantly recalling the precise genus of that flower and its scientific name. Computers are better at that kind of thing.

The rule of thumb for the number of items that a person can reasonably remember and juggle in a list is “seven, plus or minus two.” (Stipulated in George A. Miller’s The Magical Number Seven, Plus or Minus Two, first published in 1956 in Psychological Review.) This research has been around since the 1950s and has sadly been misunderstood and misinterpreted over the years.

The rule doesn’t mean that people can’t remember more than 7 or so items; it refers to the limit of short-term memory processing. An expert in a complex computer system will regularly be able to juggle many...

Categorize Settings in an Accessible Way

There’s no need to include every possible menu option in your menu when you can hide advanced settings away. Group settings together, but separate out the more obscure into their own section of “power user” settings, which should also be grouped into sections if there are a lot of them (don’t just throw all the advanced items in at random).

The assumptions you make about which features are advanced should be backed up by user research; techniques like card sorting or tree testing with real users can expose the right set of advanced settings.

Not only does hiding advanced settings have the effect of reducing the number of items for a user to mentally juggle (refer to #31, Split Menu Items Down into Subsections, so Users Don’t Have to Remember Large Lists), it also makes the app appear less daunting, by hiding complex settings from most users.

By picking good defaults (refer to #96, Pick Good...

Repeat Menu Items in the Footer or Lower Down in the View

Your site’s navigation is at the top of the view, but the user has scrolled right down the view—no doubt captivated by the wonderful, engaging content you’ve provided—so how do they return to the top of the page?

Most mobile browsers have a shortcut where tapping the top bar of the app will scroll the page up. There’s no need to provide a “back to top” link that floats down the page: it’s a waste of space.

A great solution is to repeat main menu items in the footer of the page or, at the very least, add some shortcuts to popular parts of the site. Including a “mini breadcrumb” (a shrunk-down version of the typical breadcrumb control) is more useful than a “back to top” link, as the user can hop back up a level to find the next item.

Figure 33.1: Apple.com features a “mini breadcrumb” in the footer to great effect...