web-dev-qa-db-fra.com

La confirmation "Suppression réussie" doit-elle être rouge ou verte?

De quelle couleur doit être un message de confirmation de suppression?

Ceci est lié à la question Est-ce que "oui, supprimez-le" doit être rouge ou vert?, mais différent parce que cette question demande un message de confirmation passif et non le bouton de suppression actif.

On pourrait dire le vert, la couleur typique du succès, mais le bouton Supprimer était rouge et il a l'air bizarre. Rendre le message rouge, parce que vous venez de supprimer quelque chose, n'a également aucun sens car le rouge est censé être une erreur.

Dans mon cas spécifique, il s'agit de rejeter ou d'accepter des propositions. Les options sont les suivantes:

Green background / success (Succès)

Red background / danger (danger)

Yellow background / warning (Attention)

Blue background / info (Info)

Mettre rejeté en gras met davantage l'accent sur la différence entre rejeté et accepté . Le texte pourrait également être modifié en "Vous avez réussi rejeté la proposition", ce qui met également davantage l'accent sur l'action réelle quelle que soit la couleur.

Sans couleur, un fond gris avec du texte noir semble bizarre. Cela ne ressemble plus du tout à une notification, donc je ne considère pas vraiment cela comme une option.

Enfin, quelqu'un a suggéré de ne pas avoir de message du tout, car la proposition sera supprimée de la liste des propositions. Selon cette personne, cette suppression en soi devrait suffire. Personnellement, je ne suis pas d'accord. Ça fait bizarre.

Globalement, je penche vers le vert ou le bleu (succès ou info). Les messages rouges devraient être un échec d'une certaine sorte, et l'avertissement jaune me fait également sentir qu'il y a une action supplémentaire que je dois prendre. Le vert ne ressemble pas à un rejet (le bouton de rejet est rouge, le bouton d'approbation est vert) et le bleu semble également éteint pour une raison quelconque.

Quelle option utiliser?

68
Luc

Ne commencez pas par choisir des couleurs!

1. Premièrement, distinguez les notifications des erreurs

C'est un point commun de confusion avec UX. Considérez ces deux messages:

  • Sorry, the app has crashed - Il s'agit d'une erreur et doit être mise en évidence comme une erreur (c'est-à-dire une alerte contextuelle, une boîte de dialogue, un bouton rouge, etc.).
  • You have rejected a date with Kate Upton - Bien que cela ressemble à une erreur, ce n'est PAS une erreur. Il s'agit d'une notification de confirmation qui indique un choix négatif.

Dans votre cas, confirmer un rejet de proposition n'est pas une erreur, c'est une notification.


2. Ensuite, prenez votre décision de mise en page

Maintenant que vous savez qu'il s'agit d'une notification, le choix de la couleur et de la mise en page doit être conforme aux autres notifications de votre application/site.

Donc il est impossible de répondre à la question du choix de couleur sans voir à quoi ressemble la notification positive (proposition acceptée) .

Supposons que vous ayez une paire de notifications: Proposal accepted et Proposal rejected.

  • En général, de nos jours, ce n'est pas une bonne idée d'utiliser des arrière-plans colorés pour distinguer les deux, car il devient difficile pour l'utilisateur de les reconnaître tous les deux comme des notifications.
  • Il est préférable de choisir une disposition commune pour les notifications (par exemple, fond noir ou toasts ), puis de transmettre le message d'acceptation/de rejet À L'INTÉRIEUR de la notification.

enter image description here

  • Si vous devez mettre en évidence le statut d'acceptation/de rejet plus clairement, vous pouvez utiliser des icônes de statut ou des échantillons de couleur pour mettre en surbrillance le statut, mais conserver la disposition cohérente de la notification (dans cet exemple, le fond noir commun)

enter image description here

La couleur, la forme et l'animation spécifiques des notifications dépendront de la disposition de votre application et de la palette de couleurs, mais quelles qu'elles soient, elles doivent être cohérentes entre Accepter et Rejeter afin que les deux notifications soient clairement perçues comme la même espèce.

97
tohster

Je recommanderais de s'éloigner de la couleur pour les messages de confirmation dans ce cas.

Je dis cela parce que cela peut être déroutant pour l'utilisateur, d'autant plus que vous utilisez le rouge et le vert pour "Rejeter" et "Accepter".

Jetez un œil à Google sur la façon dont ils le font avec ce qu'ils appellent des barres-collations et des toasts.

enter image description here

En éliminant la couleur et en utilisant un langage tel que "avec succès" comme vous l'avez mentionné, cela diminue le modèle mental associé à certaines couleurs et davantage le message.

Modifier:
Je viens de voir Daniel répondre avec une solution très similaire!

Si vous avez d'autres messages, vous devez à peu près suivre le modèle que vous avez créé.

Donc, si cela est considéré comme la réussite d'une action et que toutes les autres actions réussies reçoivent un message vert, cela doit obtenir un message vert.

47
Andrea Tate

Inbox Notification

Je trouve que le fond gris avec du texte blanc donne une sensation très neutre et a l'air bien aussi. Sauf si c'est bon ou mauvais, j'éviterais le vert ou le rouge.

23
Daniel Zahra

Le message indique une action réussie, donc si vous utilisez des repères de couleur, ce message devrait utiliser la couleur de succès: vert, dans votre cas. La couleur de danger (rouge, dans cet exemple) doit être utilisée lorsque l'utilisateur est sur le point de faire quelque chose de destructeur (par exemple "Êtes-vous sûr de vouloir supprimer ceci? "), mais le message que vous demandez concerne quand l'utilisateur l'a déjà fait . Le danger est passé, vous ne devez donc pas utiliser d'indices de couleur qui pourraient indiquer que le danger est toujours présent. À moins, bien sûr, que la situation ne soit dangereuse pour une autre raison.

8
The Spooniest

Il existe déjà quelques bonnes réponses vous invitant à vous éloigner des couleurs. Je suis d'accord avec eux. Compte tenu du daltonisme/des relations culturelles, les couleurs doivent toujours être utilisées comme mode secondaire de transmission de toute information. Mais là encore, si vous travaillez avec une application qui a déjà des alertes de réussite, d'échec qui utilisent des repères de couleur, alors vous voudriez être cohérent.

Dans ce scénario, je m'en tiendrai à la couleur dans laquelle tous les succès sont affichés. Il s'agit d'une confirmation d'une action de l'utilisateur. J'augmenterai le message avec un symbole approprié d'Info, de coche de réussite ou d'une mauvaise croix ou de toute autre chose selon le cas.

En outre, si vous utilisez du rouge, en supposant qu'il est utilisé dans toute l'application pour l'erreur, déclenche rapidement une réponse de l'utilisateur. il attend des moyens de corriger toute erreur qu'il a dû rencontrer/commettre. Dans ce cas, il n'y a pas d'erreur, ce serait donc une fausse alarme. Vous ne voudriez pas créer un système qui n'est pas cohérent et qui crée délibérément de fausses alarmes. Cela aura également un impact sur vos autres messages d'erreur. Les utilisateurs auront une charge intellectuelle à traiter pour faire la différence entre une confirmation négative et une erreur réelle.

En outre, vous supposez un rejet ou tout élément négatif, la suppression d'une action est intrinsèquement dangereuse/mauvaise, etc. Ce qui n'est certainement pas le cas. Un message d'erreur qui diffère de la norme donnera l'impression que l'action effectuée par l'utilisateur est en quelque sorte considérée sous un mauvais jour. Vous ne voudriez pas faire ça.

Les réponses qui évitent les couleurs le montrent également de manière agnostique. Vos notifications et alertes ne doivent pas varier sur le contenu. Ceux-ci devraient être de nature plus générique, dénotant fondamentalement le succès ou l'échec d'une opération.

7
Sol