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?
-
13Are your users trying to derive an exact value from these bars, or do they just serve as a representation of an approximate value?– maxathousandCommented Aug 14, 2019 at 15:35
-
2@maxathousand Latter.– essdeepeeCommented Aug 14, 2019 at 16:01
-
6A 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?– user91988Commented Aug 14, 2019 at 21:10
-
3You are using a computer. This means that unlike a thermometer or any gauge in a car, you can actually display the number to the user directly if you want users to get an accurate result. Use fancy looking things if you don’t need that, or combine the two.– gsquaredxcCommented Aug 15, 2019 at 4:27
-
3For approximate values it's fine, but for accurate representations it's a big no-no. It's style vs accuracy. Which do you prefer?– MastCommented Aug 15, 2019 at 5:35
|
Show 4 more comments
3 Answers
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.
answered Aug 14, 2019 at 18:05
-
4Addendum: 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).– DeliothCommented Aug 14, 2019 at 21:28
-
1I'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.– SchmuddiCommented Aug 14, 2019 at 22:30
-
2Interestingly, due to surface tension, mercury glass thermometers cannot have a flat end - they tend to have rounded corners/ends Commented Aug 16, 2019 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. Commented Aug 16, 2019 at 22:50
-
1@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.– PLLCommented Aug 17, 2019 at 13:33
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.
-
4I'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. Commented Aug 14, 2019 at 21:49 -
1Do 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? Commented Aug 15, 2019 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.– JRECommented Aug 15, 2019 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.– BuurmanCommented Aug 15, 2019 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. Commented Aug 15, 2019 at 13:25
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.
answered Aug 14, 2019 at 21:42
