Slide 1

Slide 1 text

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

Slide 22

Slide 22 text

Transitions a { color: darkorchid; transition-property: color; transition-duration: 1s; } a:hover { color: orangered; }

Slide 23

Slide 23 text

Animations @keyframes rainbow { 0% { color: darkorchid; } 30% { color: magenta; } 60% { color: orangered; } 100% { color: darkorchid; } } a { animation-name: rainbow; animation-duration: 3s; }

Slide 24

Slide 24 text

Support

Slide 25

Slide 25 text

Si vous avez besoin de préfixes … @-webkit-keyframes rainbow { ... -webkit-transform: … ; … } @keyframes rainbow { ... transform: … ; … }

Slide 26

Slide 26 text

La transition sur le bouton

Slide 27

Slide 27 text

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; }

Slide 34

Slide 34 text

Animer l’étoile @keyframes favorite { to { transform: scale(1.3); } } button.activated .icon { animation-name: favorite; animation-duration: .3s; animation-iteration-count: 1; }

Slide 35

Slide 35 text

button.activated .icon { animation-name: favorite; animation-duration: .3s; animation-iteration-count: 1; animation-fill-mode: forwards; } Garder l’état appliqué au dernier keyframe

Slide 36

Slide 36 text

S’amuser avec les fonctions de timming element { transition-timing-function: … ; }

Slide 37

Slide 37 text

Un peu de fun avec des courbes de bezier !

Slide 38

Slide 38 text

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); }

Slide 39

Slide 39 text

Le menu « off canvas »

Slide 40

Slide 40 text

Masquer / afficher le menu /* masquer le menu */ .menu { transform: translateX(-155px); }

Slide 41

Slide 41 text

/* 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

Slide 42

Slide 42 text

/* animer le contenu */ .menu:hover ~ .content { transform: translateX(155px); } Animer le menu sur un sélecteur adjacent .content, .menu{ transition: transform .3s .25s; }

Slide 43

Slide 43 text

.menu:hover .icon { transform: rotate(180deg); } .menu .icon{ transition: transform .5s .25s; } Animer la flèche

Slide 44

Slide 44 text

L’animation de formulaire

Slide 45

Slide 45 text

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; }

Slide 48

Slide 48 text

/* 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

Slide 49

Slide 49 text

Secouer en cas d’erreur /* créer l’animation */ @keyframes shakeMe { … } /* appliquer l’ animation */ .errors { animation-name: shakeMe; animation-duration: .5s; }

Slide 50

Slide 50 text

.circle{ (…) animation-iteration-count: infinite; animation-direction: alternate; } Bonus : animation d’attente

Slide 51

Slide 51 text

Denise Carbonell Petit Memo des propriétés d’animation CSS

Slide 52

Slide 52 text

Transition transition-property: transform ; transition-duration: 2s ; transition-timing-function: ease ; transition-delay: 1.5s ; ➔ transition: transform 2s ease 1.5s ;

Slide 53

Slide 53 text

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 ;

Slide 54

Slide 54 text

• :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