Interactions : 
Animations et interfaces 
Olivia Lor - UX Designer chez ekino. 
@Melle_Tweek #ParisWeb
© Walt Disney Animation Studios
© Walt Disney Animation Studios 
Walt Disney Studio 
Frank Thomas 
& Ollie Johnston
3 
Les 12 principes 
d’animation
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) 
...
12 principes 
d’animation 
5. Follow through and 
overlapping action 
(continuité du 
mouvement initial et 
chevauchement ...
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
3 
Olivia Lor 
UX Designer 
chez ekino
ANIMATION 
nom féminin Toute méthode consistant à filmer image par image 
des dessins ou des marionnettes qui paraitront a...
ANIMATION (dans une interface) 
nom féminin Une série d’images variantes présentée 
dynamiquement en fonction de l’action ...
© vincenzo lodigiani 
Squash and stretch 
Anticipation 
© vincenzo lodigiani 
Follow through and overlapping action 
© vin...
3 
Un peu d’histoire
1967
1995
JavaScript
2000
2006
2007
© DR
2010
2014
https://www.google.com/design/spec/material-design/introduction.html 
We challenged ourselves 
to create a visual 
languag...
© pikabu.ru
3 
À quoi sert une 
animation ?
© Konstantin Kruglov
© Smashing Magazine
AB
6 CATÉGORIES 
Orientation 
Extension spatiale 
Actions contextuelles 
Focalisation 
Feedback 
Feedforward
Transitions 
Orientation 
© The verge 
© The Verge
Extension spatiale 
© Google 
Transitions
Transitions 
Actions 
contextuelles 
http://john.do/delete-drafts/
Transitions 
Focalisation
Transitions 
Feedback 
http://ux-mobile.fr/mobx-2014-animations-pour-interface-utilisateur/
Transitions 
Feedforward
3 
Quand utiliser les 
animations ?
L’ATTENTION DE 
1L’UTILISATEUR
2LE BUT DE 
L’ANIMATION
FRÉQUENCE 
3DES ANIMATIONS
LA MÉCANIQUE DE 
4L’ANIMATION
3 
Quelques bonnes 
pratiques
1 
TESTER 
TESTER 
TESTER TESTER 
TESTER 
TESTERTESTER 
TESTER 
TESTER 
TESTER
2 
TESTER 
TESTER 
TESTER TESTER 
TESTER 
TESTERTESTER 
TESTER 
TESTER 
TESTER
UX / Créa 
Chef de projet Développeur
UX / Créa 
Chef de projet Développeur
3
3 
En conclusion
© vincenzo lodigiani 
Squash and stretch 
Anticipation 
© vincenzo lodigiani 
Follow through and overlapping action 
© vin...
Évolution de l’animation dans les interfaces 
Apparition des 
animations dans 
les jeux vidéo 
! 
Apparition de 
l’animati...
© Konstantin Kruglov
© Smashing Magazine
TESTER 
TESTER 
TESTER 
TESTER 
TESTERTESTER 
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. CHARLE...
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.co...
Sources Lecture 
! 
Livre « The Illusion of Life : Disney Animation » Frank Thomas, Ollie Johnston (1981) ! 
Dossier « Ani...
Sources Article « Kiss Boring Interfaces Goodbye With Apple’s New Animated OS » Leander Kahney (Juin 2007) 
http://archive...
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Interactions : Animations et Interfaces (Paris Web 2014)
Prochain SlideShare
Chargement dans…5
×

Interactions : Animations et Interfaces (Paris Web 2014)

986 vues

Publié le

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

Publié dans : Design
0 commentaire
5 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
986
Sur SlideShare
0
Issues des intégrations
0
Intégrations
33
Actions
Partages
0
Téléchargements
26
Commentaires
0
J’aime
5
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Interactions : Animations et Interfaces (Paris Web 2014)

  1. 1. Interactions : Animations et interfaces Olivia Lor - UX Designer chez ekino. @Melle_Tweek #ParisWeb
  2. 2. © Walt Disney Animation Studios
  3. 3. © Walt Disney Animation Studios Walt Disney Studio Frank Thomas & Ollie Johnston
  4. 4. 3 Les 12 principes d’animation
  5. 5. 12 principes d’animation 1. Squash and Stretch (élasticité) © vincenzo lodigiani
  6. 6. 12 principes d’animation 2. Anticipation © vincenzo lodigiani
  7. 7. 12 principes d’animation 3. Staging (mise en scène) © vincenzo lodigiani
  8. 8. 12 principes d’animation 4. Straight ahead action and pose to pose (toute l’action d’un coup / partie par partie) © vincenzo lodigiani
  9. 9. 12 principes d’animation 5. Follow through and overlapping action (continuité du mouvement initial et chevauchement de deux mouvements consécutifs) © vincenzo lodigiani
  10. 10. 12 principes d’animation 6. Slow in and slow out (accélération et décélération) © vincenzo lodigiani
  11. 11. 12 principes d’animation 7. Arcs (trajectoire arquée) © vincenzo lodigiani
  12. 12. 12 principes d’animation 8. Secondary action (détails secondaires en mouvement) © vincenzo lodigiani
  13. 13. 12 principes d’animation 9. Timing (cadence) © vincenzo lodigiani
  14. 14. 12 principes d’animation 10. Exagération © vincenzo lodigiani
  15. 15. 12 principes d’animation 11. Solid drawing (réalisme du dessin) © vincenzo lodigiani
  16. 16. 12 principes d’animation 12. Appeal (charisme) © vincenzo lodigiani
  17. 17. 3 Olivia Lor UX Designer chez ekino
  18. 18. 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)
  19. 19. 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)
  20. 20. © 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
  21. 21. 3 Un peu d’histoire
  22. 22. 1967
  23. 23. 1995
  24. 24. JavaScript
  25. 25. 2000
  26. 26. 2006
  27. 27. 2007
  28. 28. © DR
  29. 29. 2010
  30. 30. 2014
  31. 31. 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
  32. 32. © pikabu.ru
  33. 33. 3 À quoi sert une animation ?
  34. 34. © Konstantin Kruglov
  35. 35. © Smashing Magazine
  36. 36. AB
  37. 37. 6 CATÉGORIES Orientation Extension spatiale Actions contextuelles Focalisation Feedback Feedforward
  38. 38. Transitions Orientation © The verge © The Verge
  39. 39. Extension spatiale © Google Transitions
  40. 40. Transitions Actions contextuelles http://john.do/delete-drafts/
  41. 41. Transitions Focalisation
  42. 42. Transitions Feedback http://ux-mobile.fr/mobx-2014-animations-pour-interface-utilisateur/
  43. 43. Transitions Feedforward
  44. 44. 3 Quand utiliser les animations ?
  45. 45. L’ATTENTION DE 1L’UTILISATEUR
  46. 46. 2LE BUT DE L’ANIMATION
  47. 47. FRÉQUENCE 3DES ANIMATIONS
  48. 48. LA MÉCANIQUE DE 4L’ANIMATION
  49. 49. 3 Quelques bonnes pratiques
  50. 50. 1 TESTER TESTER TESTER TESTER TESTER TESTERTESTER TESTER TESTER TESTER
  51. 51. 2 TESTER TESTER TESTER TESTER TESTER TESTERTESTER TESTER TESTER TESTER
  52. 52. UX / Créa Chef de projet Développeur
  53. 53. UX / Créa Chef de projet Développeur
  54. 54. 3
  55. 55. 3 En conclusion
  56. 56. © 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
  57. 57. É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
  58. 58. © Konstantin Kruglov
  59. 59. © Smashing Magazine
  60. 60. TESTER TESTER TESTER TESTER TESTERTESTER TESTER TESTER TESTER TESTER
  61. 61. 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
  62. 62. Partagez vos impressions sur Twitter : @Melle_Tweek #ParisWeb www.ekino.com merci.
  63. 63. 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
  64. 64. 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/ !
  65. 65. 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/

×