How do you visually represent "progress" on a negative (lower is better) goal?

Question

I may have some terminology wrong but I think the idea is sound.

There are a variety of ways to represent progress when you are increasing a number and trying to get to some set number. Usually you'll see some sort of progress bar to represent this. I'll call this a positive goal. You want the number you are measuring to be as big as possible.

What about a goal where you start at either a high number or at zero and the "goal" is to get the number as low as possible or to stay at zero? This is what I referred to in the title as a negative goal. It's like a golf score - lower is better. Progress bars don't seem to make sense, since you really want as little "progress" as possible. What's the opposite of a progress bar?

While there is always the possibility to trying to "invert" the goal so it can be represented as a positive goal (where you want a big number) but I'm not convinced it is always possible or even clear. I'm trying to find ways to represent a negative goal that makes sense to users.

Some real world business examples:

• Have an average call time of less than 10 minutes
• Have less than 3 returns
• Have no open cases that are more than 72 hours old

If you are displaying a compact list of goals in a dashboard format, some positive and some negative - what are some design elements you could use that would help a user distinguish between them? It feels like it would be confusing to have progress bars for all of them, some where you want them to be filled and others where you want them to be empty.

Using color cues could help but of course you run in to colorblind issues since the most common way to use color cues is red = bad, green = good.

Answer 1

Just look at how weight loss apps are doing it - usually using a line graph where the target area is marked:

Answer 2

What I feel is that you are trying to design an KPI (Key Performance Indicators) dashboard. Each element regarding the positive and negative results can be communicated with the colors like green, orange and red. However,these color codes are already embedded to UI elements of famous solutions 2.

Your solution for dashboard needs;

• Clear verbal messaging which is standard for the company
• Using existing design guides if there is not any error
• 3-30-300 second deepness of the data

Answer 3

Consider using the bullet graph.

A bullet graph takes a traditional bar graph and add additional elements to concisely represent target and range info. It is especially designed for dashboards.

How do you represent negative goals?

Take a look at the Expenses and Defects graphs below. Notice the target bars are placed towards 0 mark. The color ranges on these two graphs are also backwards, showing the lightest "good" range close to 0 and the dark "poor" performance range at the top.

If this is not obvious enough, you can even graph the scale backwards.

Now it becomes super clear which graphs should be read traditionally and which one has a reverse scale.

This is taken from Stephen Few's (designer of the bullet graph) blog post: http://kelsocartography.com/blog/?p=1682

Answer 4

I would call those 3 targets and put them exactly in the middle of the progress bar
It they are over the target the bar starts in the middle and goes to the right in red
If they are under the target then the bar goes to the left and is green

Answer 5

Keep the target simple

I've worked on something similar and came to the conclusion that it's best to take a simple dashboard approach. Don't get the user caught up in the semantics of "am I moving up, or down, or sideways ... ?"

Here's an example for a call time metric where the user (a phone agent) is trying to hit a management defined target. That target is represented by a percentage score. The colored ring fills the "doughnut" when they've hit the target. The color changes with various milestone values to help reinforce the user's progress or decline.

Simple, scanable visual visual cues provide high-level assessment without requiring a lot of deciphering. When there's a problem, it's evident and the user can drill into other data for the details.

Answer 6

Just throwing in some thoughts, since I do not have a perfect answer for this very interesting question:

• When using Excel or Spreadsheets, we also have that situation: Sometimes smaller is better (lower bouncerate = good). Here, we color-code the positive outcome: Green is good, red is bad. This allows us to be consistent with - as you called it - positive progress.

Maybe we can also use that mechanism to visualize "inverted" positivity

With this, you could use the same kind of visuals, but still have a clear separation between "what is left" and "what was accomplished". The colors will help with the recognition of "what needs attention". Technically, you could also have the bar "grow" from bottom to top for both approaches: Positive will grow colored bars, negative will grow grey bars.

I'll give it some second thought. That's a quite interesting riddle :)

Answer 7

If I understand correctly, your central objective is to create a sense of alertness amongst the users who exceed the benchmark (or goal), by projecting the current score in a kind of 'regress' bar/graph (if I may say so). The quickest references I can relate to are as follows:

1. Monthly Savings/Expenditure Tracker - More the savings, lesser the expenditure and vice versa. Hence, user's goal is to keep the bars as greenish as possible by restricting the monthly expenditure to a minimum thereby increasing savings. As the month will progress, the bar will keep getting longer and the color will be either greenish (Savings) or reddish (Expenses) or both.

2. Device Temperature Indicator - Assuming that the optimum temperature of the device is 42 degree celsius, the slider indicates the current device temperature. Once the current temperature crosses the optimum temperate, a warning message is flashed. User's goal is to keep the slider as close to the optimum temperature as possible. The SAFE and DANGER labels makes the indicator more self explanatory and understandable.

3. Bounce Rate % Tracker - This is one of my favs. If I want to see the bounce rate % of the site at a glance, these kind of speedometer widgets may be helpful. The webmaster can also take a note of the increase/decrease % in bounce % as compared to previous day % or optimum % beside the main reading.

4. Real-Time Users & Device Type - Not sure if it's a good example but this is snapshot of the real-time dashboard available inside Google Analytics. From the usage of the red and green colors, I'm assuming that Google wants webmasters to acquire more mobile powered users than users surfing the web from their desktops!

Answer 8

Progress bars for negative progress
A typical progress bar starts empty and fills up. Or starts down and heads up.

Where you have a goal where you start at high number or at zero and you want to show progress downwards, well you want the opposite of a progress bar.

The opposite would be a bar that starts full, and empties out. Or starts 'up' and gradually comes down.

Another way of thinking of it are the volume bars that you once got on cassette players, or on WinAmp.

A bar that lights up green for the first 60%-70% of the scale, then turns amber for the next 20%-25% of the scale then turns red for the final section. These would flicker up and down, letting you know when things were good, when they were approaching bad, and when they were bad.

Some real world business examples:
Have an average call time of less than 10 minutes

Show the average time, and the target time. Update after each call. This can give you progress versus time.

Have less than 3 returns

This is generally a proportion target. Show the current return rate. Show the target return rate. Eliminate a large proportion of the scale.

e.g. 3 returns is, say 0.5% of a batch / a week's production. Current return rate is 12 per . Only show the current return rate on a scale from 0% returns up to 2.5% returns.

Have no open cases that are more than 72 hours old

How many open cases are that age? How many were there yesterday? Last week? Show?

A key point is that progress bars are generally showing a one-way direction. You progress to the finish, or perhaps you pause.

In most of these real-world examples, back-sliding is a real possibility.

Regarding use of colour:
I always try to use a pale green, and a dark red. I try to keep the red a 'pure' red, and introduce a blue-ish hue into the green.

This provides two distinctions between the red and the green: the amount of blue, and the darkness.

A great deal of useful information on the effect of colour-blindness on the user experience can also be found at: Can Color-Blind Users See Your Site?

On the clock-dials of colour shown on the site, I typically would use the colours shown at 5 o'clock and noon or 11am. And I'd darken the 11am/noon colour.

Answer 9

You can still represent a goal going in a "negative" direction in a "positive" way for the user.

Let's look at one the real world cases you raised:

• Have an average call time of less than 10 minutes
  • You could display the user's running average of call times and designate "zones" of progress. For example, if a user's running average is less than 10 minutes, they are in a green zone. If they're averaging between 10-20 minutes, they're in orange, etc... So, the number may be going in a negative direction, but the user is still getting positive feedback. :)

Answer 10

Maybe something like a thermometer? If your number is low, then it's blue and you're cool. If the number increases, then the size of the vertical bar increases and gets yellow, orange and red, grabbing more of your attention.

The way you put things reminds me of gamification. If it wasn't numbers but faults, you could also use the concept of lifes (like 1-up in Mario Bros). The user starts with, say, five lives. If they do something 'wrong' (e.g., left one open case unanswered for more than three days), they miss a life. The games have many ways of representing the number of lives left, you could choose one. (Hope it helped)

Answer 11

A lot has been covered already on this page already.

I agree that potentially converting negative goals into positive may be one way to solve the problem.

If you want to differentiate, an alternate solution would be to chose slightly different design patterns to show these "negative goals".

See image below for some examples:

You are right you cannot purely rely on color and as long as you add intuitive content or visual effects to cover those gaps - you should be in a good shape.

Answer 12

Consider looking at countdowns as many of these are designed to encourage negative progress.

Answer 13

I would never use a red minus progress bar on this.

A negative progress is always psychologically associated with loss, especially when depicted by alarming red bars or other kinds of red signage. If you revert it into a positive, not only you can use a normal progress bar or other gamification elements, but also encourage users with a positive reinforcement rather than a double-negative one.

Reverting:

1. Have an average call time of less than 10 minutes > Having average call time in "lightning fast calls" category.

2. Have less than 3 returns > Have a "Keeper" badge.

3. Have no open cases that are more than 72 hours old > Have 7 cases closed in 72-hours. You are on a 10 cases strike!