Grâce aux animations CSS3
Améliorer l'expérience utilisateur
Stéphanie Walter - Confoo 2016 - @WalterStephanie
Slide 2
Slide 2 text
Designer web & mobile.
Spécialisée en interface et expérience utilisateur.
Je fais partie de ces gens qui considèrent le CSS comme un outil de design
www.stephaniewalter.fr @WalterStephanie
Disponible en freelance et chez Alsacréations
Slide 3
Slide 3 text
UX ❤ Animations
Où et comment les animations vont guider nos utilisateurs.
Slide 4
Slide 4 text
L’œil humain est attiré par ce qui bouge.
Attirer l’attention de l’utilisateur
Slide 5
Slide 5 text
Le bouton « save » de codepen s’anime si vous oubliez d’enregistrer.
Attirer l’attention sur
des moments critiques
Slide 6
Slide 6 text
Distraire l’utilisateur durant le
chargement
Slide 7
Slide 7 text
En fluidifiant et rendant les changements d’état plus naturels.
Diminuer la charge cognitive
Slide 8
Slide 8 text
Changement violent d’état pour l’utilisateur.
Que vient-il de se passer ?
Slide 9
Slide 9 text
Vous vous souvenez du flipbook?
Slide 10
Slide 10 text
Avec une animation, c’est la machine qui fait ce travail e création des étapes intermédiaires.
Laisser la machine faire le travail
Slide 11
Slide 11 text
Montrer à l’utilisateur que son action a généré une réaction.
Montrer la réactivité de l’interface
Slide 12
Slide 12 text
L’état :active des liens / boutons est la forme la plus simple de retour de l’interface pour l’utilisateur.
Montrer la réactivité de l’interface
via Codrops
Slide 13
Slide 13 text
Montrer la réactivité de l’interface
Slide 14
Slide 14 text
Créer une connexion visuelle entre les éléments qui fonctionnent ensemble.
Montrer la relation entre les éléments
Slide 15
Slide 15 text
via useyourinterface
Montrer la relation entre les éléments
Slide 16
Slide 16 text
D’où vient cet élément ? Où a-t-il disparu ? Comment le faire réapparaitre ?
Organiser l’espace de l’interface
Slide 17
Slide 17 text
via Val Head
Organiser l’espace
Slide 18
Slide 18 text
En proposant une expérience utilisateur unique et mémorable.
Générer du plaisir
Slide 19
Slide 19 text
codepend.io
Apporter du plaisir
Slide 20
Slide 20 text
via capptivate.co
Montrer sa personnalité
Slide 21
Slide 21 text
Denise Carbonell
Code basique pour vous lancer dans les animations CSS.
Sémantique & Syntaxe
Transition de color au :hover
button {
border: 2px solid;
color: rgb(255,255,255);
}
button:hover {
color: rgb(255, 167, 15);
}
Slide 28
Slide 28 text
Transition de color au :hover
button {
border: 2px solid;
color: rgb(255,255,255);
transition-property: color;
transition-duration: .3s;
}
button:hover {
color: rgb(255, 167, 15);
}
Slide 29
Slide 29 text
Un effet de bouton enfoncé avec :active
button:active {
transform: translateY(2px);
}
Slide 30
Slide 30 text
Animer l’étoile avec le pseudo-element :after
/* transition de pseudo élément*/
button:active:after {
transform: scale(1.3);
}
button:after {
transition: transform .3;
}
Pour animer un pseudo élément, l’ordre est important : pseudo classe PUIS pseudo élément.
Slide 31
Slide 31 text
L’animation du bouton
Slide 32
Slide 32 text
Animer du SVG inline
/* colorer le SVG */
button .icon {
fill: currentColor;
}
Slide 33
Slide 33 text
Animer du SVG inline
/* colorer le SVG */
button .icon {
fill: currentColor;
}
button:hover {
color: rgb(255, 167, 15);
}
button {
transition: color .3s;
}
La fausse case à cocher
/* Styler une fausse checkbox */
.checkbox + label:before {
background: rgb(255, 255, 255);
border: 1px solid rgb(216, 216, 216);
}
Slide 46
Slide 46 text
L’animation sur :checked
/* une transition quand on coche */
.checkbox:checked + label:before {
background: rgb(0,158,186);
border-color: rgb(4,126,147);
}
/* appliquer la transition */
.checkbox + label:before {
transition:
background .2s,
border-color .2s;
}
Slide 47
Slide 47 text
Animer la coche
/* la réduire quand elle n’est pas visible */
.checkbox:not(:checked) + label:after {
transform: scale(0);
}
/* la rafficher quand on coche la case */
.checkbox:checked + label:after {
transform: scale(1);
}
/* appliquer la transition */
.checkbox + label:after {
transition: transform .4s;
}
• :hover, :active, :focus
• :checked, :invalid, :required,
etc.
• : target
• click, focus, blur, submit, etc.
• .nom-de-classe
➔ Créer l’animations en CSS,
ajouter les classes pour la
déclencher en.
CSS JavaScript
Déclencheurs
Slide 55
Slide 55 text
Les propriétés que le navigateur peut animer de manière fluide.
Opacity, transform & filter = ❤
learn more about animations properties performance
Slide 56
Slide 56 text
Utiliser ces outils à bon escient.
De grands pouvoirs …
Slide 57
Slide 57 text
Mon animation distrait-elle l’utilisateur dans
l’accomplissement de sa tâche ?
Keep it Simple
Slide 58
Slide 58 text
Mon animation fait-elle attendre l’utilisateur ? Est-elle fluide ?
Keep it Short
Slide 59
Slide 59 text
Mon animation est-elle utile ? Apporte-elle réellement quelque
chose à l’interface ?
Keep it Meaningful
Slide 60
Slide 60 text
Les animations font partie du processus de design !
Communiquer & trouver de l’inspiration
Slide 61
Slide 61 text
3 états d’une recherche avancée animée pour communiquer l’animation au développeur.
Prototype papier dans les premières étapes du projet
Slide 62
Slide 62 text
Utiliser un gif / une video pour communiquer et valider les animations avec le client / développeur.
Le sacro saint Gif animé
Slide 63
Slide 63 text
Tester ses animations dans un vrai navigateur avec des utilisateurs au début du projet.
Le prototype HTML/CSS rapide
Slide 64
Slide 64 text
http://dan-silver.github.io/
ElementTransitions/
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
Partagés sous licence Attribution - Pas d’Utilisation Commerciale - Pas de Modification 3.0 France
Designer web & mobile.
Spécialisée en interface et expérience utilisateur.
www.stephaniewalter.fr @WalterStephanie
inpx.it/css-animations-ux-confoo-2016
Slide 67
Slide 67 text
• Animation and UX ressources by Rachel Nabors -
@rachelnabors
• Animation & UX ressources by Val Head - @vlh
Crédits & Liens
• Interface Animations - A workshop with Mark Geyer
• Google Web Fundamentals on Animations
• (Accadémique) Animation: From Cartoons to the User Interface by Bay-Wei Chang and
David Ungar
• (Accadémique) Animation Support in a User Interface Toolkit: Flexible, Robust, and
Reusable Abstractions by Scott E. Hudson and John T. Stasko