Meaningful Animations

Making UX Exceptional

Zach Saucier

https://slides.com/zachsaucier/ma/live#/

Purposes of the Web

• Relationships
• Information
• Transactions
• Entertainment

What we want the Web to be

What the web is

Modes of Understanding

• Visual
• Kinesthetic (movement)
• Spatial
• Tactile (touch)
• Aural (hearing)

Unique characteristics about the web

• Media
• Dynamic content
• Fit to screen
• Cross platform
• Animatable

Modern

Capabilities

Design

The purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object.

Style is substance

• Makes process easy
• Builds trust
• Gets conversions
• Retains users

Reasons for Animations

Show contrast

Convey meaning

Convey meaning

Convey purpose

Convey meaning

Show completion

Convey meaning

Show completion

Convey meaning

Show context

Convey meaning

Show contex

Redirect focus

Notifications

Animated loaders

What not to do

General enjoyment

What is your purpose?

• Continually ask this
• Need to understand user flow really well
• Google Maps vs Citimapper 

Things you shouldn't do.

• Take away my control
• Distract me
• Remove me from the flow
• Hide content I want to see
• Make me wait
• Add meaningless effects

Take away my control

Things you shouldn't do

It leads to problems

Modifying control can be okay

Take away what I'm used to

Distract me

Things you shouldn't do

Distract me

Things you shouldn't do

Take me out of the flow

Things you shouldn't do

Hide content I want to see

Things you shouldn't do

Hover content done right

Make me wait

Things you shouldn't do

Add meaningless effects

Things you shouldn't do

<blink>