Pensez comme l'utilisateur pour l'interaction
Problème
L'IA conçoit souvent l'interaction dans l'ordre de l'implémentation plutôt que dans l'ordre de l'utilisateur : d'abord les structures de données, puis les contrôles ; les boutons sont placés là où la fonction est écrite dans le code. Résultat :
- Le bouton « Enregistrer » d'un long formulaire est en haut de la page, l'utilisateur doit remonter après avoir rempli le bas
- « Supprimer » est à côté de « Enregistrer », même couleur, même taille
- La fonctionnalité la plus utilisée est cachée dans le deuxième niveau du menu « Plus ⋯ », alors qu'un paramètre rare occupe la place la plus visible de la barre d'outils
- Même avec une seule option, il faut d'abord la sélectionner avant de pouvoir cliquer sur « Suivant »
- Pour renommer : cliquer sur « Mode édition » → modifier → cliquer sur « Appliquer » → cliquer sur « Enregistrer » → fenêtre de confirmation « Voulez-vous vraiment enregistrer ? »
- Créer un nouvel élément nécessite trois étapes d'assistant, alors qu'il suffit de remplir un nom
- Les boutons portent des libellés comme « Soumettre », « Exécuter », « OK », l'utilisateur ne sait pas ce qui se passe après avoir cliqué
- En cas d'erreur, un message « Échec de l'opération » apparaît, et toutes les saisies sont effacées
Chacun de ces problèmes pris séparément n'est pas fatal, mais ensemble, ils donnent l'impression que « ce truc est vraiment bizarre ».
Première étape : Clarifier ce que l'utilisateur vient faire
Avant de commencer, écrivez (même mentalement) :
- Qui utilise : un novice qui découvre, ou un expert qui utilise quotidiennement ?
- Les 1 à 3 tâches les plus courantes : elles doivent être les plus rapides et les plus visibles.
- Le chemin idéal pour chaque tâche : du lancement du programme à la fin, combien d'étapes minimum ?
Organisez la disposition de l'interface selon cette priorité, et non selon la liste des fonctionnalités, les champs de base de données ou les modules de code.
Deuxième étape : Où placer les boutons et les entrées
| Principe | Pratique | Contre-exemple |
|---|---|---|
| L'action près de l'objet qu'elle concerne | Les boutons Éditer/Supprimer dans une ligne se trouvent sur cette ligne ; les actions d'une carte sont sur la carte | D'abord cocher une ligne, puis aller en haut de la page pour trouver « Éditer » |
| Placer selon l'ordre de réalisation du flux | Le bouton de soumission du formulaire est à la fin du formulaire ; les boutons d'une fenêtre modale sont en bas | Le bouton Enregistrer d'un long formulaire est tout en haut |
| La fréquence détermine la visibilité | Les plus courants sont affichés directement ; les occasionnels dans un menu ; les rares dans les paramètres | Les fonctions courantes sont cachées dans un menu de second niveau |
| Une interface, une action principale | L'action principale utilise un style accentué, les autres un style secondaire | Cinq boutons bleus également visibles |
| Les actions dangereuses sont séparées | Supprimer a une couleur différente, est placé plus loin, ou dans un menu | Supprimer et Enregistrer sont côte à côte, identiques |
| Respecter les conventions de la plateforme | Windows : boutons de fenêtre en bas à droite, « OK » à gauche de « Annuler » ; macOS : « Annuler » à gauche, bouton principal à droite ; fenêtre web : bouton de fermeture en haut à droite | Créer son propre ordre |
| Même action, même position partout | Le bouton « Nouveau » est au même endroit sur chaque page | Position variable d'une page à l'autre |
| L'entrée là où l'utilisateur la cherchera | L'utilisateur pense « je veux exporter » et regarde là où il s'attend à trouver (barre d'outils, menu Fichier, au-dessus de la liste) | L'export est caché dans la page de paramètres |
Troisième étape : Supprimer les étapes inutiles
Listez chaque étape de la tâche principale et demandez-vous :
- Peut-on la supprimer ? L'utilisateur doit-il vraiment prendre une décision à cette étape ? Sinon, supprimez-la.
- Peut-on donner une valeur par défaut ? Si 90% des utilisateurs choisissent la même option, sélectionnez-la par défaut. Mémorisez le dernier choix de l'utilisateur.
- Peut-on fusionner ? « Éditer → Appliquer → Enregistrer » peut-il devenir une édition directe, avec une sauvegarde automatique ou une seule sauvegarde ?
- Peut-on reporter ? L'inscription, les paramètres détaillés, les champs optionnels : peuvent-ils être demandés quand l'utilisateur en a vraiment besoin ?
- Peut-on déduire automatiquement ? Si l'on peut déduire du nom de fichier, du contexte, des données existantes, ne demandez pas à l'utilisateur de remplir.
Étapes inutiles courantes :
| Inutile | À remplacer par |
|---|---|
| Opération réversible avec fenêtre de confirmation « Êtes-vous sûr ? » | Exécutez directement, donnez un bouton « Annuler » (comme le toast de Gmail) ; ne confirmez que pour les opérations irréversibles et à fort impact |
| Fenêtre de confirmation « Êtes-vous sûr ? [OK] [Annuler] » | Décrivez clairement la conséquence et l'objet : « Supprimer 3 fichiers ? Cette opération est irréversible. [Supprimer] [Annuler] » |
| Une seule option à sélectionner | Sélectionnez-la automatiquement, ou passez directement cette étape |
| Bouton séparé « Mode édition » | Édition directe |
| Assistant multi-étapes pour un seul champ | Un champ de saisie + un bouton, ou création en ligne |
| Après modification des paramètres, cliquer sur « Appliquer » puis « Enregistrer » | Une seule action, ou effet immédiat |
| Après l'opération, saut vers une autre page, l'utilisateur doit naviguer pour revenir | Restez sur place, mettez à jour localement |
| Doit remplir les mêmes informations à chaque fois | Mémorisez ou pré-remplissez |
Quatrième étape : N'ajoutez pas ce que l'utilisateur n'a pas demandé
L'IA a tendance à « en faire trop » : l'utilisateur demande un bouton d'export, et vous ajoutez une liste déroulante pour le format d'export, un historique des exports, une page de paramètres d'export ; l'utilisateur demande un petit outil, et vous ajoutez une barre latérale, un menu de paramètres, un changement de thème, une page À propos, un centre d'aide, des entrées « À venir ».
Chaque fonctionnalité, menu, entrée supplémentaire est une chose supplémentaire que l'utilisateur doit comprendre et ignorer, rendant l'accès à la tâche principale plus difficile. Tout ce qui est sur l'interface se bat pour l'attention de l'utilisateur.
Avant d'ajouter quelque chose, demandez-vous :
- L'utilisateur l'a-t-il demandé ? S'il ne l'a pas demandé et que ce n'est pas nécessaire pour accomplir la tâche principale, n'ajoutez pas.
- Sans cela, l'utilisateur serait-il bloqué ? Sinon, n'ajoutez pas.
- N'y a-t-il qu'une seule option, ou presque personne ne la modifie ? Dans ce cas, pas besoin de paramètre, pas besoin de liste déroulante ; utilisez directement une valeur par défaut raisonnable.
- Est-ce vide, non implémenté, « pour usage futur » ? Ne mettez pas d'entrées factices, des « À venir » grisés, des menus qui ne répondent pas au clic.
Exemples courants d'ajouts inutiles :
| Inutile | À remplacer par |
|---|---|
| Un outil avec seulement une ou deux fonctionnalités, mais avec une barre latérale + une barre de navigation en haut + un menu de paramètres | Une interface qui présente directement les fonctionnalités |
| Changement de thème, de langue, personnalisation non demandés | Ne pas faire ; ajouter si nécessaire |
| Une seule page suffit, mais elle est divisée en « Accueil / Tableau de bord / À propos / Aide » | Une seule page |
| Trois entrées pour la même fonctionnalité (barre d'outils, menu contextuel, page de paramètres) | Une entrée là où l'utilisateur la cherchera le plus ; les raccourcis peuvent être ajoutés séparément |
| « À venir », « Fonctionnalités avancées », cartes de statistiques vides | Supprimer |
| Chaque valeur est rendue configurable | Donnez une bonne valeur par défaut, n'exposez que ce que l'utilisateur modifie vraiment |
Si vous pensez qu'une fonctionnalité supplémentaire est utile, faites une suggestion après avoir accompli le besoin principal, et laissez l'utilisateur décider de l'ajouter ou non, plutôt que de l'implémenter directement.
Cinquième étape : Faites savoir à l'utilisateur ce qui se passe à tout moment
- Libellé du bouton = verbe + objet : « Exporter CSV », « Supprimer le projet », « Envoyer l'invitation », plutôt que « Soumettre », « Exécuter », « OK ». Utilisez les mots de l'utilisateur, pas les termes d'implémentation (n'écrivez pas « Synchroniser payload », « Déclencher job »).
- Réaction au clic : retour visuel dans les 100 ms ; si plus d'une seconde, affichez une progression ou un état de chargement, et désactivez le bouton pour éviter les soumissions multiples.
- Quand c'est fini, dites-le : un message de succès léger, ou l'interface affiche directement le résultat.
- En cas d'erreur, dites quoi faire : expliquez clairement où est l'erreur et comment la corriger ; affichez l'erreur à côté du champ concerné ; conservez les données déjà saisies.
- État vide : guidez vers l'étape suivante : lorsque la liste est vide, dites à l'utilisateur ce qui apparaîtra ici, et donnez directement un bouton « Créer le premier ».
- Clavier : le focus est sur le premier champ de saisie lors de l'ouverture d'une fenêtre modale ; Entrée pour valider, Échap pour fermer ; l'ordre de tabulation correspond à l'ordre visuel.
- Ne changez pas soudainement : ne déplacez pas les boutons pendant que l'utilisateur interagit, n'affichez pas une fenêtre qui bloque l'endroit où il clique.
CLI aussi : les paramètres courants ont des options courtes et des valeurs par défaut raisonnables ; les opérations dangereuses nécessitent une confirmation mais fournissent --yes ; les messages d'erreur expliquent comment corriger ; les tâches longues affichent la progression.
Sixième étape : Parcourez réellement le flux
Écrire n'est pas égal à être utilisable. Avant de livrer, vous devez réellement, en tant qu'utilisateur, parcourir le flux principal (pour les captures d'écran, voir background-friendly) :
- Faites comme si vous découvriez : ne regardez pas le code, seulement l'interface. Pouvez-vous trouver l'entrée de la tâche en 5 secondes ?
- Comptez les étapes : combien de clics/saisies pour accomplir la tâche principale ? Comparez avec le chemin idéal écrit à la première étape. Chaque étape supplémentaire doit avoir une raison.
- Parcourez uniquement avec le clavier.
- Faites une erreur intentionnellement : saisie incorrecte, annulation en cours, déconnexion réseau, et voyez ce qui se passe, si la saisie est perdue.
- Quand la fenêtre est réduite, que le contenu est long ou vide, les boutons sont-ils toujours à une position raisonnable ?
Si vous ne pouvez pas parcourir (pas d'environnement d'exécution), dites explicitement à l'utilisateur « Le flux interactif n'a pas été réellement vérifié », et listez les étapes que vous avez conçues pour qu'il les vérifie.
Limites
- Si l'utilisateur spécifie une disposition ou un flux, suivez-le ; si vous pensez qu'il y a un problème, dites-le, et laissez l'utilisateur décider.
- Les experts d'outils professionnels peuvent privilégier l'efficacité plutôt que la facilité d'apprentissage : les raccourcis clavier, les opérations par lots, la haute densité sont plus importants que le guidage des débutants. Identifiez d'abord qui est l'utilisateur.
- Pour les opérations irréversibles et à haut risque (paiement, suppression de données de production, envoi groupé de messages), une étape de confirmation supplémentaire est correcte. Ne la supprimez pas pour « réduire le nombre d'étapes ».
- Lors de la modification d'un programme existant, ne changez pas radicalement les positions que les utilisateurs ont déjà l'habitude de voir pour « plus de logique » ; si vous devez changer, expliquez pourquoi.
Liste de vérification
- Quelles sont les 1 à 3 tâches les plus courantes ? Sont-elles les plus rapides et les plus visibles ?
- Chaque bouton est-il à côté de l'objet qu'il concerne, à l'endroit où l'utilisateur termine le flux ?
- Chaque interface a-t-elle une seule action principale ? Les actions dangereuses sont-elles séparées de l'action principale ?
- Respecte-t-on les conventions de la plateforme (ordre des boutons, position, raccourcis) ?
- Pour chaque étape de la tâche principale, s'est-on demandé « peut-on supprimer, donner une valeur par défaut, fusionner ? »
- Chaque fonctionnalité, menu, entrée est-elle demandée ou nécessaire par l'utilisateur ? Pas d'entrée factice, de paramètre non sollicité ?
- Les fenêtres de confirmation sont-elles réservées aux opérations irréversibles ? Les opérations réversibles ont-elles un bouton « Annuler » ?
- Les libellés des boutons sont-ils « verbe + objet » ? Utilisent-ils les mots de l'utilisateur ?
- Les états de chargement, de succès, d'erreur et vides sont-ils gérés ? Les saisies sont-elles conservées en cas d'erreur ?
- Avez-vous réellement parcouru le flux en tant que nouvel utilisateur, en comptant les étapes ? Si non, dites « non vérifié »