Ce qu’un bouton Annuler irritant en bas à droite nous apprend sur les interfaces qui ne trahissent pas l’intuition
En testant une interface proche d’une caisse, une action d’annulation se trouvait dans la zone inférieure droite.
Pendant une fraction de seconde, cet emplacement ressemblait plutôt à celui d’une action Continuer ou Confirmer. Une seule erreur a suffi à rendre l’interface agaçante.
La leçon n’est pas « Annuler ne doit jamais être à droite ». Les plateformes et les produits ont des conventions différentes.
Le vrai problème apparaît lorsque ce qu’une personne prévoit grâce à son expérience passée ne correspond pas à ce que fait réellement l’interface.
Personne n’aborde chaque écran comme une feuille blanche. Nous transportons des années d’apprentissage acquis sur les téléphones, sites, caisses, bornes, télécommandes et ascenseurs. Quand le design combat ces attentes, une interface peut être compréhensible après réflexion tout en restant propice aux erreurs dans la première seconde.
Beaucoup d’erreurs quotidiennes ne sont pas de mauvaises décisions longuement réfléchies. Ce sont des glissements dus à la vitesse, à l’habitude, à la fatigue ou à deux contrôles trop semblables et trop proches.
La question centrale est :
À quoi ressemble une UI/UX réellement bienveillante envers les humains ?
La réponse n’est pas « ajouter davantage d’instructions ».
C’est être prévisible, réduire les activations accidentelles, faciliter la récupération et ne pas imposer des choix encore inutiles.
0. Version 30 secondes : ne demandez pas seulement pourquoi l’utilisateur s’est trompé
- Le même libellé doit produire le même type de résultat.
- Les actions courantes doivent suivre des positions et conventions familières lorsque c’est possible.
- Des actions aux conséquences très différentes ne doivent pas se ressembler et être collées.
- Les actions coûteuses doivent pouvoir être annulées ou expliquer précisément leur conséquence avant exécution.
- Les cibles tactiles doivent être suffisamment grandes et espacées.
- Les fonctions avancées peuvent rester, sans être toutes visibles au premier écran.
- Ne regardez pas seulement le nombre de choix ; regardez la difficulté de comparaison.
- Observez les corrections immédiates : retour rapide, activation puis désactivation, etc.
Une interface n’est pas un examen.
L’objectif est de permettre aux gens de réussir sans devoir résoudre le fonctionnement de l’écran.
1. « Intuitif » signifie souvent réutiliser quelque chose déjà appris
Les gens se construisent une idée de la façon dont un produit devrait fonctionner. En UX, on parle de modèle mental.[1][2]
Une loupe suggère la recherche. Une flèche vers la gauche suggère le retour. Une corbeille suggère la suppression. Un triangle suggère la lecture.
Nous ne reconstruisons pas ces significations à chaque fois ; nous réutilisons la grammaire apprise ailleurs.
C’est pourquoi l’originalité peut coûter cher. Transformer la recherche en symbole étrange peut sembler créatif au concepteur et devenir une énigme pour l’utilisateur.
Les heuristiques de NN/g insistent sur l’adéquation au monde réel et la cohérence avec les conventions des plateformes et du secteur.[1]
La compatibilité spatiale compte aussi. Les recherches sur la compatibilité stimulus-réponse montrent davantage d’erreurs lorsque les indices spatiaux et la réponse attendue se contredisent.[3]
Principe :
Ne forcez pas les gens à effacer ce qu’ils ont déjà appris.
2. Une mauvaise compréhension et un glissement ne sont pas le même problème
Une personne peut mal comprendre le système et faire un mauvais choix.
Ou elle peut parfaitement comprendre et appuyer sur le mauvais contrôle.
NN/g distingue globalement mistakes et slips.[1]
Si une personne pense qu’un bouton sauvegarde alors qu’il supprime, c’est peut-être un problème de compréhension.
Si elle sait qu’il supprime mais l’active parce qu’il est collé à Sauvegarder, c’est davantage un glissement.
Dire « lisez mieux » est une réponse faible.
Le motif le plus dangereux consiste à rapprocher des actions aux conséquences très différentes : Sauvegarder et Jeter, Envoyer et Annuler, avancer de dix secondes et quitter l’article.
NN/g avertit aussi sur la proximité entre actions destructrices et actions de confirmation.[4]
Des conséquences différentes méritent un traitement visuel et spatial différent.
3. Avant d’ajouter une confirmation, demandez si l’action peut être annulée
Supprimer. Résilier. Tout effacer. Abandonner des modifications.
Le réflexe consiste à ajouter « Êtes-vous sûr ? »
Mais si tout demande confirmation, les gens apprennent à cliquer sans lire.
NN/g recommande de réserver les confirmations aux conséquences graves et difficiles à annuler, de décrire précisément l’effet et d’offrir Undo lorsque c’est possible.[5]
« Êtes-vous sûr ? Oui / Non » est moins clair que :
« 3 éléments seront supprimés. Ils pourront être restaurés pendant 30 jours » « Supprimer 3 éléments » « Les conserver »
Une interface bienveillante ne promet pas zéro erreur.
Elle réduit le coût des erreurs.
4. La taille n’est que la moitié du problème ; la distance compte aussi
WCAG 2.2 Target Size (Minimum) exige en général des cibles d’au moins 24×24 pixels CSS ou un espacement suffisant.[6]
L’exemple du W3C décrit exactement une personne voulant toucher Submit et touchant Cancel.
Le critère Enhanced utilise 44×44 pixels CSS et Apple recommande généralement une zone d’activation d’au moins 44×44 points.[7][8]
Mais agrandir tous les boutons ne suffit pas.
Il faut considérer taille, espacement, gravité, fréquence, bord d’écran et ressemblance avec les contrôles voisins.
Deux énormes boutons Sauvegarder et Supprimer peuvent rester un piège s’ils sont identiques et collés.
5. « La fonction existe » et « il faut la montrer maintenant » sont deux décisions différentes
Les produits puissants accumulent les fonctions.
Écouter, lecture rapide, favoris, playlists, chapitres, article précédent, article suivant, apprentissage, réglages, hors ligne.
Elles peuvent toutes être utiles.
Toutes visibles en même temps transforment l’écran en salon des fonctionnalités.
La divulgation progressive garde d’abord les fonctions principales et place les fonctions avancées dans une couche secondaire. NN/g associe cette approche à un meilleur apprentissage, une meilleure efficacité et moins d’erreurs.[9]
Règle simple :
Ne supprimez pas. Repliez.
6. Plus de choix signifie toujours pire ? Non
La loi de Hick relie le temps de réaction au nombre d’alternatives ou à l’incertitude et reste importante en HCI.[10]
Mais une revue moderne examine aussi l’effet de la compatibilité stimulus-réponse, de la pratique et des très grands ensembles.[10]
La surcharge de choix dépend elle aussi du contexte.
Une méta-analyse de 2010 a trouvé un effet moyen presque nul avec une forte variation entre études.[11]
Une méta-analyse de 2015 a identifié des modérateurs tels que la complexité du choix, la difficulté de la tâche, l’incertitude des préférences et l’objectif de minimiser l’effort.[12]
Dix options ne sont donc pas automatiquement mauvaises.
Dix options difficiles à distinguer, proposées à une personne fatiguée qui doit décider immédiatement, peuvent l’être.
Grand inventaire derrière ; petite surface de décision maintenant.
7. Une auto-audit d’un site de contenu a retrouvé les mêmes pièges
7-1. Un mot du titre a déclenché la mauvaise prochaine action
Un article sur le développement IA mentionnait un déménagement et l’interface a proposé une action sur le déménagement avant le contenu. Mot-clé correct, sens incorrect.
7-2. Dix secondes, chapitres et articles partageaient la même barre
Les icônes se ressemblaient mais les conséquences étaient très différentes. Le déplacement local et la navigation de page devraient être séparés.
7-3. Le même « Rechercher des articles » menait à des endroits différents
Un même libellé avec différents comportements force l’utilisateur à réapprendre.
7-4. Une énorme table des matières précédait le texte
Elle est utile pour un long article, mais dix-sept entrées avant le premier paragraphe créent une tâche de comparaison avant la lecture.
7-5. « Écouter tous les résultats » était l’action la plus forte
Bonne fonction avancée, mais pas forcément la tâche principale d’une recherche.
7-6. La fin accumulait recommandations, classement, recherche, newsletter et auteur
Tout peut être utile sans avoir la même priorité au même instant.
7-7. S’abonner et se désabonner des notifications étaient trop proches
Des actions opposées méritent distance et hiérarchie différentes.
Le plus amusant : un produit qui pense à l’UX peut encore fabriquer ses propres pièges.
8. La publicité n’est pas automatiquement une mauvaise UX ; détourner la lecture l’est
La publicité peut financer un site.
Le problème est la concurrence pour l’attention.
Des recherches d’oculométrie sur la publicité web montrent que la distance et l’animation des bannières modifient le comportement visuel et peuvent perturber particulièrement la lecture visant la compréhension.[13]
Pour une page d’article :
- ne pas empiler publicité, lecteur, énorme sommaire et inscription avant le contenu
- éloigner les publicités des contrôles et liens
- replier les emplacements vides
- conserver une distance contre les clics accidentels
La question est :
Qu’est venue faire la personne sur cette page ?
9. Checklist QC d’une UI/UX bienveillante
Prévisibilité
- Le même libellé produit-il le même résultat ?
- Les icônes gardent-elles un sens familier ?
- Les conventions sont-elles cassées sans raison ?
- Un nouvel utilisateur peut-il prévoir le résultat ?
Prévention des erreurs
- Des actions opposées sont-elles collées ?
- Une action destructive est-elle aussi forte visuellement que l’action principale ?
- Peut-on annuler ?
- La confirmation explique-t-elle la conséquence ?
Doigt et pointeur
- Les cibles importantes sont-elles assez grandes ?
- Les petites cibles sont-elles trop serrées ?
- Le bord de l’écran rend-il l’action difficile ?
Charge d’information
- La tâche principale est-elle visible ?
- Les fonctions avancées arrivent-elles trop tôt ?
- Sommaires, filtres et recommandations peuvent-ils s’ouvrir progressivement ?
Cohérence
- Le produit utilise-t-il la même grammaire d’interaction ?
- Préserve-t-il les attentes utiles apprises ailleurs ?
10. Les données UX les plus utiles apparaissent parfois juste après le clic
Le taux de clic mesure le clic, pas la gentillesse.
Observez aussi :
- retour en quelques secondes
- activation puis désactivation immédiate
- navigation puis retour immédiat
- clics répétés au même endroit
- abandon après erreur
- réussite au deuxième essai
- délai inhabituel avant d’atteindre le contenu principal
Ce sont des indices, pas des diagnostics.
Utilisez-les sous forme agrégée et respectueuse de la vie privée.
hypothèse → petit changement → observer les corrections → garder si mieux → revenir si pire
11. Conclusion : être bienveillant ne signifie pas expliquer davantage, mais poser moins de pièges
Une bonne UI se fait souvent oublier.
Le bouton fonctionne. Le retour fonctionne. La chose attendue est à l’endroit attendu.
Une mauvaise UI peut devenir le personnage principal avec un seul clic erroné :
« Pourquoi Annuler est là ? »
Ne demandez pas aux humains de mémoriser la logique privée de la machine. Rapprochez la machine des attentes que les humains possèdent déjà.
Gardez les fonctions avancées. Gardez une grande bibliothèque. Gardez la monétisation lorsque nécessaire.
Mais montrez d’abord l’essentiel, séparez les actions opposées, reflétez la gravité dans la hiérarchie visuelle et rendez la récupération possible.
Une UI/UX bienveillante ne demande pas des utilisateurs plus intelligents. Elle permet aux humains ordinaires d’agir normalement avec moins d’accidents.
Sources
- Nielsen Norman Group nngroup.com
- Mental Models nngroup.com
- Christ et al. (2000) pubmed.ncbi.nlm.nih.gov
- Application-Design Mistakes nngroup.com
- Confirmation dialogs nngroup.com
- W3C Target Size (Minimum) w3.org
- W3C Target Size (Enhanced) w3.org
- Apple Buttons developer.apple.com
- Progressive Disclosure nngroup.com
- Proctor & Schneider (2018) pubmed.ncbi.nlm.nih.gov
- Scheibehenne et al. (2010) doi.org
- Chernev et al. (2015) doi.org
- Online advertising and visual attention pmc.ncbi.nlm.nih.gov
