web-dev-qa-db-fra.com

Couleurs pour l'état du projet

Étant donné qu'un projet peut être

  • pas encore commencé
  • actif
  • actif, mais en pause
  • terminé

Quelles sont les bonnes couleurs pour m'aider à représenter ces états (comme augmentation, uniquement, au texte)?

Les couleurs en tant que statut sont délicates et très dépendantes du contexte de l'application Web et de leur application. C'est juste matière à réflexion.

La cohérence contextuelle permet d'éviter toute confusion (comme utiliser du rouge pour indiquer que quelque chose est en pause mais indique également qu'un système est en panne - une situation serait plus grave que l'autre mais serait visuellement égale à l'utilisateur).

grid with paused status and red and alert the building is burning in red

Vous essayez de faire des associations de couleurs avec un état séquentiel (en essayant d'indiquer qu'une chose se produit après une autre) et quelque chose à considérer est si une étape de ce processus indique que cet état est "bon" ou "mauvais" pour l'utilisateur. S'il utilise des couleurs universellement reconnues comme le vert ou le rouge, il peut être approprié de les ajouter une fois la séquence terminée. Si la séquence n'indique pas "bon" ou "mauvais", avant d'utiliser ces couleurs, vous devez considérer si du rouge est utilisé dans d'autres aspects de l'application pour indiquer un danger pour l'utilisateur.

sequence vs color

Idées/notes supplémentaires sur la couleur:

grey scale colors

L'utilisation d'une échelle monochromatique peut aider à donner à l'utilisateur un sentiment d'exhaustivité basé sur l'obscurité/la luminosité, mais lors de la comparaison des couleurs les unes aux autres (comme dans une grille), il est plus difficile pour les utilisateurs de distinguer rapidement les différences de nuance.

grey and color

L'utilisation de 2 couleurs distinctes peut être utile car dans votre cas, vous avez 2 scénarios distincts. A) un élément n'est pas en cours B) l'état de cette progression. L'utilisation du gris qui est souvent utilisé pour les éléments désactivés serait utile pour les états "Pas encore démarré" et "Actif mais en pause" tandis qu'une autre couleur comme le bleu (ou vert) pourrait être utilisée pour indiquer "Actif" et "Terminé"

redgreen

De nombreux programmes utilisent le rouge, le vert et le jaune dans ces situations. Je pense personnellement que cela semble être fait par habitude. Le vert a tendance à signifier "bon" ou "ok", le jaune signifie traditionnellement "danger" mais son souvent utilisé comme un statut intermédiaire, et le rouge signifie que l'attention a tendance à être comme "danger" ou "regardez ici". Souvent, le rouge peut également être utilisé pour faire honte aux utilisateurs, comme "regarder ce qui n'est pas fait".

roygbiv

ROYGBIV peut également être utilisé, mais il est beaucoup mieux pour afficher l'échelle plutôt qu'une séquence et peut souvent être confondu avec les significations traditionnelles rouge, jaune et vert.

neutral colors

Il existe des couleurs plus neutres à utiliser comme le gris, le bleu, les roses et les violets, mais de nombreuses personnes évitent et n'aiment pas les roses et les violets.

D'autres facteurs à considérer sont le contraste suffisant pour que les gens puissent lire votre texte (s'il y a du texte sur la couleur). Voici quelques vérificateurs de couleurs Web:

  1. http://webaim.org/resources/contrastchecker/
  2. http://jxnblk.com/colorable/demos/text/

D'autres facteurs interviennent également, tels que la façon dont la couleur est présentée et est-elle répétée sous différentes formes tout au long de l'application. Il peut même être utilisateur de simplement montrer à un utilisateur la séquence et d'utiliser une couleur pour indiquer où il se trouve dans la séquence.

enter image description here

Désolé si c'est trop fondamental. Je ne peux pas vraiment dire ce que "(augmentation du cul, seulement, au texte)" signifie. Si tout ce que vous essayez de faire est de changer la couleur du texte, je vous recommande fortement de ne pas utiliser de bleus car ils sont généralement utilisés pour les hyperliens. Je ne peux pas dire si vous allez appliquer ces couleurs directement au texte comme dans une liste ou appliquer la couleur à un autre texte, comme un titre à utiliser comme indicateur. Il est juste important de noter que l'utilisation de la couleur seule comme indicateur est découragée par les normes d'accessibilité du Web, car ceux qui ont des sensibilités aux couleurs telles que le daltonisme peuvent ne pas être en mesure de détecter l'indicateur basé uniquement sur la couleur. http://webaim.org/standards/508/checklist

18
Chromarush

Lors de la coloration pour le statut, plutôt que pour invoquer l'humeur, voici quelques couleurs courantes:

Trouvez une grande liste de significations de couleur ici

  • Gris clair , associé à quelque chose de neutre et ne faisant aucune action
  • Bleu , associé à des informations de base non critiques
  • Jaune , associé à un avertissement ou à un message non critique avant une action
  • Vert , associé au succès et à l'achèvement
  • Rouge , associé à une erreur ou à un message critique

Compte tenu de cela, compte tenu de ce projet, voici ce que nous pourrions faire:

  • Pas encore démarré : gris clair
  • Actif : bleu vif
  • Actif, mais en pause : nuance de bleu plus claire pour invoquer un aspect désactivé pour montrer qu'il n'exécute plus aucune action
  • Terminé : vert clair
8
Cody Brantley

Cela ne répond pas directement à la question, mais une approche intéressante du statut ne montre pas seulement le texte et la couleur. Vous pouvez indiquer toutes les étapes (états) impliquées en utilisant des indicateurs similaires à cette image status progress

Quelques pros:

  • L'utilisateur est toujours au courant de toutes les étapes et de l'état dans lequel il se trouve actuellement
  • La combinaison de différentes couleurs avec les étapes ajoute un niveau supplémentaire de sensibilisation

Quelques inconvénients:

  • De l'espace, vous avez besoin de plus d'espace pour l'afficher dans votre application
4
John

Vous pouvez l'épeler plutôt que d'avoir des feux de circulation. Il existe un ensemble de représentations visuelles conformes aux normes mondiales (comme les feux de circulation). Je recommanderais à l'utilisateur de connaître l'état plutôt que de comprendre les définitions des couleurs. Cela signifie que les mots sont "parfois" plus puissants que les indices visuels.

2
Arvind Sagar

J'utilise les couleurs suivantes pour l'état du projet:

  1. Gris foncé - Annulé
  2. Bleu - Terminé
  3. Vert

    3a. Vert foncé - Futur (2-3 mois) - en bonne voie

    3b. Vert vif - Action requise/imminente (le mois prochain, le prochain)

  4. Jaune - Avertissement

  5. Rouge - Menace/danger
  6. Pas de couleur - Normal
1
Francois