THE HUMAN SIDE OF DESIGN
Motion that helps you find your way
Compare three entrance treatments, control the playback, and explore when movement earns its place on a website.
Movement asks for attention. On a website, that makes it a useful tool and a design responsibility. A small transition can show where a panel came from or which item changed. An elaborate sequence can also make someone wait for information they were ready to read.
We start by asking what the movement explains. A menu opening, a selection updating, or a progress indicator changing has a clear connection to an action. A decorative entrance can add character, but it should earn its place without taking control of the visitor’s pace.
01 / Give the movement a purpose
Picture a services panel appearing after someone chooses a category. A short transition can connect the selection to the result. Now picture every paragraph flying in from a different direction as the person scrolls. The second treatment adds much more movement without necessarily explaining more.
For a therapy practice, we would usually choose a restrained starting point: a small rise, a short fade, or an immediate change. That is our creative judgment for this kind of content. It is not a claim that one animation style makes every viewer feel calm.
02 / Compare three entrances
The lab below begins with all of its sample cards visible. Choose a treatment, then select Play sequence. “Together” introduces the group at once; “Staggered” separates the entrances; “Still” leaves the final arrangement in place. Pause and reset remain available while a sequence is running.
Choose the rhythm. You set the pace.
Watch the order in which you notice the three cards. A stagger can establish a sequence, but it also delays the final item. If each card contains information someone needs immediately, that delay may be unnecessary. Try the still version as part of the comparison rather than assuming movement is always an improvement.
The content should arrive on the reader’s terms.
Keep essential information available, make repeated actions efficient, and avoid forcing visitors to wait through the same introduction each time they return.
03 / Make room for reduced motion
W3C’s explanation of Animation from Interactions describes how nonessential motion, including parallax, can cause distraction or physical symptoms for some users. The Level AAA criterion addresses the ability to disable interaction-triggered motion unless it is essential.1
A reduced-motion alternative can show the final state immediately or use a simpler change. It should still communicate the result of an action. In this lab, a reduced-motion setting makes playback immediate. The operating system’s reduced-motion preference also takes precedence, so the demonstration does not ask someone to override that preference to read the article.
This is an important design constraint from the beginning. If a section only makes sense when three pieces fly into position, we need to design an equally understandable still version. A decorative effect should not be the sole explanation of what happened.
04 / Avoid motion that keeps asking
A one-time response and a continuously moving background create different experiences. WCAG’s Pause, Stop, Hide criterion includes controls for automatically starting moving, blinking, or scrolling information that lasts more than five seconds and appears alongside other content, unless essential. It also addresses automatically updating information under its stated conditions.2
For our own design review, we would ask whether a loop needs to run at all while someone is reading. A still poster, a play button, or a short user-triggered demonstration may serve the purpose with less competition. Video controls should remain easy to discover and use.
05 / Test the route in both directions
Scroll down slowly, then reverse direction. Return to a section you have already seen. Open the menu with a keyboard. A sequence that looks polished in one recorded pass can feel awkward when someone moves differently, skips ahead, or revisits a detail.
Check that hidden entrance states do not leave links focusable in invisible places. Check that content is still readable if a script fails. Review the narrow-screen layout separately, where a horizontal movement can travel a much larger proportion of the visible page.
The goal is a page that responds with care. Motion can support that character, but the ability to understand the website, move through it, and stop when needed comes first.
Sources & further reading
The examples and practical recommendations are TheraCrafted’s design interpretation. The sources below support the specific guidance cited in the text; the interactive example is not a controlled study or a prediction of client behavior.
