interactions : animations et interfaces (blend web mix 2014)

Interactions : Animations et interfaces

Olivia Lor - UX Designer chez ekino. @Melle_Tweek #BlendWebMix

Olivia Lor UX Designer chez ekino

Walt Disney Studio : un des plus grands acteurs de l’animation

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.

Les 12 principes d’animation

12 principes d’animation

1. Squash and Stretch (élasticité)

http://31.media.tumblr.com/23599728d69aaee2dfe440b0fae1418c/tumblr_n4rq4wXp241tx30c0o1_500.gif

2. Anticipation http://33.media.tumblr.com/e0f1476023817047ea757bea5bee924b/tumblr_n4rq4fLeYx1tx30c0o1_500.gif

3. Staging (mise en scène)

http://38.media.tumblr.com/693e3afe54ccdbf32da53088534cc596/tumblr_n4rq3xrhYu1tx30c0o1_500.gif

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

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

6. Slow in and slow out (accélération et décélération)

http://38.media.tumblr.com/1b333b53b545a0395a9107f5fd77a486/tumblr_n4rp2jtnWJ1tx30c0o1_500.gif

7. Arcs (trajectoire arquée)

http://38.media.tumblr.com/d27d01901530cd2d791f9d1b16d375b6/tumblr_n4rp0cHVGG1tx30c0o1_500.gif

8. Secondary action (détails secondaires en mouvement)

http://31.media.tumblr.com/42e2d745bed420c3ea1cac7e43aeedff/tumblr_n4roywPwA01tx30c0o1_500.gif

9. Timing (cadence)

http://38.media.tumblr.com/854108db6690b07fb05ca7a49e3e00ab/tumblr_n4row2fvJ71tx30c0o1_500.gif

10. Exagération http://33.media.tumblr.com/5e1e8583ed03f1fc2248c29bc988fdc6/tumblr_n4rovcm0hn1tx30c0o1_500.gif

11. Solid drawing (réalisme du dessin)

http://38.media.tumblr.com/449b2df509f0acc081862d50acddd70a/tumblr_n4rodcDJai1tx30c0o1_500.gif

12. Appeal (charisme)

http://33.media.tumblr.com/5d4cb8e2abb700da4ba4108bb9dcbbbd/tumblr_n4robdL86D1tx30c0o1_500.gif

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/

Comment en est-on arrivé là ?

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

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

À 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.

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

Actions contextuelles : Actions qui apparaissent en fonction du contexte.

Ex : Le bouton “Supprimer” lié seulement au message qu’on souhaite effacer.

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.

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/

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

• Solid drawing

• Squash and stretch • Slow in and slow

out • Staging

• Staging

• Anticipation • Squash and stretch • Slow in and slow

out • Secondary details • Staging

http://ux-mobile.fr/mobx-2014-animations-pour-interface-utilisateur/

• Anticipation • Staging

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 ?)

Quelques bonnes pratiques

TESTERTESTER

TESTER

TESTERTESTERTESTER

TESTER

TESTER1

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.

3TESTER

TESTERTESTER

TESTER

TESTERTESTERTESTER

TESTER

Comment communique-t-on sur les animations ?

Communiquer les animations

Des outils pour animer

Keynote / PPT

After Effect

Edge Animate …

In Vision

Webdesigner

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.

Sketching

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/

Spécifications d’interface

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.

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

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/

interactions : animations et interfaces (blend web mix 2014)

principes danimation2

principes danimation3

principes danimation4

principes danimation5

principes danimation6

principes danimation7

principes danimation8

principes danimation9

Design

chapter 4 creating animations. chapter 4 lessons 1.create...

creating animations – lesson 71 creating animations lesson...

powtoon animations

catalogue animations

test - animations

nicole’s animations

benzene animations

waterfall animations

state of the art on sound and animations in human machine...

css animations

ai for animation and...

jfxpub animations

animations on fire - making web animations fast

1. general description - nxp.com · ports (ssp), three i2c...

mechanics animations

animations tektonik

programme des animations - balgau · 1 programme des...

2d animations

passives animations

introduction file · web viewaurasma is an augmented...