Grâce aux animations CSS3
Améliorer l'expérience utilisateur
Stéphanie Walter - Confoo 2016 - @WalterStephanie
Designer web & mobile.
Spécialisée en interface et expérience utilisateur.
Je fais partie de ces gens qui considèrent le C...
UX ❤ Animations
Où et comment les animations vont guider nos utilisateurs.
L’œil humain est attiré par ce qui bouge.
Attirer l’attention de l’utilisateur
Le bouton « save » de codepen s’anime si vous oubliez d’enregistrer.
Attirer l’attention sur
des moments critiques
Distraire l’utilisateur durant le
chargement
En fluidifiant et rendant les changements d’état plus naturels.
Diminuer la charge cognitive
Changement violent d’état pour l’utilisateur.
Que vient-il de se passer ?
Vous vous souvenez du flipbook?
Avec une animation, c’est la machine qui fait ce travail e création des étapes intermédiaires.
Laisser la machine faire le...
Montrer à l’utilisateur que son action a généré une réaction.
Montrer la réactivité de l’interface
L’état :active des liens / boutons est la forme la plus simple de retour de l’interface pour l’utilisateur.
Montrer la réa...
Montrer la réactivité de l’interface
Créer une connexion visuelle entre les éléments qui fonctionnent ensemble.
Montrer la relation entre les éléments
via useyourinterface
Montrer la relation entre les éléments
D’où vient cet élément ? Où a-t-il disparu ? Comment le faire réapparaitre ?
Organiser l’espace de l’interface
via Val Head
Organiser l’espace
En proposant une expérience utilisateur unique et mémorable.
Générer du plaisir
codepend.io
Apporter du plaisir
via capptivate.co
Montrer sa personnalité
Denise Carbonell
Code basique pour vous lancer dans les animations CSS.
Sémantique & Syntaxe
Transitions
a {
color: darkorchid;
transition-property: color;
transition-duration: 1s;
}
a:hover {
color: orangered;
}
Transition
transition-property: transform ;
transition-duration: 2s ;
transition-timing-function: ease ;
transition-delay:...
Animations
@keyframes rainbow {
0% {
color: darkorchid;
}
30% {
color: magenta;
}
60% {
color: orangered;
}
100% {
color: ...
Animation
animation-name: shakeIt ;
animation-duration: 300ms ;
animation-timing-function: ease ;
animation-iteration-coun...
• :hover, :active, :focus
• :checked, :invalid, :required,
etc.
• : target
• click, focus, blur, submit, etc.
• .nom-de-cl...
Les propriétés que le navigateur peut animer de manière fluide.
Opacity, transform & filter = ❤
learn more about animation...
Support
Si vous avez besoin de préfixes …
@-webkit-keyframes rainbow {
...
-webkit-transform: … ;
…
}
@keyframes rainbow {
...
tra...
La transition sur le bouton
Transition de color au :hover
button {
border: 2px solid;
color: rgb(255,255,255);
}
button:hover {
color: rgb(255, 167, 1...
Transition de color au :hover
button {
border: 2px solid;
color: rgb(255,255,255);
transition-property: color;
transition-...
Un effet de bouton enfoncé avec :active
button:active {
transform: translateY(2px);
}
Animer l’étoile avec le pseudo-element :after
/* transition de pseudo élément*/
button:active:after {
transform: scale(1.3...
L’animation du bouton
Animer du SVG inline
/* colorer le SVG */
button .icon {
fill: currentColor;
}
Animer du SVG inline
/* colorer le SVG */
button .icon {
fill: currentColor;
}
button:hover {
color: rgb(255, 167, 15);
}
...
Animer l’étoile
@keyframes favorite {
to {
transform: scale(1.3);
}
}
button.activated .icon {
animation-name: favorite;
a...
button.activated .icon {
animation-name: favorite;
animation-duration: .3s;
animation-iteration-count: 1;
animation-fill-m...
S’amuser avec les
fonctions de timming
element {
transition-timing-function: … ;
}
Un peu de fun avec des courbes de bezier !
Jouer avec l’étoile et cubic-bezier
button.activated .icon {
animation-name: favorite;
animation-duration: .3s;
animation-...
Le menu « off canvas »
Masquer / afficher le menu
/* masquer le menu */
.menu {
transform: translateX(-155px);
}
/* masquer le menu */
.menu {
transform: translateX(-155px);
}
/* l’afficher au :hover */
.menu:hover {
transform: transla...
/* animer le contenu */
.menu:hover ~ .content {
transform: translateX(155px);
}
Animer le menu sur un sélecteur adjacent
...
.menu:hover .icon {
transform: rotate(180deg);
}
.menu .icon{
transition: transform .5s .25s;
}
Animer la flèche
L’animation de formulaire
La fausse case à cocher
/* Styler une fausse checkbox */
.checkbox + label:before {
background: rgb(255, 255, 255);
border...
L’animation sur :checked
/* une transition quand on coche */
.checkbox:checked + label:before {
background: rgb(0,158,186)...
Animer la coche
/* la réduire quand elle n’est pas visible */
.checkbox:not(:checked) + label:after {
transform: scale(0);...
/* créer l’animation */
@keyframes shakeMe {
0%, 100% {
transform: translateX(0);
}
20%, 60% {
transform: translateX(-10px...
Secouer en cas d’erreur
/* créer l’animation */
@keyframes shakeMe {
…
}
/* appliquer l’ animation */
.errors {
animation-...
.circle{
(…)
animation-iteration-count: infinite;
animation-direction: alternate;
}
Bonus : animation d’attente
Utiliser ces outils à bon escient.
De grands pouvoirs …
Mon animation distrait-elle l’utilisateur dans
l’accomplissement de sa tâche ?
Keep it Simple
Mon animation fait-elle attendre l’utilisateur ? Est-elle fluide ?
Keep it Short
Mon animation est-elle utile ? Apporte-elle réellement quelque
chose à l’interface ?
Keep it Meaningful
Les animations font partie du processus de design !
Communiquer & trouver de l’inspiration
3 états d’une recherche avancée animée pour communiquer l’animation au développeur.
Prototype papier dans les premières ét...
Utiliser un gif / une video pour communiquer et valider les animations avec le client / développeur.
Le sacro saint Gif an...
Tester ses animations dans un vrai navigateur avec des utilisateurs au début du projet.
Le prototype HTML/CSS rapide
http://dan-silver.github.io/
ElementTransitions/
Partagés sous licence Attribution - Pas d’Utilisation Commerciale - Pas de Modification 3.0 France
Designer web & mobile.
...
• Animation and UX ressources by Rachel Nabors -
@rachelnabors
• Animation & UX ressources by Val Head - @vlh
Crédits & Li...
 Améliorer l'expérience utilisateur grâce aux animations CSS3
Prochain SlideShare
Chargement dans…5
×

Améliorer l'expérience utilisateur grâce aux animations CSS3

831 vues

Publié le

À travers de cas concrets illustrés, nous verrons comment créer des animations performantes grâce à CSS3 (et un peu de JavaScript) qui vont, si utilisées à bon escient, améliorer grandement l’expérience de vos utilisateurs. Au programme : transitions de boutons et animations d'icônes en SVG, menu off-canvas full CSS, customisation de checkboxs et améliorer la visibilité et compréhension des erreurs de formulaires grâce à des animations.

Publié dans : Design
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
831
Sur SlideShare
0
Issues des intégrations
0
Intégrations
14
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Améliorer l'expérience utilisateur grâce aux animations CSS3

  1. 1. Grâce aux animations CSS3 Améliorer l'expérience utilisateur Stéphanie Walter - Confoo 2016 - @WalterStephanie
  2. 2. 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
  3. 3. UX ❤ Animations Où et comment les animations vont guider nos utilisateurs.
  4. 4. L’œil humain est attiré par ce qui bouge. Attirer l’attention de l’utilisateur
  5. 5. Le bouton « save » de codepen s’anime si vous oubliez d’enregistrer. Attirer l’attention sur des moments critiques
  6. 6. Distraire l’utilisateur durant le chargement
  7. 7. En fluidifiant et rendant les changements d’état plus naturels. Diminuer la charge cognitive
  8. 8. Changement violent d’état pour l’utilisateur. Que vient-il de se passer ?
  9. 9. Vous vous souvenez du flipbook?
  10. 10. Avec une animation, c’est la machine qui fait ce travail e création des étapes intermédiaires. Laisser la machine faire le travail
  11. 11. Montrer à l’utilisateur que son action a généré une réaction. Montrer la réactivité de l’interface
  12. 12. 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
  13. 13. Montrer la réactivité de l’interface
  14. 14. Créer une connexion visuelle entre les éléments qui fonctionnent ensemble. Montrer la relation entre les éléments
  15. 15. via useyourinterface Montrer la relation entre les éléments
  16. 16. D’où vient cet élément ? Où a-t-il disparu ? Comment le faire réapparaitre ? Organiser l’espace de l’interface
  17. 17. via Val Head Organiser l’espace
  18. 18. En proposant une expérience utilisateur unique et mémorable. Générer du plaisir
  19. 19. codepend.io Apporter du plaisir
  20. 20. via capptivate.co Montrer sa personnalité
  21. 21. Denise Carbonell Code basique pour vous lancer dans les animations CSS. Sémantique & Syntaxe
  22. 22. Transitions a { color: darkorchid; transition-property: color; transition-duration: 1s; } a:hover { color: orangered; }
  23. 23. Transition transition-property: transform ; transition-duration: 2s ; transition-timing-function: ease ; transition-delay: 1.5s ; ➔ transition: transform 2s ease 1.5s ;
  24. 24. Animations @keyframes rainbow { 0% { color: darkorchid; } 30% { color: magenta; } 60% { color: orangered; } 100% { color: darkorchid; } } a { animation-name: rainbow; animation-duration: 3s; }
  25. 25. Animation animation-name: shakeIt ; animation-duration: 300ms ; animation-timing-function: ease ; animation-iteration-count: 1 ; animation-direction: normal ; animation-play-state: running ; animation-delay: 1.5s ; animation-fill-mode: none ; @keyframes shakeIt { 0% { … } 100% { … } } ➔ animation: shakeIt 300ms ease 1 normal running 1.5s none ;
  26. 26. • :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
  27. 27. Les propriétés que le navigateur peut animer de manière fluide. Opacity, transform & filter = ❤ learn more about animations properties performance
  28. 28. Support
  29. 29. Si vous avez besoin de préfixes … @-webkit-keyframes rainbow { ... -webkit-transform: … ; … } @keyframes rainbow { ... transform: … ; … }
  30. 30. La transition sur le bouton
  31. 31. Transition de color au :hover button { border: 2px solid; color: rgb(255,255,255); } button:hover { color: rgb(255, 167, 15); }
  32. 32. 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); }
  33. 33. Un effet de bouton enfoncé avec :active button:active { transform: translateY(2px); }
  34. 34. 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.
  35. 35. L’animation du bouton
  36. 36. Animer du SVG inline /* colorer le SVG */ button .icon { fill: currentColor; }
  37. 37. Animer du SVG inline /* colorer le SVG */ button .icon { fill: currentColor; } button:hover { color: rgb(255, 167, 15); } button { transition: color .3s; }
  38. 38. Animer l’étoile @keyframes favorite { to { transform: scale(1.3); } } button.activated .icon { animation-name: favorite; animation-duration: .3s; animation-iteration-count: 1; }
  39. 39. button.activated .icon { animation-name: favorite; animation-duration: .3s; animation-iteration-count: 1; animation-fill-mode: forwards; } Garder l’état appliqué au dernier keyframe
  40. 40. S’amuser avec les fonctions de timming element { transition-timing-function: … ; }
  41. 41. Un peu de fun avec des courbes de bezier !
  42. 42. Jouer avec l’étoile et cubic-bezier button.activated .icon { animation-name: favorite; animation-duration: .3s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.01, 1.93, 1, 1.6); }
  43. 43. Le menu « off canvas »
  44. 44. Masquer / afficher le menu /* masquer le menu */ .menu { transform: translateX(-155px); }
  45. 45. /* masquer le menu */ .menu { transform: translateX(-155px); } /* l’afficher au :hover */ .menu:hover { transform: translateX(0); } .menu { transition: transform .3s .25s; } Masquer / afficher le menu
  46. 46. /* animer le contenu */ .menu:hover ~ .content { transform: translateX(155px); } Animer le menu sur un sélecteur adjacent .content, .menu{ transition: transform .3s .25s; }
  47. 47. .menu:hover .icon { transform: rotate(180deg); } .menu .icon{ transition: transform .5s .25s; } Animer la flèche
  48. 48. L’animation de formulaire
  49. 49. La fausse case à cocher /* Styler une fausse checkbox */ .checkbox + label:before { background: rgb(255, 255, 255); border: 1px solid rgb(216, 216, 216); }
  50. 50. 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; }
  51. 51. 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; }
  52. 52. /* créer l’animation */ @keyframes shakeMe { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } } Secouer en cas d’erreur
  53. 53. Secouer en cas d’erreur /* créer l’animation */ @keyframes shakeMe { … } /* appliquer l’ animation */ .errors { animation-name: shakeMe; animation-duration: .5s; }
  54. 54. .circle{ (…) animation-iteration-count: infinite; animation-direction: alternate; } Bonus : animation d’attente
  55. 55. Utiliser ces outils à bon escient. De grands pouvoirs …
  56. 56. Mon animation distrait-elle l’utilisateur dans l’accomplissement de sa tâche ? Keep it Simple
  57. 57. Mon animation fait-elle attendre l’utilisateur ? Est-elle fluide ? Keep it Short
  58. 58. Mon animation est-elle utile ? Apporte-elle réellement quelque chose à l’interface ? Keep it Meaningful
  59. 59. Les animations font partie du processus de design ! Communiquer & trouver de l’inspiration
  60. 60. 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
  61. 61. Utiliser un gif / une video pour communiquer et valider les animations avec le client / développeur. Le sacro saint Gif animé
  62. 62. Tester ses animations dans un vrai navigateur avec des utilisateurs au début du projet. Le prototype HTML/CSS rapide
  63. 63. http://dan-silver.github.io/ ElementTransitions/
  64. 64. 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
  65. 65. • 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

×