Patterns UX
Actions destructives
Principe général
Toute action irréversible demande une confirmation explicite. La confirmation doit nommer l'objet concerné, décrire la conséquence, et proposer un bouton rouge explicitement libellé.
✓ Nommer l'objet dans le titre ("Supprimer la commande CMD-0241" pas "Confirmer la suppression")
✓ Décrire la conséquence irréversible en corps de message
✓ Bouton de confirmation rouge (btn-danger), libellé comme l'action ("Supprimer la commande")
✓ Bouton Annuler à gauche, facilement accessible
✗ Ne JAMAIS utiliser window.confirm(), window.alert(), window.prompt()
✗ Ne pas pré-sélectionner le bouton rouge (risque de clic accidentel)
✗ Ne pas libeller le bouton de confirmation "OK" ou "Oui"
Niveau de confirmation selon le risque
| Niveau | Type d'action | Pattern | Exemple |
|---|---|---|---|
| Bas | Réversible facilement | Aucune confirmation — prévoir un "Annuler" post-action (undo toast) | Archiver une commande |
| Moyen | Irréversible, impact limité | Modal de confirmation standard | Supprimer un document |
| Élevé | Irréversible, impact fort | Modal avec saisie du nom pour confirmer | Supprimer un client avec tout son historique |
Pattern : Confirmation avec saisie (niveau élevé)
Pour les suppressions à fort impact : demander à l'utilisateur de taper le nom de l'objet pour débloquer le bouton.
Supprimer le client "Scouts de Namur" ?
Cette action supprimera le client et ses 24 commandes associées. Cette opération est définitive.
Undo toast (niveau bas)
Pour les actions récupérables : exécuter immédiatement, proposer un délai d'annulation de 5 secondes.
Commande archivée
Signaux visuels dans l'UI
Les éléments déclenchant une action destructive doivent être visuellement distincts.
Dans un groupe d'actions :
Action destructive isolée à gauche, actions constructives à droite.