How to visualize many weighted scores contributing to a final score?

Question

I have a couple of (only very slightly technical) users that require a way to visualize a "scorecard". They have different factors that are scored. Each factor has a weight associated with it and the scores are multiplied with their weights and summed up into a final score. They like to look at the details for each factor but at the same time keep in mind its relative weighting to other factors.

How best to visualize something like that?

One proposal is making score the width and weight the height of a bar. Such as the image below. But that takes up a lot of screen space and looks really ugly (big green blocks!).

My concern is how the human mind interprets volumes vs relative heights etc.

And then maybe add a summary image such as below, where the multiplied score x weight is then put in a stacked bar chart.

Answer 1

If you want to keep it simple, try this one dimensional method:

What this does is take the total maximum score, divide that by the factor percentages, and then subdivide that into scored and unscored points. This way you can very quickly see what the overall score is, and where you can gain the biggest improvement for the overall score (in this case, red).

It doesn't so much take in to account the relative scores in terms of improvement potential. For example, green has a better individual score than orange, but both have the same amount of 'lost points'. So to improve you can pick either of those.

Or you can try this variation, which makes it a easier to see how well each factor scored, but harder to see the overall score.

Of course you can spice them up with text/points/percentages inside the bars and so on, but I feel that even this barebones approach gets the point across well enough. You should also consider some sort of toggle to allow people to switch, or at least test which one works better with the end user.

---

A nice benefit of this 1-dimensionality is that you can easily rotate it and then you have a good basis for detailed description paragraphs. For example you would have space for 1 improvement bullet point for BGYO and two or three red improvement points.

Note: the bar graph focuses positives (scored points) by making those colors pop but you should (probably, depends on context) focus the feedback on the relative size of the light (missed points) because that's where improvements can be made.

Answer 2

Lookup tables are best for displaying densely packed individual details. Consider adding that alongside your visualization. I played around with Google Sheets charts and drew up a few options below.

1) It's hard to beat bar graphs for relative size comparison. Try adding the score and weight to each bar.

2) Donut chart is good for showing composition but doesn't let you precisely compare sizes. (For instance, if you had slices that were 24% and 26%, respectively, they would be almost indistinguishable on a donut chart, but clearly distinct on a graph)

3) A double bar graph may be useful if you want to illustrate the effect of the weights.

I would combine elements from the above you find useful. You can also add details I could not with Google Sheets (e.g. additional info in the center of the donut chart, detailed labels on bars, etc).

Hope that helps!

Also, I consider this is more of a data visualization question. I recommend posting it in the data viz forum: https://stats.stackexchange.com/questions/tagged/data-visualization

Answer 3

We had a remarkably similar situation recently, and here's how we approached it.

1. Don't over-complicate the presentation of the big, important score.
2. Let users know that some kind of scoring mechanism exists. (You don't need to explain it all right away!)
3. Let interested users find out how the scoring works if they want.
4. When concepts get tricky, be clear and explicit when explaining them

Here's a bit of the actual UI we ended up with. The gray bar below is a composite score based on the 6 factors, which are all weighted differently.

Clicking the pills above the graph displays the value of each component:

The Score Weighting area lets the user know there is an underlying system at work, and clicking it opens an explicit explanation of how it works:

We explored lots of all-in-one stacked-bar options, but found they really confused the first impression of the calculated score, and didn't readily convey how the calculations actually worked.

I also think you were right to be skeptical of using boxes where height and width correspond to the sub-scores and their weights. It's unconventional, so it would require explanation of it's own, and it would be very hard to show how that adds up to the overall score. Reducing it to a one-dimensional stacked-bar is easier to read and more conventional.

But, of course, the one-dimensional bar for each component doesn't tell you the story of how the weighting worked.

Ultimately, we concluded that explaining how the sub-scores and the weighting worked to form the final score was too complicated to explain in some subtle visual way, and made it an explicit explanatory diagram of it's own.

p.s. If you have the screen real estate, you might also consider showing the component bars immediately underneath the composite. We made that require an additional "drill-in" interaction to allow us to show many composite bars at once (which isn't visible in the screenshots here).

Answer 4

Interesting question. One data visualisation technique could be as follows:

Several other methods:

Answer 5

Using a different meaning for the width and the height of score bars wouldn't be such a great thing since humans are very sensible to the size of things: evaluating the single features of an object (its height and its width) isn't instinctive and would be very effortful for the user. In your mock, users would need to compare the height of stacked bars: this could be a very difficult task, since the difference in height would't be so large.

I presume that the weight for each feature is fixed, so it wouldn't be so bad writing the weight value as a text label aside the feature name.

If there are few features (≤5) you could also use different shades of the same color to represent each feature, so that high weight features would be darker than features with a lower weight. In this way you are representing the score with the size of bars, and the weight with the color of the bars.

Answer 6

I would suggest using something similar to the Windows memory usage monitor:

As you can see, this display contains a single bar that is split into multiple colored sections. The total bar width represents the max score, or 100%. Each color segment spans a width relative to the factor's contribution percentage of the final score.

On the bottom of bar, there then is a key explaining what each segment color represents. In addition to being a place to indicate what each color on the bar stands for, this sections leaves room for any extra details you might want to include. The memory monitor lists extra details like the MB size. You can replace that with other information like the weight calculation details.