Topic
Interaction design
Interaction design is the conversation between you and an interface, turn by turn: you act, it responds. Get the turns right, and people stop noticing the interface at all. Try the examples on this page to see how it works.
This cluster is about those turns - the hint that tells you something is clickable, the response that confirms it worked, the distance your cursor has to travel, the handful of words that carry the moment. Small mechanics, but they decide whether an action feels effortless or like wading through treacle.
Each entry stages the mechanic so you feel it on yourself first - the mis-click, the missing acknowledgement, the button that finally reads right - then explains what made the difference.
The interaction design entries 19
-
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 -
interaction design
Feedback
Feedback is the interface answering back: a clear sign of what just happened and what to do next. Act without it and people are left guessing whether anything worked at all.
Try the demo -
interaction design
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.
Try the demo -
interaction design
Skeuomorphism
Skeuomorphism is design that imitates real-world objects - the leather-stitched diary, the felt poker table, the push-button with a bevel and a shadow. Its purpose was never decoration for its own sake: by borrowing the look of physical things, it borrows their affordances, so a control looks pressable, draggable or turnable before anyone explains it.
Try the demo -
interaction design
Discoverability
Discoverability is whether people can find out what an interface can do, and how to do it, just by looking and trying - without a manual, a tooltip or a tip-of-the-day. A feature that exists but can't be found doesn't really exist for most users; the function is only as useful as it is visible.
Try the demo -
interaction design
Defaults
A default is the choice already made for you - the value a field starts with, the box that's pre-ticked, the option selected before you touch anything. Because most people never change them, defaults quietly decide the outcome for the majority, which makes choosing them one of the most powerful - and most ethically loaded - decisions in an interface.
Try the demo -
interaction design
Friction
Friction is any effort an interface puts 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.
Try the demo -
interaction design
Microinteractions
A microinteraction is a single small moment built around one task - a toggle flipping, a like animating, a field confirming it saved. Each is tiny, but they're where an interface answers "did that work?" in the instant after you act, and where a product feels responsive and considered rather than dead and uncertain.
Try the demo -
interaction design
Error prevention
Error prevention is designing so a mistake can't happen in the first place - constraints, sensible defaults, disabling impossible actions, 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.
Try the demo -
interaction design
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.
Try the demo -
interaction design
Optimistic UI
Optimistic UI updates the screen the instant you act - as if the action had already succeeded - and quietly confirms with the server in the background. It bets that the request will work (it nearly always does), so the interface feels immediate instead of making you watch a spinner wait on the network.
Try the demo -
interaction design
Thumb zone
The thumb zone is the area of a phone screen a person can comfortably reach with the thumb of the hand that's holding it - roughly the lower and centre of the display. The far corners, especially the top, are a stretch or need a second hand. Put the things people tap most inside the easy zone, and keep the awkward corners for the rare and the harmless.
Try the demo -
interaction design
Interactive states (hover, focus, active)
Every interactive element lives in several states - default, hover, focus, active, disabled - and each is a piece of feedback. They tell people 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.
Try the demo -
interaction design
Affordance vs signifier
An affordance is what an element lets you do - a button can be pressed, a slider can be dragged. A signifier is the cue that tells you so - the shadow, the label, the cursor change. The affordance is the possibility; the signifier is the advertisement for it.
Try the demo -
interaction design
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.
Try the demo -
interaction design
Confirmation dialog
A confirmation dialog interrupts before a consequential action to make you stop 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.
Try the demo -
interaction design
Doherty threshold
The Doherty threshold is the point - around 400 milliseconds - where a system’s response feels immediate and keeps you in flow. Beyond that, attention fades: people hesitate, re-check, and disengage, even when the result is the same.
Try the demo
Know these already? Take the interaction design quiz, or revise the terms with flashcards.