User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
It's about bar-charts in a table.
Every row has a bar, which visualises a value of the row.
The biggest value of the whole table is the maximum of the bars and not necessarily on the same table-page. So most of the rows gonna have bars, which are shorter than the maximum.
If I fill the empty space between to the maximum, the whole impression is heavier, but if I let the space empty it will look like local "page maxima" are the full table maximum.
A decent heuristic would be whether the negative space has meaning. If the bar represents something like speed or a metric of productivity, the blue part in your graph doesn't have an important meaning. In that case the bars are best left by themselves against the regular backgound. Just make sure that the user can distinguish between the value 0, and a missing bar, if that is a possibility.
If they are progress bars, or they represent the percentage of women in a company, then the rest of the space has an important meaning (time left, men in company) and you're probably better off coloring the rest of the bar as well.
As usual with these things, the eye has the last word. If it looks right to you, go with it.
If it looks right to you, go with it which gives me the impression that youre talking about aesthetics but then you went on to explain the psychological possibilities.
How about leaving out the second colour and instead put a border around each bar? That makes it obvious what the maximum value is, but it also keeps the clarity of the uncoloured negative space.
The main advantage of visualization is you are just showing the data and nothing else. Adding negative space just to show the ceiling sounds like Chartjunk.
If you just want to show the maximum limit, show a thin line and write what it represents.
download bmml source – Wireframes created with Balsamiq Mockups
This is quite similar to what stack exchange does in it's graph layout of user reputation. The daily 200 rep cap is marked by a thin horizontal line.
The main focus of the user should be on the data (value and height of the graph). Adding negative spaces, un-necessary borders, etc. just acts as a disturbance.
I think it's better to leave the empty space as it is. Looking at the second graph, it's obviously hard for a user to understand whether the blue ones are the fully filled or the green ones.. With the first one, it's easy to understand how much data is there or not.
But if you want to give a color in the empty space, I suggest you go for a transparent red. It will work better for you. Green and blue looks good, but it isn't doing what it is meant to do.
Does it matter if people can or cannot recognize that longer bars are not the entire width? How will the possible misinterpretation by the user that a bar is the full width detract from the user experience?
It seems to me that if you needed precision, you wouldn't be making the bars that size; you would make them larger or would use a completely different mechanism. If precision is not important (and it seems to me that it isn't), then I think the additional elements mentioned in other 'positive' answers would harm the UX by cluttering the UI and/or confusing the user.
So to answer your question. No. Don't fill in the empty space.
I also think the bars should have empty space.
The reason for this is the purpose of those bars: they have to graphically visualize the difference of the numbers in chart. So empty space will make this difference more easily distinguished.
If you look at the chart you see for example the first four items have six figure numbers but you can't see the difference between them at once. That's where bar charts come in handy.
One thing that I would suggest as an improvement (maybe) is include all items in chart (down to Win31) have bars. Now if you concentrate on the bars it looks like they have no value. I will start with the last item as the thinnest bar and recalculate to the top proportionally.
It's basically a visualization question asked more from the perspective of your user group. I would suggest leaving it empty but having a depth or a shadow to the bar element, this would make it more clear as to what the deficit is.
Mostly when you use multi-colors in a bar( full+empty) its not a very good UX experience. Though it looks trendy, yet the brain has to function more to grasp, this is more because still the notion we have in a general case is: null is empty not colored. But taking this approach please do maintain an outline.
This is a design problem. Use a lighter color to denote the maxima, like a 25% grey. Then the data will be clear without the page looking heavy.
