Interactions : Animations et Interfaces (Blend Web Mix 2014)
•
2 recomendaciones•1,381 vistas
Edit : Cette présentation contient un chapitre de plus (Comment communique-t-on sur les animations ?) que celle de Paris Web. --------------------- 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.
Recomendados
Recomendados
Más contenido relacionado
Destacado
Destacado (20)
Similar a Interactions : Animations et Interfaces (Blend Web Mix 2014)
Similar a Interactions : Animations et Interfaces (Blend Web Mix 2014) (15)
Interactions : Animations et Interfaces (Blend Web Mix 2014)
- 1. Interactions : Animations et interfaces Olivia Lor - UX Designer chez ekino. @Melle_Tweek #BlendWebMix
- 19. Définition 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)
- 21. Comment en est-on arrivé là ?
- 23. 1967 Première apparition dans les jeux vidéo
- 25. 1995 Qu’en est-il du web ?
- 27. JavaScript
- 29. 2000 L’âge d’or des sites animés
- 31. 2006 Une interface de programmation facilitant le développement d’animation
- 34. ©DR
- 36. 2010 Le déclin d’une technologie au profit d’une autre
- 39. 2014 Une manière différente de concevoir les animations
- 41. ©pikabu.ru
- 44. $
- 45. $
- 47. SKEUOMORPHISME
- 52. BA Définition TRANSITION nom féminin État, degré intermédiaire, passage progressif entre deux états, deux situations. (Larousse)
- 63. • Squashandstretch • Slowinandslow out • Staging Applicationdes principes d’animation
- 65. • Anticipation • Squashandstretch • Slowinandslow out • Secondarydetails • Staging http://ux-mobile.fr/mobx-2014-animations-pour-interface-utilisateur/ Applicationdes principes d’animation
- 68. L’ATTENTIONDE L’UTILISATEUR? 1Où veut-on porter le regard de l’utilisateur ?
- 69. 2 FRÉQUENCEDES ANIMATIONS? Quel est le volume d’animations auquel vous souhaitez exposer l’utilisateur ?
- 70. LEBUTDE L’ANIMATION? 3Est-ce que l’animation est là pour attirer l’attention de l’utilisateur ? Est-ce une transition ? Ou tout simplement un lien entre des objets ?
- 71. LAMÉCANIQUE DE L’ANIMATION? 4L’animation est-elle déclenchée par l’action d’un utilisateur ou de manière indirecte (élément dans la page qui se charge ou un scroll ?)
- 78. 3
- 83. Batman : The Dark Knight Returns #3, page 42 Lesonomatopéesviennentdelabandedessinéeetserventàdécrireunmouvementàtraversleson qu’ilpeutémettre.
- 85. Communiquerles animations Storyboard Apparition du filet gris de gauche à droite /! Le filet ne prend pas toute la largeur de l’écran. Il y a des marges à gauche et à droite. Le nom du site ainsi que sa baseline apparaissent du filet du bas vers le haut. Le mot « Chargement » apparait en fondu et fait une pulsation alpha (fade in / fade out) pendant toute la durée du chargement. Le début du chargement s’annonce par le remplissage du filet gris avec une barre jaune. Le bloc « Devices » apparait en fondu au début du chargement.
- 89. 3 Enconclusion
- 91. merci. Partagez vos impressions sur Twitter : @Melle_Tweek #BlendWebMix www.ekino.com
- 92. 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
- 93. 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/
- 94. 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 Présentation « Design in Motion : The new frontier of Interaction desgin » Antonio De Pasquale (Feb. 2014) http://fr.slideshare.net/antoniodepasquale/design-in-motion-the-new-frontier-of-interaction-design 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/