UI Design 101: Introducing Navigation Controls

February 19, 2018 · Posted by Jessica in UX · Add a comment

Finding your way within a website or product using little to no effort is a great user experience, but it is sadly not consistent across the web.

It's easy to run into sites with unnecessarily deep navigation, hidden menus or so-called mystery meat navigation—the type of navigation that follows the myth of enhancing usability with icons.

What's more, these bad practices tend to become popular because they favor aesthetics, and in some cases are endorsed by design leaders.

However, most of the time our navigation breaks down because we overlook the fundamentals. The good news is that we can start designing better navigation by going back to basics.

Getting Navigation Right

The navigation of a website or product is provided by a group of user interface controls intended to enable users to form a mental model of the structures we design, and then move through them smoothly and reliably.

This group of controls is the user interface layer on top of the Information Architecture.

Although it is easy to think of these two steps as one big effort, there's an important difference: "[information architecture] is the information backbone of the site; navigation refers to those elements in the UI that allow users to reach specific information on the site."

UI Design 101: Navigation Controls

So, how do we select the right controls for our navigation? And what's the best way to use them?

You can now find the answers in UI Design 101. This corner of our website contains a collection of UI patterns created to help you gain basic knowledge about the selection and arrangement of user interface controls on a screen.

In this post, we've gathered all the elements in the collection that are relevant to the design of navigation.

Click on each element to learn how and when to use it to create great experiences. You'll also find best practice recommendations and real-world examples: