Tricher grâce à l'UX quand il n'y plus de code optimisable

Slide 1

Slide 1 text

quand il n'y plus de code optimisable Stéphanie Walter — @WalterStephanie Tricher grâce à l'UX

Slide 2

Slide 2 text

Illustration by Laurence V. UX & Visual designer. Mobile enthusiast Pixel and CSS Lover. Travails pour l’Université de Luxembourg www.stephaniewalter.fr @WalterStephanie

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

“ “ (Nielsen, 1994; Bouch, 2000) 10 seconds is about the limit for keeping the user's attention focused

Slide 5

Slide 5 text

2016 - étude Google’s DoubleClick. Des utilisateurs mobiles encore moins patients

Slide 6

Slide 6 text

Perception de l’attente Mieux comprendre notre cerveau pour améliorer nos interfaces

Slide 7

Slide 7 text

La perception du temps : un processus cognitif non linéaire Image “Why Performance Matters, Part 2: Perception Management” by Denys Mishunov

Slide 8

Slide 8 text

La perception du temps • Dépend du moment de la mesure • Varie selon différents critères externes : • complexité de la tache • état de la personne : stress, etc. • référentiel par rapport à d’autres interfaces similaires Image “Why Performance Matters, Part 2: Perception Management” by Denys Mishunov

Slide 9

Slide 9 text

Modèle de la porte attentionnelle de l’évaluation prospective du temps   (Branaghan, R.J. and Sanchez + Zakay, D. and Block, R.A) Stimulation Pacemaker interne Porte attentionnelle Attention aux signaux temporels Mémoire de travail

Slide 10

Slide 10 text

Réduire le niveau de stimulation ou détourner l’attention pour réduire la durée du temps perçu Stimulation Pacemaker interne Porte attentionnelle Attention aux signaux temporels Mémoire de travail

Slide 11

Slide 11 text

Attente active VS attente passive Image “Why Performance Matters, Part 2: Perception Management” by Denys Mishunov

Slide 12

Slide 12 text

Corrélation entre attente et niveau de satisfaction Site “normal” Site ralenti de 500ms

Slide 13

Slide 13 text

Rassurer les utilisateurs En proposant une interface réactive quelque soit le temps d’attente

Slide 14

Slide 14 text

0 - 100ms Assurer la réactivité instantanée de l’interface

Slide 15

Slide 15 text

Réactivité instantanée de l’interface Indiquer que l’action de touch/click a bien été prise en compte par l’interface

Slide 16

Slide 16 text

0 - 1 seconde L’interface travaille, délai acceptable

Slide 17

Slide 17 text

2 - 10 secondes Rassurer l’utilisateur avec des indicateurs d’attente indéterminés

Slide 18

Slide 18 text

“ Tout va bien, l’interface est en train de travailler ”

Slide 19

Slide 19 text

C’est pas mon site / app qui est lent mais mon appareil Utiliser des indicateurs d’attente système

Slide 20

Slide 20 text

S’il n’y a pas de réel délai, un indicateur d’attente peut devenir perturbant Image Perceived Performance – Don’t Forget the User

Slide 21

Slide 21 text

Personnaliser l’indicateur de manière fun et ludique

Slide 22

Slide 22 text

Faites preuve de créativité

Slide 23

Slide 23 text

Cas pratique : la mouette et les news

Slide 24

Slide 24 text

Au delà de 10 secondes Informer l’utilisateur sur la progression

Slide 25

Slide 25 text

“ “ (Guillaume Gronier, Carine Lallemand 2012) La barre de progression augmente le temps d’attente perçue mais augmente la satisfaction utilisateur.

Slide 26

Slide 26 text

Bonnes pratiques • Éviter les indicateurs statiques

Slide 27

Slide 27 text

Bonnes pratiques • Éviter les indicateurs statiques • Expliquer ce qui prend du temps

Slide 28

Slide 28 text

Bonnes pratiques • Éviter les indicateurs statiques • Expliquer ce qui prend du temps • Montrer la progression (en % ou en étapes)

Slide 29

Slide 29 text

Bonnes pratiques • Éviter les indicateurs statiques • Expliquer ce qui prend du temps • Montrer la progression (en % ou en étapes) • Proposer une alternative si c’est trop long (mettre en pause, faire autre chose)

Slide 30

Slide 30 text

“ Une barre constante avec une augmentation rapide du défilement sur la fin augmente la satisfaction utilisateur ” (Harrison, Amento, Kuznetsov et Bell - 2007 ) Différents types de barres de progression

Slide 31

Slide 31 text

“ Les barres de progression présentant un effet animé de style nervures - se déplaçant vers l’arrière en décélérant - ont permis de réduire la perception du temps d’attente de 11% ” (Harrison, Yeo et Hudson - 2010 ) Différents types de barres de progression

Slide 32

Slide 32 text

Diminuer le temps d’attente perçu Faire semblant et détourner l’attention des utilisateurs

Slide 33

Slide 33 text

Une interface optimiste Afficher le résultat de l’action sous 100ms même si elle n’est pas terminée

Slide 34

Slide 34 text

Le coeur est mis a jour directement, le chiffre après le retour serveur Bouton like sur twitter

Slide 35

Slide 35 text

En cas d’échec le bouton revient à son état initial Gestion des erreurs : retour à l’état initial

Slide 36

Slide 36 text

Changement de statut optimiste On part du principe que tout ira bien et on change le statut dans l’application au touch du bouton

Slide 37

Slide 37 text

Gestion des erreurs On inverse l’état et on informe l’utilisateur

Slide 38

Slide 38 text

Gestion des erreurs : action de l’utilisateur

Slide 39

Slide 39 text

Détourner l’attention de l’attente Garder l’utilisateur en mode attente active le plus longtemps possible

Slide 40

Slide 40 text

Crocodiles dans le tram à Amsterdam GVBeestje de Daniel Disselkoen

Slide 41

Slide 41 text

Instagram commence à charger les photos pendant que l’utilisateur est occupé à remplir les données Occuper l’utilisateur à autre chose Chargement de la photo

Slide 42

Slide 42 text

Squelette d’interface pour éviter la page blanche Le message est personnalisable sur Slack

Slide 43

Slide 43 text

Éviter la page blanche : squelette d’interface Attention quand le squelette ne ressemble plus vraiment au contenu chargé

Slide 44

Slide 44 text

Chargement et affichage progressif des éléments d’interface

Slide 45

Slide 45 text

Affichage progressif de l’interface + placeholders

Slide 46

Slide 46 text

Affichage progressif de l’interface

Slide 47

Slide 47 text

Éviter la page blanche : anticiper les prochaines pages Si mon utilisateur commence à entrer du texte dans un champ de recherche, on peut précharger les éléments de la page de recherche en tâche de fond

Slide 48

Slide 48 text

Utiliser les animations Pour diminuer la perception du temps d’attente

Slide 49

Slide 49 text

Transitions entre les pages

Slide 50

Slide 50 text

Animer les arrivées et départs de contenus Gagner du temps pour réellement créer l’élément coté serveur via Val Head

Slide 51

Slide 51 text

Cas pratique : application de streaming télésurveillance

Slide 52

Slide 52 text

Accélérer n’est pas toujours la solution Les utilisateurs s’attendent à ce que certaines actions soient plus lentes

Slide 53

Slide 53 text

“ Ça ne peut pas être aussi rapide, il y a du y avoir un souci quelque part !” - moi, la première fois que j’ai vu cette notification

Slide 54

Slide 54 text

Réduire la perception de vitesse pour réinstaller la confiance

Slide 55

Slide 55 text

La performance, un travail d’équipe ! Designers et développeurs, main dans la main

Slide 56

Slide 56 text

• Mobile first et budget de performance Comprendre les besoins utilisateur pour prioriser les contenus et l’affichage

Slide 57

Slide 57 text

Au delà de l’état final : prévoir les états de bouton actif et les états d’attente dans le design

Slide 58

Slide 58 text

Collaborer activement à l’aide de documents fixant des objectifs précis document RSI

Slide 59

Slide 59 text

Loi de Weber Fechner Il suffit d’un changement de durée de 20% pour qu’il soit perçu par les utilisateurs. Image « Rocket » via Shutterstock

Slide 60

Slide 60 text

Mesurer la performance (réelle et perçue)

Slide 61

Slide 61 text

Ce qu’il faut retenir • 0 - 100 ms : assurer la réactivité instantanée de l’interface • 2 - 10 sec : rassurer l’utilisateur avec des indicateurs d’attente indéterminés (spinner) • > 10 sec : informer l’utilisateur sur l’avancée avec une barre de progression

Slide 62

Slide 62 text

Ce qu’il faut retenir • Interface optimiste : afficher le résultat de l’action sous 100ms même si elle n’est pas terminée + informer à posteriori en cas d’échec • Précharger les medias pendant que l’utilisateur est occupé à autre chose • Éviter la page blanche avec les squelettes d’interface et du chargement progressif • Utiliser les animations pour diminuer la perception du temps d’attente • Travailler en équipe la performance dès le début du projet

Slide 63

Slide 63 text

• Pacemaker icon By ProSymbols • La vitesse de défilement des barres de progression influence-t-elle la perception du temps d’attente ? (Guillaume Gronier, Carine Lallemand) • Rethinking the Progress Bar (Chris Harrison, Brian Amento, Stacey Kuznetsov, Robert BeFaster) • Progress Bars: Manipulating Perceived Duration with Visual Augmentations (Chris Harrison Zhiquan Yeo Scott E. Hudson) • Response Times: The 3 Important Limits NIELSEN - 1993 Ressources et bibliographie

Slide 64

Slide 64 text

Illustration by Laurence V. www.stephaniewalter.fr @WalterStephanie UX & Visual designer. Mobile enthusiast Pixel and CSS Lover. inpx.it/perf-ux-confoo2017 Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR)