Post on 02-Jul-2015
description
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)
© 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
3
Olivia Lor UX Designer chez ekino
ANIMATIONnom 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)
© 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
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 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
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
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 L’UTILISATEUR1
2LE BUT DE L’ANIMATION
FRÉQUENCE DES ANIMATIONS3
LA MÉCANIQUE DE L’ANIMATION4
3
Quelques bonnes pratiques
TESTERTESTER
TESTERTESTER
TESTER
TESTERTESTERTESTER
TESTER
TESTER1
TESTERTESTER
TESTERTESTER
TESTER
TESTERTESTERTESTER
TESTER
TESTER2
UX / Créa
DéveloppeurChef de projet
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
© vincenzo lodigiani
Slow in and slow out
Arcs
Secondary action
© vincenzo lodigiani
© vincenzo lodigiani
© vincenzo lodigiani
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
Évolution de l’animation dans les interfaces
19671995
20002006
20072010
2014
Orientation du web vers des technologies
nouvelles pour le support des animations aux
nouveaux terminaux
© Konstantin Kruglov
© Smashing Magazine
TESTERTESTER
TESTERTESTER
TESTER
TESTERTESTERTESTER
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
merci.
Partagez vos impressions sur Twitter : @Melle_Tweek #ParisWeb
www.ekino.com
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
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/ !
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/