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

Améliorer la Performance : entre réalité et ressenti

Geoffrey Crofte
October 05, 2017

Améliorer la Performance : entre réalité et ressenti

Vidéo de la présentation : https://www.youtube.com/watch?v=D5-Ze-1FFBc

La performance est un élément central aujourd'hui, aussi bien pour permettre à son site web de mieux ressortir sur les résultats de recherche que pour satisfaire l'utilisateur et ne pas le frustrer pendant l'utilisation de votre site web. C'est principalement ce dernier point qui nous intéresse.

Votre site web peut respecter certains points essentiels de la performance d'un point de vue technique qui seront abordés durant cette conférence, mais au-delà de l'aspect purement technique des astuces en matière de design et d'ergonomie peuvent permettre d'améliorer le ressenti de performance de vos interfaces.

Ressources et bibliographie (slide présente dans la présentation) :
* Mobile Speed Matters (DoubleClick) : https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
* The perception of time (Smashing Mag) : https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/
* Attention Span Statistics (Statistic Brain) : www.statisticbrain.com/attention-span-statistics/
* Getting Started with PWA (Google Devs) : https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
* Cart Abandonment Rate (baymard.com) : https://baymard.com/lists/cart-abandonment-rate
* Étude sur la vitesse de défilement des barres de progression (Carine Lallemand) : https://www.researchgate.net/profile/Carine_Lallemand/publication/254002817_La_vitesse_de_defilement_des_barres_de_progression_influence-t-elle_la_perception_du_temps_d'attente/links/00b7d52cdafe307c9f000000/La-vitesse-de-defilement-des-barres-de-progression-influence-t-elle-la-perception-du-temps-dattente.pdf?origin=publication_detail
* Lighttpd solution serveur : https://www.lighttpd.net/
* Nginx solution serveur : https://www.nginx.com/
* G-Wan solution serveur : http://gwan.com/
* LazySizes: Lazyload et la technique de l’image de remplacement floue : https://github.com/aFarkas/lazysizes
* Credit Card IIN Ranges : https://baymard.com/checkout-usability/credit-card-patterns

Geoffrey Crofte

October 05, 2017
Tweet

More Decks by Geoffrey Crofte

Other Decks in Design

Transcript

  1. Améliorer la performance
    Entre réalité et perception

    View full-size slide

  2. “Améliorer la performance” — @geoffrey_crofte 2
    Geoffrey Crofte
    geoffrey.crofte.fr
    creativejuiz.fr
    Full-Stack Developer pour la société
    @geoffrey_crofte

    View full-size slide

  3. “Améliorer la performance” — @geoffrey_crofte
    Tour d’horizon
    Pourquoi parler de performance ?
    La notion de temps.
    D’un point de vue technique.
    Faire patienter.
    Détourner l’attention.
    Mentir à l’utilisateur·rice.
    Bonus ?

    View full-size slide

  4. Pourquoi parler de performance ?

    View full-size slide

  5. 53% des utilisateur·rice·s abandonnent un
    site qui met plus de 3 secondes à se
    charger sur mobile.

    Le temps moyen de chargement d’un site
    web en 3G est de 19 seconds.
    Les utilisateur·rice·s
    n’attendent pas
    Source : soasta.com (septembre 2016)

    View full-size slide

  6. la durée moyenne d’attention passe de 12
    secondes (en 2000) à 8.25 secondes (en
    2015)

    C’est une seconde de moins que la durée
    d’attention d’un poisson rouge.
    Les utilisateur·rice·s

    attendent de moins
    en moins
    Source : statisticbrain.com

    View full-size slide

  7. “Améliorer la performance” — @geoffrey_crofte
    Vous perdez vos utilisateur·rice·s
    au bout de 10 secondes.

    View full-size slide

  8. La notion de temps

    View full-size slide

  9. Le temps objectif

    Celui que vous avez sur vos montres.

    Le temps psychologique

    Celui qui va être réellement perçu par une
    personne.
    Il y a plusieurs temps
    Source : Smashing Magazine

    View full-size slide

  10. 0,1 à 0,2s : aucun délai ressenti.

    0,5 à 1 s : délai immédiat proche d’une
    réponse d’humain à humain.

    2 à 5 s : expérience optimale dans une
    activité.

    5 à 10 s : la durée d’attention d’un
    utilisateur·rice.
    Durées psychologiques
    Source : Smashing Magazine

    View full-size slide

  11. “Améliorer la performance” — @geoffrey_crofte
    Cette semaine est passée super
    vite, je n’ai pas vu le temps filer !
    Youpiiii!

    View full-size slide

  12. Le type et la complexité de la tâche.

    L’expérience de la personne sur des tâches
    similaires.

    La disposition de la personne (fatigue,
    stress, etc.)
    Perception non linéaire
    Source : tinyartshop

    View full-size slide

  13. On va pouvoir jouer sur plusieurs facteurs :
    Différents paramètres clés
    La stimulation

    Les indices qui rappellent l’attente.

    La durée

    Réelle ou ressentie.

    L’attention

    L’occupation du cerveau à une tâche ou une autre.

    View full-size slide

  14. Comment améliorer la perception de l’attente ?
    Le temps objectif
    Optimiser ce qui est concrètement
    optimisable.
    Détourner l’attention
    Occuper la personne à une autre
    tâche que celle de l’attente.
    Mentir à l’utilisateur·rice
    Lui faire croire qu’elle n’a pas besoin
    d’attendre.
    Indicateurs de l’attente
    Fournir une indication adaptée au
    type d’attente.

    View full-size slide

  15. Ce que vous avez déjà fait
    j’espère…

    View full-size slide

  16. “Améliorer la performance” — @geoffrey_crofte
    Nginx, Apache… testez et retenez
    le meilleur pour vos besoins.
    La solution Serveur
    Nginx est meilleur (2 fois plus rapide
    qu’Apache) pour servir des documents
    statiques.

    Apache et Nginx s’équivalent sur l’aspect
    dynamique.

    View full-size slide

  17. “Améliorer la performance” — @geoffrey_crofte
    Les mises à jour vont (très souvent) dans le
    sens de la performance.
    Tenez votre système à jour
    PHP 7 traite 2 fois plus de requêtes par
    seconde que la version 5.6. (précédente)

    Apache entre sa version 2.2 et 2.4 est
    environ 40% plus performant.
    Sources : genious-interactive.com et rootusers.com

    View full-size slide

  18. Cette technique permet de distributer des ressources plus rapidement.
    Mettez en cache
    Le cache serveur

    Évite à votre machine de refaire les calculs.

    Le cache navigateur

    Stocke des fichiers dans le navigateur client.

    View full-size slide

  19. Profiter des avantages des Service Workers.
    Pensez à votre Progressive Web App
    Offline / Connexion bas débit

    Permet d’accéder à des ressources même hors-ligne.

    Rapidité

    Une partie des fichiers étant stockée sur la machine de l’utilisateur·rice.

    View full-size slide

  20. Parce qu’on ne peut pas tout voir ensemble, pensez aussi à :
    Pensez à plein d’autres choses…
    HTTP/2,
    CSS Critical Path,
    local/sessionStorage,
    Optimiser vos bases de données,
    Optimiser vos images (formats, compression),
    Minifier et concaténer CSS et JS
    CDN Géolocalisé

    View full-size slide

  21. “Améliorer la performance” — @geoffrey_crofte
    L’interface doit faire ressortir les réponses
    immédiates.
    Les réponses immédiates
    Au survol, focus ou activation d’un
    élément.

    Sur une action instantanée traitée en JS.

    View full-size slide

  22. Il y a un tutoriel pour ça :
    http://bit.ly/clipboardscript

    View full-size slide

  23. Démonstration disponible ici :
    http://bit.ly/clipboarddemo

    View full-size slide

  24. Faire patienter

    View full-size slide

  25. Next slide loading…

    View full-size slide

  26. “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  27. Plusieurs manières de procéder qui n’expriment pas la même chose.
    Indiquer l’attente
    Le spinner

    Ce petit truc qui tourne indéfiniment.

    La barre de chargement

    Qui propose un début et une fin.
    Les mots

    Pour expliciter le pourquoi du
    comment.
    Les faux contenus

    Pour aider à la projection.

    View full-size slide

  28. “Améliorer la performance” — @geoffrey_crofte
    Pratique pour une attente courte.
    Le spinner
    Le traitement dure entre 2 et 8 secondes.

    Ne pas afficher de spinner en dessous de 2
    secondes.

    Au delà de 8 secondes l’utilisateur·rice
    perd sa capacité d’attention.

    View full-size slide

  29. Pour qu’un indicateur ait du sens, il doit être
    proche de la zone activée par l’utilisateur·rice.
    Un indicateur doit être suffisamment
    longtemps visible pour éviter l’effet “bug
    visuel”
    Un indicateur proche

    View full-size slide

  30. “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  31. “Améliorer la performance” — @geoffrey_crofte
    Pour des tâches plus longues.
    Spinner originaux
    Un effet original et travaillé peut délecter
    l’utilisateur·rice.

    Permet d’augmenter un peu le délai
    d’attente sans décourager.
    “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  32. Source : https://www.backmarket.fr/

    View full-size slide

  33. “Améliorer la performance” — @geoffrey_crofte
    Pour une attente quantifiable/définie
    moyenne.
    La barre de chargement
    Le traitement risque de durer plus de 8
    secondes.

    Vous pouvez mesurer la durée ou le
    nombre d’items à traiter.

    “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  34. “Améliorer la performance” — @geoffrey_crofte
    Apparemment :
    De la sur-optimisation ?
    L’accélération finale offre un effet positif
    sur le ressenti,

    L’animation en sens inverse dans la barre
    offre un effet de vitesse supplémentaire.
    “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  35. “Améliorer la performance” — @geoffrey_crofte
    http://bit.ly/progressbar1

    View full-size slide

  36. “Améliorer la performance” — @geoffrey_crofte
    http://bit.ly/progressbar2

    View full-size slide

  37. “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  38. “Améliorer la performance” — @geoffrey_crofte
    Aménager l’espace et proposer du faux
    contenu.
    Les faux contenus
    Permet de fournir du contenu au compte-
    gouttes.

    Le faux contenu peut servir à
    l’utilisateur·rice à se projeter et faciliter la
    phase de découverte.

    View full-size slide

  39. “Améliorer la performance” — @geoffrey_crofte
    http://bit.ly/placeholderdemo

    View full-size slide

  40. “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  41. “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  42. “Améliorer la performance” — @geoffrey_crofte
    Ajouter une information claire avec de vrais
    mots.
    Paroles, les paroles
    Il permet d’être explicite sur le processus.

    Donner des chiffres sert d’estimatif du
    temps restant.

    Il permet de donner de la lecture à
    l’utilisateur·rice…
    gtmetrix.com

    View full-size slide

  43. Détourner l’attention de l’attente

    View full-size slide

  44. “Améliorer la performance” — @geoffrey_crofte
    Attente alternée
    L’attente de l’utilisateur·rice passe de
    passive à active.

    L’action peut être utile.

    L’action peut être ludique également.
    Source : La Sphère Bleue

    View full-size slide

  45. “Améliorer la performance” — @geoffrey_crofte
    En donnant de la lecture
    Afficher les news de votre entreprise/blog.

    Donner des astuces sur l’interface.

    Raconter une anecdote ou blague.

    Personnaliser l’attente.

    View full-size slide

  46. “Améliorer la performance” — @geoffrey_crofte
    En proposant une activité
    Par exemple :
    Commencer à accomplir la tâche suivante.

    Communiquer avec une communauté.

    En jouant le temps de l’attente.

    View full-size slide

  47. “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  48. “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  49. “Améliorer la performance” — @geoffrey_crofte
    Ecran de LoL avec sélection des perso et discussion en cours.

    View full-size slide

  50. “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  51. Mentir sur le temps d’attente

    View full-size slide

  52. “Améliorer la performance” — @geoffrey_crofte
    Fake It Until You Make It
    Partir du principe que la réponse serveur
    est positive dans 99% des cas.

    Proposer une réponse instantanée.

    Prévenir le 1% restant si jamais ça se passe
    mal.
    Source : Jakob Schnitker sur RedBubble

    View full-size slide

  53. “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  54. “Améliorer la performance” — @geoffrey_crofte
    Mensonge par omission
    Profiter que l’utilisateur·rice soit occupé·e sur
    une tâche pour effectuer nos requêtes
    serveur sans prévenir.


    Ça permet de ne pas montrer d’indicateur
    d’attente.
    Source : Instagram Upload

    View full-size slide

  55. “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  56. “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  57. “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  58. “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  59. “Améliorer la performance” — @geoffrey_crofte
    Lazyload
    Du contenu à la demande.
    Des ressources quand elles sont utiles.

    Chargement du contenu premier plus
    rapide.

    Ça marche avec plein de types de
    contenu.
    Source : Medium

    View full-size slide

  60. “Améliorer la performance” — @geoffrey_crofte
    Qualité adaptée
    Permet de réduire le temps d’attente
    passive.

    Permet de ne pas interrompre le service.

    Conserve l’attention sur la tâche en cours.

    Mieux en faible qualité que pas du tout.

    View full-size slide

  61. “Améliorer la performance” — @geoffrey_crofte
    Cacher derrière une
    animation
    Gagnez quelques secondes ci et là en
    proposant des animations courtes dans votre
    interface.
    Les animations fluides et courtes ont un effet
    positif sur le ressenti de l’utilisateur·rice.
    Démo sur CodePen : http://bit.ly/animationperf

    View full-size slide

  62. Et si on prenait notre temps ?

    View full-size slide

  63. “Améliorer la performance” — @geoffrey_crofte
    Le délai attendu
    Trop rapide, le prise en compte de
    l’accomplissement d’une tâche par le cerveau
    peut ne pas être immédiate, voire absente.
    L’utilisateur·rice peut également dans certains
    cas ressentir de la frustration.

    View full-size slide

  64. “Améliorer la performance” — @geoffrey_crofte
    Durée, gage de qualité
    Donne une idée de la quantité de tâches
    accomplies.

    Idée commune “d’en avoir pour son argent”
    ou “plus ça dure, mieux c’est”.
    Quand une action est communément censée
    durer car gage de qualité, n’optimisez rien.

    View full-size slide

  65. “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  66. Lâchons le Chronomètre ?

    View full-size slide

  67. “Améliorer la performance” — @geoffrey_crofte
    Et si au lieu d’essayer de gagner
    du temps on évitait d’en perdre ?

    View full-size slide

  68. “Améliorer la performance” — @geoffrey_crofte
    Soyez prévoyants
    Éviter à l’utilisateur·rice de lui faire perdre
    son temps.
    Enregistrer les données d’un formulaire
    en local/sessionStorage par exemple.

    L’informer en cas de crash et restaurer
    ses données.
    Source : Projet en cours

    View full-size slide

  69. “Améliorer la performance” — @geoffrey_crofte
    Et détecter le reste.
    Demander l’indispensable 35% : abandon du processus de
    commande car un compte est nécessaire.

    27% : abandon du processus de
    commande car trop de champs à remplir.
    Sources : SecuPress.me et Baymard.com

    View full-size slide

  70. “Améliorer la performance” — @geoffrey_crofte

    View full-size slide

  71. “Améliorer la performance” — @geoffrey_crofte
    Évitez les formulaires (?)
    La technique tip-top :
    Proposer d’enregistrer des données.

    Les réutiliser le plus souvent possible
    pour faire gagner du temps.
    Source : Amazon

    View full-size slide

  72. “Améliorer la performance” — @geoffrey_crofte
    Proposez une alternative
    Offrir une alternative à l’utilisateur·rice
    permet d’augmenter son niveau de
    satisfaction, même s’il n’a pas pu aller
    jusqu’au bout de sa démarche.
    Source : WebPageTest

    View full-size slide

  73. À retenir
    Optimisez du côté technique autant que possible.
    Un Spinner pour les attentes courtes.
    Une barre de progression pour les attentes longues.
    Du faux contenu pour aider l’utilisateur.
    Détourner l’attention de l’attente.
    Cacher l’attente sous le tapis.
    Utiliser les animations pour faire patienter.
    Prendre son temps quand il le faut.
    Proposer des portes de sortie.

    View full-size slide

  74. “Améliorer la performance” — @geoffrey_crofte
    Quelques ressources
    Mobile Speed Matters (DoubleClick)
    The perception of time (Smashing Mag)
    Attention Span Statistics (Statistic Brain)
    Getting Started with PWA (Google Devs)
    Cart Abandonment Rate (baymard.com)
    Étude sur la vitesse de défilement des
    barres de progression (Carine Lallemand)
    Lighttpd solution serveur.
    Nginx solution serveur.
    G-Wan solution serveur.
    LazySizes: Lazyload et la technique de
    l’image de remplacement floue.
    Credit Card IIN Ranges

    View full-size slide

  75. N’hésitez pas je ne mords pas.
    Merci ! Des Questions ?

    View full-size slide