Interaction design quiz

The interaction design entries in the glossary, in brief. Open any one for the interactive demo behind it.

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.

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.

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.

Microcopy

The small words inside an interface - button labels, hints, placeholders, error messages - that quietly guide, reassure, and give it a voice. Tiny by word count, decisive by impact.

Signifier

A signifier is the visible cue that tells users what to do and where - such as an underline for a link, a shadow for a button, or a handle for dragging. While affordance indicates what an element can do, the signifier announces how to use it. A button that can be clicked is useless without a signifier to show it’s clickable.

Feedforward

Feedforward is information that tells you what will happen before you act, so you can predict the result of a control without trying it. Where feedback confirms what just happened, feedforward previews what's about to - a label, a hint, a hover preview, a disabled-until-valid state - letting people act with confidence instead of guessing and hoping.

Forcing function

A forcing function is a design constraint that stops you from proceeding until you’ve done the right thing, making an error physically or logically impossible rather than merely discouraged. For example, an ATM that won’t release cash until you take your card back, or a form that won’t submit until a required field is filled - both force the correct action.

Loading states

Loading states let users know the interface is working while they wait - using a spinner, skeleton screen, determinate progress bar, or content streaming in. They reduce uncertainty, make waits feel shorter, and reassure users the system isn’t frozen, turning idle time into a sense of progress.

Perceived performance

Perceived performance is how fast an interface feels, not how fast it actually is. By responding instantly to input, showing progress, and assuming success before the server confirms, you can make a product feel quick even when the underlying work takes the same time - because what people judge is the experience of waiting, not the milliseconds.

Drag and drop

Drag and drop lets users move, reorder or connect items by selecting and placing them directly, rather than through menus or forms. It’s a form of direct manipulation - the on-screen object behaves like a physical one - which feels intuitive and satisfying, but only works well when the design clearly shows what can be dragged, where it can go, and what will happen on drop.

Pull to refresh

Pull to refresh is the gesture - drag the top of a list downward and release - that reloads its content. It became a near-universal mobile convention because it’s discoverable through experimentation, reuses a natural scrolling motion, and gives the user a direct, physical way to ask for the latest, with satisfying feedback as the content updates.

Nudge

A nudge is a small change to how choices appear that gently steers people toward one option without removing any choices or changing incentives much. Setting a helpful default, highlighting a suggested plan, or placing the healthy choice at eye level are all nudges - the easy path shifts, but every option remains freely available.

Onboarding

Onboarding is the first-run experience that helps a new user get from arriving to their first real success - understanding what the product does, completing a meaningful first action, and reaching the moment they feel its value. Good onboarding gets people to that "aha" quickly with as little friction and explanation as possible; poor onboarding dumps them in, or buries them in tours, and loses them.

Gestures

Gestures are touch and pointer movements - tap, swipe, long-press, pinch, drag - that trigger actions without visible controls. They make interfaces feel fluid and direct, save space, but because a gesture leaves no visible button, their big weakness is discoverability: people can't use what they can't see, so hidden gestures need teaching, hints, or a visible alternative.

Modality

Modality is when an interface has modes - states in which the same action does different things, or in which you're locked into one task until you finish or cancel. A modal dialog that blocks the rest of the app, or a tool where the same click draws in one mode and erases in another, are both modal. Modes are powerful but cause "mode errors" when people forget which mode they're in.

UI state

UI state is the particular condition a screen or component is in at a given moment - empty, loading, partial, error, or full of ideal content - and each one looks and behaves differently. Designing a product means designing all of its states, not just the polished "everything's perfect" one, because users will hit the empty, slow and broken states constantly.

Error tolerance

Error tolerance is designing so that when people make mistakes - and they will - the consequences are small and recoverable rather than catastrophic. Autosave, undo, drafts, confirmations on the genuinely destructive, and forgiving inputs all assume human error is normal and build the system to absorb it gracefully instead of punishing it.

Navigation patterns

Navigation patterns are the standard ways of structuring how people move around a product - top tabs, a bottom bar, a hamburger drawer, a sidebar, breadcrumbs. Each has familiar trade-offs in visibility, reach and capacity, and choosing well means matching the pattern to how many destinations you have, how important they are, and the device people use.

The 5 dimensions of interaction design

The five dimensions of interaction design offer a framework - words, visual representations, physical objects or space, time, and behaviour - for understanding all the elements of an interaction. Together, they capture everything a designer shapes when creating how a person and a product communicate, from the text they read to how the product responds over time.

Skeuomorphism

Skeuomorphism is design that mimics real-world objects - like a leather-bound diary, a felt poker table, or a button with a bevel and shadow. Its purpose wasn’t decoration: by copying physical forms, it inherited their affordances, so a control looked pressable, draggable, or turnable - even before anyone explained it.

Discoverability

Discoverability is whether users can figure out what an interface can do and how to use it, just by looking and experimenting - without needing a manual, tooltip, or tip-of-the-day. A feature that exists but can’t be found doesn’t truly exist for most users; its usefulness is limited by how visible it is.

Defaults

A default is the choice made for you - the starting value in a field, the box pre-ticked, the option selected before you act. Since most people don’t change them, defaults quietly shape outcomes for the majority, making them one of the most powerful - and most ethically significant - design decisions.

Friction

Friction is any effort an interface adds between a person and what they’re trying to do - a step, a confirmation, a wait, a decision. It isn’t simply bad: friction on the wrong action repels people, but a deliberate dose on a risky one is a safety net. The skill is matching the friction to the stakes, not removing it everywhere.

Microinteractions

A microinteraction is a small, focused moment tied to one task - like toggling, liking, or confirming a save. Each is tiny, but they’re where an interface answers ‘did that work?’ right after you act, making the product feel responsive and thoughtful rather than inert and uncertain.

Error prevention

Error prevention means designing so mistakes can’t happen - through constraints, sensible defaults, disabling impossible actions, and input formats that can’t be entered wrong - rather than letting the slip occur and catching it with a message afterwards. The best error is the one the interface made impossible to make.

Error recovery and undo

Error recovery is what an interface offers after a mistake: a way back. The strongest form is undo - the action happens immediately, with an easy reversal sitting right there - which lets people move fast without fear, because anything done can be undone. It treats slips as normal and recoverable, not as things to interrogate up front.

Optimistic UI

Optimistic UI updates the screen the instant you act - as if the action had already succeeded - and confirms with the server in the background. It suits actions that are very likely to succeed and safe to roll back, so the interface feels immediate; when a request fails, it must detect that, reverse the change clearly and tell you. It isn't for high-stakes or hard-to-reverse operations.

Thumb zone

The thumb zone is the part of a phone screen you can easily reach with your thumb when holding it - usually the lower and central area. Top corners, especially the upper ones, require stretching or a second hand. Put your most-used items in the easy zone, and leave awkward corners for rare or harmless actions.

Interactive states (hover, focus, active)

Every interactive element has several states - default, hover, focus, active, disabled - and each gives feedback. They show users what’s interactive, where they are, and that the thing heard them. Designing only the default state leaves an interface that looks dead, loses keyboard users, and never confirms a tap.

Tooltips

A tooltip is a small label that appears on hover or focus to explain a control - most often a bare icon whose meaning isn’t obvious. Used well, it’s a quiet safety net for recognition; used as a crutch, it hides essential information behind an interaction many people can’t or won’t perform.

Affordance vs signifier

An affordance is the action an element enables; a signifier is the visible cue that shows how or where to perform it.

Confirmation dialog

A confirmation dialog interrupts before a consequential action to make you pause and agree. Done well, it states exactly what will happen and offers a specific, labelled choice, so the decision is informed. Done badly - a vague 'Are you sure? OK / Cancel' on everything - it’s noise people learn to dismiss, training the very carelessness it was meant to prevent.

Doherty threshold

A historical HCI guideline that subsecond system response helps sustain productive, engaged interaction. Treat roughly 400 ms as a design heuristic worth aiming under, not a universal perceptual threshold.