Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

230 views

Published on

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.

Published in: Design
  • Be the first to comment

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

  1. 1. quand il n'y plus de code optimisable Stéphanie Walter — @WalterStephanie Tricher grâce à l'UX
  2. 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. 3. “ “ (Nielsen, 1994; Bouch, 2000) 10 seconds is about the limit for keeping the user's attention focused
  4. 4. 2016 - étude Google’s DoubleClick. Des utilisateurs mobiles encore moins patients
  5. 5. Perception de l’attente Mieux comprendre notre cerveau pour améliorer nos interfaces
  6. 6. La perception du temps : un processus cognitif non linéaire Image “Why Performance Matters, Part 2: Perception Management” by Denys Mishunov
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. Attente active VS attente passive Image “Why Performance Matters, Part 2: Perception Management” by Denys Mishunov
  11. 11. Corrélation entre attente et niveau de satisfaction Site “normal” Site ralenti de 500ms
  12. 12. Rassurer les utilisateurs En proposant une interface réactive quelque soit le temps d’attente
  13. 13. 0 - 100ms Assurer la réactivité instantanée de l’interface
  14. 14. Réactivité instantanée de l’interface Indiquer que l’action de touch/click a bien été prise en compte par l’interface
  15. 15. 0 - 1 seconde L’interface travaille, délai acceptable
  16. 16. 2 - 10 secondes Rassurer l’utilisateur avec des indicateurs d’attente indéterminés
  17. 17. “ Tout va bien, l’interface est en train de travailler ”
  18. 18. C’est pas mon site / app qui est lent mais mon appareil Utiliser des indicateurs d’attente système
  19. 19. 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
  20. 20. Personnaliser l’indicateur de manière fun et ludique
  21. 21. Faites preuve de créativité
  22. 22. Cas pratique : la mouette et les news
  23. 23. Au delà de 10 secondes Informer l’utilisateur sur la progression
  24. 24. “ “ (Guillaume Gronier, Carine Lallemand 2012) La barre de progression augmente le temps d’attente perçue mais augmente la satisfaction utilisateur.
  25. 25. Bonnes pratiques • Éviter les indicateurs statiques
  26. 26. Bonnes pratiques • Éviter les indicateurs statiques • Expliquer ce qui prend du temps
  27. 27. Bonnes pratiques • Éviter les indicateurs statiques • Expliquer ce qui prend du temps • Montrer la progression (en % ou en étapes)
  28. 28. 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)
  29. 29. “ 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
  30. 30. “ 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
  31. 31. Diminuer le temps d’attente perçu Faire semblant et détourner l’attention des utilisateurs
  32. 32. Une interface optimiste Afficher le résultat de l’action sous 100ms même si elle n’est pas terminée
  33. 33. Le coeur est mis a jour directement, le chiffre après le retour serveur Bouton like sur twitter
  34. 34. En cas d’échec le bouton revient à son état initial Gestion des erreurs : retour à l’état initial
  35. 35. Changement de statut optimiste On part du principe que tout ira bien et on change le statut dans l’application au touch du bouton
  36. 36. Gestion des erreurs On inverse l’état et on informe l’utilisateur
  37. 37. Gestion des erreurs : action de l’utilisateur
  38. 38. Détourner l’attention de l’attente Garder l’utilisateur en mode attente active le plus longtemps possible
  39. 39. Crocodiles dans le tram à Amsterdam GVBeestje de Daniel Disselkoen
  40. 40. Instagram commence à charger les photos pendant que l’utilisateur est occupé à remplir les données Occuper l’utilisateur à autre chose Chargement de la photo
  41. 41. Squelette d’interface pour éviter la page blanche Le message est personnalisable sur Slack
  42. 42. Éviter la page blanche : squelette d’interface Attention quand le squelette ne ressemble plus vraiment au contenu chargé
  43. 43. Chargement et affichage progressif des éléments d’interface
  44. 44. Affichage progressif de l’interface + placeholders
  45. 45. Affichage progressif de l’interface
  46. 46. É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
  47. 47. Utiliser les animations Pour diminuer la perception du temps d’attente
  48. 48. Transitions entre les pages
  49. 49. 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
  50. 50. Cas pratique : application de streaming télésurveillance
  51. 51. Accélérer n’est pas toujours la solution Les utilisateurs s’attendent à ce que certaines actions soient plus lentes
  52. 52. “ Ç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
  53. 53. Réduire la perception de vitesse pour réinstaller la confiance
  54. 54. La performance, un travail d’équipe ! Designers et développeurs, main dans la main
  55. 55. • Mobile first et budget de performance Comprendre les besoins utilisateur pour prioriser les contenus et l’affichage
  56. 56. Au delà de l’état final : prévoir les états de bouton actif et les états d’attente dans le design
  57. 57. Collaborer activement à l’aide de documents fixant des objectifs précis document RSI
  58. 58. 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
  59. 59. Mesurer la performance (réelle et perçue)
  60. 60. 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
  61. 61. 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
  62. 62. • 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
  63. 63. 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)

×