interactions : animations et interfaces (blend web mix 2014)
DESCRIPTION
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.TRANSCRIPT
Interactions : Animations et interfaces
Olivia Lor - UX Designer chez ekino. @Melle_Tweek #BlendWebMix
3
Olivia Lor UX Designer chez ekino
Walt Disney Studio : un des plus grands acteurs de l’animation
Walt Disney Studio
© Walt Disney Animation Studios
Walt Disney Studio
Deux pionniers de l’animation au sein de Walt Disney Studio : Frank Thomas & Ollie Johnston racontent les procédés d’animation.
3
Les 12 principes d’animation
12 principes d’animation
1. Squash and Stretch (élasticité)
http://31.media.tumblr.com/23599728d69aaee2dfe440b0fae1418c/tumblr_n4rq4wXp241tx30c0o1_500.gif
© vincenzo lodigiani
12 principes d’animation
2. Anticipation http://33.media.tumblr.com/e0f1476023817047ea757bea5bee924b/tumblr_n4rq4fLeYx1tx30c0o1_500.gif
© vincenzo lodigiani
12 principes d’animation
3. Staging (mise en scène)
http://38.media.tumblr.com/693e3afe54ccdbf32da53088534cc596/tumblr_n4rq3xrhYu1tx30c0o1_500.gif
© vincenzo lodigiani
12 principes d’animation
4. Straight ahead action and pose to pose (toute l’action d’un coup / partie par partie)
http://31.media.tumblr.com/849e992a19373475a9d6a6929571982b/tumblr_n4rq2vOobA1tx30c0o1_500.gif
© vincenzo lodigiani
12 principes d’animation
5. Follow through and overlapping action (continuité du mouvement initial et chevauchement de deux mouvements consécutifs)
http://38.media.tumblr.com/912d1b0e23d9d3eda7ff64c635a49501/tumblr_n4rp3vzY9H1tx30c0o1_500.gif
© vincenzo lodigiani
12 principes d’animation
6. Slow in and slow out (accélération et décélération)
http://38.media.tumblr.com/1b333b53b545a0395a9107f5fd77a486/tumblr_n4rp2jtnWJ1tx30c0o1_500.gif
© vincenzo lodigiani
12 principes d’animation
7. Arcs (trajectoire arquée)
http://38.media.tumblr.com/d27d01901530cd2d791f9d1b16d375b6/tumblr_n4rp0cHVGG1tx30c0o1_500.gif
© vincenzo lodigiani
12 principes d’animation
8. Secondary action (détails secondaires en mouvement)
http://31.media.tumblr.com/42e2d745bed420c3ea1cac7e43aeedff/tumblr_n4roywPwA01tx30c0o1_500.gif
© vincenzo lodigiani
12 principes d’animation
9. Timing (cadence)
http://38.media.tumblr.com/854108db6690b07fb05ca7a49e3e00ab/tumblr_n4row2fvJ71tx30c0o1_500.gif
© vincenzo lodigiani
12 principes d’animation
10. Exagération http://33.media.tumblr.com/5e1e8583ed03f1fc2248c29bc988fdc6/tumblr_n4rovcm0hn1tx30c0o1_500.gif
© vincenzo lodigiani
12 principes d’animation
11. Solid drawing (réalisme du dessin)
http://38.media.tumblr.com/449b2df509f0acc081862d50acddd70a/tumblr_n4rodcDJai1tx30c0o1_500.gif
© vincenzo lodigiani
12 principes d’animation
12. Appeal (charisme)
http://33.media.tumblr.com/5d4cb8e2abb700da4ba4108bb9dcbbbd/tumblr_n4robdL86D1tx30c0o1_500.gif
© vincenzo lodigiani
Définition 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)
Les animations dans les interfaces reprennent les principes d’animation classique. http://the12principles.tumblr.com/
12 principes d’animation
Comment en est-on arrivé là ?
3
Un peu d’histoire
1967Première apparition dans les jeux vidéo
1995Qu’en est-il du web ?
JavaScript
2000L’âge d’or des sites animés
2006Une interface de programmation facilitant le
développement d’animation
2007Une révolution
© DR
2010Le déclin d’une technologie au profit d’une autre
2014Une manière différente de
concevoir les animations
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 ?
DONNER DE LA PERSONNALITÉ À VOTRE INTERFACE1
$
$
2CRÉER UNE MÉTAPHORE DU RÉEL POUR UNE MEILLEURE COMPRÉHENSION
SKEUOMORPHISME
DONNER LE CONTEXTE 3
http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2013/10/ScrollingAnimated.gifhttp://media.mediatemple.netdna-cdn.com/wp-content/uploads/2013/10/ScrollingNoAnimation.gif
Pour voir les animations :
Donner le contexte
Google + : une application qui guide l’utilisateur.
© Smashing Magazine
BADéfinition TRANSITION
nom féminin État, degré intermédiaire, passage progressif entre deux états, deux situations.
(Larousse)
6 CATÉGORIES DE TRANSITIONS
Orientation
Extension spatiale
Actions contextuelles
Focalisation
Feedback
Feedforward
6 catégories de transitions
Orientation : La manière la plus logique de passer d’un état A à un état B.
Ex : Tourner les pages d’un livre. http://www.megazine3.de/home.html
Extension spatiale : Réduire la complexité d’une interface en étendant son espace virtuel.
Ex : Faire apparaitre le détail d’une information sur le même écran après action de l’utilisateur. http://video.capptivate.co/videos/PeekFold/PeekFold.hyperesources/PeekFold.mov
6 catégories de transitions
6 catégories de transitions
Actions contextuelles : Actions qui apparaissent en fonction du contexte.
Ex : Le bouton “Supprimer” lié seulement au message qu’on souhaite effacer.
6 catégories de transitions
Focalisation : Dispositif permettant de se concentrer sur l’action principale.
Ex : Le flou sur l’arrière plan permettant de se concentrer sur les actions dans la pop in.
6 catégories de transitions
Feedback : Retour immédiat sur l’action d’un utilisateur.
Ex : Indiquer l’action à effectuer lorsqu’on tire vers le bas. http://ux-mobile.fr/mobx-2014-animations-pour-interface-utilisateur/
6 catégories de transitions
Feedforward : Dispositif montrant les actions possibles.
Ex : Le bouton “Déverrouiller” qui se met en surbrillance.
Avez-vous repéré quels principes d’animation ont été utilisés ?
Application des principes d’animation
Squash and stretch Slow in and slow out
© The Verge
• Solid drawing
Application des principes d’animation
• Squash and stretch • Slow in and slow
out • Staging
Application des principes d’animation
• Staging
Application des principes d’animation
• Anticipation • Squash and stretch • Slow in and slow
out • Secondary details • Staging
http://ux-mobile.fr/mobx-2014-animations-pour-interface-utilisateur/
Application des principes d’animation
• Anticipation • Staging
Application des principes d’animation
3
Comment bien utiliser les animations ?
L’ATTENTION DE L’UTILISATEUR ?1Où veut-on porter le regard de l’utilisateur ?
2 FRÉQUENCE DES ANIMATIONS ?Quel est le volume d’animations auquel vous souhaitez exposer l’utilisateur ?
LE BUT DE 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 ?
LA MÉ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 ?)
3
Quelques bonnes pratiques
TESTERTESTER
TESTERTESTER
TESTER
TESTERTESTERTESTER
TESTER
TESTER1
TESTERTESTER
TESTERTESTER
TESTER
TESTERTESTERTESTER
TESTER
TESTER2
UX / Créa
DéveloppeurChef de projet
Qui est responsable des animations ?
UX / Créa
Chef de projet Développeur
Réponse : tout le monde.
3
3TESTER
TESTERTESTER
TESTER
TESTER
TESTERTESTERTESTER
TESTER
TESTER
3
Comment communique-t-on sur les animations ?
Communiquer les animations
Des outils pour animer
Keynote / PPT
After Effect
Edge Animate …
In Vision
Webdesigner
Communiquer les animations
Onomatopée ?
Batman : The Dark Knight Returns #3, page 42
Les onomatopées viennent de la bande dessinée et servent à décrire un mouvement à travers le son qu’il peut émettre.
Communiquer les animations
Story board
!
Renault!VO!RWD!–!Spécifications!!!
! Spécifications!–!Renault!VO!RWD! Page!10!/!112!
3.2.3. Story board Les écrans du story board ne sont pas contractuels, seules les animations le sont.
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.
A la fin du chargement, tout disparait en fondu blanc pour laisser place au site.
Sur mobile, notification demande d’autorisation de géolocalisation.
http://www.renault.fr/vehicules-occasion/
Communiquer les animations
Spécifications d’interface
Communiquer les animations
Style guide
Quid d’une banque d’animations ?
Search through 386,845 animations or browse animation sets.
J’en appelle à tous ceux pourraient être intéressés pour travailler sur la création d'un site type banque d’animations.
3
En conclusion
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 #BlendWebMix
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
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/