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)