Barres de progression supérieures à 100%
Quelqu'un at-il des conseils ou des exemples de ce qu'il faut faire avec une barre de progression qui dépasse 100%.
Je travaille sur une barre de progression pour indiquer l'état d'un élément. À 100%, une lacune est créée pour que quelqu'un prenne des mesures avec l'article. Parce que les articles sont sensibles au temps, nous devons montrer jusqu'où plus de 100% de l'article est allé.
Quelle serait la meilleure façon d'afficher ces informations?
Cette maquette peut être déroutante car j'explorais les options de style.
La même situation se produit lorsque vous affichez des valeurs hors de l'échelle. Dans la plupart des cas, le plus important est de montrer à l'utilisateur que les valeurs sont dépassées. Les valeurs généralement dépassées ne sont pas représentées proportionnellement à la longueur des colonnes. Vous pouvez voir comment le problème est géré par les applications de finances personnelles, qui ont des fonctions de budget - dans ces applications, nous devons communiquer à l'utilisateur que le budget est dépassé.
C'est ce qui était dans mon esprit en ce moment, peut-être que ce n'est pas à la hauteur:
- Définissez une plage de graphique à barres de 0% à 150% (vous pouvez modifier le nombre maximum comme vous le souhaitez)
- Tout <= 100% sera affiché de manière normale.
- Tout ce qui est> 100% à <= 150%, l'arrière-plan de l'étiquette de données sera affiché en couleur jaune.
- Tout ce qui est> 150%, l'arrière-plan de l'étiquette de données sera affiché en rouge.
La raison derrière cette valeur maximale proposée de 150% est que les données peuvent être n'importe quel nombre de pourcentage, même 1270%. Sans limite, il y a un risque que ce graphique à barres soit rendu sous la forme d'une longue barre et qu'il ne soit pas uniforme avec les autres graphiques à barres qui l'entourent.
Étant donné que généralement le but du tableau de bord est de permettre à l'utilisateur de comprendre les informations d'un seul coup d'œil, nous fixerons la valeur maximale jusqu'à 150% (... et c'est à vous de voir jusqu'où vous voulez mettre la limite) pour faire tout graphique à barres de taille uniforme. Au-delà de 150%, nous considérons comme anormal.
Donc, si l'utilisateur voit une figure sur fond rouge uni, il sait que cette barre nécessite une attention particulière.
La situation n'est pas très claire, mais quand même, puisqu'il n'y a pas plus de 100% car après cela ce qui se passe est un changement de statut, il faut changer le design.
Utilisez la barre de progression jusqu'à 100%, puis remplacez la barre par une icône ou un texte, quelque chose de pertinent et compréhensible pour vos utilisateurs et qui transmet l'idée que vous souhaitez montrer.
Si quelqu'un peut interagir avec l'élément avant 100% mais pas après, ajoutez un texte indiquant cela.
L'icône ou le texte qui serait après la marque 100% peut également avoir une progression standard de couleurs, comme le vert, le jaune, l'orange et le rouge pour indiquer la pertinence ou l'urgence; bien que ce soit quelque chose que vous devez juger.
Après avoir utilisé des couleurs, si vous en avez encore besoin, vous pouvez ajouter un effet clignotant, mais je dirais que si un processus passe à côté de nombreux changements sans surveillance, ce n'est pas très important, il n'y a personne pour agir ou le système de mesure est défectueux.
Une autre option consiste à réduire l'intensité des autres barres de progression, à réduire la saturation ou à ajouter un effet alpha qui réduit la visibilité, mais permet toujours de lire les données, de cette façon, vous intensifiez la pertinence de celle qui a passé le 100% mais les autres sont encore visibles.
Ma suggestion... 
Si cela doit être expliqué, ce n'est pas suffisant :)
Une suggestion serait d'avoir 2 modèles: dans la plage (0-100) (par exemple, vert) et hors de la plage (100-200) (par exemple, rouge)
Lorsque l'élément est à portée, affichez un indicateur de style.
Une fois que l'élément atteint 100%, remplacez le compteur à portée par celui hors plage.
Assurez-vous que votre compteur hors plage est significativement différent de votre compteur dans la plage et vous pourrez communiquer ces informations dans une utilisation efficace de l'espace.
Dans la "vie réelle", les manomètres, les jauges de température et les "tr/min-mètres" ont souvent un indicateur de limite à ne pas dépasser. Souvent, l'unité de mesure sera "l'unité native" (degrés de température, psi, pascals, tours par minute), mais parfois ce sont aussi des pourcentages de portage (j'ai rencontré un voltmètre qui a des marquages de 80%, 100% et 120 % - tout ce qui est inférieur à 80% et supérieur à 120% était apparemment tellement hors de question qu'il n'y a pas de marquage).
En règle générale, tout ce qui dépasse le chiffre de 100% a un secteur ou un arc rouge, de sorte que l'utilisateur peut facilement voir quand l'aiguille dépasse la ligne rouge.
Le concept de "redlining" (ou, plutôt, d'éviter la redlining) devrait être familier à la plupart des automobilistes.
Une jauge ronde (comme le compteur de régime dans une voiture) aura un arrêt dur à un moment donné; l'aiguille ne passera pas, disons 130% environ. Une jauge de température dans une voiture sera souvent conçue à 100% au centre, de sorte qu'elle pourrait aller (visuellement) jusqu'à 200%. Une combinaison analogique/numérique peut être utilisée pour donner une lecture visuelle rapide en dessous/au-dessus de 100%, avec la précision et la portée accrues d'une lecture numérique.
Area51 pour la création de nouveaux sites Stack Exchange a quelques barres de progression qui peuvent être pertinentes.
Un site en staging passe par trois phases: définition, engagement et beta. Chaque phase a ses propres progrès - un ensemble de mesures et d'objectifs à atteindre. Ainsi, chaque phase a une progression entre 0 et 100%. Une fois 100% atteints dans une phase, le site passe à la phase suivante - les progrès se poursuivent donc. L'état global est combiné dans une seule barre de progression qui ressemble à une seule barre où "terminé" signifie que la progression a atteint 100% dans les trois phases.
Il semble que la question parle également de différentes phases. Il vous suffit de définir les métriques de chaque phase et le nombre de phases dont vous avez besoin.
Par exemple (imaginaire):
- Phase 1: un objectif numérique basé sur (% du quota)
- Phase 2: un pourcentage de dépassement de pourcentage numérique ou basé sur le journal avant qu'il ne devienne critique/porté à la phase 3
- Phase 3: un pourcentage basé sur le temps (% de la durée pendant laquelle un élément peut être critique pour)
Une barre de progression est-elle le meilleur moyen de représenter ces données? Jusqu'où 100% les valeurs peuvent-elles aller? Est-ce infite ou fixe?.
Si la valeur potentielle post-100% n'est pas infinie, je suggère d'étendre les graduations ou l'indicateur de la barre de progression en dehors de la barre d'origine et de changer la couleur pour indiquer qu'elle a dépassé le temps autorisé.
Voici une maquette rapide:
