How to present a race for the lowest score

Question

We have an energy dashboard in a STEM elementary school. One of the pages is a competition for the most efficient building which starts at 8:00 AM Monday and completes 2:45 Friday.

We are currently showing a race where the distance run by each building is calculated as described below. This allows all teams to start at a starting line at the beginning of the week/race, for the most efficient building to reach the finish line at the scheduled competition ending time, and for each building to be positioned based on its current efficiency.

(TimeElapsed/CompetitionDuration) * MIN( EnergyUse(i)/SqFt(i) ) * ( SqFt(i)/EnergyUse(i) )

This approach, however, is not very intuitive since the winner is the team with the lowest score (energy use per square foot). Additional, a typical race has a set distance to travel but not a set time to complete, which makes it even less intuitive. We also considered dictating each team's score based on their energy use against a baseline energy use, however, this can result in a team going backwards which might be difficult to understand.

How should a competition be presented where the winner is the team who uses the least energy?

Answer 1

I think the best and simple solution is to put the lowest score (winner) at the top, and the rest below. Since people tend to think that who is at the top of the list is the better one. Like a leaderboard.

Also think and research about computers benchmarking. Some times they have graphics with a sub-title "Less is better".

Hope I helped you out.

Answer 2

Your approach is not intuitive because you're presenting a score proportional to energy consumption but you score players according to the inverse of that. Calculate a score for participants which matches the intuitive mental model of an elementary school child (bigger/higher is better) and chart that value. In simple words...invert the score you use in your chart.

One UX golden rule is to design with the persona in mind. What is perfectly clear for an educated adult may still be incomprehensible for an elementary school child.

Maartinus in his answer made a very good point: in games the word "score" carries the meaning of "higher is better" (with few exceptions like Golf and Ramino).

Disclaimer

I am not an educator, gaming is an important part of children development but competition should be addressed carefully. Consider this answer a starting point to further investigate with the help of a professional educator.

I marked some points with †, I strongly recommend you discuss these suggestions with children's educators: they may be opinionated, they may need a psychological studies background to support them (which I do not have) or they may relate to children's culture and education level.

This answer is only half about UI design (how to present data), the most important part IMO is the overall eXperience to make this game pleasurable and educational while keeping in mind the intended audience.

Formulas, values and names are purely illustrative, knowing your domain I'm sure you can do much better than me.

Prepare

Given this data:

Team 1: 34
Team 2: 22
Team 3: 56
Team 4: 16

We do not have an absolute reference value (if you had then simply reverting X axes might give you the desired result) then we have to normalize the energy efficiency field. I simply used 100 - Value / Maximum * 100.

Does it make sense? Let's take a quick look adding data bars:

To an increasing energy consumption (regardless how this is calculated) we have now an inverted normalised index to show the energy efficiency.

I'm using 100% as I best and 0% as worst. Some elementary school children may have more difficulties with bigger numbers or with decimals† (truncate them when presenting data.) If accuracy isn't your top priority then you may use [1..10] scale which should be even more intuitive†.

I do not know† if kBTU/ft²/yr is an appropriate unit of measure to use when targeting young children. That's why here I'm talking about "energy efficiency index", a pure number that everyone can understand.

Present

How to present these information? If you wish to use bars now it should be easy:

Now teams performing better have intuitively a higher score. You may want to compare energy usage on the same chart. Because efficiency is the inverse of the usage and we are working with normalised data the whole is always 100%.

Improve

We have a team with a 0 score, it's not visually appealing but, more importantly, this value will never change and worst performing team will always have a score of 0. Competitors are children then we might want to provide some feedback of their progress† (or at least to show that something is happening). This may help morale and self-esteem†.

To solve this we may normalise using the sum instead of the maximum value:

And:

If values are pretty high you may start X axes from a non-zero value. It has the positive effect to exaggerate differences and maybe stimulating a slightly competitive behaviour†:

Note that this is border-line with cheating with data, always include axes values: children should get used to good charts even when favouring visual appeal. It may be even a small discussion point (if they are old enough) to illustrate how poorly designed charts are misleading (and to quickly scan for signs of intentionally misleading ones†.)

I can't honestly understand from you chart what the X axes is. Time? Usage? Usage*time? Also, if you're working with a time axes IMO bars aren't the best choice. I'd calculate an index and plot it as line chart.

To do

I didn't do it in these examples but you should order teams according to their score†. Another answer already addressed this. Your audience is made of children then feel free to add decorations and colors as appropriate† (without hiding data, of course).

Acrcturus, in his answer, suggests to add a marker for the winner. I think it's a good recommendation but I'd add special mentions for all the others† (even worst performing ones): constantly improving trend, best performing in last quarter, most stable index and so on. Ideally each team should have a mention for something.

There are many more things to say about this (especially in view of a retrospective† lesson) to help them to understand how the parts contributes to the whole (let's imagine one very efficient building in a world of highly inefficient ones). It's a stimulating topic but outside the scope of this question...

Answer 3

1. Sort the chart by putting bar with smaller number (which is good) on the top, and bar with bigger number (which is bad) on the bottom.

2. Set color for bar with smaller number as green (or any positive-representation color), and bar with bigger number (or any negative-representation color)

Answer 4

Probably the Fuel metaphor may work best for you. So, your race objective will be

Given 100 KW of so called fuel complete the distance with minimum fuel loss.

But you dont go negative. You can complete distance but if you used all your fuel – your problem, no points.

At the end you count the amount of fuel left and can convert it to points (if nececary). And this is 100% clear since everyone understand the fuel, and fuel tank and that "more fuel left - better" energy efficiency etc.

Finally. You can draw you chart as you would like to. Bigger lines (more fuel left) on top , smaller (more fuel used) - to the bottom.

You can go even further and compose beautiful story, true of fictional: You have very special fuel, each gram of it has 1KW enery. Or use regular "gasoline" name :)

so you can finally say.

Given 100 gramms of Elerium-115 complete the distance with minimum fuel loss.

(assuming 1 gramm of Elerium contains 1kw)

Now your races have to do some math on the way. Why not? :)

Answer 5

What you're calling score is not score as it's usually understood - a bigger score is usually understood to be better. The word sounds positive, just like progress. It's nearly like higher speed means going faster, not slower.

If you want to keep the energy per square foot value, then find a different word for it, something sounding negative, like "loss" or "cost". But it's always better to stick with a positive sounding term like score. All you need is a better formula.

As already proposed, saved energy (computed against a fixed limit) would do. The reciprocal, i.e., square feet per kilowatt may be even better as it needs no artificial limit. Or think big and count the number of houses per warmth plant-, which may give you better graphics.

Showing a bigger bar for the winner is IMHO better than the other way round. It also allows you to order the teams the way you like (which doesn't really matter with only four teams).

Answer 6

It has been suggested by Diogo Belém and Ahmad Naim Muzammil to sort the results from lowest to highest scores, putting the winners (ie. lower scores) at the top, and the losers (ie. higher scores) at the bottom of the chart.

This, with the other suggestions from these two answers, helps a lot. However, this still doesn’t allow you to find the winner in a glance and without a doubt.

To address this issue, you could add a “winner” label to your chart (possibly with an icon). This, with the order, allows to immediately get the intuition that lower values = better result.

Answer 7

First of all you should change the word "Finish" with something like "Max" or "100KW". The reason for this is that if someone sees Finish, the first impression is that it has to reach that finish, exactly the opposite of what you want. I would also remove the badge for the same reason.

I would:

1. add the name of the building next to it's corresponding progressbar.
2. constantly[real time] rearrange in ascending order the building in the graph [from lowest consumer to highest]
3. clip a gradient blue-green-orange-red on all the progressbars
4. change the yellow color of the last bar to the same red from the progressbars
5. add two tags from the end of the first two progressbars with "winning" and "follow-up"

To this result

Answer 8

How about using a line graph instead?

To me this seems to convey that the race is based on time (ends every Friday), and also it is easier to understand that lower is better. As a further benefit, one can visually see which team has made progress during the week, instead of just seeing the current status.

Answer 9

Go with vertical bars facing down. That way the longest bars will go down the most, that is pretty intuitive, because the leading edge of the bars will be the different (and therefore perceived) feature of the bars, and thereby the perceived feature of the team with less energy expenditure will be higher. Also, these bars usually get used for debt or negative outcomes (usually in conjunction with some profit or positive outcome, but anyway), so viewers are used to equating smaller bars in this context as better.

Answer 10

In your design there are 2 problems:

1. Trying to visually represent the idea of "less is better"
2. Having a single way to represent both time and energy consumption

A bit of gamification: Efficiency points

"Smaller is better" concept struggles with our intuitive visual perception: as human being, we tend to give higher value to things that are big, so it would be very difficult to conceive the "smaller is better" idea in an intuitive way. We may be accustomed to energy consumption labels, where "smaller is better", but here we are dealing with a commonly known representation and a completely different target.

You could add a bit of gamification to your UX introducing the concept of Efficiency Points / Green Points that allows you to turn low energy consumption in something that can be intuitively understood: a high Efficiency Points score can be immediately recognised as a good thing.

Efficiency points could be either:

• calculated as a function of the reciprocal of the amount of energy consumption
• the delta between the actual consumption and the baseline value
• assigned daily to each building considering a daily partial ranking (100 points to the most efficient, 80 to the second and so on...)
• assigned daily to each building considering the delta between the most and the least efficient building (0 points to the least efficient) - MAX( EnergyUse(i) ) - EnergyUse(i)

Represent Time and Points in 2 distinct way

The second issue I can point out is that you are trying to use the chart bar width to convey 2 distinct concepts: the idea of a race that has a time progression, mixed with the energy consumption value.

I'd recommend using a 2D visualisation in order to represent each feature in a different way.

It could simply be a x/y line graph, where x is time, and y is Efficiency points score. Being this done for kids, you could turn it in a bit more playful table, using image icons to represent Efficiency points.

Here are 2 demo (you can see the best ranking building is on the first row):

---

Icon credit: freepik.com

Answer 11

Keep the same axes, but draw the bars from the right, coming down from "100" to the current value. This makes the longest bar the current frontrunner. This captures the semantics of consumption -- lower energy consumption "consumes" less of the bar.

If you wish to indicate a baseline, overlay a labelled vertical line indicating this value.

Side comments

• Based on the label on the vertical axis, apparently you measure Buildings in units of "KW", which is not an SI unit. If you mean kilowatts, it's "kW".
• It is strange to measure buildings in units of kilowatts. Buildings usually have names, none of which seem to be indicated on the Buildings axis.
• Buildings is not normally an ordered set. In the example, there is a natural alphabetic ordering. This strongly argues against reordering the bars based on current rankings.
• You appear to be using color as the building discriminator. This might be better indicated by removing the (left) vertical axis and its label and modifying the legend to "Buildings: [spot color] A [spot color] B ...", which might allow replacing the absurdly tiny text with text of a readable size.
• The horizontal axis is unlabelled and lacks units. I suspect this is the axis that should be measured in kW.
• There seem to be two things indicating "Finish", but it is not clear how either of them indicates the distance or time between here and now and the finish. A perhaps better way to indicate that would be another horizontal bar, "Time remaining", in a separate bar group (i.e., with a larger vertical separation than between the Buildings bars) that decreases to zero as the week's competition progresses.

Answer 12

Always present performance results so that larger is better, and to the right. As others have suggested, if smaller is better, take the reciprocal.

Always present using dimensions of (Achievement/Resource), such as (miles per hour), (km per liter), or (classrooms per kilowatt-hour/week).

How? Consider a general example:

• ComputerA does a task in 15 seconds,

• ComputerB accomplishes the same in 12 seconds, and

• ComputerC takes only 10 seconds.

How much better is B compared to A, C compared to B, and C compared to A?

Consider these confusing percentages:

• ComputerB takes 20% less time than ComputerA. However, ComputerB really is 25% faster, with 1.25x the performance of ComputerA.

• ComputerC takes 16.6% less time than ComputerB. It is 20% faster than ComputerB, with 1.2x the performance of ComputerB.

• ComputerC takes 33% less time than ComputerA. It is 50% faster than ComputerA, with 1.5x the performance of ComputerA.

How do we get those performance factors? Take the reciprocal.

• ComputerA completes 4 per minute.

• ComputerB does 5 per minute.

• ComputerC achieves 6 per minute.

So:

• ComputerB has 1.25x the performance of ComputerA.

• ComputerC has 1.2x the performance of ComputerB.

• ComputerC has 1.5x the performance of ComputerA.

Answer 13

Another answer gave several ways to renormalise an existing "smaller is better" measurement into one where longer bars are better. I, on the other hand, have only one, very simple way.

Your current figure of merit is "energy use per square foot", without specifying what units "energy use" is measured in. For the sake of argument, I'll assume it's kilojoules, ie. kilowatt-seconds.

To invert your graph so that "bigger is better", simply compute the reciprocal - that is, make your figure of merit "square feet per energy used". To make the numbers involved intuitive, you might then need to rescale the units (perhaps to kilowatt-hours or megajoules instead of kilojoules, or using square metres instead of square feet), but this won't affect the relative lengths of the bars.

As another example I've advocated in the past, using the same technique: instead of expressing Internet delays in milliseconds (where smaller is better), do so in Hertz (where bigger is better). A typical transcontinental 100ms delay becomes 10Hz response, which can very easily be compared with the framerate of a game. Wired Ethernet LANs typically have sub-millisecond delays, or over 1000Hz response.

Answer 14

By your description you have a static value of time (1 week) and a variable value of energy (with accompanying calculations for Sqr ft etc).

I'd flip it so the time is variable and instead the energy is static.

For example give them x energy units / sqrft and have the time this energy would last for us as a variable.

Allocate 'energy amount' less than initial efficiency requires

This is a competition to reach better efficiency. So, give them (in the graph...) less energy than what they currently need.

As such, when you are making an initial graph to kick off the competition you'd have something where none of the horizontal bars actually reach one week yet.

But that would be the actual (or imaginary) end goal: achieve enough efficiency to make the allocated energy last one week, or even longer.

This setting would allow you to see the winner at a glance since it would be the group with the longest bar.

Answer 15

I think that the way the information is presented doesn't seem to fit the purpose and this happens at two different levels. The first is to do with a race fitting with the mental model of how people view energy saving, and you can do this by rephrasing or restructuring the data so that it represents the relative amount of energy saved (which increases incrementally) instead of amount of energy consumption (which decreases when they are being more efficient). I don't know how much it makes sense to compare absolute energy usage because it means that the buildings would have to have the same amount of energy requirements similar conditions (e.g. older buildings that are less energy efficient), otherwise you wouldn't be making a fair comparison.

The second aspect is trying to visualize the information in a way that encourages the behavior that you are trying to influence. A race is important but whereas a race only has one winner, you should reward/encourage the behaviour whether or not they are the winner as long as they exhibit the preferred behaviour. So something like a bullet chart where you can also display comparison against their previous effort allows you to show buildings that also improved on their previous efforts would be better than simply having a winner versus the rest.

Here's some explanation on how Bullet Graphs work: https://en.wikipedia.org/wiki/Bullet_graph

Answer 16

[ Edit 4-28-18: I realized I was answering in developer mode in the UX forum. That equation set me off. I removed all the equation details and explanations.]

You can definitely do this display. This display is a common bar graph displaying percentages. This display should simply communicate who's winning the competition not all the equations that go into it.

One issue is the wording. The example calls it an "Energy Competition" when it's an "Energy Saving Competition." Saving and saving energy are very common concepts. So the display is showing the savings, not the consumption.

This example is displaying real numbers. It works with any amount of contestants. The display time at the top can be a control.

The display can be any size. The width of the race in pixels is used to create the bars. The only data needed is a set of consumption numbers (see below). This equation returns the pixel width of an contestant's bar.

Here is the equation to create the bars:

Bar Width = Width of Time - ( ( ( Units Used - Least Units ) / Most Units ) / Width of Time );

Here's the numbers used in the example (consumption numbers): A: 184, B: 361, C: 120, D: 408, Baseline: 392