web-dev-qa-db-fra.com

coche rouge par rapport à un "X" rouge

Je suis en train de concevoir un panneau dans mon application métier qui montre une table de données à un utilisateur. Les données dans le tableau sont le pourcentage de l'entreprise (ce qui est égal à de nombreuses valeurs différentes), si l'entreprise a ou non une violation grave, et si l'entreprise a ou non une alerte globale liée à ces données.

J'ai actuellement conçu le panneau avec une coche rouge indiquant que la société a commis une violation grave. Cependant, récemment, un de mes collègues a signalé que cela n'avait pas beaucoup de sens car il s'agit d'une coche et a suggéré d'en faire un "X". Je suis tiraillé entre les deux et je me demandais ce que les gens pensaient du point de vue de l'utilisabilité.

Two mock ups showing current panel design with checkmark and suggested design with X

23
Jason Frade

Une coche représente quelque chose de positif - généralement "bon" ou "correct", vous ne devez donc pas l'utiliser pour représenter quelque chose de négatif comme "violation grave". Je me concentrerais sur en utilisant soit un X ou un signe d'avertissement, avec une préférence pour le signe d'avertissement.

Mis à part l'icône, je ne vois aucune bonne raison d'avoir des colonnes pour "violation grave" et "alerte globale". L'alerte globale est redondante et la table deviendra plus utilisable sans elle.

En fait, vous n'avez probablement même pas besoin d'avoir une colonne pour un avertissement, et pouvez afficher un avertissement avec juste couleur et avertissement (ou icône X).

Voici deux exemples approximatifs. Ma préférence va au premier (mais avec un meilleur design):

enter image description here

enter image description here

40
JohnGB

En examinant de plus près votre question, je révise ma réponse. Ce que vous essayez de transmettre est "Cette entreprise a-t-elle une défaillance (c'est-à-dire non-conformité à une norme)? Oui ou non". Dans ce cas, la couleur n'est pas pertinente, ce n'est pas un échec, et une coche est quelque peu standard.

Considérons un tableau où plusieurs types de la même chose, comme une tablette, sont comparés. Les tablettes sont répertoriées sur le côté gauche avec les fonctionnalités qu'elles ont ou non répertoriées en haut.

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Les contrôles sont utilisés pour indiquer la présence de la fonction. Dans votre cas, les contrôles indiquent si l'entreprise a violé quelque chose ou a une alerte. Maintenant, je pense que la confusion vient parce que vous avez une icône d'alerte pour la colonne "Alerte globale". Si vous aviez des coches pour les deux colonnes, il serait plus clair que vous transmettez une relation "a ceci, n'a pas cette" relation au lieu de "alerte! Faites attention! Échec! Faites quelque chose!". Si, toutefois, vous souhaitez encourager l'utilisateur à agir en fonction des données, ma réponse d'origine est valable:

L'utilisation d'une coche rouge ne se traduirait pas pour les utilisateurs atteints de daltonisme rouge-vert, ainsi que pour certains autres types de daltonisme. Les coches représentent généralement le succès et ne doivent pas être utilisées lorsque vous essayez de transmettre une situation d'échec. Le "X" est généralement compris comme signifiant un échec (voir validation du formulaire et autres erreurs sur le Web).

Twitter form validation with X used to indicate invalid email and check used to indicate valid entries

Cependant, mis en évidence par nos réponses et les commentaires de @ Marjan Venema , le titre de la colonne est trompeur en conjonction avec une coche ou un X. Une icône d'alerte, ou mieux encore, une icône plus un texte disant quelque chose comme "X a échoué" serait plus correct.

21
elemjay19

J'utiliserais un point d'exclamation rouge comme icône dans la colonne (similaire à l'icône utilisée par JohnGB. Ma première pensée a été de renommer la colonne afin que vous puissiez utiliser un X rouge. Par exemple, si vous la renommiez "Conforming", "In En règle "," Aucune violation "ou" Respect des règles ", vous pouvez alors utiliser un X rouge pour indiquer que la société n'est PAS conforme ou a une violation. Un X rouge signifie généralement que quelque chose n'est pas dans quoi que ce soit indiquer la colonne indique, donc un logicien strict pourrait faire valoir que les entreprises avec un X rouge n'étaient pas en violation.

Restez à l'écart de la coche rouge, car cela envoie vraiment un message contradictoire.

Un point d'exclamation rouge ou orange serait vraiment plus clair et plus facile à comprendre.

J'aime aussi l'idée de combiner les colonnes "Violation grave" et "Alerte globale". Appelez cela quelque chose comme "Santé" ou "Debout". Utilisez des X rouges pour les violations graves et des points d'exclamation orange pour les alertes.

enter image description here

17
hhamilton

A la coche rouge semble ambiguë, "Est-ce acceptable mais pas bon?", "Il est terminé mais a quelques problèmes?" ou autre chose? Depuis, la coche est quelque chose qui représente l'achèvement ou l'acceptation/l'approbation.

Pour violation, vous pouvez utiliser un X comme John l'a suggéré ou vous pouvez opter pour un cercle avec une barre oblique vers l'arrière (le symbole pour interdiction).

6
rk.

C'est en fait une chose culturelle. Aux États-Unis et en Allemagne, X est couramment utilisé comme coche. Dans la plupart des pays, c'est . Au Japon, son marque O est utilisé.

6
Eternal Noob

J'ai dû faire un choix similaire aujourd'hui et c'est ce que nous avons décidé:

  • Coche verte pour correct
    Le vert décrit généralement une bonne chose et la coche se traduit également pour les utilisateurs daltoniens (personnes souffrant de daltonisme rouge-vert)
  • Triangle jaune pour avertissement
    Le jaune est généralement la couleur des panneaux d'avertissement (ex: panneaux de signalisation) et une forme triangulaire pour les utilisateurs daltoniens
  • Cercle rouge et rempli pour alerte
    Le rouge est généralement utilisé pour les systèmes d'alerte dans la vie réelle (ex: lampe rouge pour problème de sécurité) et le cercle est généralement utilisé dans les panneaux de signalisation pour spécifier une interdiction.

Nous voulions utiliser un cercle rouge avec barre oblique inverse, mais pour bien voir, il faudrait que ce soit plus de 32 x 32 px et nous sommes limités à 16 x 16 px.

Nous ne pouvons pas utiliser une coche rouge car il y a un conflit entre la couleur sémantique et la forme sémantique.

Enfin, nous ne pouvons pas utiliser un X rouge parce que l'utilisation sémantique de X est pour la suppression, la fermeture dans les fenêtres ou la fermeture du bouton contextuel.

4
pierre lebailly

Je conseillerais la prudence; un X rouge peut être ambigu. Dans de nombreux systèmes, ce symbole est associé à un comportement de suppression.

Je travaille sur un système avec cette signification symbolique. Dans les situations que vous décrivez, nous avons utilisé un X blanc dans un cercle rouge pour indiquer le comportement d'erreur/violation (comme le symbole d'erreur de Visual Studio), et un X blanc suffisamment différent dans un carré rouge pour indiquer une erreur douce/légère.

Pour correspondre à votre style d'avertissement, vous pouvez peut-être utiliser un X rouge dans un cercle rouge. Je pense que le cercle différenciera suffisamment le symbole d'un comportement de suppression et aidera à étendre votre langage de conception visuelle.

1
Zodman