Lien vers la vidéo de la conférence : http://www.paris-web.fr/2014/conferences/interactions-animations-et-interfaces.php La conception d'une interface repose sur un grand nombre de disciplines. Être UX designer demande des compétences en architecture de l'information, ergonomie, ou même en design d'interface. Devoir penser à toutes ces disciplines pour obtenir une bonne expérience utilisateur, peut parfois nous amener à oublier certains détails qui peuvent la rendre meilleure. Je parle ici d'animation. Ces animations sont la narration de nos interfaces, celles qui vont créer un produit plus riche, plus engageant qui induira un bénéfice émotionnel chez l'utilisateur. Cependant, d'où vient le concept d'animation ? Pourquoi est-il si important dans nos interfaces ? Cette présentation a pour but de démontrer comment les animations sont devenues indispensables au quotidien et faire un état des lieux de l'existant. Lien de la conférence : http://www.paris-web.fr/2014/conferences/interactions-animations-et-interfaces.php

1. Interactions :
Animations et interfaces
Olivia Lor - UX Designer chez ekino.
@Melle_Tweek #ParisWeb

2. © Walt Disney Animation Studios

4. © Walt Disney Animation Studios
Walt Disney Studio
Frank Thomas
& Ollie Johnston

6. 3
Les 12 principes
d’animation

7. 12 principes
d’animation
1. Squash and Stretch
(élasticité)
© vincenzo lodigiani

8. 12 principes
d’animation
2. Anticipation
© vincenzo lodigiani

9. 12 principes
d’animation
3. Staging
(mise en scène)
© vincenzo lodigiani

10. 12 principes
d’animation
4. Straight ahead
action and pose to
pose
(toute l’action d’un
coup / partie par
partie)
© vincenzo lodigiani

11. 12 principes
d’animation
5. Follow through and
overlapping action
(continuité du
mouvement initial et
chevauchement de
deux mouvements
consécutifs)
© vincenzo lodigiani

12. 12 principes
d’animation
6. Slow in and slow
out
(accélération et
décélération)
© vincenzo lodigiani

13. 12 principes
d’animation
7. Arcs
(trajectoire
arquée)
© vincenzo lodigiani

14. 12 principes
d’animation
8. Secondary action
(détails secondaires
en mouvement)
© vincenzo lodigiani

15. 12 principes
d’animation
9. Timing
(cadence)
© vincenzo lodigiani

16. 12 principes
d’animation
10. Exagération
© vincenzo lodigiani

17. 12 principes
d’animation
11. Solid
drawing
(réalisme du
dessin)
© vincenzo lodigiani

18. 12 principes
d’animation
12. Appeal
(charisme)
© vincenzo lodigiani

19. 3
Olivia Lor
UX Designer
chez ekino

20. 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)

21. 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)

22. © vincenzo lodigiani
Squash and stretch
Anticipation
© vincenzo lodigiani
Follow through and overlapping action
© vincenzo lodigiani
Slow in and slow out
Arcs
Secondary action
© vincenzo lodigiani
© vincenzo lodigiani
© vincenzo lodigiani

27. 3
Un peu d’histoire

28. 1967

30. 1995

32. JavaScript

34. 2000

36. 2006

38. 2007

39. © DR

41. 2010

44. 2014

45. https://www.google.com/design/spec/material-design/introduction.html
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

46. © pikabu.ru

47. 3
À quoi sert une
animation ?

50. © Konstantin Kruglov

51. © Smashing Magazine

52. AB

54. 6 CATÉGORIES
Orientation
Extension spatiale
Actions contextuelles
Focalisation
Feedback
Feedforward

55. Transitions
Orientation
© The verge
© The Verge

56. Extension spatiale
© Google
Transitions

57. Transitions
Actions
contextuelles
http://john.do/delete-drafts/

58. Transitions
Focalisation

59. Transitions
Feedback
http://ux-mobile.fr/mobx-2014-animations-pour-interface-utilisateur/

60. Transitions
Feedforward

61. 3
Quand utiliser les
animations ?

62. L’ATTENTION DE
1L’UTILISATEUR

63. 2LE BUT DE
L’ANIMATION

64. FRÉQUENCE
3DES ANIMATIONS

65. LA MÉCANIQUE DE
4L’ANIMATION

67. 3
Quelques bonnes
pratiques

68. 1
TESTER
TESTER
TESTER TESTER
TESTER
TESTERTESTER
TESTER
TESTER
TESTER

69. 2
TESTER
TESTER
TESTER TESTER
TESTER
TESTERTESTER
TESTER
TESTER
TESTER

70. UX / Créa
Chef de projet Développeur

71. UX / Créa
Chef de projet Développeur

72. 3

73. 3
En conclusion

74. © vincenzo lodigiani
Squash and stretch
Anticipation
© vincenzo lodigiani
Follow through and overlapping action
© vincenzo lodigiani
Slow in and slow out
Arcs
Secondary action
© vincenzo lodigiani
© vincenzo lodigiani
© vincenzo lodigiani

75. Évolution de l’animation dans les interfaces
Apparition des
animations dans
les jeux vidéo
!
Apparition de
l’animation dans le
web
Explosion de
l’animation dans le
web
!
Le développement
des animations
devient vraiment
simple
Les animations de
qualité se
démocratisent et
font leurs
apparitions sur
mobile
Une nouvelle
manière de
concevoir les
animations
1967
1995
2000
2006
2007
2010
2014
Orientation du web vers
des technologies
nouvelles pour le support
des animations aux
nouveaux terminaux

77. © Konstantin Kruglov

78. © Smashing Magazine

80. TESTER
TESTER
TESTER
TESTER
TESTERTESTER
TESTER
TESTER
TESTER
TESTER

81. 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

82. Partagez vos impressions sur Twitter :
@Melle_Tweek
#ParisWeb
www.ekino.com
merci.

83. 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-of-
Life.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

84. Sources Lecture
!
Livre « The Illusion of Life : Disney Animation » Frank Thomas, Ollie Johnston (1981) !
Dossier « Animation: can it facilitate? » Barbara Tversky, Julie Bauer Morrison, Mireille Betrancourt (2002)
https://web.cs.dal.ca/~sbrooks/csci4166-6406/seminars/readings/Tversky_AnimationFacilitate_IJHCS02.pdf !
Dossier « Does Animation in User Interfaces Improve Decision Making » Cleotilde Gonzalez (Avr. 1996) !
Article « Smart Transitions In User Experience Design » Adrian Zumbrunnen (23 Oct. 2013)
http://www.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/ !
Dossier « Applying Cartoon Animation Techniques to Graphical User Interfaces » Bruce H. Thomas, Paul Calder
(Sept. 2001)
http://www.itu.dk/courses/DMPI/E2005/exercises_reading/readingWell/animatedInterfaces/p198-thomas.pdf !
Article « Mission Transition » Mark Cossey (28 Fév. 2012)
http://www.smashingmagazine.com/2012/02/28/mission-transition/ !
Dossier « Animated Versus Static User Interfaces: A Study of Mathsigner » Scott Dyer, Nicoletta Adamo-Villani (21
Fév. 2008)
http://waset.org/publications/9299/animated-versus-static-user-interfaces-a-study-of-mathsigner- !
Article « Motion and The Clay of Interaction Design » David Malouf (23 Mars 2011)
http://johnnyholland.org/2011/03/motion-and-the-clay-of-interaction-design/ !
Article « Motion UI Design Principles » Grant Liddall (7 Avr. 2014)
http://www.beyondkinetic.com/motion-ui-design-principles/2014/4/4/motion-ui-design-principles !
Article « Interfaces That Flow: Transitions as Design Elements » Jonathan Follet (26 Avr. 2007)
http://www.uxmatters.com/mt/archives/2007/04/interfaces-that-flow-transitions-as-design-elements.php !
Dossier « Material Design » Google Design Guidelines (2014)
http://www.google.com/design/spec/material-design/introduction.html !
Article « Meaningful Transitions - Motion Graphics in User Interface » Johannes Tonollo (Juil. 2011)
http://interface.fh-potsdam.de/showcase/what/meaningful-transitions-motion-graphics-in-the-user-interface/ !
Article « UI Design: Animation » Dmitry Fadeev (26 Oct. 2007)
http://www.pixelshell.com/blog/ui-design-animation/ !
Article « Guidelines for Multimedia on the Web » Jakob Nielsen (1 Déc. 1995)
http://www.nngroup.com/articles/guidelines-for-multimedia-on-the-web/ !
Article « Interfaces That Flow: Transitions as Design Elements » Jonathan Follett (26 Avr. 2007)
http://www.uxmatters.com/mt/archives/2007/04/interfaces-that-flow-transitions-as-design-elements.php !
Article « Animation for Attention and Comprehension » Aurora Bedford (21 Sept. 2014)
http://www.nngroup.com/articles/animation-usability/ !
Article « Are Apple UI designers learning from Pixar? » John Blackburn (14 Juin 2007)
http://watchingapple.com/2007/06/are-apple-ui-designers-learning-from-pixar/ !

85. Sources Article « Kiss Boring Interfaces Goodbye With Apple’s New Animated OS » Leander Kahney (Juin 2007)
http://archive.wired.com/software/coolapps/news/2007/06/core_anim?currentPage=all !
Article « Web Animations: the good, the bad and how to do them better » Jamie Graham (15 Avr. 2014)
http://domain7.com/blog/web-animations-good-bad-and-how-do-them-better !
Présentation « Motion & Gesture: Interactions in the digital age » Antonio De Pasquale, Simone Lippolis (Déc.
2013)
http://fr.slideshare.net/antoniodepasquale/motion-gesture-interactions-in-the-digital-age !!
Bibliothèque d’animations
!
http://ui-animations.tumblr.com/
http://hoverstat.es/
http://capptivate.co/
http://tympanus.net/codrops/
http://sixux.com/
http://www.prettyloaded.com/
http://tapotype.com/
http://littlebigdetails.com/