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 →Exhibits
Not patterns, but working benches about them: the same thing built several ways for you to use, time and measure. Each one sits beside the patterns it tests, and counts as none of them.
One app, four layouts
Priorities, made visibleA layout is a statement of whose priorities come first. This room builds one travel-insurance app four ways and asks you to do the same four jobs in each — call the emergency line, claim…
Open the exhibit →One menu, four grids
What fits on a sideA grid decides how much fits. This room prints one cha chaan teng menu on a laminated A4 sheet four times — as a manuscript, in columns, in modules and as a hierarchy — with the same dishes…
Open the exhibit →One website, every grid
Twelve dividesA grid is only as good as the numbers it divides into. This room takes one plain website and lays it out on twenty-seven grids that real organisations publish — each on its own columns,…
Open the exhibit →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