Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Era of Gratuitous Animations

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.

Ben MacGowan

June 12, 2014

More Decks by Ben MacGowan

Other Decks in Technology


  1. @benmacgowan gratuitous adjective 1. done without good reason; uncalled for.

    "gratuitous violence"
 synonyms: unjustified, without reason, uncalled for, unwarranted, unprovoked, undue; More
  2. “ ” @benmacgowan It's not just what it looks like

    and feels like. Design is how it works. - Steve Jobs
  3. “ ” @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
  4. @benmacgowan Like designed by Marwa Boukarim from the Noun Project

    So how do you know when an animation is appropriate?
  5. @benmacgowan Click designed by Rohan Gupta from the Noun Project

    Photo credit: https://www.flickr.com/photos/spavaai/2536426227 expectation
  6. @benmacgowan Rabbit designed by Thomas Hirter from the Noun Project

    Photo credit: https://www.flickr.com/photos/martijnvandalen/5280691005 distraction
  7. @benmacgowan Chat designed by Ed Harrison from the Noun Project

    Photo credit: https://www.flickr.com/photos/91591049@N00/12461846804 messaging
  8. @benmacgowan Target designed by Libby Ventura from the Noun Project

    Photo credit: https://www.flickr.com/photos/adactio/2856121959 consistency
  9. @benmacgowan Timer designed by Rohan Gupta from the Noun Project

    Photo credit: https://www.flickr.com/photos/jimculp/5894033449 performance
  10. @benmacgowan Wheelchair designed by Marco Acri from the Noun Project

    Photo credit: https://www.flickr.com/photos/snocopublicworks/9308670405/ accessibility
  11. @benmacgowan “ ” Good UI animations have purpose, personality, and

    alignment with your message - they just feel right. - Val Head