Unit 1 · Lesson 2 of 20

Make an interaction understandable

Explain how people discover an action, predict its result, and recover from mistakes.

Ready to learnOne idea, one guided decision, and an application in a new context.
YOUR LEARNING PATH
02 / 20

01 / Learn

The idea

People need a usable mental model of an interaction: what can I do, what will happen, what just happened, and what can I do if it was wrong? A signifier makes an action discoverable; a clear label and placement help people predict its effect; feedback shows the current state. These elements have to agree with the system's actual behavior.

A check mark can mean 'saved on this device,' 'synced to the server,' or 'approved.' Those are different commitments. When an action takes time, show the transition as well as the final state. When it can fail, preserve the person's work and provide a recovery action. Test whether people can explain the state in their own words instead of asking whether they like the icon.

A common mistake

More feedback always means more notifications. The useful amount depends on the action's consequence, timing, and what the person already understands.

See the idea in action →

02 / See the reasoning

Worked example

Fictional scenario

A mobile document editor saves edits automatically but shows a small check mark with no label.

A reviewer sees the check mark after a local write while the network is offline. They change the state language to 'Saved on this device; waiting to sync' and design a later 'Synced' state. They also test what happens when the document closes before sync. The wording follows the state model rather than decorating it.

Try a decision →

03 / Decide

Guided decision

The editor has reliable local saving but intermittent sync. Which state treatment would you prototype first? Explain the tradeoff.

Choose the option you would try first

04 / Apply elsewhere

Independent application

Fictional scenario

A physical parcel locker accepts a package and briefly lights a green indicator while its network is unavailable.

Design the immediate and later confirmation states. Explain what the sender can safely infer, what the operator knows, and how a failed registration is recovered.

Make: An annotated three-state sequence: accepted locally, registered remotely, and registration failed.

Review your work against this criterion

Labels and feedback correspond to real state, the physical setting is considered, and a failed handoff has a recovery route.

05 / Keep working

Sources and related patterns

Apply this skill: UX critique and problem statement →

Saved items