Screen and Flow Patterns

Mental model

Before anything is styled, two questions decide the shape of a product: which screens exist, and what connects them. Getting this wrong is expensive in a way visual decisions never are -- you can restyle a screen in an afternoon; you cannot re-architect a flow after it ships without breaking people's habits.

• Name the screen type before designing it. Nearly every screen is an instance of a known type with known states and a known failure mode. "A page where users manage their team" is a List/Feed with an invite flow attached, and saying so imports thirty solved decisions.
• A flow is a sequence with an exit at every step. If a step has no way back and no way out, it is a trap, and traps are where support tickets come from.
• Design the states, not the screen. The happy path is the easy fifth of the work. The other four fifths are empty, loading, error and partial.
• Density is a decision, not a consequence. Pick a tier and hold it.

Constants