Ergonomie de l'attente et impression de performance

Les slides de mon intervention à un apéro WdStr sur la performance web

Transcript

1. 1 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
   Stéphanie Walter pour WdStr @WalterStephanie
   

   View Slide

2. 2 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
   L’impression de vitesse influence la perception de la qualité
   générale du site
   13 Reasons Why You Should Pay Attention to Mobile Web Performance
   

   View Slide

3. 3 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
   Cette loi n’a presque rien à voir avec les bières
   Image « Beer Glass » via Shutterstock
   

   View Slide

4. 4 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
   • Pour qu’un utilisateur détecte un
   changement notable, il suffit que
   le site//app soit 20 % plus rapide :
   – 20 % plus rapide que l’ancienne
   version
   – 20 % plus rapide que les
   concurrents
   Image « Rocket » via Shutterstock
   

   View Slide

5. 5 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
   Indiquer que l’action de touch/clique a bien été prise en compte par l’appareil
   

   View Slide

6. 6 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
   Instagram : effectue l’action en tâche de fond pendant que
   l’utilisateur est occupé à tout remplir
   

   View Slide

7. 7 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
   Chrome iOS propose une animation en 3 temps au chargement de la page
   

   View Slide

8. 8 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
   

   View Slide

9. 9 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
   Proposer à l’utilisateur un squelette du futur contenu
   

   View Slide

10. 10 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
    Proposer à l’utilisateur un squelette du futur contenu
    

    View Slide

11. 11 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
    Afficher le contenu « rapidement » chargeable en plus du squelette
    

    View Slide

12. 12 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
    Afficher rapidement les premiers contenus puis charger le reste au fur et à mesure
    

    View Slide

13. 13 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
    On affiche et enregistre le « like » en local même si l’action n’est pas encore traitée niveau serveur
    

    View Slide

14. 14 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
    Pareil pour les commentaires : pas encore envoyé, mais déjà affichés
    

    View Slide

15. 15 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
    

    View Slide

16. 16 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
    

    View Slide

17. 17 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
    

    View Slide

18. 18 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
    C’est pas mon app qui est lente, c’est l’appareil
    

    View Slide

19. 19 Stéphanie Walter pour Wdstr – Ergonomie et perception de performance
    

    View Slide