Gratuitous animations
the era of
Milton Keynes Geek Night - June 2014
Slide 2
Slide 2 text
@benmacgowan
this used to be animation on the web
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
@benmacgowan
what technology should i use?
rather
can this be done?
no longer
Slide 8
Slide 8 text
@benmacgowan
Slide 9
Slide 9 text
@benmacgowan
gratuitous
adjective
1. done without good reason; uncalled for.
"gratuitous violence"
synonyms: unjustified, without reason, uncalled for,
unwarranted, unprovoked, undue; More
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
@benmacgowan
Slide 12
Slide 12 text
@benmacgowan
Slide 13
Slide 13 text
“
”
@benmacgowan
It's not just what it
looks like and feels like.
Design is how it works.
- Steve Jobs
Slide 14
Slide 14 text
Video courtesy of Val Head / A List Apart
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
“
”
@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
Slide 18
Slide 18 text
@benmacgowan Like designed by Marwa Boukarim from the Noun Project
So how do you know when an
animation is appropriate?
Slide 19
Slide 19 text
@benmacgowan
1. user experience
Slide 20
Slide 20 text
@benmacgowan
Click designed by Rohan Gupta from the Noun Project
Photo credit: https://www.flickr.com/photos/spavaai/2536426227
expectation
Slide 21
Slide 21 text
@benmacgowan
Rabbit designed by Thomas Hirter from the Noun Project
Photo credit: https://www.flickr.com/photos/martijnvandalen/5280691005
distraction
Slide 22
Slide 22 text
@benmacgowan Theater designed by Diego Naive from the Noun Project
emotion
Slide 23
Slide 23 text
@benmacgowan People designed by Naomi Atkinson from the Noun Project
demographic
Slide 24
Slide 24 text
@benmacgowan
Slide 25
Slide 25 text
@benmacgowan
2. brand experience
Slide 26
Slide 26 text
@benmacgowan
Chat designed by Ed Harrison from the Noun Project
Photo credit: https://www.flickr.com/photos/91591049@N00/12461846804
messaging
Slide 27
Slide 27 text
@benmacgowan
Target designed by Libby Ventura from the Noun Project
Photo credit: https://www.flickr.com/photos/adactio/2856121959
consistency
Slide 28
Slide 28 text
@benmacgowan
3. browser experience
Slide 29
Slide 29 text
@benmacgowan
Timer designed by Rohan Gupta from the Noun Project
Photo credit: https://www.flickr.com/photos/jimculp/5894033449
performance
Slide 30
Slide 30 text
@benmacgowan
Wheelchair designed by Marco Acri from the Noun Project
Photo credit: https://www.flickr.com/photos/snocopublicworks/9308670405/
accessibility
Slide 31
Slide 31 text
@benmacgowan {{icon credit}}
get your interface working
without interactions first
Slide 32
Slide 32 text
@benmacgowan
prototype it
still unsure?
Slide 33
Slide 33 text
@benmacgowan
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
@benmacgowan
“
”
Good UI animations have
purpose, personality, and
alignment with your message -
they just feel right.
- Val Head