UX by Example
Learn UX terms by doing them, not just reading them.
An interactive UX glossary. Every entry demonstrates its own concept - you learn each term by example, not by definition.
Browse
283 interactive entries, by topic
Pick a topic to dive in, or jump to any term. Every entry is a demo you operate, then the idea explained back at the drawing board.
Accessibility
See all 17 accessibility entries →-
accessibility
Colour blindness
Colour blindness is reduced ability to tell certain colours apart - most commonly red from green - affecting a meaningful slice of people, mostly men. For design it means one thing above all: if colour is the only way you signal something, a lot of users simply won't receive the message.
Try the demo -
accessibility
Keyboard trap
A keyboard trap happens when focus enters a section but can’t exit via keyboard - for example, a widget, embed, or dialog that captures Tab, leaving keyboard or switch users stranded and unable to reach the rest of the page. For someone who can’t use a mouse, it’s not an annoyance; it’s a dead end that can make the whole page unusable.
Try the demo -
accessibility
Accessible forms (labels and instructions)
An accessible form gives every control a real, programmatically-associated label and clear instructions, so a screen-reader user hears what each field is for before they fill it in. Without that, the form may look fine but announces as a row of nameless "edit text" boxes - usable by sight, a guessing game by ear.
Try the demo
Cognitive psychology
See all 51 cognitive psychology entries →-
cognitive psychology
Cognitive load
The mental effort needed to complete a task. Too much and people slow down, make mistakes, or stop.
Try the demo -
cognitive psychology
Mental model
The mental picture someone holds of how something works. When the interface aligns with it, things feel intuitive; when it doesn’t, they feel broken.
Try the demo -
cognitive psychology
Recognition vs recall
Recognising something you’re shown is easier than recalling it from scratch. Good interfaces give you choices - menus, icons, recent items, autocomplete - instead of forcing you to remember and type from nothing.
Try the demo
Design ethics
See all 21 design ethics entries →-
design ethics
Dark patterns
Interface tricks that nudge you toward choices you didn’t plan to make - for the business’s gain, not yours.
Try the demo -
design ethics
Confirmshaming
Confirmshaming is wording the opt-out to make declining feel foolish, guilty, or cheap - 'No thanks, I'd rather pay full price.' The choice remains; the shame is the thumb on the scale.
Try the demo -
design ethics
Preselection
Preselection is choosing for the user in your own favour, hoping they don’t notice - a pre-ticked opt-in, an extra already in the basket, or the pricier plan selected by default. It exploits the same inertia that makes good defaults helpful, but directs it to benefit the business instead of the user.
Try the demo
Interaction design
See all 33 interaction design entries →-
interaction design
Progressive disclosure
Show users only what they need right now, with extra details revealed through a clear next step. It keeps the first view simple without permanently hiding anything.
Try the demo -
interaction design
Affordance
An affordance is the potential for action that arises from the relationship between a person and an object - a button affords pressing, a slider affords dragging. A signifier is the visible cue that signals the action is available: the raised edge, the underline, the drag handle. Affordances are the possibilities; signifiers are how we communicate them.
Try the demo -
interaction design
Feedback
Feedback is the interface responding: a clear sign of what just happened and what to do next. Without it, users are left guessing whether anything worked at all.
Try the demo
Laws & principles
See all 19 laws & principles entries →-
laws & principles
Fitts's law
The time it takes to hit a target grows as the target gets smaller or farther away. Large, close targets are quicker to hit; small, distant ones take longer.
Try the demo -
laws & principles
Hick's law
The more choices you offer, the longer a decision takes - and the cost grows logarithmically, not linearly. Choices take time, not just space.
Try the demo -
laws & principles
Miller's law
Miller's 1956 research showed that our immediate memory for unrelated items is limited - famously 'seven, plus or minus two'. Miller himself cautioned against treating this as a fixed limit, and later studies suggest the number of chunks is often lower, around three to five under controlled conditions. The key insight isn't a magic number: working memory is limited, so grouping information into meaningful chunks helps people retain it.
Try the demo
Metrics
See all 12 metrics entries →-
metrics
Time on task
Time on task is how long it takes someone to complete a specific task, from start to finish. It’s the most common efficiency metric in usability testing - and one of the easiest to misinterpret.
Try the demo -
metrics
Conversion rate
Conversion rate is the percentage of completed conversions among a clearly defined group - users, sessions, or opportunities - over a specific time period. The denominator must be explicit for the rate to be meaningful.
Try the demo -
metrics
Task success rate
Task success rate is the percentage of users who complete a task - for example, four out of five users finishing it, which equals 80%. It’s the simplest way to see if something works, though it’s easy to overinterpret.
Try the demo
Persuasion
See all 26 persuasion entries →-
persuasion
Social proof
People look to what others do to make decisions, especially when uncertain. In an interface, that means showing real evidence - like ratings, usage counts, and reviews - from actual users.
Try the demo -
persuasion
Scarcity
Scarcity increases appeal by making something feel more valuable when it appears rare or about to disappear - like 'only 2 left' or 'offer ends in 5:00'. It works because the discomfort of losing an option outweighs the pleasure of gaining one.
Try the demo -
persuasion
Reactance
Reactance is the push-back you feel when something threatens your freedom to choose. Tell people they must do something, or that they can't have it, and the heavy-handed pressure itself becomes a reason to resist - so hard sells, forced steps and "you have to" framings often produce exactly the behaviour they were trying to prevent.
Try the demo
Process & strategy
See all 31 process & strategy entries →-
process & strategy
MVP (minimum viable product)
An MVP is the smallest version of a product that still delivers real value to users and lets you learn whether your idea works - before you've built the whole thing. The point isn't to ship something cheap and broken; it's to ship the smallest complete, usable slice that tests your riskiest assumptions with real people, fast.
Try the demo -
process & strategy
Wireframe
A wireframe is a deliberately plain, low-fidelity blueprint of a screen - boxes, lines and placeholder text showing what goes where and how the structure works, with the visual design stripped out on purpose. By leaving out colour, imagery and polish, it keeps everyone focused on layout, hierarchy and flow before anyone argues about how it should look.
Try the demo -
process & strategy
Prototype & fidelity
A prototype is a working model of a design made to be tested, and fidelity is how closely it resembles the finished product. Low-fidelity prototypes (paper sketches, clickable wireframes) are rough, fast and cheap; high-fidelity ones (polished, interactive, near-real) look and behave like the real thing. Choosing the right fidelity for the question you're asking is the whole skill.
Try the demo
Research methods
See all 37 research methods entries →-
research methods
Heuristic evaluation
A quick expert review that checks an interface against a short set of usability rules - you can see this in action right here.
Try the demo -
research methods
Five-second test
Show a design for five seconds, then ask what you remember. What sticks is what the layout really highlights - and what it quietly obscures. You can try this test right here on the page.
Try the demo -
research methods
First-click testing
First-click testing asks one simple question: where do users go first to complete a task? That first click matters more than any other - get it right and the task usually follows; get it wrong and it rarely recovers.
Try the demo
UI patterns
See all 20 UI patterns entries →-
ui patterns
Cards
A card is a container that bundles everything about one thing - image, title, detail, action - into a single bounded unit you can scan and act on as a whole. Its job is to make the edges of 'one item' obvious, so a list of many things reads as many things, not one undifferentiated run of text.
Try the demo -
ui patterns
Tabs
Tabs split one screen into parallel panels, showing only one at a time. They keep pages short by hiding everything except the selected panel - which is the whole point, and the whole danger.
Try the demo -
ui patterns
Accordion
An accordion is a stack of headed panels that open and close on click, folding long content into a scannable list of titles you can expand as needed. This very demo is one - the panels below are the pattern.
Try the demo
Visual design
See all 16 visual design entries →-
visual design
Visual hierarchy
The order your eye follows across a layout, shaped by size, weight, colour and space. It shows what grabs attention first - and what slips by.
Try the demo -
visual design
Whitespace
Whitespace (or negative space) is the empty area between and around elements. It’s not wasted space: it groups related items, guides the eye, and makes a layout easy to read.
Try the demo -
visual design
Colour schemes
A colour scheme is a set of hues chosen by their positions on the colour wheel to work together. Common patterns - complementary (opposite), analogous (neighbouring), triadic (evenly spaced) - are just rules for picking angles, giving you palettes that feel harmonious rather than random, from one base colour.
Try the demo
Prefer the full list? See every term in the glossary.