Morten A. Giraffe

Chapter II / Make it usable

Feedback and Speed: Every Action Needs an Answer

Design acknowledgment, progress, and result states so people never wonder whether the interface heard them.

All 18 rules4 min read
01Scenario

Start with the moment where the interface asks too much.

A visitor presses Submit. Nothing changes. They press again. The first request completes. The second creates a duplicate. The server was doing work the whole time, but the interface behaved as if it had heard nothing. The problem looks like impatience until you see the missing feedback contract.

Technical speed and perceived continuity work together. The interface must acknowledge input, explain meaningful waiting, prevent duplicate action, and announce the result without using animation to disguise failure.

02Interface Lab

Show the failure and the correction.

The lab uses controlled markup instead of raster text so the lesson stays legible, accessible, and easy to revise.

  1. Step 1Input is givenThe user doubts whether the action registered.
  2. Step 2Waiting startsWaiting feels indefinite and unsafe.
  3. Step 3Result arrivesThe user cannot decide whether to continue, retry, or stop.
  4. Step 4State contract is designedThe flow feels faster because it is legible.

Corrected path

Acknowledge immediately

Pressed, disabled, or pending states show that input was heard.

03Principle

Make the useful path easier.

Heard, working, finished, recoverable

Every meaningful action should answer the applicable stages. A pressed state covers heard. Pending text covers working. Confirmation covers finished. Specific error and retry cover recoverable.

The right waiting pattern

Skeletons, determinate progress, indeterminate status, optimistic updates, and background completion each fit different work. A spinner is not a strategy.

Performance is real, feedback is not camouflage

Core Web Vitals and actual latency still matter. Feedback helps people stay oriented while work happens; it does not excuse a slow or broken system.

04Rebuild

Turn critique into a usable rule.

Remove

  • Silent submit

    A form allows duplicate action because nothing changes after the first click.

  • Decorative spinner

    Animation appears without explaining whether progress, retry, or cancellation exists.

  • Dead-end success

    The interface says “sent” without explaining next steps or expected follow-up.

Build

  • Acknowledge immediately

    Pressed, disabled, or pending states show that input was heard.

  • Explain waiting honestly

    Use loading language appropriate to the uncertainty and consequence.

  • Make finish and recovery explicit

    Success says what happened next. Failure preserves work and offers a safe retry or alternate path.

05Field Test

Use it on a real page.

Throttle the network and use the primary flow.

  1. Step 1

    Click once and watch for immediate acknowledgement.

  2. Step 2

    Try to click again during pending state.

  3. Step 3

    Wait for success and read the next step.

  4. Step 4

    Force timeout or failure and check recovery.

Evidence
Use screen recording, state screenshots, and duplicate-submission logs where available.
Pass
The action is acknowledged, duplicate work is blocked, and success or recovery is clear.
Fail
The user can create duplicates or cannot tell whether the system heard them.
06Use By Role

The rule should help the person making the next decision.

Business owner

Treat follow-up messages and success states as conversion copy, not technical leftovers.

Designer

Design the full state model, including timeout and retry.

Developer

Prevent duplicate submits and keep status announcements useful without leaking raw internals.

QA

Throttle the network and trigger double-click, timeout, validation, and server-error paths.

Too much feedback becomes noise. Routine low-consequence actions may need subtle acknowledgment rather than modal progress or repeated announcements.

07Checklist And FAQ

Check the page, then answer the doubt.

  • Pressed state exists.
  • Pending state blocks duplicate action when needed.
  • Loading copy names what is happening.
  • Success explains the next step.
  • Failure preserves work.
  • Status updates are accessible but not noisy.
  • Actual performance is still measured.
Is a spinner enough feedback?
Usually no. It may show waiting, but it does not explain acknowledgement, progress, outcome, retry, or next step.
Are optimistic updates always better?
No. They work when reversal and conflict handling are safe. They can damage trust when the system later contradicts them.
How do loading states affect accessibility?
They should be visible, clear, and announced when meaningful without overwhelming assistive technology with noise.