The words you need to know

The three horizontal lines that represent a hidden navigation menu, usually in the top corner of a mobile interface. Called a burger because the three lines resemble a burger in a bun. Tap it and the menu appears. Ubiquitous on mobile. Controversial among UX designers: it hides navigation from users who don't know to look for it, reducing discoverability. Useful when screen space is limited. A tradeoff between cleanliness and accessibility.

A small, temporary notification that appears briefly on screen to confirm an action, then disappears automatically. "Message sent." "Item added to cart." "Changes saved." Called a toast because it pops up from the bottom of the screen like bread from a toaster. Non-blocking: it doesn't require the user to do anything. Appears, delivers its message, and goes. One of the most quietly useful UI patterns.

A dialog box or overlay that appears on top of the current page, blocking interaction with everything behind it until the user responds. Confirmation dialogs, login prompts, cookie consent banners: all modals. They demand attention. Overused, they frustrate users. Used sparingly for genuinely important decisions, they are appropriate. The cardinal sin of modal design is triggering one before the user has decided they want anything.

The button or link that asks the user to do the next thing. "Sign up free." "Get started." "Buy now." The CTA is the primary action a page is designed to produce. Everything else is context for it. Good CTA design: one clear ask, prominent placement, language that describes the outcome not the action. "Start your free trial" beats "Submit." A page with no CTA is a dead end. A page with five is paralysing.

A navigation trail showing the user where they are within a site's hierarchy. Home / Products / Shoes / Trainers. Named after the fairy tale: leave a trail so you can find your way back. Breadcrumbs tell users where they are, where they came from, and how to step back up the structure. Valuable on deep, hierarchical sites. Unnecessary on flat, simple ones.

A small label that appears when a user hovers over or focuses on an element, providing additional information without taking up permanent space. Useful for icons that aren't self-explanatory, or for technical terms that need a brief gloss. Invisible until needed, which makes them low-cost for screen real estate but risky for discoverability: users who don't hover never see them.

A placeholder layout shown while content is loading. Instead of a blank page or a spinning indicator, the user sees the shape of the content to come: grey rectangles where images will be, grey lines where text will appear. Reduces the perception of wait time because something is already happening visually. LinkedIn and Facebook use skeleton screens extensively. The user's eye starts processing the layout before the content arrives.

What a user sees when there is no content to display yet. A new inbox with no messages. A to-do list with no tasks. An empty cart. Empty states are often neglected and frequently disappointing. A good empty state explains what this space is for, and tells the user what to do to fill it. A poor empty state is just a blank page with no guidance.

A sliding panel of content: images, cards, or products that the user can scroll through horizontally. Common on e-commerce and news sites. Broadly considered a weak UX pattern: users rarely interact with items beyond the first one, the auto-advancing version is especially ignored, and content hidden off-screen is effectively invisible. Still widely used because it lets stakeholders show more content in less space without prioritising it. The tradeoff is usually engagement.

The quality of an object or interface element that suggests how it should be used. A button looks pressable. A door handle looks graspable. A text field looks typeable. The concept comes from psychologist James Gibson and was applied to design by Don Norman. A good affordance needs no instruction: the user knows what to do because the design communicates it. Poor affordances require labels, tooltips, or tutorials to explain what should be intuitive.

The mental effort required to use an interface. Every decision, every piece of information, every unfamiliar element adds to cognitive load. High cognitive load causes errors, fatigue, and abandonment. Good UX minimises unnecessary cognitive load by removing choices that don't need to be made, using familiar patterns, and presenting information progressively rather than all at once. The goal is to direct mental effort toward the task, not toward understanding the interface.

The more choices presented to a user, the longer the decision takes. Formulated by William Edmund Hick in 1952. The practical implication: reduce options. Not to zero, but to the meaningful minimum. Menus with fewer items are faster to use than menus with many. Checkout flows with fewer steps have higher completion rates. Hick's Law is frequently cited to justify simplification and frequently ignored by anyone who wants to add "just one more option."

The time to reach a target with a pointer is a function of its size and distance. Larger, closer targets are faster to hit. The practical implication: make interactive elements big enough and position them where users' hands and cursors naturally rest. The corners and edges of a screen are fast to reach (the cursor hits the edge and stops). The middle of a large touch screen is slow. Mobile design is largely an application of Fitts's Law to thumbs.

Users spend most of their time on other sites, so they expect your site to work like other sites. Formulated by Jakob Nielsen. The implication: don't reinvent common patterns. A shopping cart in the top right. A logo that links home. Navigation at the top or left. Departing from conventions creates cognitive load. Originality in interface design is often a liability. Users want familiarity, not novelty, when trying to accomplish a task.

The internal representation a user carries of how a system works. Based on experience with similar systems, instructions, and inference. A user's mental model of email was built long before they opened your app. If your interface matches their mental model, learning is instant. If it contradicts it, they are confused. Good UX aligns with users' existing mental models wherever possible, and updates them gently when it needs to diverge.

An interface designed to trick or manipulate users into actions they didn't intend or want. Pre-ticked subscription boxes. Cancellation flows that require calling a phone number. "Confirm shaming": buttons that say "No thanks, I don't want to save money." Coined by Harry Brignull in 2010. Now regulated in some jurisdictions. Dark patterns exploit cognitive biases and trust. They produce short-term conversions and long-term resentment.

Showing only the information and options relevant to the current step, revealing more complexity as the user needs it. Rather than presenting every feature at once, progressive disclosure keeps the initial experience simple and surfaces advanced options later. Software settings menus use it: basic options visible, advanced options behind a toggle. Onboarding flows use it: one step at a time. Reduces cognitive load without reducing capability.

The systematic study of users: their behaviours, needs, motivations, and pain points. Interviews, observation, surveys, usability tests. The purpose is to ground design decisions in evidence rather than assumption. Most bad design comes from designers solving the wrong problem. User research identifies the right problem before the solution is built. Teams that skip it typically build what they think users want rather than what users actually need.

A low-fidelity schematic of a screen or page, showing layout and structure without visual design. Boxes where images will go. Lines where text will be. Placeholders labelled "button" or "nav." Wireframes communicate structure and hierarchy before committing to visual style. They are cheap to create, easy to change, and help teams align on what a page needs to do before debating how it should look. Skipping wireframes and going straight to visual design is how projects get expensive.

An interactive model of a product used for testing before anything is built. Can be paper sketches with sticky notes, clickable designs in Figma, or coded proof-of-concept. The purpose is to test assumptions cheaply. A prototype surfaces usability problems and misaligned expectations before they become expensive engineering problems. The fidelity of the prototype should match the fidelity of the question being asked: low fidelity for broad conceptual questions, high fidelity for specific interaction decisions.

Watching real users attempt to complete real tasks with a product, without instruction or assistance. The designer watches and takes notes. They do not explain or help. The places where users hesitate, fail, or express confusion are the problems in the design. Five users are enough to find most significant usability issues, according to Jakob Nielsen. More important than any number of internal design reviews, because users are the only ones who don't already know how it works.

Showing two different versions of an interface element to two groups of users simultaneously, then measuring which performs better against a defined metric. Version A gets half the traffic, Version B gets the other half. Which produces more signups, more clicks, more purchases? A/B testing replaces opinion with evidence. The risk: optimising for a measurable metric can produce results that are better by the metric and worse by the product. Click rate and value are not the same thing.

The structure and organisation of content: how things are labelled, grouped, and connected. What sits under what. How users navigate from one thing to another. Good information architecture is invisible: users find what they need without thinking about the structure. Bad IA means users cannot find things even when they are there. IA is often confused with navigation design, but navigation is just how IA is expressed. The underlying structure is the IA.

A research method in which participants organise topics written on cards into groups that make sense to them, and optionally label those groups. Used to inform information architecture: if users consistently group things in a certain way, that grouping should probably be reflected in the navigation. Open card sorting lets participants create their own categories. Closed card sorting asks them to sort into predefined categories. The results reveal users' mental models of how content should be organised.

Designing products that can be used by people with disabilities: visual, auditory, motor, cognitive. Screen reader compatibility. Sufficient colour contrast. Keyboard navigation. Captions. The "a11y" shorthand counts the 11 letters between the a and y in "accessibility." Legal requirement in many jurisdictions. Also good design practice: the conditions that require accessibility features (bright sunlight, one hand occupied, noisy environment) affect everyone temporarily. Building for edge cases improves the experience for everyone.

The international standard for web accessibility, published by the W3C. Organised around four principles: perceivable, operable, understandable, robust. Three levels: A (minimum), AA (standard target), AAA (enhanced). Most legal requirements reference WCAG AA compliance. WCAG criteria are specific and testable: colour contrast ratios, keyboard operability, alternative text for images. Meeting WCAG is a baseline, not a ceiling.

The difference in luminance between foreground text and background colour. Low contrast is difficult to read, especially for users with visual impairments or in challenging lighting. WCAG requires a minimum ratio of 4.5:1 for normal text. Light grey text on a white background fails. Black text on white passes easily. Designers often reduce contrast in the name of aesthetics. The result is a beautiful page that significant portion of users struggle to read.

The sequence of steps a user takes to accomplish a goal, mapped from their perspective. Not just the interface steps, but the emotions, expectations, and context at each stage. A user journey for booking a flight includes the moment of intent (I need to travel), the search, the comparison, the booking, the confirmation, and the anxiety between booking and departure. Mapping journeys surfaces pain points that screen-by-screen analysis misses.

The process of introducing new users to a product and helping them reach their first moment of value. The distance between signing up and getting something done is one of the most important metrics in product design. Good onboarding is short, progressive, and immediately rewarding. Bad onboarding is a wall of features, a lengthy tutorial, or a blank screen with no guidance. Most products lose the majority of new users before they ever return for a second session.

Anything that slows a user down, creates doubt, or adds effort to completing a task. Extra form fields. Mandatory account creation before purchase. Slow load times. Confusing labels. Unexpected error messages. Friction is not always bad: friction before a destructive action (delete account) is appropriate. Friction in the checkout flow is almost always bad. The skill is knowing which friction to remove and which to keep.

A moment in a product experience that exceeds expectation in a small, pleasurable way. An animation that responds to a gesture unexpectedly well. A confirmation message that is funny instead of generic. A loading screen that entertains rather than just fills time. Delight is not decoration: it builds emotional connection to a product and creates memorable moments that users talk about. It is also dangerous when it slows users down or distracts from the task. Delight should be earned by a product that already works.

What the user sees when something has gone wrong. Form validation failures, network errors, permission denied messages. Error states are among the most neglected parts of interface design and among the most important: users encounter errors at their most frustrated moment. A good error state explains what went wrong, why it happened, and what the user can do next. A bad one says "Error 403" and leaves the user to figure out the rest.

A small, contained interaction designed to accomplish a single task. The animation when you like a post. The toggle that visually confirms it switched. The progress indicator on a button while something loads. Microinteractions communicate system status, prevent errors, and provide feedback. They are the texture of a well-made product: individually minor, collectively defining. A product without thoughtful microinteractions feels flat. A product with too many feels cluttered.

A documented collection of reusable components, patterns, and guidelines that define how a product looks and behaves. Buttons, typography, colours, spacing, icons, all standardised and documented. Enables consistency across a large product and multiple teams. The upfront investment in building a design system pays back when the tenth feature doesn't require redesigning the button from scratch. Companies that outgrow their design systems without replacing them accumulate visual debt.

A reusable, self-contained piece of UI: a button, a card, a dropdown, a form field. Components are the building blocks of a design system. Each component has defined states (default, hover, active, disabled, error) and defined behaviour. Building products from components rather than bespoke designs produces consistency and speeds up both design and development. A component changed in the design system updates everywhere it is used.

The transfer of design assets and specifications from designer to developer. Historically a source of friction: what the designer intended and what the developer built were often different, because the design file alone doesn't capture everything. Modern tools (Figma, Zeroheight) reduce handoff friction by making design assets directly accessible to developers with specifications attached. Good handoff includes not just the visuals but the behaviour, the states, and the edge cases.

Building interfaces that adapt to different screen sizes rather than building separate versions for desktop and mobile. A layout with three columns on a wide screen collapses to a single column on a phone. Images scale. Navigation transforms. The same underlying code, different presentations. Standard practice since the early 2010s. "Mobile first" is the principle of designing for the smallest screen first, then expanding: it forces prioritisation of what actually matters.