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. 1.

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

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

    ๏ Proposer une indication précise de la progression ๏ Expliquer

    ce qui va prendre du temps ๏ Montrer la progression effectuée
  5. 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
  6. 24.

    (Nielsen, 1994; Bouch, 2000) 10 seconds is about the limit

    for keeping the user's attention focused “
  7. 26.

    “ Nous avons optimisé la moindre ligne de code mais

    les utilisatrices avec des grandes requêtes se plaignent encore de la lenteur “
  8. 27.

    L’indicateur de chargement classique a été remplacé par une mouette

    - grosse adoption chez les utilisatrices et utilisateurs
  9. 29.
  10. 33.

    Voir la barre de progression accélérer à la fin est

    plus satisfaisant (Harrison, Amento, Kuznetsov et Bell - 2007 )
  11. 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
  12. 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
  13. 40.
  14. 55.
  15. 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
  16. 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.
  17. 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
  18. 67.

    Un “Skeleton screen” basé sur le nombre de médias Nouvelle

    Image Nouvelle Video Medias Précédent Suivant
  19. 69.

    Des vignettes du type de média pour remplir le squelette

    Nouvelle Image Nouvelle Video Medias Précédent Suivant
  20. 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
  21. 75.

    ๏ Maquettes statiques ๏ Timer pour passer d'un écran à

    l'autre ๏ Très limité :/ Prototype invision pour les dévelopeuses
  22. 76.

    ๏ Une animation vidéo du rendu attendu (Flinto) ๏ Des

    maquettes statiques remplacées par des GIFs préparés dans Photoshop
  23. 77.

    Des prototypes interactifs Invision un peu trop réalistes pourraient se

    retourner contre vous lors des tests utilisateurs...
  24. 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
  25. 79.

    Documentation pour les développeuses :
 ๏ Prototype cliquable Invision ๏

    Animation vidéo des transitions et interactions ๏ Spécifications écrites.
  26. 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.
  27. 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.
  28. 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
  29. 87.

    Nous concevons et développons dans des environnements privilégiés. Nous avons

    besoin d'un retour à la réalité de nos utilisatrices.
  30. 91.

    La performance perçue n'est hélas souvent pas la première priorité.

    Soyez patientes, commencez petit, une étape à la fois.
  31. 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.
  32. 93.

    UX & UI Designer Mobile expert. Pixel & CSS Lover.

    stephaniewalter.design @WalterStephanie