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

À 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.

Transcript

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