Interactions :
Animations et interfaces
Olivia Lor - UX Designer chez ekino.
@Melle_Tweek #BlendWebMix
3
OliviaLor
UXDesigner
chezekino
WaltDisneyStudio:
undesplusgrands
acteursde
l’animation
WaltDisneyStudio
©WaltDisneyAnimationStudios
WaltDisneyStudio
Deuxpionniersde
l’animationauseinde
WaltDisneyStudio:
FrankThomas
&OllieJohns...
3
Les12principes
d’animation
12principes
d’animation
1.SquashandStretch
(élasticité)
http://31.media.tumblr.com/
23599728d69aaee2dfe440b0f
ae1418c/
tum...
12principes
d’animation
2.Anticipation
http://33.media.tumblr.com/
e0f1476023817047ea757bea5b
ee924b/
tumblr_n4rq4fLeYx1tx...
12principes
d’animation
3.Staging
(miseenscène)
http://38.media.tumblr.com/
693e3afe54ccdbf32da530885
34cc596/
tumblr_n4rq...
12principes
d’animation
4.Straightahead
actionandposeto
pose
(toutel’actiond’un
coup/partiepar
partie)
http://31.media.tum...
12principes
d’animation
5.Followthroughand
overlappingaction
(continuitédu
mouvementinitialet
chevauchementde
deuxmouvemen...
12principes
d’animation
6.Slowinandslow
out
(accélérationet
décélération)
http://38.media.tumblr.com/
1b333b53b545a0395a91...
12principes
d’animation
7.Arcs
(trajectoirearquée)
http://38.media.tumblr.com/
d27d01901530cd2d791f9d1b16
d375b6/
tumblr_n...
12principes
d’animation
8.Secondaryaction
(détailssecondaires
enmouvement)
http://31.media.tumblr.com/
42e2d745bed420c3ea1...
12principes
d’animation
9.Timing
(cadence)
http://38.media.tumblr.com/
854108db6690b07fb05ca7a49
e3e00ab/
tumblr_n4row2fvJ...
12principes
d’animation
10.Exagération
http://33.media.tumblr.com/
5e1e8583ed03f1fc2248c29bc98
8fdc6/
tumblr_n4rovcm0hn1tx...
12principes
d’animation
11.Soliddrawing
(réalismedudessin)
http://38.media.tumblr.com/
449b2df509f0acc081862d50
acddd70a/
...
12principes
d’animation
12.Appeal(charisme)
http://33.media.tumblr.com/
5d4cb8e2abb700da4ba4108
bb9dcbbbd/
tumblr_n4robdL8...
Définition ANIMATION
nom féminin Toute méthode consistant à filmer image par
image des dessins ou des marionnettes qui par...
Lesanimationsdans
lesinterfaces
reprennentles
principesd’animation
classique.
http://
the12principles.tumblr.com/
12princi...
Comment en est-on arrivé là ?
3
Unpeud’histoire
1967
Première apparition dans les jeux vidéo
1995
Qu’en est-il du web ?
JavaScript
2000
L’âge d’or des sites animés
2006
Une interface de programmation facilitant le
développement d’animation
2007
Une révolution
©DR
2010
Le déclin d’une technologie au profit d’une autre
2014
Une manière différente de
concevoir les animations
https://www.google.com/design/spec/material-design/introduction.html
Wechallengedourselves
tocreateavisual
languageforouru...
©pikabu.ru
3
Àquoisertune
animation?
DONNERDELA
PERSONNALITÉÀ
VOTREINTERFACE1
$
$
2
CRÉERUNE
MÉTAPHOREDU
RÉELPOURUNE
MEILLEURE
COMPRÉHENSION
SKEUOMORPHISME
DONNERLE
CONTEXTE
3
http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2013/10/ScrollingAnimated.gif
http://media.mediatemple.netdna-c...
Donnerlecontexte
Google+:une
applicationquiguide
l’utilisateur.
©SmashingMagazine
BA
Définition TRANSITION
nom féminin État, degré intermédiaire, passage progressif
entre deux états, deux situations.
(Lar...
6CATÉGORIES
DETRANSITIONS
Orientation
Extensionspatiale
Actionscontextuelles
Focalisation
Feedback
Feedforward
6catégoriesde
transitions
Orientation:
Lamanièrelaplus
logiquedepasser
d’unétatAàunétatB.
Ex:Tournerlespages
d’unlivre.
ht...
Extensionspatiale:
Réduirelacomplexité
d’uneinterfaceen
étendantsonespace
virtuel.
Ex:Faireapparaitrele
détaild’une
inform...
6catégoriesde
transitions
Actions
contextuelles:
Actionsqui
apparaissenten
fonctionducontexte.
Ex:Lebouton
“Supprimer”lié
...
6catégoriesde
transitions
Focalisation:
Dispositifpermettant
deseconcentrersur
l’actionprincipale.
Ex:Leflousur
l’arrièrep...
6catégoriesde
transitions
Feedback:Retour
immédiatsurl’action
d’unutilisateur.
Ex:Indiquerl’actionà
effectuerlorsqu’on
tir...
6catégoriesde
transitions
Feedforward :
Dispositifmontrantles
actionspossibles.
Ex:Lebouton
“Déverrouiller”quise
metensurb...
Avez-vousrepéréquelsprincipesd’animationontétéutilisés?
Applicationdes
principes
d’animation
Squashandstretch
Slowinandslowout
©TheVerge
• Soliddrawing
Applicationdes
principes
d’animation
• Squashandstretch
• Slowinandslow
out
• Staging
Applicationdes
principes
d’animation
• Staging
Applicationdes
principes
d’animation
• Anticipation
• Squashandstretch
• Slowinandslow
out
• Secondarydetails
• Staging
http://ux-mobile.fr/mobx-2014-animation...
• Anticipation
• Staging
Applicationdes
principes
d’animation
3
Commentbien
utiliserles
animations?
L’ATTENTIONDE
L’UTILISATEUR?
1Où veut-on porter le regard de l’utilisateur ?
2
FRÉQUENCEDES
ANIMATIONS?
Quel est le volume d’animations auquel vous
souhaitez exposer l’utilisateur ?
LEBUTDE
L’ANIMATION?
3Est-ce que l’animation est là pour attirer
l’attention de l’utilisateur ? Est-ce une transition ?
Ou...
LAMÉCANIQUE DE
L’ANIMATION?
4L’animation est-elle déclenchée par l’action d’un
utilisateur ou de manière indirecte (élémen...
3
Quelquesbonnes
pratiques
TESTER
TESTER
TESTER
TESTER
TESTER
TESTERTESTER
TESTER
TESTER
TESTER
1
TESTER
TESTER
TESTER
TESTER
TESTER
TESTERTESTER
TESTER
TESTER
TESTER
2
UX/Créa
DéveloppeurChefdeprojet
Quiestresponsabledesanimations?
UX/Créa
Chefdeprojet Développeur
Réponse:toutlemonde.
3
3TESTER
TESTER
TESTER
TESTER
TESTER
TESTERTESTER
TESTER
TESTER
TESTER
3
Comment
communique-t-on
surlesanimations?
Communiquerles
animations
Desoutilspour
animer
Keynote/PPT
AfterEffect
EdgeAnimate …
InVision
Webdesigner
Communiquerles
animations
Onomatopée?
Batman : The Dark Knight Returns #3, page 42
Lesonomatopéesviennentdelabandedessinéeetserventàdécrireunmouvementàtraversle...
Communiquerles
animations
Sketching
©www.housestachelanimation.com
Communiquerles
animations
Storyboard
Apparition du filet gris de gauche à
droite
/! Le filet ne prend pas toute la
largeur...
Communiquerles
animations
Spécifications
d’interface
Communiquerles
animations
Styleguide
Quidd’unebanqued’animations?
Searchthrough386,845animationsorbrowseanimationsets.
J’enappelleàtousceuxpourraientêtreintére...
3
Enconclusion
Ladifférenceentrequelquechose
debienetquelquechose
d’excellent,estl’attentionqu’onporte
auxdétails. CHARLESR.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/sit...
Sources Lecture
Livre « The Illusion of Life : Disney Animation » Frank Thomas, Ollie Johnston (1981)
Dossier « Animation:...
Sources Article « Kiss Boring Interfaces Goodbye With Apple’s New Animated OS » Leander Kahney (Juin 2007) 
http://archive...
Interactions : Animations et Interfaces (Blend Web Mix 2014)
Interactions : Animations et Interfaces (Blend Web Mix 2014)
Interactions : Animations et Interfaces (Blend Web Mix 2014)
Interactions : Animations et Interfaces (Blend Web Mix 2014)
Interactions : Animations et Interfaces (Blend Web Mix 2014)
Interactions : Animations et Interfaces (Blend Web Mix 2014)
Interactions : Animations et Interfaces (Blend Web Mix 2014)
Interactions : Animations et Interfaces (Blend Web Mix 2014)
Interactions : Animations et Interfaces (Blend Web Mix 2014)
Interactions : Animations et Interfaces (Blend Web Mix 2014)
Prochain SlideShare
Chargement dans…5
×

Interactions : Animations et Interfaces (Blend Web Mix 2014)

890 vues

Publié le

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.

Publié dans : Design
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
890
Sur SlideShare
0
Issues des intégrations
0
Intégrations
53
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Interactions : Animations et Interfaces (Blend Web Mix 2014)

  1. 1. Interactions : Animations et interfaces Olivia Lor - UX Designer chez ekino. @Melle_Tweek #BlendWebMix
  2. 2. 3 OliviaLor UXDesigner chezekino
  3. 3. WaltDisneyStudio: undesplusgrands acteursde l’animation WaltDisneyStudio
  4. 4. ©WaltDisneyAnimationStudios WaltDisneyStudio Deuxpionniersde l’animationauseinde WaltDisneyStudio: FrankThomas &OllieJohnston racontentles procédés d’animation.
  5. 5. 3 Les12principes d’animation
  6. 6. 12principes d’animation 1.SquashandStretch (élasticité) http://31.media.tumblr.com/ 23599728d69aaee2dfe440b0f ae1418c/ tumblr_n4rq4wXp241tx30c0o1 _500.gif ©vincenzolodigiani
  7. 7. 12principes d’animation 2.Anticipation http://33.media.tumblr.com/ e0f1476023817047ea757bea5b ee924b/ tumblr_n4rq4fLeYx1tx30c0o1_5 00.gif ©vincenzolodigiani
  8. 8. 12principes d’animation 3.Staging (miseenscène) http://38.media.tumblr.com/ 693e3afe54ccdbf32da530885 34cc596/ tumblr_n4rq3xrhYu1tx30c0o1_ 500.gif ©vincenzolodigiani
  9. 9. 12principes d’animation 4.Straightahead actionandposeto pose (toutel’actiond’un coup/partiepar partie) http://31.media.tumblr.com/ 849e992a19373475a9d6a692 9571982b/ tumblr_n4rq2vOobA1tx30c0o1 _500.gif ©vincenzolodigiani
  10. 10. 12principes d’animation 5.Followthroughand overlappingaction (continuitédu mouvementinitialet chevauchementde deuxmouvements consécutifs) http://38.media.tumblr.com/ 912d1b0e23d9d3eda7ff64c635 a49501/ tumblr_n4rp3vzY9H1tx30c0o1_5 00.gif ©vincenzolodigiani
  11. 11. 12principes d’animation 6.Slowinandslow out (accélérationet décélération) http://38.media.tumblr.com/ 1b333b53b545a0395a9107f5f d77a486/ tumblr_n4rp2jtnWJ1tx30c0o1_5 00.gif ©vincenzolodigiani
  12. 12. 12principes d’animation 7.Arcs (trajectoirearquée) http://38.media.tumblr.com/ d27d01901530cd2d791f9d1b16 d375b6/ tumblr_n4rp0cHVGG1tx30c0o1_ 500.gif ©vincenzolodigiani
  13. 13. 12principes d’animation 8.Secondaryaction (détailssecondaires enmouvement) http://31.media.tumblr.com/ 42e2d745bed420c3ea1cac7e4 3aeedff/ tumblr_n4roywPwA01tx30c0o 1_500.gif ©vincenzolodigiani
  14. 14. 12principes d’animation 9.Timing (cadence) http://38.media.tumblr.com/ 854108db6690b07fb05ca7a49 e3e00ab/ tumblr_n4row2fvJ71tx30c0o1_5 00.gif ©vincenzolodigiani
  15. 15. 12principes d’animation 10.Exagération http://33.media.tumblr.com/ 5e1e8583ed03f1fc2248c29bc98 8fdc6/ tumblr_n4rovcm0hn1tx30c0o1_ 500.gif ©vincenzolodigiani
  16. 16. 12principes d’animation 11.Soliddrawing (réalismedudessin) http://38.media.tumblr.com/ 449b2df509f0acc081862d50 acddd70a/ tumblr_n4rodcDJai1tx30c0o1_ 500.gif ©vincenzolodigiani
  17. 17. 12principes d’animation 12.Appeal(charisme) http://33.media.tumblr.com/ 5d4cb8e2abb700da4ba4108 bb9dcbbbd/ tumblr_n4robdL86D1tx30c0o 1_500.gif ©vincenzolodigiani
  18. 18. 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)
  19. 19. Lesanimationsdans lesinterfaces reprennentles principesd’animation classique. http:// the12principles.tumblr.com/ 12principes d’animation
  20. 20. Comment en est-on arrivé là ?
  21. 21. 3 Unpeud’histoire
  22. 22. 1967 Première apparition dans les jeux vidéo
  23. 23. 1995 Qu’en est-il du web ?
  24. 24. JavaScript
  25. 25. 2000 L’âge d’or des sites animés
  26. 26. 2006 Une interface de programmation facilitant le développement d’animation
  27. 27. 2007 Une révolution
  28. 28. ©DR
  29. 29. 2010 Le déclin d’une technologie au profit d’une autre
  30. 30. 2014 Une manière différente de concevoir les animations
  31. 31. https://www.google.com/design/spec/material-design/introduction.html Wechallengedourselves tocreateavisual languageforourusers thatsynthesizesthe classicprinciplesofgood designwiththe innovationandpossibility oftechnologyand science.Thisismaterial design. Google
  32. 32. ©pikabu.ru
  33. 33. 3 Àquoisertune animation?
  34. 34. DONNERDELA PERSONNALITÉÀ VOTREINTERFACE1
  35. 35. $
  36. 36. $
  37. 37. 2 CRÉERUNE MÉTAPHOREDU RÉELPOURUNE MEILLEURE COMPRÉHENSION
  38. 38. SKEUOMORPHISME
  39. 39. DONNERLE CONTEXTE 3
  40. 40. http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2013/10/ScrollingAnimated.gif http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2013/10/ScrollingNoAnimation.gif Pourvoirlesanimations:
  41. 41. Donnerlecontexte Google+:une applicationquiguide l’utilisateur.
  42. 42. ©SmashingMagazine
  43. 43. BA Définition TRANSITION nom féminin État, degré intermédiaire, passage progressif entre deux états, deux situations. (Larousse)
  44. 44. 6CATÉGORIES DETRANSITIONS Orientation Extensionspatiale Actionscontextuelles Focalisation Feedback Feedforward
  45. 45. 6catégoriesde transitions Orientation: Lamanièrelaplus logiquedepasser d’unétatAàunétatB. Ex:Tournerlespages d’unlivre. http://www.megazine3.de/ home.html
  46. 46. Extensionspatiale: Réduirelacomplexité d’uneinterfaceen étendantsonespace virtuel. Ex:Faireapparaitrele détaild’une information surle mêmeécranaprès actiondel’utilisateur. http://video.capptivate.co/ videos/PeekFold/ PeekFold.hyperesources/ PeekFold.mov 6catégoriesde transitions
  47. 47. 6catégoriesde transitions Actions contextuelles: Actionsqui apparaissenten fonctionducontexte. Ex:Lebouton “Supprimer”lié seulementau messagequ’on souhaiteeffacer.
  48. 48. 6catégoriesde transitions Focalisation: Dispositifpermettant deseconcentrersur l’actionprincipale. Ex:Leflousur l’arrièreplan permettantdese concentrersurles actionsdanslapop in.
  49. 49. 6catégoriesde transitions Feedback:Retour immédiatsurl’action d’unutilisateur. Ex:Indiquerl’actionà effectuerlorsqu’on tireverslebas. http://ux-mobile.fr/ mobx-2014-animations- pour-interface-utilisateur/
  50. 50. 6catégoriesde transitions Feedforward : Dispositifmontrantles actionspossibles. Ex:Lebouton “Déverrouiller”quise metensurbrillance.
  51. 51. Avez-vousrepéréquelsprincipesd’animationontétéutilisés?
  52. 52. Applicationdes principes d’animation Squashandstretch Slowinandslowout ©TheVerge
  53. 53. • Soliddrawing Applicationdes principes d’animation
  54. 54. • Squashandstretch • Slowinandslow out • Staging Applicationdes principes d’animation
  55. 55. • Staging Applicationdes principes d’animation
  56. 56. • Anticipation • Squashandstretch • Slowinandslow out • Secondarydetails • Staging http://ux-mobile.fr/mobx-2014-animations-pour-interface-utilisateur/ Applicationdes principes d’animation
  57. 57. • Anticipation • Staging Applicationdes principes d’animation
  58. 58. 3 Commentbien utiliserles animations?
  59. 59. L’ATTENTIONDE L’UTILISATEUR? 1Où veut-on porter le regard de l’utilisateur ?
  60. 60. 2 FRÉQUENCEDES ANIMATIONS? Quel est le volume d’animations auquel vous souhaitez exposer l’utilisateur ?
  61. 61. 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 ?
  62. 62. 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 ?)
  63. 63. 3 Quelquesbonnes pratiques
  64. 64. TESTER TESTER TESTER TESTER TESTER TESTERTESTER TESTER TESTER TESTER 1
  65. 65. TESTER TESTER TESTER TESTER TESTER TESTERTESTER TESTER TESTER TESTER 2
  66. 66. UX/Créa DéveloppeurChefdeprojet Quiestresponsabledesanimations?
  67. 67. UX/Créa Chefdeprojet Développeur Réponse:toutlemonde.
  68. 68. 3
  69. 69. 3TESTER TESTER TESTER TESTER TESTER TESTERTESTER TESTER TESTER TESTER
  70. 70. 3 Comment communique-t-on surlesanimations?
  71. 71. Communiquerles animations Desoutilspour animer Keynote/PPT AfterEffect EdgeAnimate … InVision Webdesigner
  72. 72. Communiquerles animations Onomatopée?
  73. 73. Batman : The Dark Knight Returns #3, page 42 Lesonomatopéesviennentdelabandedessinéeetserventàdécrireunmouvementàtraversleson qu’ilpeutémettre.
  74. 74. Communiquerles animations Sketching ©www.housestachelanimation.com
  75. 75. 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.
  76. 76. Communiquerles animations Spécifications d’interface
  77. 77. Communiquerles animations Styleguide
  78. 78. Quidd’unebanqued’animations? Searchthrough386,845animationsorbrowseanimationsets. J’enappelleàtousceuxpourraientêtreintéresséspourtravaillersurlacréationd'unsitetype banqued’animations.
  79. 79. 3 Enconclusion
  80. 80. Ladifférenceentrequelquechose debienetquelquechose d’excellent,estl’attentionqu’onporte auxdétails. CHARLESR.SWINDOLL
  81. 81. merci. Partagez vos impressions sur Twitter : @Melle_Tweek #BlendWebMix www.ekino.com
  82. 82. 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
  83. 83. 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/
  84. 84. 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/

×