The Era of Gratuitous Animations

Updated version given at MKGN#9.

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 Milton Keynes Geek Night - June 2014
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
11. @benmacgowan
12. @benmacgowan
13. “ ” @benmacgowan It's not just what it looks like and feels like. Design is how it works. - Steve Jobs
14. Video courtesy of Val Head / A List Apart
17. “ ” @benmacgowan I tend, like most others, to not trust websites that feel like they were made 10 years ago. The over-the-top polished feel of this animation adds to the overall user experience, by conveying a level of perfection and attention to detail that you can’t help but trust. - Michaël Villar / http://bit.ly/RFcQmJ
18. @benmacgowan Like designed by Marwa Boukarim from the Noun Project So how do you know when an animation is appropriate?
19. @benmacgowan 1. user experience
20. @benmacgowan Click designed by Rohan Gupta from the Noun Project Photo credit: https://www.flickr.com/photos/spavaai/2536426227 expectation
21. @benmacgowan Rabbit designed by Thomas Hirter from the Noun Project Photo credit: https://www.flickr.com/photos/martijnvandalen/5280691005 distraction
22. @benmacgowan Theater designed by Diego Naive from the Noun Project emotion
23. @benmacgowan People designed by Naomi Atkinson from the Noun Project demographic
24. @benmacgowan
25. @benmacgowan 2. brand experience
26. @benmacgowan Chat designed by Ed Harrison from the Noun Project Photo credit: https://www.flickr.com/photos/91591049@N00/12461846804 messaging
27. @benmacgowan Target designed by Libby Ventura from the Noun Project Photo credit: https://www.flickr.com/photos/adactio/2856121959 consistency
28. @benmacgowan 3. browser experience
29. @benmacgowan Timer designed by Rohan Gupta from the Noun Project Photo credit: https://www.flickr.com/photos/jimculp/5894033449 performance
30. @benmacgowan Wheelchair designed by Marco Acri from the Noun Project Photo credit: https://www.flickr.com/photos/snocopublicworks/9308670405/ accessibility
31. @benmacgowan {{icon credit}} get your interface working without interactions first
32. @benmacgowan prototype it still unsure?
33. @benmacgowan
35. @benmacgowan “ ” Good UI animations have purpose, personality, and alignment with your message - they just feel right. - Val Head
36. thank you @benmacgowan