web-dev-qa-db-fra.com

Comment représentez-vous visuellement le «progrès» par rapport à un objectif négatif (le plus bas est le mieux)?

J'ai peut-être une mauvaise terminologie, mais je pense que l'idée est bonne.

Il existe différentes façons de représenter les progrès lorsque vous augmentez un nombre et essayez d'atteindre un certain nombre défini. Habituellement, vous verrez une sorte de barre de progression pour représenter cela. J'appellerai cela un objectif positif. Vous voulez que le nombre que vous mesurez soit aussi grand que possible.

Qu'en est-il d'un objectif où vous commencez à un nombre élevé ou à zéro et le "but" est d'obtenir le nombre le plus bas possible ou de rester à zéro? C'est ce que j'ai appelé dans le titre un objectif négatif. C'est comme un score de golf - plus c'est bas, mieux c'est. Les barres de progression ne semblent pas avoir de sens, car vous voulez vraiment le moins de "progrès" possible. Quel est le contraire d'une barre de progression?

Bien qu'il y ait toujours la possibilité d'essayer d '"inverser" l'objectif afin qu'il puisse être représenté comme un objectif positif (où vous voulez un grand nombre) mais je ne suis pas convaincu que ce soit toujours possible ou même clair. J'essaie de trouver des moyens de représenter un objectif négatif qui a du sens pour les utilisateurs.

Quelques exemples commerciaux réels:

  • Avoir un temps d'appel moyen de moins de 10 minutes
  • Avoir moins de 3 retours
  • Ne pas avoir de dossiers ouverts de plus de 72 heures

Si vous affichez une liste compacte d'objectifs dans un format de tableau de bord, certains positifs et certains négatifs - quels sont les éléments de conception que vous pourriez utiliser pour aider un utilisateur à les distinguer? Il semble que ce serait déroutant d'avoir des barres de progression pour chacun d'eux, certains où vous voulez qu'ils soient remplis et d'autres où vous voulez qu'ils soient vides.

L'utilisation de repères de couleur peut aider, mais bien sûr, vous rencontrez des problèmes de daltonisme car la façon la plus courante d'utiliser les repères de couleur est rouge = mauvais, vert = bon.

13
Ryan Elkins

Regardez simplement comment les applications de perte de poids le font - en utilisant généralement un graphique linéaire où la zone cible est marquée:

Example from the Withings app

6
Martin Mühl

Ce que je ressens, c'est que vous essayez de concevoir un tableau de bord KPI (Key Performance Indicators). Chaque élément concernant les résultats positifs et négatifs peut être communiqué avec les couleurs comme le vert, l'orange et le rouge. Cependant, ces codes de couleur sont déjà intégrés aux éléments d'interface utilisateur des solutions célèbres 2 .

KPI

Votre solution pour les besoins du tableau de bord;

  • Messagerie verbale claire, standard pour l'entreprise
  • Utilisation de guides de conception existants en l'absence d'erreur
  • 3-30-300 secondes de profondeur des données
5
Abektes

Pensez à utiliser le graphique à puces .

Un graphique à puces prend un graphique à barres traditionnel et ajoute des éléments supplémentaires pour représenter de manière concise les informations sur la cible et la plage. Il est spécialement conçu pour les tableaux de bord.

annotated bullet graph

Comment représentez-vous les objectifs négatifs?

Jetez un œil aux graphiques des dépenses et des défauts ci-dessous. Notez que les barres cibles sont placées vers la marque 0. Les gammes de couleurs sur ces deux graphiques sont également inverses, montrant la "bonne" plage la plus claire proche de 0 et la plage de performances "médiocre" sombre en haut.

example of representing negative goals with bullet graphs

Si ce n'est pas assez évident, vous pouvez même représenter graphiquement l'échelle en arrière.

example of backwards bullet graphs

Maintenant, il devient très clair quels graphiques doivent être lus traditionnellement et lesquels ont une échelle inversée.

Ceci est tiré du billet de blog de Stephen Few (concepteur du graphique à puces): http://kelsocartography.com/blog/?p=1682

4
nightning

Juste jeter quelques réflexions, car je n'ai pas de réponse parfaite à cette question très intéressante:

  • Lorsque vous utilisez Excel ou des feuilles de calcul, nous avons également cette situation: Parfois, plus petit est meilleur (taux de rebond inférieur = bon). Ici, nous codons par couleur le résultat positif: le vert est bon, le rouge est mauvais. Cela nous permet d'être cohérents avec - comme vous l'avez appelé - des progrès positifs.

Peut-être que nous pouvons également utiliser ce mécanisme pour visualiser la positivité "inversée" negative progress

Avec cela, vous pouvez utiliser le même type de visuels, mais toujours avoir une séparation claire entre "ce qui reste" et "ce qui a été accompli". Les couleurs aideront à reconnaître "ce qui a besoin d'attention". Techniquement, vous pouvez également faire "grossir" la barre de bas en haut pour les deux approches: positive augmentera les barres colorées, négative augmentera les barres grises.

Je vais y réfléchir un peu. C'est une énigme assez intéressante :)

1
Jan

Si je comprends bien, votre objectif principal est de créer un sens de la vigilance parmi les utilisateurs qui dépassent la référence (ou l'objectif), en projetant le score actuel dans une sorte de barre de "régression"/graphique (si je puis dire) . Les références les plus rapides auxquelles je peux me référer sont les suivantes:

  1. Suivi des économies/dépenses mensuelles - Plus d'économies, moins de dépenses et vice versa. Par conséquent, l'objectif de l'utilisateur est de garder les barres aussi verdâtres que possible en limitant les dépenses mensuelles au minimum, augmentant ainsi les économies. Au fil du mois, la barre s'allongera et la couleur sera verdâtre (économies) ou rougeâtre (dépenses) ou les deux.

Savings/Expenditure Tracker

  1. Indicateur de température de l'appareil - En supposant que la température optimale de l'appareil est de 42 degrés Celsius, le curseur indique la température actuelle de l'appareil. Une fois que la température actuelle dépasse la température optimale, un message d'avertissement clignote. Le but de l'utilisateur est de maintenir le curseur le plus près possible de la température optimale. Les étiquettes SAFE et DANGER rendent l'indicateur plus explicite et compréhensible.

Device Temperature Tracker

  1. Suivi du taux de rebond% - Ceci est l'un de mes favoris. Si je veux voir le taux de rebond% du site en un coup d'œil, ce type de widgets d'indicateur de vitesse peut être utile. Le webmaster peut également prendre note de l'augmentation/diminution du% de rebond% par rapport au% précédent ou% optimal à côté de la lecture principale.

Bounce Rate % Tracker

  1. Utilisateurs en temps réel et type d'appareil - Je ne sais pas si c'est un bon exemple, mais ceci est un instantané du tableau de bord en temps réel disponible dans Google Analytique. D'après l'utilisation des couleurs rouge et verte, je suppose que Google veut que les webmasters acquièrent plus d'utilisateurs mobiles que les utilisateurs surfant sur le Web à partir de leur bureau !

Real-Time Users & Device Type

1
Ramnath

J'appellerais ces 3 cibles et les placerais exactement au milieu de la barre de progression
Si elles sont au-dessus de la cible, la barre commence au milieu et va à droite en rouge
S'ils sont sous la cible, alors la barre va vers la gauche et est verte

1
paparazzo

Gardez la cible simple

J'ai travaillé sur quelque chose de similaire et je suis arrivé à la conclusion qu'il était préférable d'adopter une approche de tableau de bord simple. Ne vous laissez pas prendre par la sémantique de "suis-je en train de monter, de descendre ou de côté ...?"

Voici un exemple de métrique de temps d'appel dans laquelle l'utilisateur (un agent téléphonique) tente d'atteindre une cible définie par la gestion. Cet objectif est représenté par un score en pourcentage. L'anneau coloré remplit le "beignet" lorsqu'ils ont atteint la cible. La couleur change avec différentes valeurs de jalon pour aider à renforcer la progression ou le déclin de l'utilisateur.

Doughnut chart - badDoughnut chart - goodDoughnut chart - average

indices visuels visuels simples et numérisables fournit une évaluation de haut niveau sans nécessiter beaucoup de déchiffrement. En cas de problème, il est évident et l'utilisateur peut explorer d'autres données pour plus de détails.

1
plainclothes

Barres de progression pour une progression négative
Une barre de progression typique commence vide et se remplit. Ou commence vers le bas et monte.

Lorsque vous avez un objectif où vous commencez à un nombre élevé ou à zéro et que vous souhaitez afficher la progression vers le bas, vous voulez bien le contraire d'une barre de progression.

Le contraire serait un bar qui démarre complètement et se vide. Ou commence "en haut" et descend progressivement.

Une autre façon de penser est les barres de volume que vous avez obtenues sur les lecteurs de cassettes ou sur WinAmp.

Volume meter

Une barre qui s'allume en vert pour les premiers 60% à 70% de l'échelle, puis devient orange pour les 20 à 25% suivants de l'échelle, puis devient rouge pour la section finale. Celles-ci scintillaient de haut en bas, vous permettant de savoir quand les choses allaient bien, quand elles approchaient mal et quand elles allaient mal.

Quelques exemples commerciaux réels:
Avoir un temps d'appel moyen de moins de 10 minutes

Affiche le temps moyen et le temps cible. Mettre à jour après chaque appel. Cela peut vous faire progresser en fonction du temps.

Avoir moins de 3 retours

Il s'agit généralement d'un objectif de proportion. Affiche le taux de retour actuel. Afficher le taux de retour cible. Élimine une grande partie de l'échelle.

par exemple. 3 retours représentent, par exemple, 0,5% de la production d'un lot/d'une semaine. Le taux de retour actuel est de 12%. Afficher uniquement le taux de retour actuel sur une échelle de 0% à 2,5%.

Ne pas avoir de dossiers ouverts de plus de 72 heures

Combien de dossiers ouverts ont cet âge? Combien y en avait-il hier? La semaine dernière? Spectacle?

Un point clé est que les barres de progression affichent généralement une direction à sens unique. Vous progressez jusqu'à l'arrivée, ou peut-être vous vous arrêtez.

Dans la plupart de ces exemples réels, le recul est une possibilité réelle.

Concernant l'utilisation de la couleur:
J'essaie toujours d'utiliser un vert pâle et un rouge foncé. J'essaie de garder le rouge un rouge "pur" et j'introduis une teinte bleue dans le vert.

Cela fournit deux distinctions entre le rouge et le vert: la quantité de bleu et l'obscurité.

Red and Green, perceptible by the colour blind

De nombreuses informations utiles sur l'effet du daltonisme sur l'expérience utilisateur sont également disponibles sur: Les utilisateurs daltoniens peuvent-ils voir votre site?

Sur les cadrans d'horloge de couleur montrés sur le site, j'utilisais généralement les couleurs montrées à 5 heures et midi ou 11 heures. Et j'obscurcirais la couleur 11 h/min.

1
Euan M

Je n'utiliserais jamais une barre de progression moins rouge à ce sujet.

Un progrès négatif est toujours psychologiquement associé à une perte, en particulier lorsqu'il est représenté par des barres rouges alarmantes ou d'autres types de signalisation rouge. Si vous le rétablissez en positif, vous pouvez non seulement utiliser une barre de progression normale ou d'autres éléments de gamification, mais également encourager les utilisateurs avec un renforcement positif plutôt qu'un double négatif.

Revenant:

  1. Avoir un temps d'appel moyen de moins de 10 minutes> Avoir un temps d'appel moyen dans la catégorie "appels ultra-rapides".

  2. Avoir moins de 3 retours> Avoir un badge "Keeper".

  3. Ne pas avoir de dossiers ouverts de plus de 72 heures> 7 dossiers fermés en 72 heures. Vous êtes en grève de 10 cas!

0
Zoe K

Beaucoup a déjà été couvert sur cette page.

Je suis d'accord que la conversion potentielle d'objectifs négatifs en objectifs positifs peut être un moyen de résoudre le problème.

Si vous voulez vous différencier, une autre solution serait de choisir des modèles de conception légèrement différents pour montrer ces "objectifs négatifs".

Voir l'image ci-dessous pour quelques exemples:

Vous avez raison, vous ne pouvez pas vous fier uniquement à la couleur et tant que vous ajoutez du contenu intuitif ou des effets visuels pour combler ces lacunes - vous devriez être en bonne forme.

Negative Goals

0
Igorek

Pensez à examiner les comptes à rebours, car nombre d'entre eux sont conçus pour encourager des progrès négatifs. countdown

0
Josiah Tullis

Vous pouvez toujours représenter un objectif allant dans un sens "négatif" de manière "positive" pour l'utilisateur.

Regardons l'un des cas réels que vous avez soulevés:

  • Avoir un temps d'appel moyen de moins de 10 minutes
    • Vous pouvez afficher la moyenne des durées d'appel de l'utilisateur et désigner des "zones" de progression. Par exemple, si la moyenne de fonctionnement d'un utilisateur est inférieure à 10 minutes, il se trouve dans une zone verte. S'ils durent en moyenne entre 10 et 20 minutes, ils sont en orange, etc ... Donc, le nombre peut aller dans une direction négative, mais l'utilisateur reçoit toujours des commentaires positifs. :)
0
Lauren Dankiewicz

Peut-être quelque chose comme un thermomètre? Si votre nombre est faible, il est bleu et vous êtes cool. Si le nombre augmente, la taille de la barre verticale augmente et devient jaune, orange et rouge, attirant davantage votre attention.

La façon dont vous mettez les choses me rappelle la gamification. S'il ne s'agissait pas de nombres mais de défauts, vous pouvez également utiliser le concept de vies (comme 1-up dans Mario Bros). L'utilisateur commence par, disons, cinq vies. S'ils font quelque chose de `` mal '' (par exemple, ont laissé un cas ouvert sans réponse pendant plus de trois jours), ils perdent une vie. Les jeux ont de nombreuses façons de représenter le nombre de vies restantes, vous pouvez en choisir une. (J'espère que cela a aidé)

0
Heitor