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
140 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 is when focus enters a spot but can't exit via keyboard - 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 16 cognitive psychology entries →-
cognitive psychology
Cognitive load
The mental effort required to complete a task. Too much and people slow down, make mistakes, or quit.
Try the demo -
cognitive psychology
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 -
cognitive psychology
Mental model
The picture in someone's head of how a thing works. When the interface matches it, everything feels obvious; when it doesn't, nothing does.
Try the demo
Design ethics
See all 11 design ethics entries →-
design ethics
Dark patterns
Interface tricks that nudge you toward choices you didn’t intend to make - for the business’s benefit, 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
Roach motel
A roach motel is a flow that’s easy to join but deliberately hard to leave - one click to subscribe, a hidden maze to cancel. The asymmetry is the trick: friction only ever runs one way.
Try the demo
Interaction design
See all 19 interaction design entries →-
interaction design
Progressive disclosure
Show people just what they need right now, and tuck the rest behind a clear next step. It keeps the first view simple without hiding anything permanently.
Try the demo -
interaction design
Fitts's law
The time it takes to hit a target grows as it gets smaller or farther away. Large, nearby targets are fast to hit; small, distant ones take longer.
Try the demo -
interaction design
Affordance
An affordance is a visual cue showing what action you can take - like a raised button suggesting 'press me' or underlined blue text implying 'click me'. Clear cues guide users; unclear or misleading ones leave them guessing.
Try the demo
Laws & principles
See all 15 laws & principles entries →-
laws & principles
Gestalt: proximity
Things close together are seen as a group; things spaced apart are seen as separate. Proximity is one of the strongest cues for grouping - it usually overrides shape or colour, though a shared boundary or visible connection can override it.
Try the demo -
laws & principles
Jakob's law
People spend most of their time on other sites, so they expect yours to work like those. Familiar patterns are quicker to use because users already know them - you’re reusing the habits the web has taught them.
Try the demo -
laws & principles
Tesler's law
Every process has a minimum complexity that can't be eliminated - only moved. The real question isn't whether to remove it, but who carries it: the user or the team building it. You can see this in action on this page.
Try the demo
Metrics
See all 10 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 misread.
Try the demo -
metrics
Conversion rate
Conversion rate is the share of people who complete a goal - buy, sign up, subscribe - out of everyone who could have. It's usually quoted end to end, but it's really the product of every step's survival rate along the way.
Try the demo -
metrics
Task success rate
Task success rate is the share of people who finish a task - four of five users complete it, so 80%. It is the most basic measure of whether a thing works at all, and the easiest to read too much into.
Try the demo
Persuasion
See all 15 persuasion entries →-
persuasion
Social proof
People look to what others do to decide what is right, especially when they are unsure. In an interface, that means showing real evidence that real people use, rate and trust the thing.
Try the demo -
persuasion
Scarcity
Scarcity creates pull by making something feel more valuable when it seems rare or about to run out - like 'only 2 left' or 'offer ends in 5:00'. It works because the sting of losing an option outweighs the pleasure of gaining one.
Try the demo -
persuasion
Anchoring
Anchoring is the way the first number you see sets the frame for every judgement after it. Show a high price first and the real one feels like a bargain - not because it changed, but because you now have something to measure it against.
Try the demo
Process & strategy
See all 9 process & strategy entries →-
process & strategy
Double diamond
The double diamond model shows design as two diamonds: the first explores then defines the right problem, the second explores then delivers the right solution. Each diamond opens wide before narrowing to a point.
Try the demo -
process & strategy
Design tokens
Design tokens are named values for the small decisions a design repeats - colours, spacing, corner radius, type sizes - stored once and referenced everywhere. Change the token and everything built from it changes at once.
Try the demo -
process & strategy
Information architecture
Information architecture is how a product’s content is organised, labelled and connected so people can find things and know where they are. It’s the floor plan beneath the interface - invisible when it works, maddening when it doesn’t.
Try the demo
Research methods
See all 10 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 they remember. What sticks is what the layout really shouts - and what it quietly hides.
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 11 UI patterns entries →-
ui patterns
Cards
A card is a container that groups 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 slice one area of the screen into parallel panels and show just one at a time. They keep a page short by hiding all but the panel you've picked - which is the whole trick, and the whole risk.
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 7 visual design entries →-
visual design
Visual hierarchy
The order your eye follows across a layout, shaped by size, weight, colour and space. It tells you 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 is not wasted room: it groups what belongs together, guides the eye, and makes a layout legible.
Try the demo -
visual design
Colour schemes
A colour scheme is a set of hues chosen by their positions on the colour wheel so they work together. The common recipes - complementary (opposite), analogous (neighbouring), triadic (evenly spaced) - are just rules for picking angles, giving you palettes that feel harmonious instead of arbitrary, from one base colour.
Try the demo
Prefer the full list? See every term in the glossary.