3

I'm designing a view for Android where the user can see a set of lists ordered in a tab bar. Each tab is represented by a block in a bar chart (+a label) which the user navigates through.

So far so good. My dilemma however is that each list can either have an aggregated positive or a negative change in value over time. The problem arrives with how to differentiate between positive change and negative change in the same bar chart without the chart compromising the space (eg. letting the bars go up / down depending on change).

I thought I could have the bars side by side stretching upwards depending on degree of positive or negative change, and then separate them by adding Blue for positive or Red for negative to the bar.

This is what I came up with:

enter image description here enter image description here

Problem is that it's not clear that the bars are communicated correctly to the user. I want there to be no doubt that the red bars depict a negative change and the blue bars depict positive change. Any bright ideas?

Improve this question
1

3 Answers 3

Reset to default
2

So you're basically replacing the visual variable of position to denote a negative value with the visual variable of colour - this has been termed a 'mirrored' chart. The positives as you're seeing is that it saves space, the negatives are people may not understand it and it may cause some issues for the colour-blind (though red-blue problems are not as common as red-green, using colour hue as the sole visual differentiator is usually frowned at).

You could have a look at the techniques used in horizon graphs, either offset or mirrored types - http://flowingdata.com/2015/07/02/changing-price-of-food-items-and-horizon-graphs/

Offsetting is where the negative values start from the top of the scale and point downwards - I think of it as stalactites (negative) and stalagmites (positive) - thus the negative values are differentiated by their common alignment starting from the top of the scale. This link to a horizon graph drawing library by Mike Bostock shows the differences nicely, you can ignore the layering effect if that doesn't fit in with what you'd like --> https://github.com/square/cubism/wiki/Horizon#mode

There was also a study done a few years ago that showed mirroring using colour to mark negative values worked as well as offsetting, and that layering (i.e. applying the horizon graph technique) worked when faced with a small chart height. Caveats are the charts compared were time-varying area/line charts rather than bar charts so the layering effect wasn't given to drastic changes between neighbouring values, and that participants were allowed to train on the techniques first.

"We found no significant difference in either estimation time or accuracy between chart types and reject our hypothesis that offset graphs would provide better performance than mirror graphs. Rather, the results suggest that mirrored and offset graphs are comparable for value comparison tasks. "

Jeffrey Heer, Nicholas Kong, and Maneesh Agrawala. 2009. Sizing the horizon: the effects of chart size and layering on the graphical perception of time series visualizations. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI '09). ACM, New York, NY, USA, 1303-1312. DOI=http://dx.doi.org/10.1145/1518701.1518897

http://vis.berkeley.edu/papers/horizon/2009-TimeSeries-CHI.pdf

Another option is just to add a large "+" or "-" inside the bars themselves, though for small values either way you're not going to have room. This could work in combination with the techniques above, it's not re-using or clashing with the visual indicators they use.

Improve this answer
2

Make negative values go below the axis.

Your proposed design may gain slightly in the level of precision shown. However, I doubt this really matters. Even if you keep the chart in the same vertical space, I think you will adequately show the differences between bars.

Plotting positive and negative values both in the same direction makes the chart a lot less intuitive. I wouldn't really understand that some of the values are negative until navigating around the individual lists (and even then I might miss it and misinterpret the data).

Users who want more precision can see the exact gain or loss by looking at the numerical percentage for each list. If you want this information at a glance, you could add these numbers to the chart as well.

Improve this answer
1

As you know you're relying on colour to depict up/down which isn't great especially as both types of change are reflected in an upward facing bar.

Some ideas

1) Place the change as a label on each bar e.g. -17% or +38%

enter image description here

2) Change to up and down bars and move it up above the tab labels like below

enter image description here

3) Move the negative change bars below the tab labels like below

enter image description here

Improve this answer
5
  • Hi Dave, thanks for the input. Unfortunately we've covered all those ideas already. 1'st gets a bit messy and won't work well for the lowest bars. 2'nd is an example of how the screen space gets compromised with bars going both ways. 3'rd leads to a bad mapping between the tab label and the list it's corresponding to. Thanks though.
    – AndroidHustle
    Jun 3, 2016 at 10:58
  • have you looked into a take on version 2. but whereby you have set heights maybe 4 different ones (2 for neg, 2 for pos). so say its between 0-20% you use the small height positive bar, if its over 20% you use the taller positive bar. basically you don't have overly dynamic height bars dependant on figure. you can then predict how much space will be needed.
    – Dave Haigh
    Jun 3, 2016 at 11:03
  • also note ive used the same amount of vertical space in version 2 as in your initial mockup. I just squished the graph vertically. but this can cause problems if the bar is too short to be visually seen - but see my comment above to counter this issue.
    – Dave Haigh
    Jun 3, 2016 at 11:04
  • Using intervals won't provide the resolution of change that we're after in the overview. Shrinking the bars vertically is an alternative, question is if it's a valid one compared to having them stretching on the same axis.
    – AndroidHustle
    Jun 3, 2016 at 13:27
  • Hi dave, Can you help me with this stackoverflow.com/questions/59541099/…
    – sak
    Jan 1, 2020 at 0:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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