Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

enter image description here

enter image description here

share|improve this question
26  
If you do decide to do this, then please pick some better colours - there's almost no contrast between the two in your second example. –  JonW Jun 28 '13 at 11:26
10  
You could use light-gray color instead of blue. It would be noticable but not so distractive for an eye. –  Alexey Kolchenko Jun 28 '13 at 13:28
7  
Watch out for the 99% issue. Where it looks maxed out by isn't actually. Even with vincebowdren's answer of borders, it's sometimes hard to tell 99% vs. 100%. Having high contrast colors, so there is explicitly something showing as even a single pixel line can help. Or just showing the numbers as well. –  Chris Jun 28 '13 at 15:48
3  
Make sure the two colors aren't exactly the same brightness, since some people are color blind.. –  Brendan Long Jun 28 '13 at 16:35
7  
The simple answer: Should I fill empty space in bars? Yes, until the bartender stops you. –  Deer Hunter Jun 28 '13 at 20:25
show 5 more comments

8 Answers 8

up vote 25 down vote accepted

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.

share|improve this answer
    
I hope you don't mean Efficiency, which often must be between 0 and 1, because that's the ideal case for when the blue part makes a lot of sense (shows how much is wasted). –  Rotsor Jun 28 '13 at 15:02
    
I'm confused by your answer. You said 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. –  Jeff Jun 28 '13 at 17:49
    
@Rotsor, bad example, sorry. I meant so generic measure of efficiency. I took it out of the answer to avoid any confusion. –  Peter Jun 28 '13 at 18:51
    
@Jeff, I just mean to say that if you have a strong first impression about how it should look, that's probably the way to go. It's not really about aesthetics, more about intuition. I'd only go to these kinds of rules, if I couldn't tell at first sight which is better. (I moved this line to the end of the answer to make it less confusing.) –  Peter Jun 28 '13 at 18:54
    
@Peter Ok. I understand now. Thanks! –  Jeff Jun 28 '13 at 18:56
add comment

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.

enter image description here

share|improve this answer
18  
I like this, but would recommend using a lighter shade for the border. –  zzzzBov Jun 28 '13 at 15:43
1  
Yes, I think so too; I picked a medium grey when I mocked it up, but a lighter shade would be better. For the bars with a very small patch of green, the grey overpowers it a bit. –  vincebowdren Jun 28 '13 at 15:54
1  
I actually like the dark border, at least for the mockup. –  Austin French Jul 1 '13 at 3:40
    
I used the background color because I wanted to omit borders, from a graphic-design-perspective, completely. –  K.. Jul 1 '13 at 10:46
add comment

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.

mockup

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. enter image description here

share|improve this answer
1  
funny, I thought borders or something would add "junk" to the whole thing, but had the fear that I would need some indicator for the maximum –  K.. Jun 28 '13 at 14:23
2  
@K.. A good rule of thumb will be: 'If it add's value/convey's information to the user, it is not junk' –  rk. Jun 28 '13 at 14:30
4  
+1 The stack exchange graphic example is the clearest and best graphic solution. I think the top-voted example is inferior to this representation. –  BenjaminGolder Jun 28 '13 at 15:53
1  
@AndyW Guidelines do help, borders, not so much. The reason for avoiding borders is they add an unnecessary layer of color. eg: If you want green bars, why are you adding black border line and making it more complex? –  rk. Jun 28 '13 at 19:23
1  
@whuber This is the extreme I was talking about (to be clear, evidence suggests totally minimal vs. outlines makes no difference, not that outlines are better). See Albert Cairo's The Functional Art and discussion plus related lit. as a counter-argument (pg. 65-67). This is in regards to typical graphs though, not dashboard like ones. Most examples of good dashboards I could find (via Stephen Few) agree more with you and rk, no hard outlines but varying use of guidelines (e.g. Few's bullet charts, Cleveland's marker at the midpoint). –  Andy W Jun 30 '13 at 13:50
show 5 more comments

I think its better to leave the empty space as it is. Looking at the second graph, its obviously hard for a user to understand whether the blue ones are the fully filled or the green ones.. With the first one, its 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 isnt doing what it is meant to do.

share|improve this answer
4  
yes, the blue looks no more negative than the green. –  K.. Jun 28 '13 at 11:25
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.