web-dev-qa-db-fra.com

Comment montrer les progrès vers l'objectif?

Sur notre intranet, nous affichons des chiffres pour nos employés afin qu'ils puissent suivre leurs objectifs de performance. Actuellement, ce n'est qu'une table.

enter image description here

Nous aimerions quelque chose de plus visuel, et ce fut la première pensée que j'avais:

enter image description here

Avec cette variation pour quand vous êtes derrière votre objectif YTD:

enter image description here

Mais cela semble trop encombré. Je pense que ce type de visualisation devrait déjà être un problème résolu, mais j'ai du mal à trouver les termes de recherche appropriés pour trouver de meilleurs exemples que je peux émuler.

Quelqu'un a-t-il une meilleure idée pour une visualisation? Ou peut-être un exemple vers lequel ils pourraient se lier?

19
longneck

Je trouve que l'utilisation des couleurs comme démarcation est un peu plus difficile à comprendre. Vous pouvez utiliser une règle verticale pour agir comme un espace réservé pour l'objectif, YTD ou annuel, selon le jour.

Votre objectif devrait être l'objectif et combien vous êtes au-dessus ou au-dessous. Ce que je veux dire, c'est qu'il n'y a pas assez de valeur pour montrer les chiffres réels quand vous vous souciez simplement des différences de valeurs. Soulignez la différence et gardez la progression et l'objectif en arrière-plan. Puisque John a déjà testé les couleurs, je lui fais confiance;) et j'utilise les couleurs. Le bleu est la valeur réelle de l'employé, le rouge est le montant inférieur à l'objectif et le vert est le montant supérieur à l'objectif .

L'idée étant, la personne devrait être capable de voir combien elle est au-dessus ou en dessous de l'objectif:

  • Fig 1: Plus que le but, vert
  • Fig 2: Moins que l'objectif, rouge
  • Fig 3: Plus qu'annuel, vert à nouveau

De plus, les rendre interactifs sera bénéfique. Vous n'avez pas besoin de quelque chose de fantaisiste nécessairement, juste de la souris sur des étiquettes montrant les valeurs réelles ou quelque chose qui ajoute plus d'informations dans le contexte.

mockup

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

Si vous voulez aller à l'extrême, vous pouvez griser la progression bleue et simplement montrer la règle verticale et la boîte rouge ou verte . Montrez simplement les différences sans besoin de progrès.

15
rk.

J'ai eu un problème très similaire récemment, et j'ai fait des tests utilisateur dessus. La principale chose qui en est ressortie est que nous devons éviter les couleurs qui ont un sens commun. Le jaune était donc une mauvaise option et le vert représentait "bon", pas "acceptable".

En fin de compte, nous avons utilisé le gris comme couleur de fond neutre, le bleu comme progression pour "l'attente"; vert comme "dépassé les attentes"; et rouge comme "en deçà des attentes". Cela a bien testé avec les utilisateurs. Quelque chose comme ça:

enter image description here

Veuillez noter que les couleurs ici sont pour la démonstration. Vous devriez utiliser de meilleures teintes qui sont moins "en face".

11
JohnGB

Le problème principal n'est pas avec les couleurs, bien que JohnGB ait quelques points valables à ce sujet.

j'irais avec quelque chose comme ça afin d'éviter la confusion avec les couleurs.

enter image description here

11
CB Du Rietz