Motion

Web

Design
L’animation

au service de

l’expérience

utilisateur
Tony Aubé
Maitrise Design Multimédia,

Université Laval
Motion Designer,

Université Laval
Lead Web/Motion designer,

Unik...
t
What
Screens
Want?
Frank Chimero
Le « grain » 

de l’écran
Flux
is the new
Flux
Flat“ ”
Expérience
Utilisateur
Tout ce qui affecte
l’interaction entre un site
web et ses utilisateurs.“ ”
Pragmatique Hédonique
• Utilité
• Utilisabilité
• Accessibilité
• Fiabilité
• Esthétisme
• Symbolisme
• Émotion
v
Utilisabilité
Esthétisme
Émotion
Utilisabilité
Heuristiques
d’utilisabilité de
Nielsen
Correspondance

du système avec 

le monde réel
Continuité
Positionnement

dans l’espace
« Carte Mentale »
Lien conceptuel
Common Fate
Principes de la gestalt
Cohérence et
standards
Cohérence interne
Cohérence externe
Relation
Parent / Enfant
Zoom
Relation de
continuité
Glissement
Gauche/Droite
Information
complémentaire
Rotation
Attirer et diriger
l’attention
Visibilité de l’état

du système
Pertinence et design
minimaliste
Reconnaissance, diagnostic
et récupération des erreurs
Tony
Aubé
Osmo
Feedback
Affordance
Flexibilité et
efficience
Esthétisme
Formes
Couleurs
Animation
principes
d’animations
12
Slow in, slow out
Compression et étirement
Anticipation et continuité
Arcs
Actions secondaires
Exagération
Timing
Plus une animation est
réaliste, plus elle est
esthétique
Slow in, Slow out
www.the12principles.tumblr.com
Base
Slow in, Slow out
Compression et
étirement
Compression et
étirement
Anticipation et
continuité
Anticipation et
continuité
Trajectoire arquée
Trajectoire arquée
Overlapping
Overlapping
Timing
Exagération
Plus une animation est
réaliste, plus elle est
esthétique
types
d’esthétisme
2
Clean
• Opacité
• Transitions légères
• Invisible
Clean
Wow
• Systèmes de particules
• 3D
• Background video
• Transitions extrêmes
Wow
Émotion
Conveying a certain feeling is the essence
communication. The response of the viewer is an
emotional one, because art spea...
• Personnalité
• Surprise
• Anticipation
Personnalité
Personality Map
DOMINANT
SOUMIS
AMICALEHOSTILE
Surprise
Anticipation
Autre
Quatrième
dimension
3D
Visualisation d’informations
Storytelling
?
Aaron

Schurman
Senior Motion 

UI Designer,
Google
Développer et implémenter
le « langage cinétique »
de la marque
Grain
Contraste
Espace Blanc
Balance
Harmonie
Alignement
Timing
Amortis
Anticipation
Transition
Trajectoire
Orchestration
After Effects Edge Animate Framer JS
Pixate Web Designer
Modèle

KANO
Merci!
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Prochain SlideShare
Chargement dans…5
×

Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

1 031 vues

Publié le

L’animation sur le Web a considérablement gagné en popularité au cours des dernières années. En raison de cette croissance fulgurante, plusieurs designers Web se retrouvent aujourd’hui à devoir faire de l’animation dans le cadre de leurs fonctions. Toutefois, le manque d’expérience et de connaissance du domaine mène souvent à une utilisation maladroite et incohérente de celle-ci. On s’inspire à gauche et à droite sur des sites tels Dribbble ou Awwward sans comprendre le potentiel réel qu’offre ce nouvel outil. En fait, au-delà de son aspect visuellement intéressant, l’animation peut avoir un impact considérable sur l’expérience utilisateur. Au cours de la présentation, nous verrons donc comment l’animation peut contribuer aux principes d’utilisabilité de Nielsen en plus d’améliorer l’esthétisme général de l’interface et de créer une connexion émotionnelle avec l’utilisateur. Nous repasserons aussi sur les principes universels d’animation développés par les studios Walt Disney dans les années 1950 et verrons comment ceux-ci s’appliquent au développement de l’interface utilisateur. Finalement, nous lèverons le voile sur une nouvelle profession de plus en plus en demande à Silicon Valley ; celle de Motion UI Designer.

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

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

Aucune remarque pour cette diapositive

Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

  1. 1. Motion
 Web
 Design L’animation
 au service de
 l’expérience
 utilisateur
  2. 2. Tony Aubé Maitrise Design Multimédia,
 Université Laval Motion Designer,
 Université Laval Lead Web/Motion designer,
 Unik Média
  3. 3. t What Screens Want? Frank Chimero
  4. 4. Le « grain » 
 de l’écran
  5. 5. Flux
  6. 6. is the new Flux Flat“ ”
  7. 7. Expérience Utilisateur
  8. 8. Tout ce qui affecte l’interaction entre un site web et ses utilisateurs.“ ”
  9. 9. Pragmatique Hédonique • Utilité • Utilisabilité • Accessibilité • Fiabilité • Esthétisme • Symbolisme • Émotion
  10. 10. v Utilisabilité Esthétisme Émotion
  11. 11. Utilisabilité
  12. 12. Heuristiques d’utilisabilité de Nielsen
  13. 13. Correspondance
 du système avec 
 le monde réel
  14. 14. Continuité
  15. 15. Positionnement
 dans l’espace
  16. 16. « Carte Mentale »
  17. 17. Lien conceptuel
  18. 18. Common Fate Principes de la gestalt
  19. 19. Cohérence et standards
  20. 20. Cohérence interne
  21. 21. Cohérence externe
  22. 22. Relation Parent / Enfant Zoom
  23. 23. Relation de continuité Glissement Gauche/Droite
  24. 24. Information complémentaire Rotation
  25. 25. Attirer et diriger l’attention
  26. 26. Visibilité de l’état
 du système
  27. 27. Pertinence et design minimaliste
  28. 28. Reconnaissance, diagnostic et récupération des erreurs
  29. 29. Tony Aubé Osmo
  30. 30. Feedback
  31. 31. Affordance
  32. 32. Flexibilité et efficience
  33. 33. Esthétisme
  34. 34. Formes
  35. 35. Couleurs
  36. 36. Animation
  37. 37. principes d’animations 12
  38. 38. Slow in, slow out Compression et étirement Anticipation et continuité Arcs Actions secondaires Exagération Timing
  39. 39. Plus une animation est réaliste, plus elle est esthétique
  40. 40. Slow in, Slow out www.the12principles.tumblr.com
  41. 41. Base
  42. 42. Slow in, Slow out
  43. 43. Compression et étirement
  44. 44. Compression et étirement
  45. 45. Anticipation et continuité
  46. 46. Anticipation et continuité
  47. 47. Trajectoire arquée
  48. 48. Trajectoire arquée
  49. 49. Overlapping
  50. 50. Overlapping
  51. 51. Timing
  52. 52. Exagération
  53. 53. Plus une animation est réaliste, plus elle est esthétique
  54. 54. types d’esthétisme 2
  55. 55. Clean
  56. 56. • Opacité • Transitions légères • Invisible Clean
  57. 57. Wow
  58. 58. • Systèmes de particules • 3D • Background video • Transitions extrêmes Wow
  59. 59. Émotion
  60. 60. Conveying a certain feeling is the essence communication. The response of the viewer is an emotional one, because art speaks to the heart. 
 This gives animation an almost magical ability 
 to reach inside any audience. Frank Thomas and Ollie Johnston, The Walt Disney Company “ ”
  61. 61. • Personnalité • Surprise • Anticipation
  62. 62. Personnalité
  63. 63. Personality Map DOMINANT SOUMIS AMICALEHOSTILE
  64. 64. Surprise
  65. 65. Anticipation
  66. 66. Autre
  67. 67. Quatrième dimension
  68. 68. 3D
  69. 69. Visualisation d’informations
  70. 70. Storytelling
  71. 71. ?
  72. 72. Aaron
 Schurman Senior Motion 
 UI Designer, Google
  73. 73. Développer et implémenter le « langage cinétique » de la marque
  74. 74. Grain Contraste Espace Blanc Balance Harmonie Alignement
  75. 75. Timing Amortis Anticipation Transition Trajectoire Orchestration
  76. 76. After Effects Edge Animate Framer JS Pixate Web Designer
  77. 77. Modèle
 KANO
  78. 78. Merci!

×