Skip to content
Lesson 6 of 8intermediate9 min read

Interaction Basics

Interaction design is the loop of input and feedback between a person and a system, governed by affordances, timing, target size and the freedom to undo a mistake.

01

Definition

Interaction is a loop. A person forms an intention, acts on the interface, and the interface responds; the response tells them what happened and shapes the next intention. Interaction design is the work of shaping that loop so it stays tight and honest. It covers what the system makes possible, what it makes visible, how quickly it answers, and what happens when the person gets it wrong. A button is not interaction design; the interaction is what the button offers before it is pressed, what it does under the finger, what it reports afterward, and whether the result can be taken back. Most of the difficulty lies in the fact that the person cannot see the system's internal state and must infer it entirely from what the interface shows them.

02

Why It Exists

Machines have internal states, and people do not have access to them. Everything a person believes about a system is built from what it has shown them so far. Donald Norman described the resulting gap between a user's mental model and the system's actual behavior as the source of most everyday error. When an action produces no visible response, people repeat it, and a payment gets submitted twice. When a control looks decorative, people never find it. When a mistake is irreversible, people move slowly and anxiously through the product, or avoid parts of it altogether. Interaction design exists to close that gap deliberately rather than leaving it to chance: to make possibilities visible, consequences predictable, and errors survivable.

03

Examples

  • A button that darkens the instant a finger touches it, before the network request has even been sent, so the person knows the tap registered.
  • A drag-and-drop list where the dragged item lifts, neighboring items part to make space, and the list settles into its new order, showing the change rather than announcing it.
  • A delete action that removes the item immediately and offers an Undo toast for several seconds, instead of stopping the person with a confirmation dialog they will learn to dismiss without reading.
  • A search field that shows a skeleton of the coming results while loading, so the wait feels like progress rather than an empty screen.
04

History

Before screens, interaction was physical: knobs, levers and switches whose shape told you how to grasp them and whose resistance told you what you had done. The first computer interfaces gave up all of that for typed commands, where nothing was visible until you already knew what to type. Douglas Engelbart's team demonstrated the mouse and an interactive, linked working environment in the 1960s, and researchers at Xerox PARC developed the graphical, direct-manipulation interface in the 1970s — objects on a screen that could be pointed at, selected and dragged. Direct manipulation reached the mass market through the Macintosh and its successors. Touch then removed the intermediary device entirely, gestures removed the visible control, and voice and conversational systems removed the screen. Each step made interaction more immediate and less self-evident.

05

In Modern Design

Contemporary interaction design works mostly in timing and in what the system reveals. Research on responsiveness, summarized in sources such as the Nielsen Norman Group's work on response times, treats roughly a tenth of a second as the threshold at which a response still feels instantaneous; beyond that the system must acknowledge the input, and beyond a second or so it must show progress. Perceived responsiveness can be engineered independently of actual speed, which is why interfaces render the expected result optimistically and reconcile later. Motion has settled into an explanatory role — showing where a panel came from and where it went — rather than a decorative one. Gestures remain powerful and undiscoverable, so most mature products pair every gesture with a visible control that does the same job.

06

Real-World Example

Consider sending a message in a chat application. You press send, and the message appears in the thread immediately, even though nothing has reached the server yet. A small indicator shows it is pending; when the server confirms, the indicator changes; if the network fails, the message turns to an error state with a tap-to-retry. The interface has made a promise it may have to walk back, and it does so visibly rather than silently. Compare it with an interface that shows a spinner over the whole thread until the server replies. The second is more honest about what it knows, and far worse to use, because it blocks the next action for the duration of a network round trip. Interaction quality lives in choices at exactly this scale.

07

Key Principles

  • Acknowledge every input immediately; feedback within roughly 100 milliseconds is what makes an interface feel direct rather than remote.
  • Make affordances visible through signifiers — the shape, label and styling that tell a person what an element will do before they touch it.
  • Size targets for the input method; Fitts's law describes how acquisition time grows as targets get smaller or farther away, which is why small controls at screen edges are slow and error-prone.
  • Treat every gesture as invisible until taught, and pair it with a visible control for anyone who never discovers it.
  • Use motion to explain a change of state or position, and cut it when it only decorates.
  • Prefer undo to confirmation; a reversible action lets people move quickly, while a dialog trains them to click through without reading.

Why it matters

The quality of a product is experienced almost entirely through its interactions. A person may never notice the grid or the palette, but they feel every delay, every mis-tapped target, and every action they could not take back. Poor interaction design produces real costs: duplicate transactions from unacknowledged taps, data lost to irreversible deletions, features that exist but are never found because they hide behind a gesture. It also shapes confidence. An interface that responds predictably and forgives mistakes invites exploration, and exploration is how people learn what a product can do. One that punishes error teaches caution, and cautious users stay in the narrow path they already know, using a fraction of what was built.

Then vs Now

Then

Controls were physical objects. A dial's size told you how finely it could be turned, its resistance told you when it had moved, and a click told you it had latched. Nothing had to be learned from a manual, because the shape of the thing described its own use and the hand confirmed every action.

Now

Controls are images on glass, and every cue is simulated: a shadow suggests pressability, a color change reports a touch, a short animation stands in for physical movement. The system must manufacture the feedback that material once supplied for free, and it must do so within about a tenth of a second to feel real.

Try it yourself

Pick one action you perform often in an app — sending, saving, deleting, filtering. Record yourself doing it, then watch the recording and write down four things: what told you the element was interactive before you touched it, how long the system took to acknowledge your input, what told you the action had succeeded, and whether you could have taken it back. Next, find one gesture in the same app that has no visible equivalent, and ask someone unfamiliar with the app to discover it without help. Then redesign one step: either add the missing acknowledgment, or replace a confirmation dialog with an immediate action plus undo.

Test yourself

5 questions, one at a time

Answers are revealed at the end, so you can think without being nudged.

Sources

  • The Design of Everyday Things — Donald A. Norman (2013) · Book
  • Laws of UX — Jon Yablonski (2020) · Book
  • About Face: The Essentials of Interaction Design — Alan Cooper, Robert Reimann, David Cronin and Christopher Noessel (2014) · Book
  • Response Times: The Three Important Limits — Jakob Nielsen (1993) · Reputable publication