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!