# How to present a race for the lowest score

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?

• I don't know if this will work since I'm bad at math/graphs but could you flip it to instead show % reduction? You say the baseline is 141 kBTU/ft2/yr, if they got that down to 105.75 you'd fill the bar to 25% as that is the percentage they reduced energy consumption. If they get it down to 35.25 kBTU/ft2/yr you'd fill the bar to 75%, and if they somehow reduced all consumption and got it to 0 kBTU/ft2/yr their bar would be 100% full. This way the team that saves the most energy is on top. – DasBeasto Apr 18 '18 at 15:25
• As an aside, your `MIN` only has one parameter so it won't actually do anything. – wizzwizz4 Apr 18 '18 at 16:45
• Can you invert the unit? For example if you're comparing fuel efficiency of cars, you don't use "gallons per mile" but "miles per gallon". – R.. GitHub STOP HELPING ICE Apr 18 '18 at 18:06
• What R wrote was my first thought as well. In the US, fuel efficiency is measured as "miles per gallon". In Europe, it is "litres per 100 km". Make your measurement not energy per time, but time per energy - how long would 1 unit of energy last? – Tom Apr 19 '18 at 12:09
• Have you thought about reframing the competition/charts to "most energy saved"? Then the higher the bar, the more energy has been saved i.e less consumed. – lunohodov Apr 21 '18 at 14:58

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.

• Orders help and should be definitely used but it does not solve the problem to make intuitive for an elementary school child that lower = better. This chart (without or - better - with ordering) is straightforward for most adults but children might need some more help. The point IMO is that we're simply charting the wrong variable. That's why way too often we have charts with legend "lower is better" attached somewhere. A good chart should NEVER need it. In your example I'd also highlight a slightly too creative use of colors... – Adriano Repetti Apr 19 '18 at 11:55
• @AdrianoRepetti: blue is Intel CPUs, red is Ryzen, orange is Ryzen-Threadripper. It's definitely a good thing to have some kind of color coding in a benchmark chart when showing a bunch of CPUs of one kind (but different clock speeds) and a bunch of other kinds. Or were you objecting to the specific choices of which shade? Intel is team blue, AMD is team red. AMD literally has a "red team" web site :P – Peter Cordes Apr 20 '18 at 9:44
• @PeterCordes I didn't note orange is for Threadripper and I was wondering "why the h... some AMDs are red and some orange?!" Then, for parity, I want different shades of blue also for Intel! :D (joking, of course) – Adriano Repetti Apr 20 '18 at 9:48
• @AdrianoRepetti: heh, yeah it's weird that SKL-X / KBL-X are the same color as Broadwell-E / Haswell-E. Perhaps from a ThreadRipper review where they wanted to get into detail of TR vs. regular Zen, and different flavours of Intel weren't as big a focus. – Peter Cordes Apr 20 '18 at 9:57
• @AdrianoRepetti thank you for your feedback. You are right, the best possible solution is one that doesn't even needs a legend on a chart. But talking about children, yeah it's really difficult to them to make sense of data like this. They allways think that one thing that has alot of something, or it's bigger is automatically better. Again thank you for pointing this out. – Diogo Belém Apr 20 '18 at 10:34

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/ft2/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...

• This is the answer that feels the most intuitive at first sight, to me. For most of the others, the reader will still take some time to understand the chart. – Baptiste Candellier Apr 19 '18 at 19:40
• Tnx, for older children maybe "lower is better" isn't a problem but I think (but I'm not an educator) they need some more help when in elementary school. In a retrospective session you may use some more complex charts but they're probably distracting – Adriano Repetti Apr 19 '18 at 20:56
• Excellent answer, very informative and nicely written. – Masked Man Apr 20 '18 at 14:46
• @MaskedMan tnx! About "nicely written"...I try but I doubt I can really make it :( – Adriano Repetti Apr 20 '18 at 15:58
• Although this does get the answer of 'higher is better' you have to switch to talk about efficiency instead of usage which is a harder concept to explain. @ADOConnection's answer also gives higher is better but does it in how much you've got left. Then you're still asking the same question. – icc97 Apr 22 '18 at 17:34
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)

• Red and green aren't the best colours to choose, given the most common form of colour-blindness... – Toby Speight Apr 20 '18 at 14:19
• This is effectively a duplicate of Diego's answer – icc97 Apr 22 '18 at 17:35

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? :)

• I like this idea, you could simplify it by using pennies / cents and then displaying how much money is left in the piggy bank – icc97 Apr 22 '18 at 17:30
• Also you might want to switch to a vertical bar chart then it looks more like 'piles' of things. This also gives you the benefit of using coins as you can show towers of coins – icc97 Apr 22 '18 at 17:40

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).

• "scoring more is per definition better" unless you're a golfer. – R.M. Apr 18 '18 at 15:39
• Or a developer. – msanford Apr 18 '18 at 15:45
• @R.M. Sure, there are exceptions, but they're just that: exceptions. I should've chosen a less strict formulation. – maaartinus Apr 18 '18 at 15:51
• +1 for "square feet per kilowatt". That's exactly the direction to go with such a graph. The "graphics card" chart above focuses on total time to complete a task. The more intuitive version is the inverse: "Tasks completed per time unit". – Mooing Duck Apr 18 '18 at 18:19

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.

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

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.

• Line graph may help to grasp a trend but there is absolutely no reason to think that "lower is better" without some more understanding and absolutely not at a glance. That's why OP is asking, usually and especially for children bigger/higher is intuitively better. – Adriano Repetti Apr 19 '18 at 12:02

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.

• You should try to give better reasoning than that is pretty intuitive what if I say that it's not intuitive at all. – RobbyReindeer Apr 19 '18 at 8:46
• I would have a very hard time reading that graph. Knowing about the situation, I would just think "smaller is better" and look at which bar is the smallest. – JiK Apr 19 '18 at 11:50
• @JiK .. and you'd be correct! – bukwyrm Apr 22 '18 at 21:07
• @bukwyrm Ok, so reading the explanation changed my accidentally correct perception to a wrong one. I guess that demonstrates my point anyway... :D – JiK Apr 23 '18 at 18:56

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

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.

• 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.

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.

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.

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

[ 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