Motion
Movement is the strongest attention signal an interface has, and alarms depend on it working. Every animation spends a little of that budget, so this foundation is mostly a set of limits.
Overview
Peripheral vision detects movement far better than it detects colour or shape. That is why a new alarm is noticed on a screen nobody is looking at — and why an interface that animates routinely trains the eye to stop reporting movement. Habituation is not a theoretical risk here; it is the same mechanism as alarm fatigue, operating one level lower.
So motion in this system is permitted for three narrow purposes — confirming an interaction, explaining a change of state, and connecting a before to an after — and prohibited for the one it is most often reached for: making something urgent.
Purposeful
Motion answers a question the clinician would otherwise have to ask: did that register, where did this come from, what just changed.
Brief
Nothing exceeds 320 ms. Motion a clinician can outrun is motion that delays them.
Never urgent
Urgency is said by the IEC palette and by wording. Nothing flashes, pulses or throbs to get attention — ever.
Durations
Four values. Definitions live in Tokens; this is which one to use.
| Curve | Value | Use |
|---|---|---|
--njt-ease-standard | cubic-bezier(.2, 0, 0, 1) | Anything that begins and ends on screen — colour, size, position. |
--njt-ease-enter | cubic-bezier(0, 0, 0, 1) | Entering. Fast in, settles gently, so arrival is noticed without startling. |
--njt-ease-exit | cubic-bezier(.3, 0, 1, 1) | Leaving. Accelerates away — nothing lingers once dismissed. |
What motion may do
- Confirm an interaction. 80 ms press feedback, so a clinician knows the control registered and does not press again. On a display with high touch latency this is the difference between one cath lab notification and two.
- Explain a state change. A banner dropping chroma on acknowledgement, at 140 ms, shows that the thing on screen is the same thing in a new state rather than a different thing.
- Connect a before to an after. A panel expanding from the control that opened it, at 220 ms, answers "where did this come from" without a label.
What motion must never do
Urgency is never expressed by movement. This is stricter than WCAG 2.3.1, which permits flashing below three per second: here it is prohibited outright. Three reasons — it is a photosensitive seizure risk, it competes with the alarm palette that already carries priority, and a pulsing element in peripheral vision is exactly the signal a genuinely new alarm needs to be able to use.
| Never | Because |
|---|---|
| Flash, pulse or throb to signal urgency | Seizure risk; competes with the alarm layer; habituates the eye. |
| Animate on re-render | A list that re-flashes on every poll trains clinicians to ignore movement entirely — see Data grid. |
| Animate a waveform or trend | A drawn-on ECG cannot be measured while it is drawing, and animation implies a change in the signal that has not occurred. |
| Animate a value counting up | A troponin result ticking from 0 to 1 240 displays several wrong values on the way. |
| Delay an action behind a transition | Motion runs alongside the action, never in front of it. |
| Move content under the pointer | Layout shift is a wrong-target mechanism — see Grid & layout. |
| Auto-scroll or auto-advance | Position is the clinician's to control. |
Enters once so arrival is noticed, then holds absolutely still. Its urgency is carried by hue and wording, which do not decay with exposure.
Pulsing to demand attention. Within a shift it becomes wallpaper, and it has taken movement away from the next alarm that needs it.
Reduced motion
Under prefers-reduced-motion: reduce, transitions are removed. Nothing
else changes. Every state still changes, every alarm still appears, every entry still
happens — instantly. Reduced motion is a preference about animation, never a reason to
withhold a clinical signal, and treating it as one is a failure mode worth testing for
explicitly.
/* Remove the animation, never the event. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Loading and progress
- Skeletons, not spinners, wherever the shape of the incoming content is known. A skeleton also reserves the space, which is what prevents the layout shift when content lands.
- Skeleton shimmer is slow and low-contrast — a 1.5 s sweep, not a pulse. It should read as "working", not as "look here".
- Determinate progress where a duration is known, indeterminate only where it genuinely is not.
- Nothing loading ever covers the alert region. A full-screen loading state is prohibited on patient-scoped screens.
Outcomes of use
What this contributes to, in the terms of Usability & context of use.
- Effectiveness — arrival of new information is noticed, because movement has been kept rare enough to still mean something.
- Efficiency — press feedback within 80 ms removes the hesitation and the second press that an unresponsive-feeling control provokes.
- Satisfaction — a still interface is restful across a twelve-hour shift. Ambient animation is a physical cost, paid by everyone, all day.
Do's and don'ts
A skeleton occupies the space the real rows will take, so nothing moves when the data lands.
A spinner in a box smaller than the content. Everything below jumps when the rows arrive.
Reduced motion removes the animation. The alarm still appears, immediately.
A motion preference suppressing clinical signals. The setting was about animation, never about what the clinician is told.
Clinical safety notes
Trace these in your risk file (ISO 14971) and usability engineering file (IEC 62366-1).
- No flashing or pulsing at any rate. Mitigates: photosensitive seizure, and habituation to movement that alarms depend on.
- No animation on re-render. Mitigates: attentional habituation from routine polling.
- Waveforms and values never animate. Mitigates: measurement taken from a transitional state; implied change that has not occurred.
- Motion never delays an action. Mitigates: time lost in a time-critical pathway.
- Reduced motion removes animation, never the signal. Mitigates: a user preference silently suppressing a clinical alert.
- Loading never covers the alert region. Mitigates: an alarm hidden behind a transient state.
Related
- Tokens — duration and easing definitions.
- Interaction states — motion applied to states.
- Grid & layout — layout shift as a hazard.
- Alert Banner — entry and acknowledgement.