The Field Kit

Codex: Top Layers

Modal, side panel, route change

Three ways to open something. What each does to the place the person was standing:

| | Modal | Side panel (drawer, sheet) | Route change | |---|---|---|---| | The page behind | stays, dimmed, can't be touched | stays, usually still usable | replaced | | It says | wait, this first | you're still here, here's more | you've gone somewhere | | Gets out by | answering or dismissing | closing | back, or going elsewhere | | Has an address | rarely | sometimes | yes; that's what makes it a place | | On a phone | often a full-screen sheet | often a bottom sheet, or the whole screen | the same | | What it claims the thing is | an interruption | a detail of what's underneath | a place |

Tabs are not a top layer. They hold the page and swap a slice of it; they're in Codex: Navigation.

Your system's rules

Write the answers down once, for your product, and check every screen against them. There's no right set; there's a decided one.

1. Modal: what earns one here? What never goes in one? 2. Side panel: what goes beside the page rather than over it? How much can a panel hold before it should have been a page? 3. Route change: what is a place in this product? Every first-class thing (a customer, an order, a project)? 4. Addresses: which panels get one? Does a modal ever? (The URL Paste Test.) 5. Stacking: can a modal open a modal? A panel open a modal? A panel open a panel? 6. Coming back: when the person closes it or presses back, what returns with them: scroll position, filters, selection, a half-typed note? 7. Phones: what does each of the three become on a small screen, and does it still say the same thing about the page underneath?

(What Happens to Where I Was?)