Design words, explained.

An experiment that compares two versions with randomly assigned users to see which performs better on a chosen metric.

Example Half of visitors see a new checkout button label; completion rates are compared.

Related Hypothesis, Statistical significance

Designing and building so that disabled people can perceive, understand, navigate and interact with a product.

Example Making a form usable with a keyboard and a screen reader.

Related WCAG, Inclusive design

Grouping research observations, usually written on separate notes, by similarity to find themes.

Example Forty interview notes about a booking app are grouped into themes such as "unclear prices" and "fear of losing the slot".

Related Thematic analysis, Insight, Synthesis

What an object allows a person to do, based on its properties and the person's abilities.

Example A raised button affords pressing; a text field affords typing.

Related Signifier, Mental model

Placing elements along common edges or centres to create order.

Example Left-aligning form labels and fields creates a clean scanning line.

Related Grid, Proximity

Alternative text that describes the content and function of an image for people who cannot see it.

Example A chart's alt text summarises its main finding, not "chart".

Related Screen reader

Data automatically collected about how people use a product, such as page views, clicks and drop-off points.

Example Analytics show many visitors leave on the delivery step; interviews then explain why.

Related Quantitative research, Metric

A note on a design explaining behaviour, content rules or intent that the visuals do not show.

Example "If more than 99 notifications, show 99+."

Related Handoff

Accessible Rich Internet Applications: attributes that add accessibility information when native HTML is not enough.

Example aria-expanded tells screen reader users whether a menu is open. Native elements are preferred when they exist.

Related Semantic HTML

Something a team believes to be true without evidence yet.

Example "Customers want an app" is an assumption until research shows people would use one.

Related Hypothesis, Research question

A design tool feature that arranges elements in rows or columns and resizes containers with their content.

Example A button grows automatically when its label gets longer.

Related Constraints, Component

A screen width at which a layout changes to suit the available space.

Example At 768px the navigation changes from a menu button to a horizontal bar.

Related Responsive design, Grid

A method where participants group topics into categories, showing how they expect information to be organised.

Example Participants sort 40 council services into groups they name themselves, revealing that "bins" and "recycling" belong together.

Related Tree testing, Information architecture

The mental effort needed to use an interface.

Example Asking people to remember a code from one screen and type it on another increases cognitive load.

Related Progressive disclosure, Recognition over recall

The set of colours a product uses, usually with neutrals, brand colours and semantic colours, each in several shades.

Example A palette with grey 50 to 900, blue 50 to 900, and red, amber and green for states.

Related Semantic colour

A structured review of how other products solve the same problem, to learn patterns and find gaps.

Example Comparing how four clinics show appointment availability before you design your own booking flow.

Related Desk research

A reusable interface element with defined variants, states and behaviour.

Example A button component with primary, secondary and destructive variants.

Related Variant, Design system

Using the same design solutions for the same situations, so people can transfer what they learn.

Example Every destructive action uses the same red button and confirmation dialog.

Related Similarity, Design system

Rules that control how elements resize or move when their container changes size.

Example A close icon stays pinned to the top right corner of a resizing dialog.

Related Auto layout

Observing and interviewing people in their own environment while they do real tasks.

Example Watching a pharmacist use the stock system during a real shift, asking questions in quiet moments.

Related User interview, Ethnography

Difference between elements, in size, weight, colour, shape or space, that makes some stand out.

Example A filled primary button contrasts with an outlined secondary button.

Related Visual hierarchy, Contrast ratio

A measure of the difference in luminance between two colours, from 1:1 to 21:1.

Example WCAG AA asks for at least 4.5:1 for normal body text.

Related WCAG, Contrast

A pattern people have learned from repeated use across products.

Example A logo in the top left links to the home page.

Related Mental model, Design pattern

A design that tricks or pressures people into doing something they did not intend, such as hidden costs or hard-to-cancel subscriptions.

Example A pre-ticked box adding insurance to a ticket purchase.

Related Ethical design

A proven, reusable solution to a recurring design problem.

Example Breadcrumbs for showing location in a deep hierarchy.

Related Convention, Pattern library

A collection of reusable components, guidelines, tokens and documentation that helps teams build consistent products efficiently.

Example GOV.UK Design System and Material Design are public examples.

Related Component, Design tokens, Pattern library

Named values for design decisions such as colours, type sizes and spacing, shared between design and code.

Example color.text.primary = #1B1B1A; space.4 = 16px.

Related Semantic token, Spacing scale

Learning from existing sources, such as reports, analytics, support tickets and published studies, before collecting new data.

Example Reading six months of support emails to find the most common complaints.

Related Competitive analysis, Secondary research

Participants record their experiences over days or weeks, capturing behaviour that a single session would miss.

Example Ten people log every time they think about exercise for two weeks.

Related Longitudinal research

An unusual situation at the limits of normal use that the design must still handle.

Example A name with 60 characters, or a user with no saved addresses.

Related Happy path, Empty state

A diagram summarising what a user group says, thinks, does and feels, based on research.

Example An empathy map for first-time home buyers shows they say "we're fine" but feel anxious about hidden costs.

Related Persona, Journey map

What a screen shows when there is no content yet, or none matches.

Example "No saved recipes yet. Tap the bookmark on any recipe to keep it here."

Related Edge case, Zero state

Designing so mistakes are less likely in the first place.

Example A date picker that only allows future dates for a booking.

Related Validation, Usability heuristics

Design that respects people's autonomy, privacy, wellbeing and interests, including when they conflict with short-term business goals.

Example Making cancellation as easy as sign-up.

Related Dark pattern

Studying people in their natural environment over time to understand culture and behaviour.

Example Spending several days at a busy clinic reception to understand how staff juggle phones, walk-ins and the booking system.

Related Contextual inquiry

Information the system gives in response to an action, confirming what happened.

Example A button shows a spinner while saving, then "Saved" when done.

Related System status, Microinteraction

A visible marker showing which element has keyboard focus.

Example A clear outline around the active link when tabbing.

Related Keyboard navigation

The order in which interactive elements receive focus. It should follow a logical reading order.

Example Focus moves from the search field to the search button, not to the footer.

Related Keyboard navigation

Principles describing how people perceive visual elements as groups, such as proximity, similarity, closure and continuity.

Example Cards with the same style are seen as items of the same kind.

Related Proximity, Similarity

The process for deciding how a design system changes, who can contribute and how changes are reviewed and released.

Example A monthly review where teams propose new components.

Related Design system

A system of columns and gutters that guides the placement of content.

Example A 12-column grid on desktop that becomes 4 columns on mobile.

Related Alignment, Breakpoint

Sharing designs with developers along with the specifications, states and context they need to build them.

Example A handoff includes annotated flows, component names and edge cases.

Related Annotation, Design tokens

The ideal route through a task where nothing goes wrong.

Example Designing only the happy path for checkout misses declined cards and out-of-stock items.

Related Edge case, Task flow

An expert review of an interface against usability heuristics.

Example Three designers independently review a sign-up flow and merge their findings.

Related Usability heuristics, Usability testing

A detailed representation that looks and behaves close to the final product.

Example A prototype with final visuals, real content and realistic interactions.

Related Low fidelity, Prototype

A question format that turns a problem into an opportunity for ideas.

Example "How might we show delivery costs before customers commit time to checkout?"

Related Problem statement

A testable prediction linking a change to an expected outcome.

Example "If we show prices on the listing page, more visitors will start a booking."

Related Assumption, A/B test

An approach that considers the full range of human diversity, including ability, language, culture, age and situation.

Example Designing a one-handed mode that helps people with a disability, an injury or a baby in their arms.

Related Accessibility

The structure and labelling of content and functions so people can find and understand them.

Example Organising a council website by resident tasks such as "Bin days" rather than by department names.

Related Card sorting, Tree testing, User flow

Agreement to take part in research, given after a participant understands the purpose, what is recorded, how data is used and that they can stop at any time.

Example Before recording, the researcher explains how long recordings are kept and asks for permission.

Related Research ethics

Validation shown next to a field, during or just after input.

Example A password field confirms each rule as it is met.

Related Validation

An interpretation of research that explains why something happens and suggests what to do.

Example Observation: people screenshot bus times. Insight: they do not trust the app to work without signal, so offline access matters.

Related Affinity mapping, Synthesis

A semi-structured list of topics and open questions used to keep interviews consistent without becoming rigid.

Example A guide with a warm-up, questions about the last time the participant did the task, and neutral follow-up prompts.

Related User interview, Leading question

A framework that describes what people are trying to achieve in a situation, independent of any product.

Example "When I get home late, I want to eat something healthy without cooking, so I can rest" describes a job that many products compete for.

Related Persona, User need

A visualisation of a person's experience across stages of a task, including actions, thoughts, feelings and pain points.

Example A journey map of renewing a passport shows the biggest frustration is waiting for updates after posting documents.

Related Empathy map, Service blueprint

Using a product with a keyboard alone, typically Tab, Shift+Tab, Enter, Space and arrow keys.

Example Completing a checkout without a mouse.

Related Focus indicator, Focus order

A question that suggests a particular answer and biases research.

Example "Wouldn't it be easier to book online?" is leading. "How did you book last time?" is not.

Related User interview

The number of characters per line of text. Very long or short lines are harder to read.

Example Limiting article text to about 70 characters per line.

Related Typography

Research that follows the same participants over a period of time to see how behaviour changes.

Example Checking in with new app users at week one, week four and week twelve.

Related Diary study

A rough, quick representation of an idea, such as a sketch or simple wireframe.

Example Paper sketches of six layout ideas in 20 minutes.

Related High fidelity, Wireframe

A person's internal understanding of how something works, based on experience.

Example People expect a shopping basket to keep items until they remove them, because physical baskets do.

Related Affordance, Convention

A quantitative measure used to track progress towards a goal.

Example Checkout completion rate.

Related North star metric, Outcome

A small, contained interaction that does one thing, with a trigger, rules, feedback and sometimes loops.

Example Tapping the heart icon fills it and briefly animates to confirm a like.

Related Feedback

An approach that designs for the smallest screen first and adds layout enhancements as space grows.

Example Designing a product page as a single column first, then adding a sidebar on wide screens.

Related Responsive design, Breakpoint

A static, visually detailed representation of a screen.

Example A polished image of the home page used to agree the visual direction.

Related Wireframe, Prototype

Minimum viable product: the smallest version of a product that can test a key assumption with real users.

Example A shared spreadsheet and a form to test whether neighbours will lend tools before building an app.

Related Hypothesis

A single key metric that best represents the value a product delivers to its users.

Example For a language learning app: weekly learners who complete at least three lessons.

Related Metric

The change in behaviour or results that a piece of work aims to create, as opposed to the thing produced.

Example Output: a new onboarding flow. Outcome: more new users complete setup.

Related Metric, Output

The thing a team produces, such as a feature or a screen.

Example Shipping a redesigned search page is an output.

Related Outcome

A collection of reusable solutions to common design problems, larger than single components.

Example A pattern for "asking for a date of birth" combining fields, hints and validation.

Related Design system, Design pattern

A research-based description of a user group's goals, behaviours and pain points, presented as an archetype.

Example A persona for "night-shift nurses" captures that they check schedules at 3 am on a phone.

Related Proto-persona, Empathy map

Deciding what to work on first based on factors such as impact, effort, confidence and risk.

Example Using an impact and effort matrix to choose three fixes from twenty findings.

Related Roadmap

A concise description of who has a problem, what it is, why it happens and why it matters.

Example "First-time customers abandon checkout because delivery costs appear only at the last step."

Related How might we, Insight

Showing only what is needed now and revealing advanced options when requested.

Example A form shows "Add a company name" only if the person chooses "Business purchase".

Related Cognitive load

A persona based on the team's assumptions rather than research, used as a starting point to be tested.

Example A workshop produces a proto-persona of a "busy commuter", which the team then validates through interviews.

Related Persona, Assumption

An interactive model of a product used to explore and test ideas before building them.

Example A clickable prototype of checkout tested with five people.

Related High fidelity, Usability testing

Placing related items close together and unrelated items further apart.

Example A label sits closer to its own field than to the field above.

Related Gestalt principles, Whitespace

Research that explains why and how, through observation and conversation, usually with small samples.

Example Five interviews reveal why people abandon a form.

Related Quantitative research

Research that measures how many, how often or how much, usually with larger samples.

Example Analytics show 38% of visitors leave on the delivery step.

Related Qualitative research, Analytics

Making options visible so people can recognise them, rather than having to remember them.

Example Showing recent searches instead of making people retype them.

Related Cognitive load, Usability heuristics

A user preference, set in the operating system, to minimise non-essential animation.

Example A page turns off parallax effects when reduced motion is requested.

Related Accessibility

Principles that protect participants: informed consent, privacy, avoiding harm, honesty and fair treatment.

Example Not recording a session without permission, and deleting recordings when the project ends.

Related Informed consent

What the team wants to learn from research, written so that research can answer it. Different from the questions asked to participants.

Example "How do tenants currently report repairs, and where does it break down?"

Related Assumption, Interview guide

Design that adapts layout and content to different screen sizes and conditions.

Example A product grid shows one column on phones and four on wide screens.

Related Breakpoint, Mobile first

A plan of what a team intends to work on over time, ideally framed as problems and outcomes rather than fixed features.

Example Next quarter: reduce failed bookings; later: support group bookings.

Related Prioritisation

Software that reads the content and structure of the screen aloud or to a braille display.

Example VoiceOver, NVDA, JAWS and TalkBack.

Related Alt text, Semantic HTML

Research that uses data or studies someone else has already collected.

Example Reading a published government survey on internet use before planning interviews.

Related Desk research

Colour assigned by meaning rather than appearance, such as success, warning, error and information.

Example All error messages use the "danger" colour, defined once.

Related Design tokens, Colour palette

Using HTML elements for their meaning (headings, lists, buttons, landmarks) so assistive technologies can interpret the page.

Example Using a real button element rather than a clickable div.

Related Screen reader, ARIA

A token named for its purpose rather than its value, pointing to a primitive token.

Example color.action.primary points to blue.700, so changing the brand colour updates every primary action.

Related Design tokens

A diagram that extends a journey map to show the behind-the-scenes people, systems and processes that support each step.

Example A blueprint for a repair service shows the call centre, scheduling system and engineer actions behind each customer step.

Related Journey map

A score indicating how serious a usability problem is, based on frequency, impact and persistence.

Example A bug that stops payment is critical; a confusing label is minor.

Related Usability testing

A cue that shows where and how to act.

Example An underline signals a link; a grip icon signals something can be dragged.

Related Affordance

Elements that look alike are perceived as related.

Example All links share one colour and underline, so people learn to spot them.

Related Gestalt principles, Consistency

A defined set of spacing values used for margins and padding.

Example 4, 8, 12, 16, 24, 32, 48 and 64px.

Related Design tokens, Whitespace

Anyone with an interest in or influence over a project, such as clients, managers, legal, sales or support.

Example Involving the support lead because they hear customer complaints first.

An indication that a result is unlikely to be due to chance alone, given the sample and test design.

Example A small difference measured with 40 users is rarely significant.

Related A/B test

Making sense of research data by finding patterns, themes and insights across sources.

Example Combining interview notes, survey answers and analytics into three clear insights about why people abandon sign-up.

Related Affinity mapping, Insight

Keeping people informed about what is happening, through timely feedback.

Example A file upload shows progress and remaining time.

Related Feedback, Usability heuristics

The size of the area that responds to a click or tap.

Example WCAG 2.2 AA asks for targets of at least 24 by 24 CSS pixels or enough spacing; 44px is a common, more comfortable target.

Related WCAG

A single, linear path through a task without branches, often used to describe the happy path.

Example Search, select product, add to basket, checkout, confirm.

Related User flow, Happy path

A systematic way to code qualitative data and identify recurring themes.

Example Tagging every interview transcript line about trust, then reviewing all trust-tagged quotes together.

Related Affinity mapping

A method that tests whether people can find items in a proposed navigation structure, without visual design.

Example Participants use a text-only menu to find "report a missed bin"; 60% choose the wrong section.

Related Card sorting, Information architecture

A limited set of font sizes, often derived from a ratio, used consistently across a product.

Example 14, 16, 20, 25, 31 and 39px, based on a 1.25 ratio.

Related Typography, Design tokens

The selection and arrangement of type to make text readable and expressive.

Example Choosing 17px body text with 1.6 line height for an article page.

Related Type scale, Line length

General principles for interface design, used to find likely usability problems. Jakob Nielsen's ten are the best known.

Example "Visibility of system status" and "Error prevention" are two of Nielsen's heuristics.

Related Heuristic evaluation, System status

Watching representative people try realistic tasks with a product or prototype to find problems.

Example Five participants try to book a table; three cannot find the time picker.

Related Prototype, Severity rating

A diagram of the steps and decisions a person goes through to complete a task.

Example A flow for resetting a password, including an expired link path.

Related Task flow, Information architecture

A one-to-one conversation to understand a person's experiences, needs and behaviour.

Example A 40-minute interview asking a parent to walk through how they booked their child's last swimming lesson.

Related Interview guide, Leading question

Something a person needs to achieve their goal, described from their point of view and based on evidence.

Example "As a tenant, I need to know when a repair will happen so I can arrange to be home."

Related Jobs to Be Done, Persona

Checking input and telling people whether it is acceptable and how to fix it.

Example An email field shows "Enter an email address like name@example.com" when the @ is missing.

Related Error prevention, Inline validation

A version of a component that differs in style, size or state.

Example Small and medium button sizes, or default and error input states.

Related Component

The arrangement of elements to show their order of importance.

Example A large, bold heading is read before smaller grey metadata.

Related Contrast, Typography

The Web Content Accessibility Guidelines from the W3C, organised under four principles (perceivable, operable, understandable, robust) with testable success criteria at levels A, AA and AAA.

Example Many organisations aim for WCAG 2.2 level AA.

Related Accessibility, Contrast ratio

Empty space around and between elements. It groups, separates and gives content room to breathe.

Example Adding space between product cards makes each one easier to read.

Related Proximity, Spacing scale

A simplified representation of a screen's structure and content, without visual styling.

Example Grey boxes and real labels showing where search, filters and results go.

Related Low fidelity, Mockup

Another name for an empty state, especially the first time a user sees a screen before adding anything.

Example A new to-do app shows an example task and a button to add the first one.

Related Empty state