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

158
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

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

Motion WebDesign

L’animationau service del’expérienceutilisateur

Page 2: 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 Média

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

t

What Screens Want?Frank Chimero

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

Le « grain » de l’écran

Page 6: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 7: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 8: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 9: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 10: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 11: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 12: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Flux

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

is the newFluxFlat“ ”

Page 14: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 15: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 16: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 17: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 18: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Expérience Utilisateur

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

Tout ce qui affecte l’interaction entre un site web et ses utilisateurs.“ ”

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

Pragmatique Hédonique

• Utilité • Utilisabilité • Accessibilité • Fiabilité

• Esthétisme • Symbolisme • Émotion

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

vUtilisabilité

Esthétisme

Émotion

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

Utilisabilité

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

Heuristiques d’utilisabilité de

Nielsen

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

Correspondancedu système avec

le monde réel

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

Continuité

Page 27: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 28: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 29: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 30: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 31: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 32: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 33: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Positionnementdans l’espace

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

« Carte Mentale »

Page 35: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 36: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 37: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 38: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Lien conceptuel

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

Common Fate Principes de la gestalt

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

Cohérence et standards

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

Cohérence interne

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

Cohérence externe

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

Relation Parent / Enfant

Zoom

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

Relation de continuité

Glissement Gauche/Droite

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

Information complémentaire

Rotation

Page 49: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 50: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 51: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Attirer et diriger l’attention

Page 52: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 53: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 54: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 55: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 56: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 57: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 58: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Visibilité de l’étatdu système

Page 59: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 60: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 61: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 62: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Pertinence et design minimaliste

Page 63: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 64: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 65: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 66: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 67: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Reconnaissance, diagnostic et récupération des erreurs

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

Tony

Aubé

Osmo

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

Feedback

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

Affordance

Page 71: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 72: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 73: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 74: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 75: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

 Liberté et contrôle de l’utilisateur 

Flexibilité et efficience

Page 76: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 77: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 78: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Esthétisme

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

Formes

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

Couleurs

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

Animation

Page 83: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 84: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 85: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

principes d’animations

12

Page 86: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 87: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 88: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 89: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 90: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Slow in, slow out Compression et étirement Anticipation et continuité

Arcs Actions secondaires

Exagération Timing

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

Plus une animation est réaliste, plus elle est

esthétique

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

Slow in, Slow out

www.the12principles.tumblr.com

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

Base

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

Slow in, Slow out

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

Compression et étirement

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

Compression et étirement

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

Anticipation et continuité

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

Anticipation et continuité

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

Trajectoire arquée

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

Trajectoire arquée

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

Overlapping

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

Overlapping

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

Timing

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

Exagération

Page 105: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 106: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 107: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Plus une animation est réaliste, plus elle est

esthétique

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

types d’esthétisme2

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

Clean

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

• Opacité • Transitions légères • Invisible

Clean

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

Wow

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

• Systèmes de particules • 3D • Background video • Transitions extrêmes

Wow

Page 115: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 116: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 117: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Émotion

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

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

“ ”

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

• Personnalité • Surprise • Anticipation

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

Personnalité

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

Personality MapDOMINANT

SOUMIS

AMICALEHOSTILE

Page 123: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 124: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 125: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 126: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 127: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 128: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Surprise

Page 129: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 130: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 131: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 132: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 133: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Anticipation

Page 134: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 135: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 136: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 137: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Autre

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

Quatrième dimension

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

3D

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

Visualisation d’informations

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

Storytelling

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

?

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

AaronSchurmanSenior Motion UI Designer, Google

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

Développer et implémenter le « langage cinétique »

de la marque

Page 146: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 147: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 148: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 149: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Grain

Contraste

Espace Blanc

Balance

Harmonie

Alignement

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

Grain

Balance

Espace Blanc

Harmonie

Contraste

Alignement

Timing

Amortis

Anticipation

Transition

Trajectoire

Orchestration

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

After Effects Edge Animate Framer JS

Pixate Web Designer

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

Modèle

KANO

Page 153: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 154: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 155: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 156: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 157: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur
Page 158: Motion Web Design: l'Animation au Service de l'Expérience Utilisateur

Merci!