🧲 Friction & Flow
| Term | What it means | Use it like… |
|---|---|---|
| Friction | Anything that slows a user down, causes confusion, or requires extra effort (physically, cognitively, emotionally) | “There’s a lot of friction when I try to cancel my subscription” |
| Flow | The feeling of smooth, uninterrupted progress through an experience | “Once I decided what I wanted to buy, the flow was very smooth through checkout” |
| Cognitive load | How much mental effort a user has to expend to understand or complete something. ‘Good’ design reduces cognitive load. | “There are way too many options on this screen, it increases cognitive load because I have to make too many decisions at once” |
🧠 Understanding the user
| Term | What it means | Use it like… |
|---|---|---|
| Mental model | What the user expects will happen based on past experiences. Thoughtful interaction design aligns with mental models and bad design fights them. | “Using the ✨ icon to signify premium offerings breaks the user’s mental model — people expect it to mean AI these days” |
| Affordance | What an object or interface suggests you can do with it — i.e. buttons should look clickable, sliders should look draggable. | “I didn’t realize that component was interactive, it doesn’t have very strong affordance” |
| Signifier | The visual or contextual cue that tells you how to use something (arrows, labels, icons, hover state). | “There’s no clear signifier that the text is expandable here” |
| Note: you can think of affordance as the possibility, signifiers as the clues | ||
| Feedback | What the system shows you after you take an action. This can be visual, auditory, haptic, etc. | “I submitted, but there was no feedback so I wasn’t sure it worked and I submitted again!” |
🧭 Navigation & Structure
| Term | What it means | Use it like… |
|---|---|---|
| Information Architecture (IA) | How content is organized, grouped, and labeled. Good IA helps users predict where things live, while bad IA drives searching, backtracking, or guesswork. | |
| Hierarchy | The visual or structural prioritization of elements | “The visual hierarchy draws my eye away from disclaimer” |
| Wayfinding | How users understand where they are, where they’ve been, and where they can go | “The progress indicator makes the wayfinding in this survey super clear” |