5

I have a grid with a list of runners (one person in each row) on a webpage. I want to show some visualization in a column to represent how much they have ridden in the last year. Right now I am just showing a number in miles as text but I thought it would be cool to show some visualization to represent and compare. I first thought of a a progress bar but that doesn't seem to work as there is no maximum value to scale to.

Any suggestions for visualizing comparison fields in a column in a grid?

Improve this question

3 Answers 3

Reset to default
6

There's an opportunity here for a little bit of fun, learning, and dare I say it, gamification.

The problem with showing distances is - it's just a number. It needs a relationship to make it real.

And if you use a relative percentage compared to the person who has ridden the longest distance for example, then you run the risk of tying the data too strongly to outliers in the range - for example if one extreme cyclist has ridden a huge distance, then everyone else's relative percentages will look tiny.

I'd recommend using a scale which is independent of other runners, and also introducing a little bit of fun facts into the visualisation - something that's meaningful or interesting - something that people can relate to.

So here's an example - you could show the distance as equivalent to riding the width, height, length, circumference of one or more of the US states, like in the example below.

This adds an element of interest in that it might be a challenge perhaps to do the equivalent of riding across the whole of the US. Or there could be an element of wanting to see what the next increment of distance might display. Will it be my favourite state? Will it be Florida? Is it were my brother lives?

And there's a sense of achievement of having ridden a distance that is akin to the real world. It could even be integrated with a twitter button: 'In the last year I've ridden the equivalent of ...'

enter image description here

Improve this answer
3
  • I thought that traditional measurements are things like: "20 Olympic Swimming Pools" or "50 Blue Whales". You can't go making up new measurements like 'Width of Connecticut'.
    – JonW ♦
    May 31, 2012 at 14:38
  • @JonW I didn't make it up as a measurement - NASA used it before me - youtube.com/watch?v=xBVlC7VctMs :-)
    – Roger Attrill
    May 31, 2012 at 15:09
  • 1
    Pfft, what do NASA know.
    – JonW ♦
    May 31, 2012 at 15:14
4

The obvious answer is to scale the value by the user who has ridden the most in a year, ever. If your maximum is '500 miles', and someone has ridden 50 miles, their bar would be about 10% full.

If this statistic is very important, one interesting way to display it would be to have a background bar-graph, like so:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
2
  • This is a nice comparison approach, but the idea falls down if you have people at some extremes of the scale. For instance if 99 people have done about 200-300km but just one person has managed to clock up 10,000km then all the scaling goes out the window and you end up with 1 full bar and 99 practically empty ones.
    – JonW ♦
    May 31, 2012 at 13:54
  • 1
    Fair point. One way around this is to use statistics. Set the maximum at the 99th percentile, or at the third standard deviation from the mean. Users who were past the end of the scale would have something fun, like a big 'more' arrow.
    – Myrddin Emrys
    May 31, 2012 at 13:58
0

I think using horizontal bars like "progress bars" as you described them is a good idea along with @Myrddin's suggestion to automatically set the scale of the bars based on the longest distance. Most charting tools (e.g. excel, google's charts, etc.) will do this by default so you're viewers have probably seen this scaling before and will be familiar with it.

However, the one thing I would add is to rank them: That is, to sort them from top to bottom based on the distance. Something like:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I think @Roger's suggestion about equivalencies might be a nice addition too, but the simple bars would undoubtedly be a good start and I wouldn't remove the bars in favor of equivalencies. As bar graphs are recognizable and instantly understandable by pretty much everyone, so they add a lot of value because of that.

Improve this answer

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.