Utilize movement

Purchase decisions require attention—and motion attracts it. Banners, animations, and videos catch the eye. But attention is limited. The question is: When does motion enhance perception, and when does it disrupt it? How can motion be strategically deployed—and what does the evidence tell us?

Studies

Peripheral motion detection

Rensink and colleagues investigated in 2002 how the visual system responds to changes. Their findings revealed that movements in the periphery are detected with 87-93% probability, while static changes of the same size are detected only 35-40% of the time. The reason is evolutionary: movement at the edge of the visual field could signal danger. The brain has a built-in 'motion alarm' for the periphery.

Notification Design

The findings were applied to UI design: Animated notifications at the screen edge are noticed three times more frequently than static ones. However, caution is warranted: Excessive movement leads to 'animation blindness'—the brain learns to ignore constant motion. Movement must be selective and meaningful.

Principle

Which principle for Customer Experience Design can be derived from this? Motion is the most effective tool for capturing peripheral attention and should be used strategically to highlight important content or calls-to-action. Our visual system is evolutionarily programmed to interpret motion at the edge of our visual field as a potential threat, automatically triggering an attention response that bypasses conscious decision-making. However, this mechanism only works when used sparingly—constant or excessive motion leads to habituation and diminishes effectiveness. Motion should therefore be employed strategically and purposefully to avoid overloading the natural attention reflex. The following guidelines demonstrate how to implement this principle in practice.

Guidelines

Use motion sparingly

Reserve animation for important moments. Constant movement leads to habituation and gets ignored. When everything moves, nothing stands out. The following examples illustrate this guideline:

• Banking Apps: Animation only for transaction confirmation – the 'checkmark' that appears. No decorative animations that distract from what's important.

Animate important changes

When something important changes on the page, animate the change. Without animation, changes in the periphery are overlooked (Change Blindness). The following examples illustrate this guideline:

• Warenkorb: When a product is added: Animation that makes the product 'fly' to the cart. Without animation, many users don't notice the change.

Connect animation with meaning

Every animation should convey information. Where does something come from? Where is it going? What happened? Purely decorative animation is a waste of the motion budget. The following examples illustrate this guideline:

• iOS: Apps zoom out from their icon – showing where they come from. Closing zooms back – showing where they're going.