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

The era of gratuitous animations

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.

Ben MacGowan

March 17, 2014

More Decks by Ben MacGowan

Other Decks in Programming


  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. fitbit dashboard @benmacgowan Video courtesy of Val Head / A

    List Apart • Draws user’s attention to key content ! • Playful
  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

    expectation • Is the animation initiated by the user? ! • Does the result feel natural?
  6. @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?
  7. @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?
  8. @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?
  9. @benmacgowan Target designed by Libby Ventura from the Noun Project

    consistency • Is the user getting a consistent experience 
 of your brand?
  10. @benmacgowan Timer designed by Rohan Gupta from the Noun Project

    performance • How will your animation impact page load? ! • How will your animation impact performance?
  11. @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?
  12. @benmacgowan “ ” Good UI animations have purpose, personality, and

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