Étiquetage d'un graphique à barres multicouche
Question
J'adore le graphique à barres de Last.fm . Cela me permet de comparer rapidement la façon dont quelqu'un joue une chanson par rapport à une autre.
J'essaie d'appliquer le même design à mon application. Il surveille la santé des serveurs et doit montrer beaucoup plus de choses. Par exemple, la dernière colonne affiche le téléchargement en cours/le téléchargement alloué/le téléchargement de limite physique. Comme j'ai besoin de beaucoup plus de texte, l'étiquette ne tient pas sur les barres et certaines parties sont difficiles à lire. Regardez à quel point le "50 Mb/60 Mb/80 Mb" est laid. Comment concevriez-vous cela mieux? Gardez à l'esprit qu'il y aura des centaines de lignes et des dizaines de colonnes, donc l'espace est limité à l'écran.
Solution
J'ai pris la plupart des suggestions de Vitaly. J'ai ajouté des espaces autour du "/". Je l'ai essayé sans espaces et c'était trop difficile à analyser. J'ai décidé de ne pas coder en couleur le texte car le vert plus clair était trop difficile à lire. J'ai étiqueté chaque ligne avec l'unité, plutôt que d'étiqueter uniquement l'en-tête. Je sacrifie de l'espace pour une compréhension plus rapide de ce que sont les rangées.
Que diriez-vous quelque chose comme ça:
- Représentez les pourcentages sous forme de graphiques circulaires. Ils ne prennent pas autant d'espace, il y aura une différenciation visuelle entre les différents types de données, donc l'écran a plus d'ordre, et il sera clair que les barres ont toujours une largeur significative (alors que lorsque vous affichez des pourcentages sous forme de barres , puis dans certaines colonnes, leur largeur est significative - 100px = 100Mb, et dans la colonne pourcentage, elle n'a pas de sens - c'est juste 100% pour cent de quelque chose. C'est très déroutant).
- Retirez les chiffres des barreaux. Ensuite, vous pouvez jouer avec les largeurs des barres sans vous soucier des nombres à l'intérieur, à la fois en termes de largeur et de couleur.
- Ne spécifiez chaque unité de mesure qu'une fois par ligne. Cela libère beaucoup d'espace. En fait, j'envisagerais de le spécifier une fois par colonne - dans l'en-tête. Lorsque vous devez passer à une autre, utilisez simplement des fractions ou des multiples.
Je suppose que vos exigences indiquent que si un nouveau serveur est ajouté à vos lignes existantes et qu'il a une limite de téléchargement physique de 120 Mo, le serveur affichant 100 Mo dans la même colonne devient plus petit?
Si tel est le cas, je sympathise, car la solution n'est pas aussi simple que dire. "Trouvez les valeurs minimales et assurez-vous que les plus petites barres parcourent toute la longueur du texte nécessaire, puis étirez les champs proportionnellement pour chaque colonne qui contiennent des valeurs beaucoup plus grandes."
Ma suggestion alors, si mon hypothèse est correcte est que vous vous concentrez sur une combinaison
- Barres sans texte
- Marqueur à mi-chemin sur chaque barre en raison de la variété des longueurs
- Utilisez des info-bulles qui révèlent les valeurs présentes
L'utilisateur est en mesure de juger visuellement de l'utilisation de chaque ressource et de révéler une deuxième couche d'informations en la survolant.
C'est si vous pouvez abandonner la communication des valeurs en temps réel sur chaque barre sur des centaines de serveurs.
PS Belle question et je sais que mon idée n'est pas strictement l'étiquetage, plus une alternative!
Lorsque l'espace est restreint dans les tableaux, il est beaucoup plus important de économiser de l'espace sur la hauteur de ligne du tablea plutôt que d'en-tête de la ligne de hauteur. Pourquoi?
- Il est inutile d'avoir la table du tout, si les gens ne savent pas exactement à quoi sert chaque colonne!
- Il y a plus de lignes principales de table que de lignes d'en-tête de table, donc une économie de 10% sur les lignes est plus importante qu'une économie de 30% sur les en-têtes.
J'obtiens 30% de barres de plus dans le même espace vertical qu'auparavant, donc j'utilise une partie de cela pour l'espace vertical "supplémentaire" pour mes en-têtes plus grands.
Les titres avec points clés et texte partagé pour 'Bitrate' et 'Upload' ne sont pas faciles à créer en html/css. Ce sont des bitmaps pré-préparés. Vitaly a suggéré de déplacer les unités vers les en-têtes, et il y a de la place pour elles sur les flèches de tri.
Quelques détails:
- L'ombre portée sur les barres aide à les séparer, même si elles sont très proches les unes des autres.
- Agressivement espace réduit pour les lettres (et suppression des espaces réels) permet une police plus grande et donc plus claire pour le texte dans la barre qu'il ne serait possible autrement.
- Couleurs éclaircies pour que le texte noir apparaisse clairement.