32

I remember reading somewhere that bars with rounded edges may look inaccurate. But I'm not too sure about it. Can someone throw some light on this?

enter image description here

  • 13
    Are your users trying to derive an exact value from these bars, or do they just serve as a representation of an approximate value? – maxathousand Aug 14 at 15:35
  • 2
    @maxathousand Latter. – essdeepee Aug 14 at 16:01
  • 6
    A better question might be: since you are representing discrete values, what purpose would rounded corners serve? Why would you want to use them instead of the more accurate choice? – only_pro Aug 14 at 21:10
  • 2
    Also, these would look better to me (personally) if the bars had flat ends. The edges of the "container" can be rounded, but it should be bisected into coloured and grey regions by a straight line. – theonlygusti Aug 14 at 22:39
  • 3
    For approximate values it's fine, but for accurate representations it's a big no-no. It's style vs accuracy. Which do you prefer? – Mast Aug 15 at 5:35
41

If the users' goal is to read a specific or accurate value from the bar's length, then @Schmuddi's answer describes the importance of having a flat end. An example of this would be a traditional glass thermometer, where the exact length of the fluid is very meaningful, and the user must be able to read a specific value.

However, if the goal is just to communicate a general value, then the bars can be styled with rounded ends (or other variations) without necessarily impairing usability. A good use case for this approach could be a progress bar, where the specific value is not necessarily important, but rather it's simply intended to give the user a general idea of where in the process they are.

  • 4
    Addendum: it might be worthwhile to note that you'd still be able to style as you like if your users are trying to read a specific value, if you also provide the data itself (i.e. you're using the bar to represent a 'close' value, and showing the 'real' value beside). – Delioth Aug 14 at 21:28
  • 1
    I've toyed around with the data set that is provided by the authors of the study from my answer. My exploratory analysis suggests that not only the error rate during the comparisons increases, but also the time needed to do the comparisons. This might also affect the efficiency of communicating general values. – Schmuddi Aug 14 at 22:30
  • 1
    Interestingly, due to surface tension, mercury glass thermometers cannot have a flat end - they tend to have rounded corners/ends – slebetman Aug 16 at 21:44
  • 1
    @slebetman Well, yes this is true, but the meniscus is typically very slight because a glass thermometer’s inner diameter is often quite narrow, so it appears flat to casual observers. – maxathousand Aug 16 at 22:50
  • @maxathousand: To a sufficiently casual glance; sure, but on plenty of mercury themometers, the meniscus is very visible if you’re looking closely to get a precise reading. Growing up in the 80s–90s, when mercury thermometers were more ubiquitous than today, this was an important point taught in both science and health classes: take the reading from the centre of the meniscus, not the edges. – PLL Aug 17 at 13:33
60

There is a paper by Skau et al. (2015) that investigates in how far the effectiveness of bar charts is affected by different types of visual alternations. The authors tesed whether these alternations affect how well participants can make relative comparisons and absolute judgments using the bar. Participants were presented different types of bar charts, and then had to answer questions like the following:

a) In the chart below, what is the value of A?

b) In the chart below, what percentage is B of A?

The alternations they tested included triangle bars, bars extending below zero, bars with end caps, and also bars with rounded end caps. These variants were compared to the baseline bar chart which featured square-cornered rectangles as bars. For anyone interested, the authors make their data set available on GitHub.

In the study, none of the variants performed better than the baseline chart. In addition, almost all of the variants inhibited making correct comparisons and increased the error rates. Specifically, rounded caps made both absolute comparisons (question a) as well as relative comparisons (question b) significantly more error-prone than in the baseline charts. The authors suggest that

users indeed rely on strong lines at the ends of bars to mentally extend the bar end to the value axis, especially when considering the comparatively poor performance of the embellishments that distort the top of the bar (rounded caps, triangles, etc.),

and they conclude that

establish that bar chart embellishments do indeed have an impact on how well the data within the chart can be communicated. For nearly all tested chart embellishments, even small changes like rounding the top of a bar, led to higher error rate.

So, if you want to communicate your data as efficiently as possible, traditional squared bars seem to be the preferred choice.

  • 4
    I'm the kind of person who looks at the rounded end caps and says, "well clearly I measure from the center of the circle formed by the end cap as the exact point, as when the bar fills up to be at 1.0, that center will line up with the center of the end cap on the background bit (and by extension, the edges too) and if I were to put a handle on it, that handle would be round, and would sit just there." Now, I wouldn't use it for uncapped values (which the study was probably done with) for precisely the reason found by the study. – Draco18s Aug 14 at 21:49
  • 1
    Do you think it would be fair to say, for elements where accuracy is unimportant, like progress bars, rounded corners are fine, but it's not really OK for data? – Doctor Jones Aug 15 at 7:48
  • 10
    @Draco18s: Yeah, and I'm the kind who looks at the bar and the outline. Both are rounded, so obviously the end of the rounded cap is the length of the bar. Two interpretations for the same data. Bad deal. – JRE Aug 15 at 9:18
  • @Draco18s You are just one datapoint and so how you, specifically, interpret these charts is really not all that relevant. It's about how your users interpret, how easily they can interpret, etc. Pick the one with the best overall user experience, regardless of what you yourself prefer. – Buurman Aug 15 at 11:28
  • @JRE Uh, I said that. "center will line up with the center of the end cap on the background bit (and by extension, the edges too)", the edge, as in the rounded portion, will align with the rounded portion at the same time that the centers meet. The two measurements are identical. – Draco18s Aug 15 at 13:25
5

Regarding the particular claim you mention, imagine the limit as the width (height in your horizontal arrangement) of bars approaches their length, and where (like in your example image) the rounding is not just "corners" but produces fully semi-circular ends to the bars. In this case the areas (and thereby visual "largeness") of the bars become artificially similar, underrepresenting the differences (length) they're supposed to convey.

Depending on how you handle the degenerate case, there may not even be a way to represent small values, or you might over-represent "zero" as a full circle.

Take for example your bottom bar. If you halve its length, the resulting area will be significantly different from half its original area.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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