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.

In other words, it's being intentional.

Style is substance

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

Reasons for Animations

Convey meaning

Redirect focus

General enjoyment

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?

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>

UX notes

  • Good conversation is two ways, not just one person talking about them self
  • Raise questions—answer them
  • Interaction is incredibly valuable
  • Mediocre experiences are not okay

These are guidelines

Think. A lot. Then create.

Prototype + user test

Steal well, steal often

Other Resources

Keep in touch

Meaningful animations

By Zach Saucier

Meaningful animations

My presentation for Front-Trends 2015. To watch the presentation go to https://www.youtube.com/watch?v=oS-rFKC-Wwc

  • 3,941
Loading comments...

More from Zach Saucier