Upgrade to Pro — share decks privately, control downloads, hide ads and more …

L’UX au service de la performance de vos interfaces

F383c6a4dc55e331bbe2987b622cee6b?s=47 Stéphanie Walter
October 09, 2018

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.

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

October 09, 2018
Tweet

Transcript

  1. L’UX au service de la performance de vos interfaces WeLoveSpeed

    2018 — Stéphanie Walter - UX & UI Designer
  2. None
  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

  29. None
  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
  40. None
  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