Où l’on se débarrasse des popups de confirmation

Dans toute interface web, il y a ce que l’on pourrait appeler des « figures imposées ». La liste d’éléments avec son duo de boutons « Éditer » et « Supprimer » en est le parfait exemple.

Si en termes de logique côté serveur, la suppression est de loin l’opération la moins compliquée à implémenter, elle impose en revanche une petite subtilité du côté de l’interface : la demande de confirmation. On ne peut en effet décemment pas supprimer des données sans être sûr qu’il ne s’agit pas d’un clic malheureux ou que l’utilisateur a bien compris les implications de cette action.

Généralement, cette confirmation est demandée sous forme de modal, variante de la vénérable popup qui s’affiche en surcouche de la page courante, contenant l’insipide phrase « Êtes-vous sûr de vouloir supprimer cet élément ? » précédant deux boutons « Annuler » et « OK ». Exemple :

L’effet est assez ennuyeux et intrusif : un nouvel élément visuel apparaît au-dessus d’une interface déjà probablement chargée et oblige l’utilisateur a lire une phrase sans intérêt et à déplacer sa souris pour cliquer sur le bouton idoine. Pire, s’il s’agit d’un clic non intentionnel, l’utilisateur voyant réagir l’application aussi violemment peut s’inquiéter d’avoir « fait une bêtise ».

Comment alors demander une confirmation de manière discrète, tout en restant clair sur la marche à suivre ? Voici ce que je propose :

Comme on le voit, c’est le bouton d’action lui-même qui se transforme en bouton de confirmation. En cliquant une seconde fois, l’action est exécutée. Si on attend un peu, le bouton revient à son état d’origine. En réutilisant le même bouton, on évite de surcharger l’interface avec un élément supplémentaire et, si ce n’est pas ce que l’utilisateur souhaite faire, il lui suffit d’ignorer le bouton et de passer à la suite, sans se préoccuper des conséquences de son erreur.

ng-really, une directive AngularJS

Pour disposer de ce comportement, j’ai développé une directive AngularJS 1, ng-really. Très simple, elle se compose de moins de 50 lignes de code. Et pour l’utiliser, c’est encore plus simple, il suffit d’ajouter trois attributs sur l’élément sur lequel ajouter votre confirmation (généralement, un bouton) :

<button type="button" class="btn btn-danger" ng-really ng-really-confirm-label="Really?" ng-really-confirmed-action="confirmedAction()" ng-really-timeout="1000">Delete</button>

Je vous la propose sous licence open-source MIT (oui, je suis un développeur sympa ????). Utilisez-là, contribuez, forkez et débarrassez le monde des modals ????