Creative agency glossaryWeb, UX/UI, and Design

Interactive Design

Interactive design is the design of how a digital thing responds to a person: what happens when they click, scroll, drag, type or wait, and how it feels while it happens.

What is interactive design?

Every screen is a conversation. Interactive design, also called interaction design or IxD, is the discipline that writes the responses: the button that depresses, the menu that unfolds, the page that reveals itself as you scroll, the form that tells you the email is wrong before you press send, the video that plays when it comes into view. It is the layer between the static visual design and the working product, and it is where a site stops being a picture and starts being a thing you use.

It draws on a few steady principles. Feedback: every action gets a visible response. Affordance: things that can be used look usable. Consistency: the same gesture does the same thing everywhere. Timing: motion lasts exactly as long as it needs to feel natural, and no longer. And forgiveness: mistakes are easy to undo.

Why it matters

Why interactive design matters

Interaction is where a brand is felt rather than seen. Two sites with the same layout can feel completely different because one responds instantly with motion that has weight and the other lags, jumps and surprises. That feeling is remembered as the brand. Interaction also decides whether people succeed: the form they can finish, the player they can control, the navigation they can predict. And it is where delight lives, in the small responses that make a product feel alive, as long as they stay in service of the task rather than performing for their own sake.

In practice

How interactive design works in practice

  1. 01

    The work starts by mapping the moments: every state a screen can be in (empty, loading, error, success, hover, focused, pressed) and every transition between them. Those are designed, not left to the browser's defaults. Motion is specified with purpose: what moves, how far, how fast, with what easing, so that it explains the change rather than decorating it. Prototypes are built early, because interaction cannot be judged in a still image.

  2. 02

    Then it is built and tuned in the browser or the app, where the real decisions happen: the scroll that should trigger the reveal, the drag that needs a little resistance, the tap target that has to be bigger on a phone. It is tested with people, on real devices, and it is checked against accessibility, so every interaction that works with a mouse works with a keyboard and a screen reader too.

At RIOT

Interactive design at RIOT

Our own products are where we practice this most. Krova, our production software, and AltSounds, our music video channel, are web apps whose interfaces we design and build ourselves, and they live or die on the small responses: how a schedule drags, how a video starts, what the screen does while it waits. riot.nyc gets the same attention, down to how a film plays.

See the work →

Watch out

What people get wrong about interactive design

Confusing motion with interaction. A page that animates everything as you scroll is not interactive; it is a slideshow with a scrollbar, and it is usually slow. Second, designing only the happy path. The loading state, the error and the empty screen are where most people's experience actually happens. Third, inventing gestures: a clever new way to navigate that nobody has seen before is a puzzle, not a design.

Questions

People also ask

What is the difference between interactive design and UX design?

UX design covers the whole experience of a product, from research to structure to content. Interactive design is the part concerned with moments of response: what happens when a person acts. One is the map; the other is the feel of the road.

What makes an interaction feel good?

Immediate feedback, motion with a purpose and a natural duration (usually a few hundred milliseconds), consistency with what the person has learned elsewhere, and the ability to undo. It should feel like the thing responded, not that it performed.

Is interactive design only for apps?

No. Websites, kiosks, installations, connected products and even a video player all have interactions to design. Anywhere a person acts and something responds, the response is a design decision.

Next to it in the glossary

  1. HTTPSHTTPS is the secure version of HTTP, in which the traffic between a browser and a website is encrypted so that nobody in between can read or alter it.
  2. HyperlinkA hyperlink is a clickable reference in a page that takes the reader to another page, file or place, and it is the mechanism the web is built on.
  3. IllustrationIllustration is drawn or painted imagery, by hand or digitally, made to explain, decorate or give personality to a brand, a story or a product.
  4. Landing PagesA landing page is a single web page built for one audience and one action, where visitors arrive from an ad, an email or a search and are asked to do one thing.
  5. MicrositeA microsite is a small, self-contained website, often on its own address, built for a single campaign, product, event or story apart from a brand's main site.
  6. MinificationMinification is the process of stripping unnecessary characters from code, such as spaces, line breaks and comments, so that files are smaller and pages load faster.

Every Web, UX/UI, and Design term →

In the work

Where it shows up

All our creations →

From the journal

Read around it

The journal →

Talking the talk is one thing

We make the work.

RIOT is a creative agency and production studio in New York. Strategy, brand, film, photography, design and the campaigns that carry them, made by one team. A few lines is enough to start: we read every brief the same day.

    Footage