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