Save 37% off PRO during our Black Friday Sale! »

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

F383c6a4dc55e331bbe2987b622cee6b?s=47 Stéphanie Walter
February 25, 2016

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.

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

February 25, 2016
Tweet

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/

  65. None
  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