The era of gratuitous animations

A quick presentation given at Smashing Borders - a collaboration between Smashing Conference and Breaking Borders in the run up before the Oxford conference.

Presentation contains videos.
This used to be animation on the web: just picture highly animated flash experiences. Seizure inducing.

Will add links in the future to videos.

With technologies constantly evolving, it is becoming easier to bring our interfaces alive with animations. But that doesn’t necessarily mean we should always make that piece of text fly in like it’s Superman. In this talk, we will explore the things we should be considering when making these decisions, looking at interfaces that got it right and others, not so much.

Transcript

1. Gratuitous animations the era of
2. @benmacgowan this used to be animation on the web
7. @benmacgowan what technology should i use? rather can this be done? no longer
8. @benmacgowan
9. @benmacgowan gratuitous adjective 1. done without good reason; uncalled for.
 "gratuitous violence"
 synonyms: unjustified, without reason, uncalled for, unwarranted, unprovoked, undue; More
10. @benmacgowan lingscars • Blocking content ! • Distracting animation
11. @benmacgowan nodejitsu • Hiding valuable content ! • Unexpected ! • No benefit
12. @benmacgowan iPad air • Hijacking user scroll ! • Disruptive user flow
13. “ ” @benmacgowan It's not just what it looks like and feels like. Design is how it works. - Steve Jobs
14. fitbit dashboard @benmacgowan Video courtesy of Val Head / A List Apart • Draws user’s attention to key content ! • Playful
15. Cotton bureau @benmacgowan • Progresses users ! • Non-invasive ! • Responsive
16. stripe checkout @benmacgowan • Takes users on a journey ! • Non-invasive
17. @benmacgowan Like designed by Marwa Boukarim from the Noun Project So how do you know when an animation is appropriate?
18. @benmacgowan 1. user experience
19. @benmacgowan Click designed by Rohan Gupta from the Noun Project expectation • Is the animation initiated by the user? ! • Does the result feel natural?
20. @benmacgowan Rabbit designed by Thomas Hirter from the Noun Project distraction • Does the animation take focus away from the
 user’s task at hand? Or help? ! • Does it make the user interface harder to use?
21. @benmacgowan Binoculars designed by Philip Glenn from the Noun Project emotion • Does the animation trigger an emotional response? ! • Does it give the users a pleasurable experience? ! • Does it make the experience memorable?
22. @benmacgowan 2. brand experience
23. @benmacgowan Chat designed by Ed Harrison from the Noun Project messaging • What does the animation say about your brand?
 • Is the animation in line with your key messaging 
 and brand values?
24. @benmacgowan Target designed by Libby Ventura from the Noun Project consistency • Is the user getting a consistent experience 
 of your brand?
25. @benmacgowan 3. browser experience
26. @benmacgowan Timer designed by Rohan Gupta from the Noun Project performance • How will your animation impact page load? ! • How will your animation impact performance?
27. @benmacgowan Wheelchair designed by Marco Acri from the Noun Project accessibility • How does your animation impact users with disabilities? ! • Not just visual, but cognitive and others ! • How would your animation fallback?
28. @benmacgowan {{icon credit}} get your interface working without interactions first
29. @benmacgowan prototype it still unsure?
30. @benmacgowan “ ” Good UI animations have purpose, personality, and alignment with your message - they just feel right. - Val Head
31. thank you @benmacgowan