Interactions : Animations et Interfaces (Paris Web 2014)
6 j'aime1,567 vues
Ce document traite des principes d'animation appliqués aux interfaces utilisateur, en évoquant 12 principes fondamentaux tels que l'élasticité et l'anticipation, ainsi que l'évolution de l'animation dans le web et les jeux vidéo. Il met en avant l'importance des animations pour améliorer l'expérience utilisateur, en fournissant des conseils pratiques et des références historiques. Enfin, il encourage les tests pour optimiser l'utilisation des animations dans la conception d'interfaces.
Interactions : Animations et Interfaces (Paris Web 2014)
- 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 ?
- 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/
- 61. 3 Quand utiliser les animations ?
- 63. 2LE BUT DE L’ANIMATION
- 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
- 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/