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

Le détail sur le blog : https://blog.stephaniewalter.fr/tricher-grace-a-lux-ny-plus-de-code-optimisable/

Vous avez optimisé la moindre ligne de code de votre site/ application mobile, utilisé toutes les techniques à votre disposition pour avoir un temps de chargement le plus rapide possible. Pourtant, vous utilisateurs se plaignent encore de la lenteur. Apprenons à utiliser différentes techniques design et UX pour travailler la performance également au niveau de la perception utilisateur.

Transcript

1. quand il n'y plus de code optimisable Stéphanie Walter — @WalterStephanie Tricher grâce à l'UX
2. Illustration by Laurence V. UX & Visual designer. Mobile enthusiast Pixel and CSS Lover. Travails pour l’Université de Luxembourg www.stephaniewalter.fr @WalterStephanie
4. “ “ (Nielsen, 1994; Bouch, 2000) 10 seconds is about the limit for keeping the user's attention focused
5. 2016 - étude Google’s DoubleClick. Des utilisateurs mobiles encore moins patients
6. Perception de l’attente Mieux comprendre notre cerveau pour améliorer nos interfaces
7. La perception du temps : un processus cognitif non linéaire Image “Why Performance Matters, Part 2: Perception Management” by Denys Mishunov
8. 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
9. 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
10. 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
11. Attente active VS attente passive Image “Why Performance Matters, Part 2: Perception Management” by Denys Mishunov
12. Corrélation entre attente et niveau de satisfaction Site “normal” Site ralenti de 500ms
13. Rassurer les utilisateurs En proposant une interface réactive quelque soit le temps d’attente
14. 0 - 100ms Assurer la réactivité instantanée de l’interface
15. Réactivité instantanée de l’interface Indiquer que l’action de touch/click a bien été prise en compte par l’interface
16. 0 - 1 seconde L’interface travaille, délai acceptable
17. 2 - 10 secondes Rassurer l’utilisateur avec des indicateurs d’attente indéterminés
18. “ Tout va bien, l’interface est en train de travailler ”
19. C’est pas mon site / app qui est lent mais mon appareil Utiliser des indicateurs d’attente système
20. 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
21. Personnaliser l’indicateur de manière fun et ludique
22. Faites preuve de créativité
23. Cas pratique : la mouette et les news
24. Au delà de 10 secondes Informer l’utilisateur sur la progression
25. “ “ (Guillaume Gronier, Carine Lallemand 2012) La barre de progression augmente le temps d’attente perçue mais augmente la satisfaction utilisateur.
26. Bonnes pratiques • Éviter les indicateurs statiques
27. Bonnes pratiques • Éviter les indicateurs statiques • Expliquer ce qui prend du temps
28. Bonnes pratiques • Éviter les indicateurs statiques • Expliquer ce qui prend du temps • Montrer la progression (en % ou en étapes)
29. 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)
30. “ 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
31. “ 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
32. Diminuer le temps d’attente perçu Faire semblant et détourner l’attention des utilisateurs
33. Une interface optimiste Afficher le résultat de l’action sous 100ms même si elle n’est pas terminée
34. Le coeur est mis a jour directement, le chiffre après le retour serveur Bouton like sur twitter
35. En cas d’échec le bouton revient à son état initial Gestion des erreurs : retour à l’état initial
36. Changement de statut optimiste On part du principe que tout ira bien et on change le statut dans l’application au touch du bouton
37. Gestion des erreurs On inverse l’état et on informe l’utilisateur
38. Gestion des erreurs : action de l’utilisateur
39. Détourner l’attention de l’attente Garder l’utilisateur en mode attente active le plus longtemps possible
40. Crocodiles dans le tram à Amsterdam GVBeestje de Daniel Disselkoen
41. Instagram commence à charger les photos pendant que l’utilisateur est occupé à remplir les données Occuper l’utilisateur à autre chose Chargement de la photo
42. Squelette d’interface pour éviter la page blanche Le message est personnalisable sur Slack
43. Éviter la page blanche : squelette d’interface Attention quand le squelette ne ressemble plus vraiment au contenu chargé
44. Chargement et affichage progressif des éléments d’interface
45. Affichage progressif de l’interface + placeholders
46. Affichage progressif de l’interface
47. É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
48. Utiliser les animations Pour diminuer la perception du temps d’attente
49. Transitions entre les pages
50. 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
51. Cas pratique : application de streaming télésurveillance
52. Accélérer n’est pas toujours la solution Les utilisateurs s’attendent à ce que certaines actions soient plus lentes
53. “ Ç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
54. Réduire la perception de vitesse pour réinstaller la confiance
55. La performance, un travail d’équipe ! Designers et développeurs, main dans la main
56. • Mobile first et budget de performance Comprendre les besoins utilisateur pour prioriser les contenus et l’affichage
57. Au delà de l’état final : prévoir les états de bouton actif et les états d’attente dans le design
58. Collaborer activement à l’aide de documents fixant des objectifs précis document RSI
59. 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
60. Mesurer la performance (réelle et perçue)
61. 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
62. 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
63. • 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
64. 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)