Motion Design
04 / Motion in the Interface
Key question
When does movement help in the interface?
In the interface, motion is not decoration, but information. It shows that something has happened, where an element has come from, and where it is going. At the same time, it must be fast and must not exclude anyone.
Learning objective: You can purposefully use motion in the interface, design micro-interactions, and provide a reduced-motion alternative for users who prefer less movement.
Movement is information.
4.1 / Roles of UI animation
Feedback, orientation, context.
Every movement in the interface needs a reason. Three reasons almost always apply.
01
Feedback
The button responds, the tick appears. You know that your entry has been received.
02
Orientation
A menu slides in from the left and returns there. You understand where it lives.
03
Context
A card expands into a detailed view, making it clear that the two belong together.
If there's no reason, there's no motion. Decorative animations that play the same way on every visit become annoying by the third time at the latest.
No reason, no movement.
4.2 / Microinteractions
Small moments, big impact.
Microinteractions are small responses to a single action: a heart that pulses briefly, a toggle that slides across, a loading state. They are short, usually under 300 milliseconds, and always change the state, not just the motion.
While loading, a skeleton screen—grey placeholders in the shape of the content—already shows the layout of the page. This feels faster than a spinning wheel, even if it takes just as long.
State before effect.
4.3 / Reduce motion
Consideration is part of the design.
Some people experience dizziness or nausea from motion, such as those with vestibular disorders. You can enable "Reduce motion" in your operating system. Websites detect this using the prefers-reduced-motion media query and then display a calmer version.
The Web Content Accessibility Guidelines (WCAG) also require that nothing flashes more than three times per second, and any movement lasting longer than five seconds can be paused. Find out more in the Accessibility course.
Calm is also a frame of mind.
Exercise
An animated interface
Task: Design the micro-interactions for Klang Museum's ticket booking.
STEP 1
List all the moments when feedback is needed: select, confirm, load, error.
STEP 2
Design a movement for every moment and justify it through feedback, orientation, or context.
STEP 3
Set the duration and easing for each movement.
STEP 4
Design the calm version for 'Reduce motion'.
Evaluation: Does the booking work without any movement at all? What is lost, what remains?