Un visiteur appuie sur un bouton et rien ne semble se passer. Peut-être la requête est-elle en route vers un serveur ; peut-être le traitement est-il déjà terminé ; peut-être la connexion a-t-elle échoué. Un élément décoratif qui tourne ne dissipe pas cette incertitude. L’attente fait partie de l’interface et mérite le même soin éditorial que le résultat final.
Nommer le travail, pas seulement le délai
Partez de l’action choisie par la personne. « Préparation du comparatif » est plus informatif qu’un indicateur de chargement isolé, car le message relie la pause à la tâche. Placez l’explication près du contenu concerné. Le reste de la page ne doit pas devenir un écran vide sans explication lorsqu’une seule petite section est en cours de mise à jour.
N’inventez pas de précision. Un pourcentage n’est utile que si le système peut mesurer une progression significative. Un compte à rebours qui repart de zéro ou une progression qui se fige à quatre-vingt-dix-neuf pour cent crée une promesse que l’interface ne peut pas tenir. Si le temps restant est inconnu, expliquez ce qui se passe sans inventer d’échéance.
Distinguer la réception de l’achèvement
L’appui sur un bouton, la réception d’une requête et l’achèvement du travail demandé ne sont pas le même événement. Définissez ce que signifie chaque message avant de choisir sa couleur ou son animation. Par exemple, accepter un fichier pour traitement ne signifie pas qu’il a été vérifié ; enregistrer une demande de renseignements ne signifie pas que quelqu’un y a répondu.
N’affichez un succès qu’une fois la confirmation correspondante disponible. Si le résultat est incertain, conservez cette distinction plutôt que d’afficher une coche verte rassurante. Des états clairs facilitent aussi un échange ultérieur avec l’assistance : le visiteur peut décrire ce que la page a réellement indiqué au lieu de le deviner.
Rendre la mise à jour perceptible autrement que par la vue
Un petit changement au bord de l’écran peut passer inaperçu. L’explication du W3C sur les messages d’état couvre les mises à jour concernant les résultats, l’attente ou la progression qui ne déplacent pas le focus de l’utilisateur. Des rôles ou propriétés appropriés permettent aux technologies d’assistance de présenter ces messages sans imposer à la personne un nouveau contexte.
Pour une zone qui reçoit plusieurs mises à jour liées, MDN décrit aria-busy comme un moyen de signaler que les modifications ne sont pas encore terminées. Remettez sa valeur à false une fois la mise à jour achevée. Cet attribut ne constitue pas à lui seul un indicateur visuel de chargement, et son ajout ne dispense pas de tester l’annonce effective et le texte visible.
Prévoir une prochaine étape sans risque
L’attente ne doit pas devenir une impasse. Conservez les données saisies par le visiteur lorsque c’est possible, expliquez un échec dans un langage courant et proposez une action suivante adaptée à l’opération. « Réessayer » n’est pas automatiquement sans risque : si la première requête a pu aboutir, un second envoi peut créer un doublon. Établissez le résultat avant d’encourager une nouvelle tentative.
Si l’annulation est possible, expliquez clairement son effet. Arrêter l’animation visible n’équivaut pas à annuler le travail du serveur. Un chemin de retour vers la page peut être utile, mais il ne doit pas effacer silencieusement les efforts de la personne. Les principes des messages d’erreur utiles dans les formulaires s’appliquent ici aussi : décrivez la situation et la prochaine étape utile.
Tester les états intermédiaires délicats, pas seulement la réussite finale
Examinez une réponse rapide, une réponse lente, un échec et un résultat incertain. Observez si le message arrive au bon moment, si les clics répétés sont gérés de manière réfléchie et si le focus clavier reste à un endroit pertinent. Vérifiez aussi la présentation lorsque les animations sont réduites : le sens doit subsister sans effet de rotation ni de pulsation.
Dans le cadre de la maintenance continue du site, réexaminez ces états lorsque le service sous-jacent change. Le but n’est pas de rendre chaque attente divertissante. Il est de donner au visiteur une réponse honnête à trois questions : que se passe-t-il, que sait-on et que puis-je faire ensuite ?