L’UX au service de la performance de vos interfaces

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, vos utilisateurs se plaignent encore de la lenteur. Vous n’avez pas le budget d’Instagram ou Pinterest ? Ça tombe bien, moi non plus !

À l’aide d’exemples tirés de mes projets, découvrez comment travailler la performance également au niveau de la perception utilisateur.

Transcript

1. L’UX au service de la performance de vos interfaces WeLoveSpeed 2018 — Stéphanie Walter - UX & UI Designer
3. Temps psychologique (perçu par notre cerveau) Temps objectif (mesurable sur l’horloge)
4. La perception du temps par les humains
5. Des facteurs extérieurs affectent notre perception du temps qui passe
6. Attente avant la 1e interaction avec le contenu
7. État psychologique Profil de la personne Une audience jeune est plus impatiente L’attente est perçue comme moins longue pour les utilisatrices détendues Google and Awwwards study
8. La situation - ROI de l’attente
9. La perception de la vitesse impacte la satisfaction
10. Temps de réponse visuelle des interfaces
11. 0 - 300ms Réponse visuelle instantanée
12. Réponse visuelle et micro interactions
13. Prévoir les différents états fait partie du travail de designer
14. 300ms - 1 secondes Le délai est tolérable
15. 2 - 5 secondes Indicateurs de progression indéterminés pour rassurer sur le bon fonctionnement du système
16. “Tout fonctionne le système travaille ”
17. Faites preuve de créativité
18. C’est le moment de faire montrer la personnalité de votre marque !
19. Plus de 5 secondes Indiquer précisément la progression pour faire patienter
20. ๏ Proposer une indication précise de la progression
21. ๏ Proposer une indication précise de la progression ๏ Expliquer ce qui va prendre du temps
22. ๏ Proposer une indication précise de la progression ๏ Expliquer ce qui va prendre du temps ๏ Montrer la progression effectuée
23. ๏ Proposer une indication précise de la progression ๏ Expliquer ce qui va prendre du temps ๏ Montrer la progression effectuée ๏ Si possible, éviter de bloquer les utilisatrices
24. (Nielsen, 1994; Bouch, 2000) 10 seconds is about the limit for keeping the user's attention focused “
25. La mouette comme 
 indicateur d’attente
26. “ Nous avons optimisé la moindre ligne de code mais les utilisatrices avec des grandes requêtes se plaignent encore de la lenteur “
27. L’indicateur de chargement classique a été remplacé par une mouette - grosse adoption chez les utilisatrices et utilisateurs
28. Affichage d’informations utiles pendant que les utilisatrices et utilisateurs attendent
30. Ça “semble” rapide - transitions et animations
31. Animer les transitions de page
32. Animer les arrivées et sorties de l’écran via Val Head
33. Voir la barre de progression accélérer à la fin est plus satisfaisant (Harrison, Amento, Kuznetsov et Bell - 2007 )
34. Des nervures à contre sens augmentent la perception de vitesse (Harrison, Yeo et Hudson - 2010 )
35. De la vidéo de monitoring à la demande
36. Discuter des contraintes techniques avec l’équipe de development 1.
37. Comment ça fonctionne Camera takes the video and sends it to the server Server reencodes the video and sends it to the app The app displays the video and users can play it
38. Déconstruire le temps d’attente milliseconde par milliseconde. 2.
39. Interface Transition 300ms 2s 3 - 8s Video player components load on the screen with a fade in transition Indeterminate waiting indicator Video plays as soon as loaded
41. Communiquer les spécifications avec l’équipe de développement 3.
42. Animation écran par écran dans Photoshop
43. Document de specifications pour les développeuses
44. Faire semblant - optimistic UIs
45. Des “likes” optimistes sur twitter
46. Changement optimiste 
 du status de l’alarme
47. Avoir confiance dans son API (et serveur) et proposer un retour visuel instantané 1.
48. Ne pas attendre le retour serveur pour changer visuellement le statut
49. “Mais quelle est la conséquence d’un échec coté utilisatrice ?”
50. Identifier et prévoir en fonction des cas d’échec possibles. 2.
51. Informer les utilisatrices de l’échec (et leur proposer des solutions) 3.
52. En cas d’échec - retour à l’état précédent et notification
53. Distraire intelligemment les utilisatrices
54. GVBeestje crocodiles par Daniel Disselkoen dans le metro à Amsterdam
55. Charger les photos en tâche de fond pendant que l’utilisatrice fait autre chose début du chargement
56. “Skeleton screens” et affichage progressif du contenu
57. Pinterest has some really nice colorful interface placeholders
58. Attention aux sauts de contenu et aux mises à jour des gabarits de page
59. Evitez la sur optimisation
60. Chargement d’image progressif sur une application d’atelier automobile
61. Vidéo Privé Frontal Le mécanicien prend des photos des réparations supplémentaires 00:35 00:35 Nouvelle Image Nouvelle Video Medias Précédent Suivant 00:35
62. Comprendre le contexte et le flux utilisateurs pour améliorer l'expérience. 1.
63. ๏ La connexion dans un atelier de réparation peut être très lente et le wifi est souvent mauvais. ๏ Les mécaniciens manquent parfois des informations à cause de la latence. ๏ Certains mécaniciens partagent le même appareil.
64. Discuter et comprendre les exigences techniques. 2.
65. ๏ Les médias sont supprimés de l'appareil une fois l’intervention envoyée ๏ La taille, le type de media et nombre sont envoyés dans un fichier Json, ๏ Les vignettes sont chargées à partir d'Amazon S3 00:35 00:35 Nouvelle Image Nouvelle Video Medias Précédent Suivant 00:35
66. Construire la galerie d’image pas à pas 3.
67. Un “Skeleton screen” basé sur le nombre de médias Nouvelle Image Nouvelle Video Medias Précédent Suivant
68. Une galerie d’indicateurs d’attente n'est jamais une bonne solution
69. Des vignettes du type de média pour remplir le squelette Nouvelle Image Nouvelle Video Medias Précédent Suivant
70. Une animation “pulse” comme indicateur de chargement
71. Affichage progressif des medias au fur et à mesure qu'ils se chargent
72. Icône d’indication en cas de dépassement du délai d'attente et d'échec du chargement. 00:35 Nouvelle Image Nouvelle Video Medias Précédent Suivant 00:35
73. Pas d'interruption des actions de l’utilisatrice
74. Communiquer ce qui est attendu des développeuses 4.
75. ๏ Maquettes statiques ๏ Timer pour passer d'un écran à l'autre ๏ Très limité :/ Prototype invision pour les dévelopeuses
76. ๏ Une animation vidéo du rendu attendu (Flinto) ๏ Des maquettes statiques remplacées par des GIFs préparés dans Photoshop
77. Des prototypes interactifs Invision un peu trop réalistes pourraient se retourner contre vous lors des tests utilisateurs...
78. ๏ N'utilisez pas le même prototype Invision pour les dévelopeuses et les tests utilisateurs. ๏ Si possible, testez les performances sur un prototype codé avec une vrai connexion. Ce que j'ai appris
79. Documentation pour les développeuses :
 ๏ Prototype cliquable Invision ๏ Animation vidéo des transitions et interactions ๏ Spécifications écrites.
80. Hum, et si on ralentissait un peu…
81. Est-il toujours nécessaire de rendre notre interface plus rapide ?
82. "Ça ne peut pas être si rapide, il doit y avoir un truc quelque part" - moi, la première fois que j'ai vu la notification N26 1minute après avoir payé dans un magasin.
83. Ralentissement artificiel de la connexion via scanner rétinien car perçue comme trop rapide et non sécurisée.
84. "L'illusion du travail " - on accorde plus d'importance aux choses lorsque l’on pense qu’un effort a été fait pour les obtenir.
85. Ralentir le temps de réponse et ajouter un indicateur de frappe pour rendre les conversations avec les chatbots plus naturelles . Image via Shan Shen
86. Au final…
87. Nous concevons et développons dans des environnements privilégiés. Nous avons besoin d'un retour à la réalité de nos utilisatrices.
88. Le “Network conditioner” permet de simuler une mauvaise connexion sur l'iPhone
89. Construire un produit performant est un travail d'équipe !
90. Conceptrices et développeuses doivent communiquer et travailler ensemble pour trouver les meilleures solutions possibles.
91. La performance perçue n'est hélas souvent pas la première priorité. Soyez patientes, commencez petit, une étape à la fois.
92. Nous n’avons pas toutes et tous le budget d’Instagram, Twitter or Pinterest… Mais ce n’est pas une fatalité, il est possible de faire des choses même sur des plus petits budgets.
93. UX & UI Designer Mobile expert. Pixel & CSS Lover. stephaniewalter.design @WalterStephanie