Pro edition
State Checklist.
Most missing states are not missing because nobody thought of them. They are missing because drawing one requires a conversation with an engineer or a support lead, and that conversation is easier to postpone than to have. This is the list of those conversations.
One question per state
| State | Ask | What the answer decides |
|---|---|---|
| Empty | Is this empty because it is new, or because a filter removed everything? | Two completely different screens. The first needs an invitation, the second needs a way back. Shipping one for both is the single most common state mistake. |
| Loading | How long, at the 95th percentile, on the worst connection you support? | Under 300 ms, show nothing at all. Up to about 3 s, a skeleton at the real height. Beyond that it needs progress or a reason, and a spinner is not either. |
| Error | What can actually fail here, and which of those can the user do anything about? | Ask an engineer for the real list. Usually three to five things, of which one is fixable by the user. Those get different copy; the rest share a message. |
| Offline | What is already cached, and what would be lost? | If unsaved work would be lost, offline is a save-state problem rather than a message. That is a two-week conversation and it is better to have it in week one. |
| Denied | How many roles, and can the user see that the data exists? | Hiding the existence of data and denying access to it are different products. Somebody has already decided which one you are; find out who. |
| Too much | What is the 99th percentile count in production, today? | Query it. The answer is nearly always an order of magnitude past the design, and it decides whether you need search, pagination or virtualisation. |
| Too long | What is the longest string in the column, right now? | One SQL query. Design against that value, not against a plausible one, and decide truncation per slot rather than globally. |
| Zoomed | Does it reflow at 400% width and 200% text? | WCAG 1.4.10 and 1.4.4. Fixed pixel heights on rows and buttons are what break, and they break silently because nobody tests at that zoom. |
Extra states, by component
On top of the nine. A form is thirteen states before anybody has drawn anything pretty.
- Data table — Sorted-empty, one-row, and a column whose values are all identical.
- The all-identical column is the one nobody checks and it makes sorting look broken.
- Form — Field-level error, form-level error, submitted-and-waiting, and success.
- Four states minimum on top of the nine. Submitted-and-waiting is the one that lets people double-submit.
- Search — Zero results, one result, and results-still-loading-while-typing.
- Zero results needs to say what was searched for. Roughly half of all zero-result screens do not.
- File upload — Wrong type, too large, partial failure of a multi-file upload.
- Partial failure is the state that is always missing and always happens.
- Avatar / name — No image, no name, and a name in a script the fallback initials do not handle.
- Initials generated from a name break on the first user who does not have two Latin words.
Twelve questions somebody else has to answer
None of these can be answered by a designer alone, and every undesigned state on any product I have audited traces back to one of them going unasked.
| Question | Who has the answer |
|---|---|
| What is the 99th percentile row count, in production, today? | Engineer or analyst |
| What is the longest value in this column? | One SQL query |
| Which failures are retryable and which are not? | Engineer |
| How many permission roles are there, really? | Whoever owns the model |
| Does an admin see a different empty state? | Product |
| What does support get asked about this screen? | Support lead |
| What is the p95 load time on 3G? | Engineer |
| Is anything here saved locally? | Engineer |
| Which strings are translated, and by whom? | Whoever owns localisation |
| What happens to this screen in the first five minutes of a new account? | Product |
| Has anyone opened this at 200% zoom? | You, in ten seconds |
| What is the error copy that ships if we do nothing? | Read the code |