Étude de cas UX : créer un modal de confirmation
Les popups (ou modals) de confirmation sont des petites fenêtres qui apparaissent à la suite d’une action sur une interface. C’est très souvent utilisé lorsqu’on souhaite supprimer ou modifier un élément.
Le problème c’est qu’il y a encore beaucoup trop de personnes qui font les mêmes erreurs qui nuisent à la qualité de leur expérience utilisateur.
Vous devez savoir qu’il est impératif que vous ayez une sémantique intelligente des actions dans votre interface. J’entends par là qu’il faut pouvoir distinguer les actions primaires, secondaires, tertiaires et autres.
Si vous ne voyez absolument pas de quoi je parle, mettez en pause cette lecture et lisez cet article sur la sémantique des actions.
L’erreur majeure
Quand une popup apparait, on voit très souvent l’un de ces designs :
A première vue, on pourrait se dire : « Mais c’est très bien ça ! » alors qu’il est tellement simple de les améliorer 😉
Le soucis avec le 1er exemple, c’est que les 2 boutons (qu’on va appeler « actions ») sont gris (ou du moins de la même couleur). Et il n’y a donc aucune différence notable entre les 2, hormis le texte de chacun.
Pour améliorer l’expérience de l’utilisateur, on pourrait se dire que le 2e exemple est mieux et qu’il résout notre précédent soucis. Or on verra juste après que le fait de mettre en avant une action en opposition à la volonté initiale est une mauvaise idée !
Enfin, le 3e exemple n’est surement pas le pire mais il est mauvais dans le sens où le vert et le rouge sont en opposition au même « niveau ». Ainsi, au retourne au problème initial où il faut inciter une action plutôt qu’une autre.
Voici le mantra qu’il faut retenir pour une excellente expérience utilisateur :
Toujours orienter l’action de l’utilisateur dans un workflow donné
Le workflow désigne le fait que l’utilisateur a commencé un « parcours d’actions » (ex: créer un compte, commander un produit, …)
Une seule et unique question
Mais alors, dois-je inciter l’utilisateur à supprimer ou à annuler ?
1. Une erreur humaine
Beaucoup de personnes diraient qu’il faudrait mettre en avant le bouton d’annulation. Pourquoi ? Car l’utilisateur aurait bien pu cliquer sans faire attention sur le bouton de suppression auparavant.
Ce raisonnement est logique et se met en faveur d’une personne qui se serait trompée sur l’action qui voulait faire initialement.
2. On pense à tous nos utilisateurs
Ici on ne va pas penser à chaque utilisateur mais aux utilisateurs dans leur globalité. Si un utilisateur lambda décide de supprimer quelque chose, c’est bien qu’il en a envie !
L’idée d’avoir un modal de confirmation va même « l’embêter » quand on y pense. Et oui, tout ce qu’il voulait lui, c’était de supprimer et rien de plus ! Imaginons une personne qui souhaite supprimer X éléments, cela va donc lui demander X*2 clics pour y arriver.
✅ La solution
Google l’a trouvé depuis un moment ! Il s’agit de ne pas bloquer l’action utilisateur. Lorsqu’on décide de supprimer un document sur Google Drive par exemple, Google ne va pas afficher de modal (car sinon cela serait bloquant) et de donne plutôt la possibilité de revenir en arrière un fois la suppression effectuée (grâce à une petit popup/notification qui apparait en bas à gauche)
Résultat, l’expérience utilisateur est excellente et tout le monde est content :
- L’utilisateur qui se trompe peut restaurer son fichier
- L’utilisateur qui veut juste supprimer un ou plusieurs fichiers peut le faire sans avoir à confirmer tous ses choix
Conclusion
Si vous décidez d’ajouter une popup (ou un modal) de confirmation, le meilleur choix reste de toujours mettre en avant l’action logique qui suit.
Et pour finir, n’hésitez pas à enrichir vos interfaces avec des visuels explicites. Notamment des icônes pour reconnaitre le sens d’une action.
Et si on veut aller plus loin ?
On retrouve le label « je confirme » sur le bouton de confirmation, or il ne s’agit pas d’une bonne pratique. Tout simplement car on pourrait « tout confirmer », c’est un verbe qui s’applique à toutes les actions.
Une bien meilleure solution serait d’afficher « supprimer ». Car non seulement ça correspond parfaitement à l’action que l’utilisateur souhaite faire, mais cela va surtout le rassurer sur sa volonté.
Autre point, on remplace l’icône de validation par une icône de poubelle. Le message circulé par cette icône sera plus cohérent avec la suppression.
Enfin, la suppression est souvent associée à la couleur rouge, il serait donc mieux de changer la couleur de fond pour s’accorder avec les conventions universelles
Enfin, si l’image de cette article vous a plu, j’ai réalisé une vidéo où je vous montre étape par étape sa création.
