By the end of the lesson, you can tell a microinteraction that helps the task from mere decoration. You consciously design what a transition signals, how long it lasts, and how it remains manageable for users who are sensitive to motion or limited in attention.
Why do the "small" things matter?
The user's trust is often built from tiny signals: the button "moves", the field turns green, the list updates. If these are missing, the user does not know whether the action happened, and clicks again or becomes uncertain. If there are too many and too spectacular ones, they slow down the work and draw attention away. Designing microinteractions balances these two extremes.
Small feedback, big uncertainties
A microinteraction is a short feedback tied to a single user action or state. Four parts describe it:
Trigger: what starts it? (click, hover, data entry, system event)
Rules: what happens? (is the field valid, did saving succeed)
Feedback: what does the user see or hear? (color change, icon, text, vibration)
Loops / modes: how long does it last, does it repeat, when does it end?
Examples: the loading state of the "Save" button; the strength indicator of a password field; the filling of the "Favorite" heart; the update of a list after a new item is added.
A test for a good microinteraction: if you removed it, would the user understand less about what is happening? If not, it is decoration.
Transitions
A transition is a visual change between two interface or system states. It can help to follow the change: for example, when opening the details of a card, it signals that a deeper view of the same element is arriving. Its functions:
Continuity: it is visible where we came from and where we got to (the card opens, it does not "jump").
Focus guidance: the eye is directed to the change.
Connection: it is visible that two elements belong together.
If, however, it is too long, too frequent, or cannot be skipped, it slows down the routine task and can be disturbing. Motion should never be the sole carrier of the content.
Timing and control
A good transition is short, predictable, and proportionate to the action. A few guidelines:
Immediate response: within about 0.1 seconds the user still perceives the response as instantaneous (according to Jakob Nielsen's response-time limits). The pressed state of a button should appear within this.
Continuous thinking: about 1 second is the limit up to which the user follows their work without interruption; for a longer wait you must signal that the system is working.
Transitions of smaller elements: typically a few hundred milliseconds (on the order of 100–300 ms). The exact values are given by the platform's design guidelines (for example Material Design or the Apple Human Interface Guidelines); check the current recommendation before putting a number into the design.
Complex transitions: may be longer, but should not hold the user up.
Avoid animations during which one cannot move on, or which draw attention at every tiny choice.
Motion and accessibility
Reduced motion is a setting in the operating system with which the user limits unnecessary animation. For some people motion causes dizziness, nausea, or headaches (for example with a vestibular disorder). The interface should respect this setting: instead of animation, a simple cross-fade or an immediate switch should appear.
The relevant WCAG requirements:
Flashing content should not flash more than three times per second (2.3.1) – this is critical because of the risk of seizures.
For moving or updating content that starts automatically and lasts longer than 5 seconds, there should be a way to pause it (2.2.2).
Motion triggered by a user action should be possible to turn off (2.3.3, level AAA).
Motion can never be the only signal: if the change can be understood only through animation, whoever cannot see it (or turned it off) is left without information. Signal the state in text and/or statically as well.
Worked example: selecting an appointment in Mai program
On a booking interface, after selecting an appointment the system only changes the color of the button. The user is not sure whether the choice really got into the summary. Better feedback updates at once the state of the selected appointment ("Selected"), the summary, and the option to continue. The animation (for example a brief highlight of the summary) can here only help make the connection visible; it cannot replace the textual state. With reduced motion, the highlight is omitted, and the textual state remains.
Common misconceptions
Claim
Clarification
"Animation makes the interface more modern."
It is useful only if it gives information or creates continuity.
"Every transition should be designed spectacularly."
For routine actions a short, predictable transition is the good one.
"Supporting reduced motion is an extra task."
It is a basis of accessible design; it can be solved with simple rules.
In brief
A microinteraction is a short feedback tied to an action: trigger, rules, feedback, loops.
A transition gives continuity and focus, but must not slow down the routine task.
Adapt the timing to the nature of the action, and check the platform guidelines.
Respect reduced motion and the flashing rules; motion is never the only signal.
Review questions
Which microinteraction would reduce real uncertainty in your project?
Is there a motion without which the user would not understand the change?
Which transition slows the task more than it helps?
Microinteractions and transitions
Objectives
By the end of the lesson, you can tell a microinteraction that helps the task from mere decoration. You consciously design what a transition signals, how long it lasts, and how it remains manageable for users who are sensitive to motion or limited in attention.
Why do the "small" things matter?
The user's trust is often built from tiny signals: the button "moves", the field turns green, the list updates. If these are missing, the user does not know whether the action happened, and clicks again or becomes uncertain. If there are too many and too spectacular ones, they slow down the work and draw attention away. Designing microinteractions balances these two extremes.
Small feedback, big uncertainties
A microinteraction is a short feedback tied to a single user action or state. Four parts describe it:
Examples: the loading state of the "Save" button; the strength indicator of a password field; the filling of the "Favorite" heart; the update of a list after a new item is added.
A test for a good microinteraction: if you removed it, would the user understand less about what is happening? If not, it is decoration.
Transitions
A transition is a visual change between two interface or system states. It can help to follow the change: for example, when opening the details of a card, it signals that a deeper view of the same element is arriving. Its functions:
If, however, it is too long, too frequent, or cannot be skipped, it slows down the routine task and can be disturbing. Motion should never be the sole carrier of the content.
Timing and control
A good transition is short, predictable, and proportionate to the action. A few guidelines:
Avoid animations during which one cannot move on, or which draw attention at every tiny choice.
Motion and accessibility
Reduced motion is a setting in the operating system with which the user limits unnecessary animation. For some people motion causes dizziness, nausea, or headaches (for example with a vestibular disorder). The interface should respect this setting: instead of animation, a simple cross-fade or an immediate switch should appear.
The relevant WCAG requirements:
Motion can never be the only signal: if the change can be understood only through animation, whoever cannot see it (or turned it off) is left without information. Signal the state in text and/or statically as well.
Worked example: selecting an appointment in Mai program
On a booking interface, after selecting an appointment the system only changes the color of the button. The user is not sure whether the choice really got into the summary. Better feedback updates at once the state of the selected appointment ("Selected"), the summary, and the option to continue. The animation (for example a brief highlight of the summary) can here only help make the connection visible; it cannot replace the textual state. With reduced motion, the highlight is omitted, and the textual state remains.
Common misconceptions
In brief
Review questions