skip to content
menu
patterns · app navigation
patternsnavigation

app navigation

Most apps have more than one screen: a list of things to look at, a way to search, some settings. People need a simple way to move between these views, and to always know where they are.

We list an app's views down the left side, in a side navigation. The views are grouped by what people do there, and the view the app opens on comes first.

/ downloadswork312findsetupneeds attentionneeds attentionneeds attentionneeds attention
A downloads app: its views on the left, grouped into work, find and setup. It opens on the things that need attention.

The side navigation and the app layout around it are planned components; the drawings on this page show the idea.

why down the side

A row of tabs works well for a handful of views. But apps grow: a downloads app soon has requests, a missing list, downloads, search, sources, clients and settings. In one row, they no longer fit, and daily work gets mixed up with setup.

A list down the side has room to grow. It can be grouped, it can show a number next to a view that needs attention, and it stays in place while the content scrolls.

do
work312findsetup
Views grouped by what people do there. The view that needs attention comes first, with its count.
don't
requestsseriesmissingdownloadssearchdiscoversourcesclientssettings
Nine tabs in one row, mixing daily work, finding things and setup. The last ones fall off the edge.

when tabs are the better fit

Tabs are still the right choice in two places. They switch between parts of one thing, like the overview, episodes, files and history of a series. And they filter one list, like the counted tabs at the top of a worklist.

A simple way to tell them apart: tabs change what you are looking at, the side navigation changes what you are doing.

The Quiet Harbouroverviewepisodesfileshistory
Tabs for the parts of one series: overview, episodes, files and history. They all belong to the same item.

anatomy

work312findsetup123
The side navigation, close up.
  1. Groups. Every app uses the same three, in the same order: work for the views people use every day, with the exceptions first; find for search and discovery; setup for sources, clients and settings, at the bottom and only for people who may change them.
  2. Views. Each has an icon, a name, and, when it helps, a number someone acts on. The number turns to a warning colour only when it means attention.
  3. The current view. It is marked by the blue bar on its edge and slightly heavier text, so it doesn't rely on colour alone.

how it behaves

  • The app opens on its first view, which shows what needs attention (see principle 1), not on its longest list.
  • Setup stays separate from daily work. It sits in the setup group, and the shell's settings list each app's setup and link straight to it. See settings and setup.
  • Every view has its own address, so a tile, a link or the back button can bring people right back to it.
  • On medium-sized screens the list shrinks to its icons.
  • On a phone the views move into a menu that opens from the app's name, instead of a row of tabs that has to be scrolled sideways.
do
downloads ▾work312findsetup
On a phone, the views open as a menu from the app's name.
don't
requestsseriesmissing← →
A row of tabs that runs off the screen and has to be scrolled sideways.

naming

  • Groups are always called work, find and setup, in every app, so people learn them once.
  • Views are named the way people talk about them: “needs attention”, “on its way”, “search sources”. The view's title uses the same words.
  • Numbers only appear when someone acts on them, and use a thousands separator (2,500).

For a downloads app, that gives:

  • Work: needs attention, on its way, requests, missing, series
  • Find: search, discover
  • Setup: search sources, clients, settings