Si Jobling
Agile Delivery Manager (former UI Engineer) at ASOS
Motion
in the
Browser
Digital Experience Team
11th March 2016
ASOS
don’t do motion
(in the browser)
Often neglected element of UX & UI design
Time to think beyond static Photoshop / Sketch comps
It’s not all about
cheesy transitions
You are entering…
The 4th Dimension
But why?
Motion can increase
user satisfaction
& engagement
Motion can provide positive & negative reinforcement
Motion can create
an illusion of
perceived performance
Motion can create a
sense of personality
The Masters
Established the key principles of
believable animation
12 basic principles of animation
Pushed the boundaries of what is possible
and expected
Added some much needed comedy slapstick into an elegant art-form
Patterns
Microinteraction
Process animation
Explanatory animation
Decorative animation
Demo Time
(What can go wrong?)
Info Banners
Bouncy Buttons
Flip Cards
Some Caveats
Browsers
Our old favourite - IE
Performance
Listen to those fans go mad
Just because you can…
Consider whether superfluous motion is
an aid or hinderance
Inspiration?
Codrops
Endlessly innovative
Tinder Add to Bag
Pull & Swipe / Tilt to Share
Animocons
Codepen
UI Engineer Sandbox
Material Radio Button
Lots of Love
Pull Down to Refresh
Chrome Experiments
Self-indulgent promotional …but cool!
100,000 Stars
Go. Make!
Questions?
Motion in the Browser
By Si Jobling
Motion in the Browser
Demonstrating the current state of animation capabilities in the modern browser to the ASOS Digital Experience team.
