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

Tricher grâce à l'UX quand il n'y plus de code optimisable

Tricher grâce à l'UX quand il n'y plus de code optimisable

Le détail sur le blog : https://blog.stephaniewalter.fr/tricher-grace-a-lux-ny-plus-de-code-optimisable/

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, vous utilisateurs se plaignent encore de la lenteur. Apprenons à utiliser différentes techniques design et UX pour travailler la performance également au niveau de la perception utilisateur.

Stéphanie Walter

March 08, 2017
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  1. quand il n'y plus de code optimisable Stéphanie Walter —

    @WalterStephanie Tricher grâce à l'UX
  2. Illustration by Laurence V. UX & Visual designer. Mobile enthusiast

    Pixel and CSS Lover. Travails pour l’Université de Luxembourg www.stephaniewalter.fr @WalterStephanie
  3. “ “ (Nielsen, 1994; Bouch, 2000) 10 seconds is about

    the limit for keeping the user's attention focused
  4. La perception du temps : un processus cognitif non linéaire

    Image “Why Performance Matters, Part 2: Perception Management” by Denys Mishunov
  5. La perception du temps • Dépend du moment de la

    mesure • Varie selon différents critères externes : • complexité de la tache • état de la personne : stress, etc. • référentiel par rapport à d’autres interfaces similaires Image “Why Performance Matters, Part 2: Perception Management” by Denys Mishunov
  6. Modèle de la porte attentionnelle de l’évaluation prospective du temps

    
 (Branaghan, R.J. and Sanchez + Zakay, D. and Block, R.A) Stimulation Pacemaker interne Porte attentionnelle Attention aux signaux temporels Mémoire de travail
  7. Réduire le niveau de stimulation ou détourner l’attention pour réduire

    la durée du temps perçu Stimulation Pacemaker interne Porte attentionnelle Attention aux signaux temporels Mémoire de travail
  8. Attente active VS attente passive Image “Why Performance Matters, Part

    2: Perception Management” by Denys Mishunov
  9. C’est pas mon site / app qui est lent mais

    mon appareil Utiliser des indicateurs d’attente système
  10. S’il n’y a pas de réel délai, un indicateur d’attente

    peut devenir perturbant Image Perceived Performance – Don’t Forget the User
  11. “ “ (Guillaume Gronier, Carine Lallemand 2012) La barre de

    progression augmente le temps d’attente perçue mais augmente la satisfaction utilisateur.
  12. Bonnes pratiques • Éviter les indicateurs statiques • Expliquer ce

    qui prend du temps • Montrer la progression (en % ou en étapes)
  13. Bonnes pratiques • Éviter les indicateurs statiques • Expliquer ce

    qui prend du temps • Montrer la progression (en % ou en étapes) • Proposer une alternative si c’est trop long (mettre en pause, faire autre chose)
  14. “ Une barre constante avec une augmentation rapide du défilement

    sur la fin augmente la satisfaction utilisateur ” (Harrison, Amento, Kuznetsov et Bell - 2007 ) Différents types de barres de progression
  15. “ Les barres de progression présentant un effet animé de

    style nervures - se déplaçant vers l’arrière en décélérant - ont permis de réduire la perception du temps d’attente de 11% ” (Harrison, Yeo et Hudson - 2010 ) Différents types de barres de progression
  16. Le coeur est mis a jour directement, le chiffre après

    le retour serveur Bouton like sur twitter
  17. En cas d’échec le bouton revient à son état initial

    Gestion des erreurs : retour à l’état initial
  18. Changement de statut optimiste On part du principe que tout

    ira bien et on change le statut dans l’application au touch du bouton
  19. Instagram commence à charger les photos pendant que l’utilisateur est

    occupé à remplir les données Occuper l’utilisateur à autre chose Chargement de la photo
  20. Éviter la page blanche : squelette d’interface Attention quand le

    squelette ne ressemble plus vraiment au contenu chargé
  21. Éviter la page blanche : anticiper les prochaines pages Si

    mon utilisateur commence à entrer du texte dans un champ de recherche, on peut précharger les éléments de la page de recherche en tâche de fond
  22. Animer les arrivées et départs de contenus Gagner du temps

    pour réellement créer l’élément coté serveur via Val Head
  23. “ Ça ne peut pas être aussi rapide, il y

    a du y avoir un souci quelque part !” - moi, la première fois que j’ai vu cette notification
  24. • Mobile first et budget de performance Comprendre les besoins

    utilisateur pour prioriser les contenus et l’affichage
  25. Au delà de l’état final : prévoir les états de

    bouton actif et les états d’attente dans le design
  26. Loi de Weber Fechner Il suffit d’un changement de durée

    de 20% pour qu’il soit perçu par les utilisateurs. Image « Rocket » via Shutterstock
  27. Ce qu’il faut retenir • 0 - 100 ms :

    assurer la réactivité instantanée de l’interface • 2 - 10 sec : rassurer l’utilisateur avec des indicateurs d’attente indéterminés (spinner) • > 10 sec : informer l’utilisateur sur l’avancée avec une barre de progression
  28. Ce qu’il faut retenir • Interface optimiste : afficher le

    résultat de l’action sous 100ms même si elle n’est pas terminée + informer à posteriori en cas d’échec • Précharger les medias pendant que l’utilisateur est occupé à autre chose • Éviter la page blanche avec les squelettes d’interface et du chargement progressif • Utiliser les animations pour diminuer la perception du temps d’attente • Travailler en équipe la performance dès le début du projet
  29. • Pacemaker icon By ProSymbols • La vitesse de défilement

    des barres de progression influence-t-elle la perception du temps d’attente ? (Guillaume Gronier, Carine Lallemand) • Rethinking the Progress Bar (Chris Harrison, Brian Amento, Stacey Kuznetsov, Robert BeFaster) • Progress Bars: Manipulating Perceived Duration with Visual Augmentations (Chris Harrison Zhiquan Yeo Scott E. Hudson) • Response Times: The 3 Important Limits NIELSEN - 1993 Ressources et bibliographie
  30. Illustration by Laurence V. www.stephaniewalter.fr @WalterStephanie UX & Visual designer.

    Mobile enthusiast Pixel and CSS Lover. inpx.it/perf-ux-confoo2017 Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR)