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
   

   View Slide

2. View Slide

3. Temps psychologique
   (perçu par notre cerveau)
   Temps objectif
   (mesurable sur l’horloge)
   

   View Slide

4. La perception du temps par
   les humains
   

   View Slide

5. Des facteurs extérieurs
   affectent notre perception du
   temps qui passe
   

   View Slide

6. Attente avant la 1e interaction avec le contenu
   

   View Slide

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
   

   View Slide

8. La situation - ROI de l’attente
   

   View Slide

9. La perception de la vitesse
   impacte la satisfaction
   

   View Slide

10. Temps de réponse visuelle
    des interfaces
    

    View Slide

11. 0 - 300ms
    Réponse visuelle instantanée
    

    View Slide

12. Réponse visuelle et micro interactions
    

    View Slide

13. Prévoir les différents états fait partie du travail de designer
    

    View Slide

14. 300ms - 1 secondes
    Le délai est tolérable
    

    View Slide

15. 2 - 5 secondes
    Indicateurs de progression indéterminés pour rassurer
    sur le bon fonctionnement du système
    

    View Slide

16. “Tout fonctionne le système travaille ”
    

    View Slide

17. Faites preuve de créativité
    

    View Slide

18. C’est le moment de faire
    montrer la personnalité
    de votre marque !
    

    View Slide

19. Plus de 5 secondes
    Indiquer précisément la progression pour faire patienter
    

    View Slide

20. ๏ Proposer une
    indication précise de
    la progression
    

    View Slide

21. ๏ Proposer une
    indication précise de
    la progression
    ๏ Expliquer ce qui va
    prendre du temps
    

    View Slide

22. ๏ Proposer une
    indication précise de
    la progression
    ๏ Expliquer ce qui va
    prendre du temps
    ๏ Montrer la
    progression
    effectuée
    

    View Slide

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
    

    View Slide

24. (Nielsen, 1994; Bouch, 2000)
    10 seconds is about the limit for
    keeping the user's attention focused
    “
    

    View Slide

25. La mouette comme 

    indicateur d’attente
    

    View Slide

26. “ Nous avons optimisé la moindre ligne de
    code mais les utilisatrices avec des grandes
    requêtes se plaignent encore de la lenteur “
    

    View Slide

27. L’indicateur de
    chargement classique
    a été remplacé par une
    mouette
    - grosse adoption chez les
    utilisatrices et utilisateurs
    

    View Slide

28. Affichage
    d’informations utiles
    pendant que les
    utilisatrices et
    utilisateurs
    attendent
    

    View Slide

29. View Slide

30. Ça “semble” rapide -
    transitions et animations
    

    View Slide

31. Animer les transitions de page
    

    View Slide

32. Animer les arrivées et sorties de l’écran
    via Val Head
    

    View Slide

33. Voir la barre de progression accélérer à la fin est plus satisfaisant
    (Harrison, Amento, Kuznetsov et Bell - 2007 )
    

    View Slide

34. Des nervures à contre sens augmentent la perception de vitesse
    (Harrison, Yeo et Hudson - 2010 )
    

    View Slide

35. De la vidéo de monitoring à la
    demande
    

    View Slide

36. Discuter des contraintes
    techniques avec l’équipe de
    development
    1.
    

    View Slide

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
    

    View Slide

38. Déconstruire le temps
    d’attente milliseconde par
    milliseconde.
    2.
    

    View Slide

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
    

    View Slide

40. View Slide

41. Communiquer les
    spécifications avec l’équipe
    de développement
    3.
    

    View Slide

42. Animation écran par écran dans Photoshop
    

    View Slide

43. Document de specifications pour les développeuses
    

    View Slide

44. Faire semblant - optimistic UIs
    

    View Slide

45. Des “likes” optimistes sur twitter
    

    View Slide

46. Changement optimiste 

    du status de l’alarme
    

    View Slide

47. Avoir confiance dans son
    API (et serveur) et proposer
    un retour visuel instantané
    1.
    

    View Slide

48. Ne pas attendre le retour serveur pour changer visuellement le statut
    

    View Slide

49. “Mais quelle est la conséquence
    d’un échec coté utilisatrice ?”
    

    View Slide

50. Identifier et prévoir en
    fonction des cas d’échec
    possibles.
    2.
    

    View Slide

51. Informer les utilisatrices de
    l’échec (et leur proposer des
    solutions)
    3.
    

    View Slide

52. En cas d’échec - retour à l’état précédent et notification
    

    View Slide

53. Distraire intelligemment les
    utilisatrices
    

    View Slide

54. GVBeestje crocodiles par Daniel Disselkoen dans le metro à Amsterdam
    

    View Slide

55. Charger les photos en tâche de fond pendant que l’utilisatrice fait autre chose
    début du chargement
    

    View Slide

56. “Skeleton screens” et affichage progressif du contenu
    

    View Slide

57. Pinterest has some really nice colorful interface placeholders
    

    View Slide

58. Attention aux sauts de contenu et aux mises à jour des gabarits de page
    

    View Slide

59. Evitez la sur optimisation
    

    View Slide

60. Chargement d’image progressif sur
    une application d’atelier automobile
    

    View Slide

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
    

    View Slide

62. Comprendre le contexte et le
    flux utilisateurs pour
    améliorer l'expérience.
    1.
    

    View Slide

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.
    

    View Slide

64. Discuter et comprendre les
    exigences techniques.
    2.
    

    View Slide

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
    

    View Slide

66. Construire la galerie
    d’image pas à pas
    3.
    

    View Slide

67. Un “Skeleton screen” basé
    sur le nombre de médias
    Nouvelle Image Nouvelle Video
    Medias
    Précédent Suivant
    

    View Slide

68. Une galerie d’indicateurs
    d’attente n'est jamais
    une bonne solution
    

    View Slide

69. Des vignettes du type de
    média pour remplir le
    squelette
    Nouvelle Image Nouvelle Video
    Medias
    Précédent Suivant
    

    View Slide

70. Une animation “pulse”
    comme indicateur de
    chargement
    

    View Slide

71. Affichage progressif des
    medias au fur et à
    mesure qu'ils se chargent
    

    View Slide

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
    

    View Slide

73. Pas d'interruption des
    actions de l’utilisatrice
    

    View Slide

74. Communiquer ce qui est
    attendu des développeuses
    4.
    

    View Slide

75. ๏ Maquettes statiques
    ๏ Timer pour passer d'un écran à l'autre
    ๏ Très limité :/
    Prototype invision
    pour les dévelopeuses
    

    View Slide

76. ๏ Une animation vidéo du
    rendu attendu (Flinto)
    ๏ Des maquettes
    statiques remplacées
    par des GIFs préparés
    dans Photoshop
    

    View Slide

77. Des prototypes interactifs Invision
    un peu trop réalistes pourraient se
    retourner contre vous lors des tests
    utilisateurs...
    

    View Slide

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
    

    View Slide

79. Documentation pour les développeuses :

    ๏ Prototype cliquable Invision
    ๏ Animation vidéo des transitions et interactions
    ๏ Spécifications écrites.
    

    View Slide

80. Hum, et si on ralentissait un
    peu…
    

    View Slide

81. Est-il toujours nécessaire de rendre
    notre interface plus rapide ?
    

    View Slide

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.
    

    View Slide

83. Ralentissement artificiel de la connexion via scanner rétinien car perçue comme trop
    rapide et non sécurisée.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

86. Au final…
    

    View Slide

87. Nous concevons et développons
    dans des environnements privilégiés.
    Nous avons besoin d'un retour à la
    réalité de nos utilisatrices.
    

    View Slide

88. Le “Network conditioner” permet de simuler une mauvaise connexion sur l'iPhone
    

    View Slide

89. Construire un produit performant
    est un travail d'équipe !
    

    View Slide

90. Conceptrices et développeuses doivent
    communiquer et travailler ensemble
    pour trouver les meilleures solutions
    possibles.
    

    View Slide

91. La performance perçue n'est hélas
    souvent pas la première priorité. Soyez
    patientes, commencez petit, une étape à
    la fois.
    

    View Slide

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.
    

    View Slide

93. UX
    &
    UI Designer
    Mobile expert. Pixel & CSS Lover.
    stephaniewalter.design @WalterStephanie
    
    

    View Slide