Interaction design

Concept

How the interface responds to the user

Interaction design defines how an interface reacts to the user's actions. This notion of interaction covers, in particular, the state changes of components and the system's feedback (error message, loading screen…). Interaction design is the behavioural logic of the product, at the crossroads between information architecture and the visual interface.

What is it for?

  • planning the full set of an interface's states (empty, loading, error, success) consistently
  • defining interaction behaviours to support the user experience
  • making sure every user action gets a clear, immediate response, in line with Nielsen's heuristic “Visibility of System Feedback”

What's the need?

  • documenting the expected behaviours of the interface with the development teams
  • improving the user experience without touching the visual interface

The 5 dimensions of interaction design.

It's the combination of these 5 dimensions that creates good interaction design.

01

Words

you could call it UX writing, since for good interaction design the text has to match the action.

02

The visual

whether it's an image or a pictogram, the visual representation of an element can help make the expected interaction understood. Take the example of the magnifying-glass symbol for search (in the West).

03

Physical hardware

this means the phone, the tablet, the computer, but also the mouse, the keyboard, and so on. You have to design while keeping in mind the hardware that will carry the interfaces. For example, there is no hover effect on mobile devices to signal clickable zones; you therefore have to find a way to make elements understood as clickable without that effect.

04

Time

the interface must be responsive, in real time with the user's actions. Animations that are too long can be counter-productive for the user. Progress bars, for example, help convey a loading time while reducing the user's frustration.

05

Behaviour

following a user action, the interface must react accordingly and appropriately. These elements reassure the user during their interactions (success message, responsive swipe, and so on)

Do not confuse interaction design with micro-animation

Interaction design covers states, the interface elements that appear the moment the user interacts with the product. These interactions provide useful information to the user. Micro-animation is very often associated with interaction design. However, micro-animation serves rather to make this interaction design more impactful while improving the perceived experience. It is merely a “cosmetic” addition on top of interaction design.

Frequently asked questions

Interface design

UI design shapes the visual layer of a product: layout, colours, typography, components. It turns the experience into tangible, interactive elements.

Read more about Interface design

Experience design

Experience design (UX design) shapes the overall experience beyond the interface. It focuses on what the user encounters: journeys, emotions, contexts

Read more about Experience design

Human-computer interaction

HCI (human-computer interaction) refers to the means of interaction between a human and a computer system.

Read more about Human-computer interaction

Affordance

Affordance is the ability of an interface element to suggest its use. Donald Norman popularised the concept: in digital design, only perceived affordance counts.

Read more about Affordance

Cognitive ergonomics

Cognitive ergonomics turns the way the brain works into design principles. Perception, memory, mental load: the foundations of UX design.

Read more about Cognitive ergonomics

Curious to learn more about us?

Everyone talks about user experience, service design, ergonomics...
It's not always clear, and you'd like to find out, or sharpen what you already know.

Let's talk