Every interactive element in a real interface exists in more than one state — most beginner designs only ever design the default state, then wonder why the built product feels unfinished.
| State | When it shows | Why it matters |
|---|---|---|
| Default | Normal, at rest | The baseline |
| Hover | Cursor over it (desktop only) | Confirms the element is interactive before clicking |
| Active / Pressed | The moment of clicking | Confirms the click registered |
| Focus | Selected via keyboard tab | Essential for accessibility — covered in depth later in this course |
| Disabled | Not currently usable | Prevents a frustrating dead click |
| Loading | Waiting on something | Prevents the user from thinking the app is frozen |
| Error | Something went wrong | Tells the user what happened and what to do |
A micro-interaction is a small, single-purpose piece of feedback — a button that subtly scales on press, a checkbox that animates a checkmark in, a heart icon that briefly bursts when liked. They're small on purpose: their whole job is confirming an action happened, not drawing attention to themselves.
| Part | What it is |
|---|---|
| Trigger | What starts it — a click, a value changing, a page loading |
| Rules | What happens — what changes, in what order |
| Feedback | What the user sees or feels — the visual or motion response |
| Loop/Mode | Does it repeat, and does it change behavior after repeated use? (often skipped for simple ones) |
Subtlety is the point
A micro-interaction that takes more than a fraction of a second, or draws real attention to itself, has usually overstepped its job. The best ones are barely noticed consciously — they're felt as "this feels responsive" rather than seen as "an animation happened."