Couleur du bouton principal destructeur
Dans notre application, nous utilisons des boutons verts pour signifier les actions principales (situées à droite, mais c'est une discussion complètement différente) et des boutons gris pour désigner les actions secondaires ('Annuler'). Par exemple: 
La question est: quelle couleur utiliser pour les modaux de confirmation où l'utilisateur détruira les données?
Remarque: dans cet exemple, je me concentre sur la suppression des données. Le même cas s'applique à d'autres actions qui ont un impact plus important (peu importe si cela a un impact sur l'état du système ou le temps qu'il faut pour inverser une action). Bien sûr, nous devons ajouter des méthodes pour annuler des actions, expliquer les résultats d'une action en (micro-) copie, ne pas utiliser de modaux en premier lieu, etc., mais pour l'instant je veux juste me concentrer sur la couleur du bouton. Nous semblons avoir trois options:
1) Soyez cohérent avec les modaux génériques dans l'application
Inconvénient: 'Supprimer' se sent trop comme une action sûre.
2) Rendre plus évident que l'action principale est destructrice
Inconvénients: 'Supprimer' peut être trop découragé, n'oublions pas que l'utilisateur a initié l'action de suppression avant l'apparition du modal.
) Combinez les couleurs vertes et rouges
Inconvénients: Bien qu'il communique quelle action est "sûre" et laquelle est "dangereuse", cela peut être source de confusion et ralentir trop les utilisateurs.
Partout, les applications s'appuient généralement sur une palette de couleurs qui est déjà, dans une certaine mesure, devenue une norme.
Le rouge signifie: Oh non! Prudent! Il faut se méfier! ATTENTION!!!
Le vert signifie: sûr. Fonce. Ah oui, rien à craindre.
Je ne pense pas que cela ralentisse un utilisateur, bien au contraire. Étant donné que les applications ont universellement adopté le rouge et le vert pour être des couleurs de "soyez conscient" et "vous êtes d'accord", les actions sont beaucoup plus faciles à effectuer.
Ne cassez pas une norme, sauf si vous avez une très bonne raison de le faire.
Ne réinventez rien sauf si vous avez une bonne raison de le faire. Cette raison étant que les gens l'ont vu plusieurs fois partout, ils s'attendent déjà à ce qu'une certaine chose/couleur fasse/signifie quelque chose.
Si vous avez remarqué que le rouge d'Apple signifie la même chose:
Twitter bootstrap fait la même chose:
Les gens sont déjà habitués à ce qui est utilisé universellement, alors pourquoi enfreindre la norme? Grisez ce qui est secondaire. Le primaire est toujours coloré, et dans ce cas, il est rouge/vert selon l'action (supprimer sera rouge, confirmera sera bleu, accepter sera vert, etc.).
Étant donné que vous avez mentionné vous-même que l'utilisateur a déjà lancé l'action, il est probable que l'utilisateur voudra confirmer l'action.
Annuler n'est pas vraiment une action, mais plutôt un rejet de la boîte de dialogue modale. Compte tenu de cela, je vous suggère de désaccentuer fortement le bouton d'annulation. Si vous le faites, il devient clair que vous n'avez pas besoin du codage couleur en premier lieu:
Il peut sembler que les utilisateurs sont habitués aux boutons de type lien uniquement sur les sites Web, mais ce n'est pas vrai. Windows utilise beaucoup de liens dans ses applications:
Bien que la question porte spécifiquement sur la couleur, je voudrais faire la suggestion suivante:
Avec une fonction critique telle que celle que vous décrivez, vous souhaitez rendre la fonction d'interaction différente des autres étapes d'interaction associées à des actions moins destructrices pour éviter qu'un utilisateur ne suive un schéma répétitif, presque inconscient, comme il le pourrait pour les fonctions courantes.
Vous pouvez y parvenir simplement en échangeant les boutons, ou mieux en faisant complètement différer la fonction de suppression, par exemple, en activant la fonction de suppression avant de l'autoriser.
La couleur seule ne sera pas nécessairement suffisante.
J'irais avec un nom de bouton non ambigu, puis je serais cohérent avec les couleurs que vous utilisez. "Confirmer la suppression" .. ou quelque chose de similaire.
Un très bon point
Mon approche serait de:
- Évitez les pop-ups en général. Si l'utilisateur reçoit une notification pop-up, c'est uniquement parce qu'il doit s'arrêter un peu et réfléchir. S'il n'y a pas de pollution pop-up, ils sont plus susceptibles de le lire
- Au lieu des fenêtres contextuelles, pour les notifications et la plupart des choses, utilisez des notifications sur la page qui n'ont pas besoin d'être fermées en cliquant sur
- Je laisserais de côté les confirmations inutiles. Pour l'exemple de déconnexion, je n'utiliserais pas de confirmation, à moins qu'il ne soit particulièrement difficile pour un utilisateur de se reconnecter.
- Lorsque vous utilisez les fenêtres contextuelles avec parcimonie, utilisez le même codage couleur que d'habitude (fonction principale: Supprimer = couleur primaire, fonction secondaire = utiliser la couleur secondaire).
- En général, peut-être qu'une autre couleur que le vert est meilleure pour la couleur primaire?
J'aimerais parler de deux choses.
Il y a trop d'informations sur l'action affichées à l'utilisateur. Par exemple. Lorsque l'utilisateur clique sur "Supprimer", le système d'options affiche un contenu modal avec en-tête "Supprimer l'élément" qui dit "Êtes-vous sûr de vouloir supprimer" suivi du bouton d'action intitulé "Supprimer". J'espère que vous savez de quoi je parle. Je vous suggère d'utiliser des boutons d'action intitulés "Oui, Non" ou "Ok, Annuler"
Passant au schéma de couleurs à suivre, pour un schéma cohérent, l'utilisateur peut être habitué à passer en revue les modaux avec désinvolture, mais si vous devez obliger l'utilisateur à réfléchir et à réfléchir pendant un certain temps avant de continuer, vous devrez utiliser un repère visuel. Soit changez la couleur du bouton d'action principale en quelque chose comme l'orange qui n'est ni trop intimidant ni trop subtil et qui attirera l'attention des utilisateurs, ou vous pouvez continuer avec le même schéma de couleurs pour la cohérence et avoir une icône d'avertissement ou d'alerte sur le modal qui peut arrêter l'utilisateur pendant un certain temps avant de cliquer aveuglément sur le bouton vert.
S'il s'agit d'une fenêtre modale personnalisable, je styliserais Annuler en tant que lien de texte brut et Supprimer en tant que bouton rouge ou au moins d'une couleur correspondant à la marque du site. Le style du bouton Supprimer, quelle que soit sa couleur, se distinguerait instantanément de l'option Annuler. Je placerais les options assez proches les unes des autres; Je ne suis pas fan des options de frères et sœurs qui affleurent les côtés opposés de leur conteneur parent.
Le lien qui fait apparaître la fenêtre modale pourrait être rouge pour mieux la distinguer de ses frères et sœurs, en supposant que ce lien fait partie d'un menu.