web-dev-qa-db-fra.com

Dois-je remplir un espace vide dans les bars?

Il s'agit de graphiques à barres dans un tablea.

Chaque la ligne a une barre, qui visualise une valeur de la ligne.

Le la plus grande valeur de la table entière est le maximum des barres et pas nécessairement sur la même page de table. Donc, la plupart des rangées vont avoir des barres, qui sont plus courtes que le maximum.

Si je remplis l'espace vide entre au maximum, l'impression est plus lourde, mais si je laisse l'espace vide, cela ressemblera à des "maxima de page" locaux qui sont le maximum du tableau complet.

enter image description here

enter image description here

53
K..

Une heuristique décente serait si l'espace négatif a un sens. Si la barre représente quelque chose comme la vitesse ou une métrique de productivité, la partie bleue de votre graphique n'a pas de signification importante. Dans ce cas, il vaut mieux laisser les barres seules contre le fond régulier. Assurez-vous simplement que l'utilisateur peut faire la distinction entre la valeur 0 et une barre manquante, si cela est possible.

S'il s'agit de barres de progression ou qu'elles représentent le pourcentage de femmes dans une entreprise, le reste de l'espace a une signification importante (temps restant, hommes en entreprise) et vous feriez probablement mieux de colorier le reste de la barre également. .

Comme d'habitude avec ces choses, l'œil a le dernier mot. Si cela vous convient, allez-y.

27
Peter

Que diriez-vous de laisser de côté la deuxième couleur et de mettre une bordure autour de chaque barre? Cela rend évidente la valeur maximale, mais cela conserve également la clarté de l'espace négatif non coloré.

enter image description here

87
Vince Bowdren

Le principal avantage de la visualisation est que vous montrez simplement les données et rien d'autre. Ajouter un espace négatif juste pour montrer le plafond ressemble à Chartjunk.

Si vous souhaitez simplement afficher la limite maximale, affichez une fine ligne et écrivez ce qu'elle représente.

mockup

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

C'est assez similaire à ce que fait l'échange de pile dans sa disposition graphique de la réputation des utilisateurs. Le cap quotidien de 200 rep est marqué par une fine ligne horizontale.

L'utilisateur doit se concentrer principalement sur les données (valeur et hauteur du graphique). L'ajout d'espaces négatifs, de bordures inutiles, etc. agit simplement comme une perturbation. enter image description here

40
rk.

Je pense qu'il vaut mieux laisser l'espace vide tel quel. En regardant le deuxième graphique, il est évidemment difficile pour un utilisateur de comprendre si les bleus sont entièrement remplis ou les verts. Avec le premier, il est facile de comprendre la quantité de données présentes ou non.

Mais si vous voulez donner une couleur dans l'espace vide, je vous suggère d'opter pour un rouge transparent. Cela fonctionnera mieux pour vous. Le vert et le bleu ont l'air bien, mais il ne fait pas ce qu'il est censé faire.

8
prince

Est-il important que les gens reconnaissent ou non que les barres plus longues ne sont pas sur toute la largeur? Comment l’interprétation erronée possible par l’utilisateur qu’une barre est pleine largeur peut-elle nuire à l’expérience utilisateur?

Il me semble que si vous aviez besoin de précision, vous ne feriez pas des barres de cette taille; vous les agrandiriez ou utiliseriez un mécanisme complètement différent. Si la précision n'est pas importante (et il me semble que ce n'est pas le cas), je pense que les éléments supplémentaires mentionnés dans d'autres réponses `` positives '' nuiraient à l'UX en encombrant l'interface utilisateur et/ou en déroutant l'utilisateur.

Donc, pour répondre à votre question. Non, ne remplissez pas l'espace vide.

4
Jeff

Je pense aussi que les bars devraient avoir un espace vide.

La raison en est le but de ces barres: elles doivent visualiser graphiquement la différence des nombres dans le graphique. L'espace vide rendra cette différence plus facile à distinguer.

Si vous regardez le tableau que vous voyez, par exemple, les quatre premiers éléments ont six chiffres, mais vous ne pouvez pas voir la différence entre eux à la fois. C'est là que les graphiques à barres sont utiles.

Une chose que je suggérerais comme amélioration (peut-être) est d'inclure tous les éléments du graphique (jusqu'à Win31) avec des barres. Maintenant, si vous vous concentrez sur les barres, il semble qu'elles n'aient aucune valeur. Je vais commencer par le dernier élément comme la barre la plus fine et recalculer vers le haut proportionnellement.

3
valix

Il s'agit essentiellement d'une question de visualisation posée davantage du point de vue de votre groupe d'utilisateurs. Je suggérerais de le laisser vide mais d'avoir une profondeur ou une ombre à l'élément barre, cela permettrait de mieux comprendre ce qu'est le déficit.

Généralement, lorsque vous utilisez plusieurs couleurs dans une barre (pleine + vide), ce n'est pas une très bonne expérience UX. Bien qu'il semble à la mode, mais que le cerveau doit fonctionner davantage pour le comprendre, c'est plus parce que la notion que nous avons dans un cas général est toujours la suivante: nul est vide et non coloré. Mais en adoptant cette approche, veuillez conserver un aperçu.

3
neoeahit

Il s'agit d'un problème de conception. Utilisez une couleur plus claire pour désigner les maxima, comme un gris à 25%. Ensuite, les données seront claires sans que la page ne paraisse lourde.

2
trisweb