Feedback design: make the next action legible

Feedback design: make the next action legible

A concise visual guide to designing feedback that tells people what happened, what state holds, and what to do next across interfaces, products, and work environments.

A button changes color. A progress bar moves. A machine clicks, lights up, or gives a short vibration. Each signal answers a different question: Did the system receive my action? What state is it in? What should I do next?
Nielsen Norman Group describes this design responsibility as visibility of system status: keep people informed about what is happening through appropriate feedback within reasonable time. 1

The loop a signal must close

Feedback is information returned by a system about the effect of a person's action or the system's current state. A useful signal connects four things: action, state, signal, and next move.
The FDA models user-device interaction as a cycle. People perceive information, interpret it, and act through controls. The device receives the input, processes and reacts, then provides output about the effects of the action. The model applies to setup, use, maintenance, packaging, labels, and training materials as well as to the main control surface. 2
Five stages connect an action to a decision: action, received, state, signal, and next action
Self-made diagram based on the FDA's cyclic user-device model, Nielsen Norman Group's examples of immediate feedback, and WCAG 2.2's definition of status messages. 123
A design review can therefore begin with four questions:
QuestionWhat the designer specifiesTypical failure
Did the system receive the action?A receipt signal, such as a changed button, checkmark, click, or tactile detentThe person repeats the action because the first attempt is uncertain. 1
What state is true now?The current condition: idle, busy, saved, unavailable, or in errorThe signal says something moved without saying what the movement means.
Which channel carries the state?A visual, auditory, tactile, spatial, or programmatic signal suited to the contextA color-only or screen-only signal disappears for part of the audience. 3
What can the person do next?A clear continuation, correction, cancellation, or wait stateThe person sees a warning and still has to guess how to recover.
The smallest complete loop makes the next decision easier. A decorative animation can show activity; a feedback signal earns its place when it exposes the state that changes the person's next move.

Four states people need to distinguish

The same control may need several signals over its lifetime. The signal for receipt answers a different question from the signal for completion. The signal for waiting answers a different question from the signal for recovery.
The examples below translate documented interface patterns into a compact design checklist. Nielsen Norman Group uses changed button states and progress indicators to communicate selection and ongoing work. WCAG 2.2 defines status messages around action results, waiting, progress, and errors, and gives examples such as "5 results returned," "application busy," and "Invalid entry." 13
Receipt, waiting, result, and recovery feedback answer four different user questions
Self-made comparison diagram based on Nielsen Norman Group's feedback examples and W3C's status-message examples. The labels are a design translation, not an official four-part taxonomy. 13
State to exposeThe person's questionSignal that fits the questionUseful next move
ReceiptDid the system get the action?A pressed-button state, checkmark, click, tactile detent, or short confirmation soundContinue without repeating the action. 1
Waiting or progressIs work still running, and how far has it gone?A busy state for indeterminate waiting; a progress indicator when progress can be representedWait, cancel, or keep working elsewhere. 13
ResultWhat changed because of the action?A saved state, updated count, changed physical position, or concise completion messageInspect the result, move on, or undo it. 3
RecoveryWhat went wrong, and what can I change?An error tied to the affected field or control, with a correction cueFix the input, retry, cancel, or choose another route. 3
A spinner communicates waiting. A progress bar communicates progress only when the displayed movement corresponds to meaningful work. A checkmark communicates receipt or completion according to its placement and timing. The state and the signal must agree.

Timing and channel decide whether feedback helps

Nielsen Norman Group's standard is appropriate feedback within reasonable time. For a direct action, a delayed confirmation leaves the person deciding whether to repeat the action. For a longer process, a progress indicator tells the person that waiting is part of the current state. 1
Timing has three practical tests:
  1. Arrival: Does the signal appear before the person has to decide whether to repeat, wait, or change course?
  2. Persistence: Does the signal remain available long enough for the person to use it?
  3. Interruption: Does the signal preserve the person's current task, or does it take control away from the task?
The third test matters for accessibility. WCAG 2.2 Success Criterion 4.1.3 says that status messages in markup should be programmatically determinable through a role or property so assistive technologies can present them without receiving focus. The criterion covers messages about action results, waiting, progress, and errors when the message leaves the user's context in place. 3
A visible toast and a screen-reader announcement can carry the same state through different channels. A visual icon or sound may require a text alternative and an appropriate role. W3C also warns that excessive live-region announcements can make an application too chatty, so the designer should test the amount and timing of feedback with users. 3
The practical specification is therefore more precise than "add feedback":
  • State exactly what changed.
  • Choose the channel the person can perceive during the task.
  • Deliver the signal before the next decision becomes uncertain.
  • Keep the message peripheral when the task should continue.
  • Reserve focus-taking interruption for changes that genuinely require attention.

Translate the loop across four design disciplines

The FDA includes controls, displays, packaging, labels, and training materials in the device user interface. NASA's Johnson Space Center evaluates displays, controls, workstations, and vehicle or habitat environments with task analysis, human-in-the-loop evaluation, workload and usability measures, and iterative design. 24
The same feedback loop changes form with the task. The examples below are design translations for critique; they are not performance measurements.
DisciplineTask momentState to exposeSignal and next move
Graphic designA reader chooses an entry point in a poster, map, wayfinding set, or information graphicWhich route, level, or category is activeConsistent contrast, alignment, arrows, and spacing keep the selected route legible; the reader follows the next visual step.
UX/UI designA person saves, uploads, searches, or submits informationReceived, processing, completed, or failedA pressed state, progress indicator, result message, or field-level correction tells the person whether to wait, inspect, retry, or edit. 13
ErgonomicsA person performs a repeated physical task under real working conditionsThe current task phase and whether the control or tool respondedTactile resistance, sound, spatial grouping, and readable displays expose the state through channels that remain available during the task. NASA treats task analysis and human-in-the-loop evaluation as part of this context. 4
Industrial designA person operates, cleans, adjusts, or services a productThe product's operating mode, completion state, or fault stateA light, sound, physical position, or control response explains what the product is doing and whether the person should continue, wait, stop, or correct the setup. The FDA places operation and maintenance inside the user-interface scope. 2
The medium changes; the design question stays stable: which state must the person know before choosing the next action?

Run a six-question feedback audit

A signal can look polished and still leave the loop open. Audit the interaction in the order a person experiences it.
Six stations move from task and action to state, signal, timing, and next move
Self-made audit flow based on the FDA's user-device cycle and NASA's task-analysis and human-in-the-loop evaluation practices. 24
  1. Task: What is the person trying to complete at this moment?
  2. Action: What action changes the product, interface, or physical task?
  3. State: What exact condition becomes true after the action: received, waiting, progressing, complete, unavailable, or in error?
  4. Signal: Which visual, auditory, tactile, spatial, or programmatic channel exposes that condition?
  5. Timing: When must the signal arrive, and how long must it remain available?
  6. Next move: Can the person tell whether to continue, wait, inspect, undo, retry, or correct?
Then test the whole loop in context. NASA describes human-in-the-loop evaluation as testing display and control formats, hand-controller placement, habitat volumes and geometries, and other scenarios where human input matters. The same principle applies to a mobile interface, printed route, workstation, or consumer product: evaluate the signal while the person performs the real task, under the conditions that shape perception and action. 4
A complete feedback specification can fit in one sentence: After [action], [state] becomes true; [signal] communicates it through [channel] within [timing], so the person can [next move].
That sentence gives a critique something a decorative cue cannot: a state to verify, a signal to inspect, and a decision the person should be able to make.

Este contenido lo produjo un canal automáticamente. Con una sola frase, Neodrop puede seguir produciendo para ti.

Contenido relacionado

More from this channel