Animation for Comprehension

Animations are captivating, informative and Distracting

Objectives of Animations

• Combat banner blindness (learned behavior of ignoring online ads) Blindness
• Draw attention to an element
• Show a change in state
• Error handling

Scanning Patterns

Users typically have an F shaped scanning pattern..

Learn more Scanning Patterns

Eye tracking Data illustrates that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe. ¹

Peripheral Stimulus Outside our Scanning zone

Movement in a person’s peripheral vision triggers a stimulus-driven shift in visual attention and is an example of bottom–up processing.

Its important to note that any movement in our peripheral vision will trigger a stimulus-driven shift in visual attention. This is an example of bottom-up processing.

Lets imagine a situation where a user visits the page.. The user is consuming the information on the hero section and shortly after a chat popup offering to "help" appears in the bottom right corner. This is a perfect example of a peripheral stimulus outside our scanning zone.

This divergence from the F-shape scanning pattern is a distraction from the main content you want to user to consume.

Our beautiful animations that seemingly "help" the user are actually harmful to the comprehension of the content you are trying to convey.

What can we do? How can we combat this?

• Clearly define the purpose of the page and what you want to convey, then craft the animations that support that purpose.