Patterns
3 · 7 of 12 roomsThe grammar book. A pattern is a decision that has been made so many times it has a name — which is exactly why it needs a case against it as well as a case for it.
House rule: no pattern ships without the conditions under which it is the wrong answer. All seven carry a two-sided judgement, and the build refuses any that do not.
The Modal
Earns its place — narrowlyA modal is an interruption with a door policy: it seizes focus, dims the world behind it, and refuses to let anything continue until its one question is resolved. That seizure is the entire…
Use when · Avoid when Open the room →Undo vs Confirm
The mercy patternTwo ways to protect a person from their own click. Confirm interrupts before the act: are you sure? — asked so often that the honest answer becomes a reflex, and the reflex defeats the…
Undo — use when · Confirm — reserve for when Open the room →Skeleton screens
Perceived performanceA skeleton screen shows the shape of content before the content — grey bars where text will land, a grey disc where the avatar will be. It replaces the spinner's honest message (the machine…
Use when · Avoid when Open the room →The Wizard
Steps as mercyA wizard is one task wearing several screens. It buys a smaller decision at each moment and pays for it in page loads, and whether that trade is mercy or obstruction depends almost entirely…
Use when · Avoid when Open the room →Empty States
The first screen anyone seesEvery list is empty before it is full, and the empty version is the first thing a new user sees. It is also, almost always, the last screen anyone designs — which is how so many products…
Use when · Avoid when Open the room →Infinite Scroll
Engagement bought with orientationInfinite scroll removes the page, and the page was carrying more than it looked. A page is a position: it can be linked, bookmarked, returned to, counted, and left. Remove it and browsing…
Use when · Avoid when Open the room →The Carousel
Flagged on sightThe carousel is what a homepage does instead of making a decision. Five stakeholders, five banners, one rotating frame — the conflict resolved by hiding four of the five messages at any…
Survives only as · Dies as Open the room →Held in outline
Five patterns are named and unwritten. They are listed because a grammar book that shows only the entries it has finished is claiming a completeness it does not have.
- Accordion
- Breadcrumb
- Master–detail
- Search + suggest
- Pull-to-refresh