Tabs, stacks and sheets: app navigation in plain words

Navigation is the part of an app nobody notices when it is right and everybody feels when it is wrong. The good news is that phones only move in three ways, and each one has a job. Learn the three, pick by the job, and most of the “something feels off” goes away.

1. Tabs are places

The bar at the bottom with three to five icons is for the places a person switches between all day: Today, Clients, Messages, Profile. Each tab remembers where you were when you come back. That memory is the whole point: tabs are for things you keep returning to, not for things you do once.

Rules the platforms enforce for you: between three and five tabs (Android’s own bar allows five, and so does the iPhone’s); each tab is a noun; the first tab is where the app opens. The trap: making an action a tab (“Add”, “Scan”). An action belongs on the screen where it happens, as a button.

2. The stack is steps

When a tap opens a new screen that slides in from the right, you have pushed onto a stack, and the back button pops it off. A list opens a detail, the detail opens an edit, back goes to the detail, back again goes to the list. The stack is for steps on the way to one thing.

The platform draws the back control and the slide for you, with the gesture people already use (swipe from the left edge on iPhone, the system back on Android). The trap: a stack that never ends, five screens deep with no tab bar in sight. If a step needs a tab bar to escape, it should have been a sheet.

3. Sheets are quick things

A panel that rises from the bottom and leaves the screen behind it visible is a sheet. It is for things that should not take you away: pick a date, choose a filter, confirm a delete, see a short detail. You swipe it down and you are exactly where you were.

Sheets became a first-class thing on both phones in the last two years, with sizes that stop halfway and expand. Use the system’s, not a drawn panel: the system one gets the swipe, the dimming and the keyboard behaviour right for free. The trap: a sheet with a whole form in it. Forms are steps; put them on the stack.

4. Pick by what the person is doing

• Switching between things they use all day: tab.
• Going deeper into one thing, then coming back: stack.
• Doing something small without losing their place: sheet.

Write the kind of move next to every arrow in your design. If you cannot decide, it is usually because the screen is trying to be two things, and the fix is upstream of the navigation.

5. Why websites-in-a-box feel wrong

Apps that are really a website shown inside an app shell use one kind of movement for everything: a page replaces a page. No tab memory, no slide, no sheet, a back button that is the browser’s. People cannot say what is wrong, but they stop trusting it, because every app they use daily moves differently. This is also the cheapest thing to get right, because the phone’s own controls do the work.

In the App Builder, every arrow you draw between two screens says which of the three moves it is, and the built app uses the phone’s own tab bar, stack and sheets to do exactly that. Draw one arrow of each kind and tap through them on your phone to feel the difference.