Dans les fenêtres modales, on voit souvent ce couple de bouton annuler/valider, mais il est souvent mal implémenté.
Souvent, il guide mal l’utilisateur.
Les principaux problèmes sont :
- des boutons équivalents en termes visuels
- un ordonnancement inversé : le bouton « valider » à gauche, le bouton « annuler » à droite
- des intitulés sybillins ou pas en accord avec le titre de la modale
Ces problèmes font que l’utilisateur doit se concentrer pour valider la modale.
Pourquoi pas, si on veut qu’il ne prenne pas une décision à la légère…
Mais, en réalité, ce ne sont pas de bonnes règles.
Comment faire ?
En fait, c’est très simple, il existe au moins 6 règles pour que ce genre de fenêtre soit clairement lisible.
- Un titre de modale qui explique clairement l’action de la fenêtre ;
- Un intitulé de bouton « valider » qui reprend le verbe principal d’action de la modale ;
- Le bouton « annuler » à gauche, le bouton « valider » à droite (sens de lecture occidental) ;
- Un bouton « valider » dans la couleur standard des boutons de l’interface quelle qu’elle soit (, , ), tant qu’elle respecte l’homogénéité du choix des couleurs de l’interface
- Éviter le rouge ;
- Utiliser une couleur grise ou neutre pour le bouton « Annuler ».
Voilà, c’est simple en apparence, mais pas toujours, sinon beaucoup de gens ne commettraient pas encore l’erreur.
