Check these out next
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur - Tony Aubé at WAQ15
5 likes
views
Follow me on: Twitter: https://twitter.com/aubetony Medium: https://medium.com/@tonyaub 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. This talk was given on April 18, 2015, at Web à Quebec, in Quebec city: http://2015.webaquebec.org/activite/motion-web-design-lanimation-au-service-de-lexperience-utilisateur/
Recommended
Motion Web Design: l'Animation au Service de l'Expérience Utilisateur - Tony Aubé at WAQ15
- 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
- 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 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 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!