Designing every state of a control
WebForgers
A control that looks finished in a still drawing often has only one condition. The pointer may see a hover. A person moving by keyboard may see nothing change. The drawing recorded a poster. The interface needs the conditions the control will actually pass through.
Six conditions
Draw the same control six times, and write the words on it in each case. The words carry the condition for someone who will not pick it out of the color.
Ready. The label is the action, such as “Save draft”. The control is available, and there is something new to store.
Hover. The words stay the same. Only the surface changes. Hover is a pointer courtesy. It is a separate drawing from focus, because a keyboard does not hover.
Focus. WCAG 2.2 requires a visible keyboard focus indicator. Non-text contrast asks the parts of a component that identify it, and that identify its state, to contrast at 3 to 1 against adjacent colors. Draw a visible ring. If you replace the browser’s own outline, the ring is that replacement.
Pressed. The label changes to the work in progress, such as “Saving draft”. The control stays on the page. The sentence changes, so the press is recorded in words as well as in the surface.
Disabled. Use it when the form has nothing new to store, and put the reason beside it: “No unsaved changes.” Disabling a control hides it from the keyboard, so the reason has to be on the drawing with the control.
Failure. The label becomes “Draft not saved”, and a line under the control says what to do next: “Check the connection and save again.” Failure is a condition of this control, drawn with the others.
The empty screen
The page around the control has an empty condition of its own. When a list has no rows, the screen says “No items yet” and offers the action that adds one. Draw that empty screen beside the control. An empty list with a disabled save and no way to add a row is a locked room.
The measures under these drawings are the ones in Layout decisions to make before color: the label still fits, the target is still large, and the failure line still has to clear contrast for ordinary text.
Review the six as one sheet
Lay the six drawings in one row, in the order above. Read only the words, with the color covered. Ready should say the action. Pressed should say the work in progress. Failure should say that the work did not happen, and the line under it should say the next move. If the words are identical across the row, the conditions are only in the paint, and a person who does not see that paint has one control with no news.
Hover and focus stay in separate drawings even when the paint is similar. A pointer can hover. A keyboard does not. If you replace the browser’s own outline, the focus drawing is that replacement, and it still has to be visible. The documents at the end are the ones this paragraph is leaning on.
Disabled is a reason, not a dimmer
Use disabled when the form has nothing new to store. Put the reason on the drawing: “No unsaved changes.” A dim control with no reason looks broken. A disabled control also leaves the keyboard sequence, so the reason has to be readable without landing on the control. If the person still needs to reach it, do not disable it. Say why the action will not run, and leave the control available.
The empty screen is a seventh drawing
“No items yet” plus the action that adds one is a different picture from a list of private rows. Do not reuse one empty folder for both. The software piece draws that split for a desk: Software a coworker can run without a tour. Here, on a booking page, the empty screen is the day with no sessions, and the action is the one that adds a session. An empty list, a disabled save, and no way to add a row is the locked room in the figure.
What to hand the next person
Hand them the row of six, the empty screen, and one sentence: which condition is still missing. A missing failure line is the usual gap. The control returns to “Save draft” while the page stays silent, and the person cannot tell a saved draft from a draft that never left the browser. Write the failure words before the palette for failure is chosen.
Pressed is its own drawing
Hover and pressed get collapsed because both are “the pointer is here.” They are not the same moment. Hover can exist on a device that has a pointer that rests. Pressed exists while the control is being activated, including on a phone where nothing hovers. If the only difference you drew is a slight darkening that a thumb covers completely, you did not draw pressed. Draw what the person can still see around the thumb: a change at the edge, a change in the label from “Book Thursday at 6” to “Booking…”, or both. The label change matters more than the edge. A person who cannot see the edge can still read the word.
Do not use pressed as a place to hide a spinner that replaces the label with nothing. “Booking…” is a sentence. An empty control with a spinning mark and no words is a control that has forgotten the action. If the action takes time, the words stay, and they say the work is happening.
Release is a return to ready, or a move into failure, or a move into a confirmation that is no longer this control. Pick one and draw it. A control that stays visually pressed after the finger is gone looks stuck. A control that snaps back to ready while the page is still failing looks like a success.
Failure has a sentence
The failure drawing is the one teams skip because the happy path is the one in the mock. On this booking page the failure sentence is specific. “Could not book Thursday at 6. The draft is still on this page.” A toast that says “Error” and then vanishes is not that drawing. The control returns to a state where the person can try again, and the sentence stays until they do, or until they leave.
If the failure is “this session just filled,” the sentence says full, and the control either changes to the next open time or comes down. Leaving “Book Thursday at 6” enabled under a sentence that says full is two states at once. The schedule is the proof. The control has to agree with it.
Write the failure words before you pick a failure color. A red control with no sentence is a mood. The sentence is the state. Color can be added after the words exist, and it still has to separate from the quiet links the way the layout plate required.
Disabled names the reason
A disabled booking control needs a reason a person can read without guessing. “Bookings open on Monday” next to a disabled control is a reason. A control at half opacity with the same label as the ready control is a dimmer. The reason sits outside the control if the disabled control itself will not be read by everyone’s tools. Do not rely on a tooltip that only appears on hover. The phone that never hovers is the same phone the layout plate was tested on.
Disabled is not the empty day. The empty day has an action that adds a session. Disabled is a control that must not be used yet, with the reason beside it. Mixing them produces the locked room: nothing to book, nothing to add, and no sentence. If both can be true on the same morning, draw both, and say which one the page is in.
One sheet for the person who was not in the room
Hand across a single sheet, not six files. The sheet has the six conditions in one row, the empty day as its own drawing, and one line that says which condition is still missing. The usual missing one is failure. The usual cheat is a disabled control with no reason. A person who was not in the critique should be able to point at the gap without asking.
Keep the layout measures on the same sheet or on the sheet this one points at: the phone, the opening line, the gap. A control plate that invents a new width for the button has reopened the layout plate in secret. If the label “Booking…” no longer fits the control you already sized, widen the control on the layout plate and note that you did. Do not quietly overflow the label and call the state done.
The palette for failure, for disabled, and for pressed comes after the words. If a stakeholder asks to “see it in the brand colors” before the failure sentence exists, the honest answer is that the colors would be painting a state you have not written. Show the black-on-white row. It is already usable as a specification for the person building the control.