Puzzles
- Name each visible UI state before drawing controls.
- Trace one click from user intent to state update to visible result.
- Observe one user action and record hesitation, workaround, or missing feedback.
- Choose one wait-time or threshold tradeoff and explain the human impact.
Puzzle Stations
Use these as quick hands-on checks. Complete a few before writing code.
- State cards: classify ready, playing, won, lost, invalid, loading, saved, and reset as distinct UI states.
- Form-state audit: for idle, invalid, saving, and saved, name the message and enabled control.
- Click trace: map player action to state update, status text, and next enabled control.
- Wait-time rule: decide what feedback belongs at instant, short-wait, and long-wait delays.
- Threshold tradeoff: decide whether a warning should prefer fewer false alarms or fewer missed issues.
- Keyboard path: solve the same action sequence without using a mouse.
- Feedback bug: find a message that does not match the current state.
Programming Challenge
Complete this small state helper before wiring controls. Each state must produce feedback that tells the player what happened and what they can do next.
type PlayState =
| { status: "ready" }
| { status: "playing"; score: number }
| { status: "won"; score: number }
| { status: "lost"; reason: string };
function messageFor(state: PlayState): string {
// TODO: write one useful message for each state.
}Check these cases before connecting the helper to a screen:
| State | The message should tell the player |
|---|---|
{ status: "ready" } | how to start |
{ status: "playing", score: 3 } | the current score or next action |
{ status: "won", score: 8 } | what was achieved and how to continue |
{ status: "lost", reason: "Time ran out" } | why the round ended and how to recover |
Then add one visible status panel and confirm that its message matches the enabled control for every state.
Common Bugs
- Styling a screen before naming the states it must show.
- Using AI usability advice without watching the actual interaction.
- Treating all delays or model warnings as the same user experience.
- Writing feedback copy that does not match the enabled controls.
Bonus Puzzles
- Add disabled and feedback states.
- Run a one-person usability test.
- Ask AI for accessibility or feedback wording concerns and verify them.