Motion that explains

Why GreedUI animates almost everything, and why almost none of it is decoration. Flip the switches and feel the difference.

In 20 seconds

Why your eye misses changes that happen instantly.

The three questions good motion answers.

How long an animation should take, and who wants none at all.

You miss more than you think

Here's a strange fact about your eyes: big changes can happen right in front of you and you won't notice, as long as nothing moves to point them out. It's called change blindness, and it's been shown over and over in experiments.

On a screen that happens all the time. A label changes from "Saving" to "Saved" in one frame, and half the people looking at it never see the change. Motion fixes that, because your eye is built to notice things that move.

Motion isn't decoration. It's how you point at the thing that just changed.

Question one: what changed?

Watch both versions for a few seconds. In which one can you actually tell what's happening?

Bad: The words swap in one frame.

Bad: If you blinked, you missed it.

Bad: You have to reread it to know it changed.

Good: The old word tips away, the new one rolls in.

Good: The change itself is the message.

Good: You notice it from the corner of your eye.

Question two: where did it come from?

A popup that grows out of its button tells you what you just opened. One that appears in the middle of nowhere makes you go find it. Open the menu in both versions.

Bad: It just appears.

Bad: No link between what you pressed and what opened.

Bad: Feels like something else happened on its own.

Good: It grows from the button you pressed.

Good: Your eye follows it from cause to result.

Good: Closing it reverses the same path.

The third question, "did it work?", is the same idea after the fact: a check that draws in, a number that rolls up, a row that slides away. Something you can see, not something you have to check for.

How long should it take?

A classic guideline from usability research: about a tenth of a second feels instant, and about one second is the longest you can wait before your train of thought breaks. UI animations live inside that window. The usual advice lands around 100 to 500 milliseconds, with small things at the short end.

GreedUI's default is about 220ms, starting fast and easing out. Starting fast matters: it makes the motion feel like a response to you, not a show you have to sit through.

If an animation doesn't answer what changed, where it came from or whether it worked, cut it.

Some people want less

Motion can make people genuinely sick. Balance problems are common: one large US study found that about a third of adults over 40 had signs of vestibular dysfunction. That's why phones and computers have a Reduce Motion setting, and why the web's accessibility rules say motion from interactions should be something people can turn off.

GreedUI listens to that setting by default. Movement turns into simple fades, nothing loops, nothing slides across the screen. The interface still tells you what changed, just more quietly.

Sources

[1] Change blindness. Daniel J. Simons and Daniel T. Levin. Trends in Cognitive Sciences, 1997.

[2] To see or not to see: The need for attention to perceive changes in scenes. Ronald A. Rensink, J. Kevin O'Regan and James J. Clark. Psychological Science, 1997.

[3] Response Times: The 3 Important Limits. Jakob Nielsen. Nielsen Norman Group, 1993. https://www.nngroup.com/articles/response-times-3-important-limits/

[4] Executing UX Animations: Duration and Motion Characteristics. Aurora Harley. Nielsen Norman Group, 2014. https://www.nngroup.com/articles/animation-duration/

[5] Disorders of balance and vestibular function in US adults. Yuri Agrawal, John P. Carey, Charles C. Della Santina, Michael C. Schubert and Lloyd B. Minor. Archives of Internal Medicine, 2009.

[6] Understanding Success Criterion 2.3.3: Animation from Interactions. W3C. WCAG 2.2, 2023. https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html

Full component index: llms.txt