Annuler au lieu des boîtes de dialogue de confirmation : concevoir une interface utilisateur moins perturbante
Pourquoi la routine "Es-tu sûr ?" les dialogues échouent, lorsqu'une confirmation est toujours correcte, et comment concevoir des toasts d'annulation clairs, accessibles et sûrs.
À retenir
Utilisez l'annulation pour les actions qui peuvent être annulées : effectuez l'action immédiatement, puis affichez un court message non bloquant avec un bouton Annuler. Conservez des boîtes de dialogue de confirmation pour les actions graves et irréversibles telles qu'une suppression définitive ou des paiements importants, et rendez-les spécifiques : nommez l'objet et la conséquence. La confirmation des actions de routine entraîne les gens à cliquer sur « OK » sans lire.
Pourquoi les confirmations de routine ne fonctionnent plus
Les conseils de Nielsen Norman Group sur les boîtes de dialogue de confirmation sont clairs : utilisez-les avant des actions ayant des conséquences graves et ne les utilisez pas pour des actions de routine. Lorsque les gens voient la même boîte de dialogue plusieurs fois, ils confirment par habitude et la boîte de dialogue cesse d'empêcher les erreurs qu'elle était censée détecter. Le même article recommande de proposer l'annulation dans la mesure du possible au lieu de s'appuyer sur un avertissement.
Confirmer ou annuler : une règle simple
Posez une question : cela peut-il être inversé ? Si oui, agissez et proposez l’annulation. Si non, confirmez d’abord et précisez la confirmation.
- Archiver, déplacer, marquer comme lu, supprimer d'une liste : agissez maintenant, proposez d'annuler.
- Envoyer un message : de nombreux produits retardent brièvement l'envoi afin de pouvoir l'annuler. Gmail permet aux utilisateurs de choisir une fenêtre d'annulation de 5, 10, 20 ou 30 secondes.
- Supprimer définitivement, payer, publier publiquement : confirmez d'abord en nommant l'élément et l'impact ("Supprimer 142 fichiers").
- Mieux encore : rendez la suppression réversible avec une période de corbeille ou de récupération, puis utilisez l'annulation.
Conception du message d'annulation
Material Design appelle ce composant une barre de collation : un message bref et peu interrompu qui peut contenir une seule action, contrairement à une boîte de dialogue, qui nécessite une réponse. Écrivez ce qui s'est passé en quelques mots, indiquez Annuler comme action unique et gardez-le à l'écran suffisamment longtemps pour que les gens puissent réagir. Ne cachez pas les actions d'annulation importantes dans les messages qui disparaissent au bout de deux secondes.
Détails d'accessibilité
Les toasts qui disparaissent d'eux-mêmes peuvent manquer aux utilisateurs de lecteurs d'écran et aux personnes qui ont besoin de plus de temps. Annoncez le message via une région en direct polie, laissez les utilisateurs du clavier accéder au bouton Annuler, mettez le minuteur en pause pendant que le message est survolé ou focalisé et fournissez un autre moyen d'annuler l'action, comme une liste d'historique ou une corbeille.
Motion en annulation
Une entrée courte et calme depuis le bord de l'écran et une sortie claire aident les gens à remarquer le message sans être interrompus. Lorsque vous appuyez sur Annuler, animez l'élément pour le remettre en place afin que l'inversion soit visible. Respectez les paramètres de mouvement réduit avec un simple fondu.
Principes clés à retenir
- Actions réversibles : agissez immédiatement et proposez l'annulation
- Actions irréversibles et graves : une confirmation précise qui nomme l'impact
- Les confirmations de routine sont cliquées par habitude
- Rendre les messages d'annulation accessibles : région en direct, focus clavier, suffisamment de temps
- Animez l'inversion pour que les gens voient que cela a fonctionné
Questions fréquentes
Sources
- Confirmation Dialogs Can Prevent User Errors — If Not Overused — Nielsen Norman Group
- Send or unsend Gmail messages — Gmail Aide
- Snackbar guidelines — Material Design 3