ANIMATION - Paris Web

Interactions :
Animations et interfaces
Olivia Lor - UX Designer chez ekino.
@Melle_Tweek #ParisWeb
© Walt Disney Animation Studios
Walt Disney Studio
Frank Thomas
& Ollie Johnston
© Walt Disney Animation Studios
Les 12 principes
d’animation
3
12 principes
d’animation
1. Squash and Stretch
(élasticité)
© vincenzo lodigiani
12 principes
d’animation
2. Anticipation
© vincenzo lodigiani
12 principes
d’animation
3. Staging
(mise en scène)
© vincenzo lodigiani
12 principes
d’animation
4. Straight ahead
action and pose to
pose
(toute l’action d’un
coup / partie par
partie)
© vincenzo lodigiani
12 principes
d’animation
5. Follow through and
overlapping action
(continuité du
mouvement initial et
chevauchement de
deux mouvements
consécutifs)
© vincenzo lodigiani
12 principes
d’animation
6. Slow in and slow
out
(accélération et
décélération)
© vincenzo lodigiani
12 principes
d’animation
7. Arcs
(trajectoire
arquée)
© vincenzo lodigiani
12 principes
d’animation
8. Secondary action
(détails secondaires
en mouvement)
© vincenzo lodigiani
12 principes
d’animation
9. Timing
(cadence)
© vincenzo lodigiani
12 principes
d’animation
10. Exagération
© vincenzo lodigiani
12 principes
d’animation
11. Solid
drawing
(réalisme du
dessin)
© vincenzo lodigiani
12 principes
d’animation
12. Appeal
(charisme)
© vincenzo lodigiani
Olivia Lor
UX Designer
chez ekino
3
ANIMATION
nom féminin Toute méthode consistant à filmer image par image
des dessins ou des marionnettes qui paraitront animés sur
l’écran.
!
(Larousse)
ANIMATION (dans une interface)
nom féminin Une série d’images variantes présentée
dynamiquement en fonction de l’action d’un utilisateur de
manière à l’aider à percevoir un changement continu et
développer un modèle mental approprié à la tâche.
!
(Cleotilde Gonzalez « Does Animation in User Interface Improve Decision Making » 1996)
Squash and stretch
Slow in and slow out
© vincenzo lodigiani
© vincenzo lodigiani
Arcs
Anticipation
© vincenzo lodigiani
© vincenzo lodigiani
Follow through and overlapping action
© vincenzo lodigiani
Secondary action
© vincenzo lodigiani
Un peu d’histoire
3
1967
1995
JavaScript
2000
2006
2007
© DR
2010
2014
We challenged ourselves
to create a visual
language for our users
that synthesizes the
classic principles of good
design with the
innovation and possibility
of technology and
science. This is material
design.
Google
https://www.google.com/design/spec/material-design/introduction.html
© pikabu.ru
À quoi sert une
animation ?
3
© Konstantin Kruglov
© Smashing Magazine
B
A
6CATÉGORIES
Orientation
Extension spatiale
Actions contextuelles
Focalisation
Feedback
Feedforward
Transitions
Orientation
© The ver
© The Verge
Transitions
Extension spatiale
© Google
Transitions
Actions
contextuelles
http://john.do/delete-drafts/
Transitions
Focalisation
Transitions
Feedback
http://ux-mobile.fr/mobx-2014-animations-pour-interface-utilisateur/
Transitions
Feedforward
Quand utiliser les
animations ?
3
1
L’ATTENTIONDE
L’UTILISATEUR
2
LEBUTDE
L’ANIMATION
3
FRÉQUENCE
DESANIMATIONS
4
LAMÉCANIQUE DE
L’ANIMATION
Quelques bonnes
pratiques
3
1
TESTER
TESTER
TESTER
TESTER
TESTER
TESTER
TESTER
TESTER
TESTER
TESTER
2
TESTER
TESTER
TESTER
TESTER
TESTER
TESTER
TESTER
TESTER
TESTER
TESTER
UX / Créa
Chef de projet
Développeur
UX / Créa
Chef de projet
Développeur
3
En conclusion
3
Squash and stretch
Slow in and slow out
© vincenzo lodigiani
© vincenzo lodigiani
Arcs
Anticipation
© vincenzo lodigiani
© vincenzo lodigiani
Follow through and overlapping action
© vincenzo lodigiani
Secondary action
© vincenzo lodigiani
Évolution de l’animation dans les interfaces
!
!
Le développement
des animations
devient vraiment
simple
Apparition de
l’animation dans le
web
1967
2000
2007
2006
1995
Apparition des
animations dans
les jeux vidéo
Orientation du web vers
des technologies
nouvelles pour le support
des animations aux
nouveaux terminaux
Explosion de
l’animation dans le
web
2014
2010
Les animations de
qualité se
démocratisent et
font leurs
apparitions sur
mobile
Une nouvelle
manière de
concevoir les
animations
© Konstantin Kruglov
© Smashing Magazine
TESTER
TESTER
TESTER
TESTER
TESTER
TESTER
TESTER
TESTER
TESTER
TESTER
La différence entre quelque chose
de bien et quelque chose
d’excellent, est l’attention qu’on porte
aux détails. CHARLES R. SWINDOLL
Partagez vos impressions sur Twitter :
@Melle_Tweek
#ParisWeb
www.ekino.com
merci.
Crédits
Animations GIFS Principles of life : http://the12principles.tumblr.com/
GIF livre d’or : http://www.kazeo.com/sites/fr/photos/125/image-pour-blog-serie_1257886-L.gif
« Orientation » Flipboard : http://assets.sbnation.com/assets/2946229/FlipboardWebMagazines.gif
« Extension spatial » My library : https://www.google.com/design/spec/animation/meaningful-transitions.html#
« Actions contextuelles » Drafts : http://john.do/delete-drafts/
« Focalisation » GDrive : Captation personnelle
« Feedback » Pull to refresh Twitter : http://ux-mobile.fr/mobx-2014-animations-pour-interface-utilisateur/
« Feedforward » Slide to unlock : Captation personnelle
!
Vidéos
Mickey mouse : Walt Disney Animation Studios http://www.youtube.com/watch?v=BBgghnQF6E4
Pong : http://www.youtube.com/watch?v=SHsYjWm8XSI
Google + App : https://www.youtube.com/watch?v=wyPIXAx0dc4
!
Image
Mickey and Walt Disney : https://www.flickr.com/photos/andycastro/3358374569
Frank Thomas and Ollie Johnston (The Indestructibles) : http://3.bp.blogspot.com/-skmY2_vkZ1U/TVh86hUT0SI/
AAAAAAAAAAk/6CoFsGQFDKQ/s1600/johnstoni.jpg
The Illusion of Life Disney Animation : http://desenelecopilariei.com/wp-content/uploads/2014/02/The-Illusion-ofLife.jpg
Couverture Core Animation : https://imagery.pragprog.com/products/102/bdcora.jpg?1298589759
IPhone : http://img.clubic.com/07600953-photo-iphone-2g-best.jpg
Flash killed by Apple : http://bryantanner.files.wordpress.com/2010/08/apple_killed_flash_5799.jpg
Google Material Design : https://www.google.com/design/spec/material-design/introduction.html#
Apple VS Google : http://apikabu.ru/img_n/2012-10_4/o7e.jpg
Magritte « Ceci n’est pas une pipe » : http://2.bp.blogspot.com/-ZehJ0JoO1EI/Ui9EUKWJ8KI/
AAAAAAAADZ0/5J6MUjdQrko/s1600/ceci-nest-pas-une-pipe.jpg
Mission Transition : http://www.smashingmagazine.com/2012/02/28/mission-transition/
Like Facebook : http://upload.wikimedia.org/wikipedia/commons/1/13/Facebook_like_thumb.png