UX state design · part two

Patterns for choosing the right state

Once you know what on/off looks like, the next skill is deciding how loud each state should be: subtle, confirmed, celebratory, warning, error, or empty.

The state ladder

Not every state deserves the same volume. The trick is matching visual emphasis to user consequence.

DefaultNothing happened yet. Make it calm, readable, and ready.

Quiet

Available / actionableThis wants a tap. Give it affordance: button shape, contrast, hover/focus.

Inviting

Selected / completedThe truth changed. Confirm with more than color: label, icon, badge, fill.

Clear

Important / pendingUser attention needed soon. Use amber, motion sparingly, and explicit copy.

Notice

Error / destructiveSomething blocks progress or has risk. Be direct, specific, and recoverable.

Interrupt

Before / after patterns

Small differences make state legible under real-world conditions.

Before: weak completion

Japan done

Morocco not done

France not done

After: redundant cues

Japan Booboo verified · photo taken

Morocco Photo still needed

France Photo still needed

Selection pattern

Selected is not the same as completed

Selected means “this is the current choice.” Completed means “this task is finished.” They need different language.

Feedback pattern

Use the right feedback weight

Saved. Your progress is stored on this device.

Tip: Booboo photos also appear on the map.

Heads up: this browser may clear local data.

Could not save. Try again before leaving this page.

Empty states teach

An empty state should explain what belongs here and what to do next.

🗺️

No Booboo map markers yet

Take a Booboo photo in a pavilion, then tap that pavilion in the Booboo Bonus section. A marker will appear here.

Go to Booboo Bonus

Decision matrix

When designing a state, choose cues based on consequence.

Question	If yes	Design response
Does the user need to act now?	Yes	Use a clear button, stronger contrast, and direct verb.
Does the state prove completion?	Yes	Add check/badge/stamp + label change. Do not rely on tint alone.
Could the user lose work?	Yes	Show saved/unsaved/pending states plainly.
Is the item unavailable?	Yes	Fade it, disable interaction, and explain why if not obvious.
Is this playful or ceremonial?	Yes	Add delight after confirmation, not before clarity.