Zach Saucier
Front-end web developer; specialist in web animations and user interaction.
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?
- 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>
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
- Principles of animation
- Awesome user flow examples
- Michael Villar's work
- Design details of Inbox
- Google's material design
- My resources page
Learn from them - don't let them stop you from designing or innovating
Keep in touch
- @ZachSaucier
- zachsaucier.com/blog
- CodePen - experiments
- hello@zachsaucier.com
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
