Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Transcript of Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Motion WebDesign
L’animationau service del’expérienceutilisateur
Tony AubéMaitrise Design Multimédia, Université Laval
Motion Designer,Université Laval
Lead Web/Motion designer,Unik Média
t
What Screens Want?Frank Chimero
Le « grain » de l’écran
Flux
is the newFluxFlat“ ”
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
vUtilisabilité
Esthétisme
Émotion
Utilisabilité
Heuristiques d’utilisabilité de
Nielsen
Correspondancedu système avec
le monde réel
Continuité
Positionnementdans 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’étatdu système
Pertinence et design minimaliste
Reconnaissance, diagnostic et récupération des erreurs
Tony
Aubé
Osmo
Feedback
Affordance
Liberté et contrôle de l’utilisateur
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étisme2
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 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
“ ”
• Personnalité • Surprise • Anticipation
Personnalité
Personality MapDOMINANT
SOUMIS
AMICALEHOSTILE
Surprise
Anticipation
Autre
Quatrième dimension
3D
Visualisation d’informations
Storytelling
?
AaronSchurmanSenior Motion UI Designer, Google
Développer et implémenter le « langage cinétique »
de la marque
Grain
Contraste
Espace Blanc
Balance
Harmonie
Alignement
Grain
Balance
Espace Blanc
Harmonie
Contraste
Alignement
Timing
Amortis
Anticipation
Transition
Trajectoire
Orchestration
After Effects Edge Animate Framer JS
Pixate Web Designer
Modèle
KANO
Merci!