Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

L’UX au service de la performance de vos interfaces

64 views

Published on

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.

Published in: Design
  • Be the first to comment

L’UX au service de la performance de vos interfaces

  1. 1. L’UX au service de la performance de vos interfaces WeLoveSpeed 2018 — Stéphanie Walter - UX & UI Designer
  2. 2. Temps psychologique (perçu par notre cerveau) Temps objectif (mesurable sur l’horloge)
  3. 3. La perception du temps par les humains
  4. 4. Des facteurs extérieurs affectent notre perception du temps qui passe
  5. 5. Attente avant la 1e interaction avec le contenu
  6. 6. État psychologiqueProfil 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
  7. 7. La situation - ROI de l’attente
  8. 8. La perception de la vitesse impacte la satisfaction
  9. 9. Temps de réponse visuelle des interfaces
  10. 10. 0 - 300ms Réponse visuelle instantanée
  11. 11. Réponse visuelle et micro interactions
  12. 12. Prévoir les différents états fait partie du travail de designer
  13. 13. 300ms - 1 secondes Le délai est tolérable
  14. 14. 2 - 5 secondes Indicateurs de progression indéterminés pour rassurer sur le bon fonctionnement du système
  15. 15. “Tout fonctionne le système travaille ”
  16. 16. Faites preuve de créativité
  17. 17. C’est le moment de faire montrer la personnalité de votre marque !
  18. 18. Plus de 5 secondes Indiquer précisément la progression pour faire patienter
  19. 19. ๏ Proposer une indication précise de la progression
  20. 20. ๏ Proposer une indication précise de la progression ๏ Expliquer ce qui va prendre du temps
  21. 21. ๏ Proposer une indication précise de la progression ๏ Expliquer ce qui va prendre du temps ๏ Montrer la progression effectuée
  22. 22. ๏ 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
  23. 23. (Nielsen, 1994; Bouch, 2000) 10 seconds is about the limit for keeping the user's attention focused “
  24. 24. La mouette comme 
 indicateur d’attente
  25. 25. “ Nous avons optimisé la moindre ligne de code mais les utilisatrices avec des grandes requêtes se plaignent encore de la lenteur “
  26. 26. L’indicateur de chargement classique a été remplacé par une mouette - grosse adoption chez les utilisatrices et utilisateurs
  27. 27. Affichage d’informations utiles pendant que les utilisatrices et utilisateurs attendent
  28. 28. Ça “semble” rapide - transitions et animations
  29. 29. Animer les transitions de page
  30. 30. Animer les arrivées et sorties de l’écran via Val Head
  31. 31. Voir la barre de progression accélérer à la fin est plus satisfaisant (Harrison, Amento, Kuznetsov et Bell - 2007 )
  32. 32. Des nervures à contre sens augmentent la perception de vitesse (Harrison, Yeo et Hudson - 2010 )
  33. 33. De la vidéo de monitoring à la demande
  34. 34. Discuter des contraintes techniques avec l’équipe de development 1.
  35. 35. 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
  36. 36. Déconstruire le temps d’attente milliseconde par milliseconde. 2.
  37. 37. 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
  38. 38. Communiquer les spécifications avec l’équipe de développement 3.
  39. 39. Animation écran par écran dans Photoshop
  40. 40. Document de specifications pour les développeuses
  41. 41. Faire semblant - optimistic UIs
  42. 42. Des “likes” optimistes sur twitter
  43. 43. Changement optimiste 
 du status de l’alarme
  44. 44. Avoir confiance dans son API (et serveur) et proposer un retour visuel instantané 1.
  45. 45. Ne pas attendre le retour serveur pour changer visuellement le statut
  46. 46. “Mais quelle est la conséquence d’un échec coté utilisatrice ?”
  47. 47. Identifier et prévoir en fonction des cas d’échec possibles. 2.
  48. 48. Informer les utilisatrices de l’échec (et leur proposer des solutions) 3.
  49. 49. En cas d’échec - retour à l’état précédent et notification
  50. 50. Distraire intelligemment les utilisatrices
  51. 51. GVBeestje crocodiles par Daniel Disselkoen dans le metro à Amsterdam
  52. 52. Charger les photos en tâche de fond pendant que l’utilisatrice fait autre chose début du chargement
  53. 53. “Skeleton screens” et affichage progressif du contenu
  54. 54. Pinterest has some really nice colorful interface placeholders
  55. 55. Attention aux sauts de contenu et aux mises à jour des gabarits de page
  56. 56. Evitez la sur optimisation
  57. 57. Chargement d’image progressif sur une application d’atelier automobile
  58. 58. 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
  59. 59. Comprendre le contexte et le flux utilisateurs pour améliorer l'expérience. 1.
  60. 60. ๏ 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.
  61. 61. Discuter et comprendre les exigences techniques. 2.
  62. 62. ๏ 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
  63. 63. Construire la galerie d’image pas à pas 3.
  64. 64. Un “Skeleton screen” basé sur le nombre de médias Nouvelle Image Nouvelle Video Medias Précédent Suivant
  65. 65. Une galerie d’indicateurs d’attente n'est jamais une bonne solution
  66. 66. Des vignettes du type de média pour remplir le squelette Nouvelle Image Nouvelle Video Medias Précédent Suivant
  67. 67. Une animation “pulse” comme indicateur de chargement
  68. 68. Affichage progressif des medias au fur et à mesure qu'ils se chargent
  69. 69. 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
  70. 70. Pas d'interruption des actions de l’utilisatrice
  71. 71. Communiquer ce qui est attendu des développeuses 4.
  72. 72. ๏ Maquettes statiques ๏ Timer pour passer d'un écran à l'autre ๏ Très limité :/ Prototype invision pour les dévelopeuses
  73. 73. ๏ Une animation vidéo du rendu attendu (Flinto) ๏ Des maquettes statiques remplacées par des GIFs préparés dans Photoshop
  74. 74. Des prototypes interactifs Invision un peu trop réalistes pourraient se retourner contre vous lors des tests utilisateurs...
  75. 75. ๏ 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
  76. 76. Documentation pour les développeuses :
 ๏ Prototype cliquable Invision ๏ Animation vidéo des transitions et interactions ๏ Spécifications écrites.
  77. 77. Hum, et si on ralentissait un peu…
  78. 78. Est-il toujours nécessaire de rendre notre interface plus rapide ?
  79. 79. "Ç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.
  80. 80. Ralentissement artificiel de la connexion via scanner rétinien car perçue comme trop rapide et non sécurisée.
  81. 81. "L'illusion du travail " - on accorde plus d'importance aux choses lorsque l’on pense qu’un effort a été fait pour les obtenir.
  82. 82. 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
  83. 83. Au final…
  84. 84. Nous concevons et développons dans des environnements privilégiés. Nous avons besoin d'un retour à la réalité de nos utilisatrices.
  85. 85. Le “Network conditioner” permet de simuler une mauvaise connexion sur l'iPhone
  86. 86. Construire un produit performant est un travail d'équipe !
  87. 87. Conceptrices et développeuses doivent communiquer et travailler ensemble pour trouver les meilleures solutions possibles.
  88. 88. La performance perçue n'est hélas souvent pas la première priorité. Soyez patientes, commencez petit, une étape à la fois.
  89. 89. 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.
  90. 90. UX & UI Designer Mobile expert. Pixel & CSS Lover. stephaniewalter.design @WalterStephanie 🦊

×