12

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.

13 Answers 13

6

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

Example from the Withings app

  • I like this the most, by far, because it is visually VERY easy to scan and get an intuitive feel for where one stands compared to one's target goal. The other options do not offer this ease of scanning instantly. – HC_ Nov 17 '15 at 17:30
  • I think that it is good for visualization of showing negative goals while not good for dashboard view. The reason is that if you are going to have more graphics in dashboard, the important information can be unnoticed. – Abektes Nov 19 '15 at 8:37
5

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.

KPI

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
  • I feel like I'm missing something here since this answer has four votes but I don't understand the significance of it. You're just saying to use colors? Do the images relate to your answer at all? – Ryan Elkins Nov 23 '15 at 20:33
  • @RyanElkins Maybe it needs some editing ;). I am saying that try to create a simple dashboard unit that gets a clear verbal messaging together with visual cue. These dashboard unit should follow the general design guideline of the platform that you are building on. My example is for Fiori SAP. Creating a verbal message and obeying rules will be enough. Lastly, this dashboard unit should enable user to dril down more graphics in deeper stages. I hope that it is a bit clear for you now. – Abektes Nov 23 '15 at 20:43
  • In my example, i chose dots for showing the occurring frequencies with verbal message. – Abektes Nov 23 '15 at 20:45
  • The intention is clearer - but the point of the question was to get some help in designing that dashboard element, especially when that element will be alongside more traditional progress based (bigger number is better) goals. – Ryan Elkins Nov 23 '15 at 20:46
  • Yes and using colors and combining occurrence frequency (visually) is my suggestion. You can use this particular pattern to create extra awareness of the situation. – Abektes Nov 23 '15 at 20:58
3
+50

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.

annotated bullet graph

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.

example of representing negative goals with bullet graphs

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

example of backwards bullet graphs

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

  • Not sure how I feel about this but it's definitely interesting. I'm concerned about needing some sort of "negative cap" or a max value to the negative goal. In your example, how do we determine that 150 is the max number to graph this out to for expenses? In a normal goal it might be as simple as 0 to target, In this approach it's 0 to target to some arbitrary number. – Ryan Elkins Nov 18 '15 at 0:38
  • I believe the 150 on Expense is just chosen to sensibly show the "good" "ok" and "poor" ranges. Like any graph, if your actual value is way out, your scale will naturally increase. e.g. if your actual expense is 180, we may use a scale with increments of 50 instead with 200 as the max shown value. – nightning Nov 18 '15 at 18:32
1

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

1

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.

Doughnut chart - bad Doughnut chart - good Doughnut chart - average

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.

  • I'm not sure if I get it, but this target approach is more like positive evaluations, right? – Heitor Feb 5 '15 at 18:50
  • @Heitor It's just a score: you can set up the math to map increase or decrease to a positive value. The key is that the metric the user sees should be a "positive" one. – plainclothes Feb 5 '15 at 18:52
  • I see. I think it's a good solution even for "negative metrics". If you're a fresh new user, then all the arrows are placed at the centre of each target. As you start doing faults, some arrows start moving away from the centres. The only con is that targets are two dimensional and the metrics probably not, so there's a mapping problem. – Heitor Feb 5 '15 at 19:06
  • Yes, you can implement both the score and a trend indicator (or even a spark line). As far as the dimensions, the OP wasn't speaking about a complex report just two dimensions: a goal and an actual. The additional data that may contribute to that actual can be part of a drilldown. – plainclothes Feb 5 '15 at 19:37
  • I mean: if you metric is zero, then your arrow is in the centre - OK. If it gets to 8, where should you place the arrow? To the left? A little to the left and a little to the top? The metric would fit well in a single line (1D), but the visual representation (the target) is a 2D plane. – Heitor Feb 5 '15 at 19:54
1

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" positivitynegative progress

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

  • The example on the right is one of the more confusing things I've ever seen. – orokusaki Nov 26 '15 at 4:42
1

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.

Savings/Expenditure Tracker

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

Device Temperature Tracker

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

Bounce Rate % Tracker

  1. 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!

Real-Time Users & Device Type

1

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.

Volume meter

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.

Red and Green, perceptible by the colour blind

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.

0

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. :)
  • I guess part of the problem that I should have also stated is that these may end up next to positive goals and I'm worried people may be confused if sometimes a big progress bar is good and sometimes it's bad. – Ryan Elkins Feb 5 '15 at 17:27
  • 1
    Is it like a dashboard where multiple goals are displayed next to each other? I think even if that's the case, people are looking for "positive" feedback towards their goals. So if you're using a "green/orange/yellow/red" color scheme, the goals that increase in number will have the green on the higher end of the scale; the goals that decrease in number will have green on the smaller side of the scale. Does that help? – Lauren Dankiewicz Feb 5 '15 at 17:31
0

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)

0

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.

Negative Goals

0

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

0

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!

  • The problem with this approach is that "reversing" the goal is usually not the same thing as the original goal. Using your #3 example - it's very possible to accomplish both - have 7 cases closed in 72 hours AND have open cases that are more than 72 hours old. It would be great if we could do it that way, but there are definitely cases where it won't work like that. – Ryan Elkins Nov 24 '15 at 17:17
  • My point is that negative goals should not be shown with the negative signage. They should not look different from the positive ones. If I am losing weight or going on a strike of no-error lessons in Memrise, I'd want to see a normal positive progress bar for kilos lost and no errors made, and not a reverted red progress bar. – Zoe K Nov 24 '15 at 17:46
  • You could use right-aligned positively colored bars for the negative goals and left-aligned ones for the positive ones, but from my first hand experience with the marketing analytics tool where we had the bar charts aligned to the right (to avoid conflicting with the overlayed values), our US audience allegedly struggled with that (Europeans didn't). – Zoe K Nov 24 '15 at 17:46
  • I understand what you're saying - it's a tough question, which is why I'm looking for help with it. The issue remains - you cannot represent all goals the same way. Staying with the example - no cases more than 72 hours old - how would you represent that like a positive goal? I could have a trillion closed cases in under 72 hours - if I have a single one that is older then I fail the goal. It's not enough to have a positive goal that encourages the behavior I want - I need one that tracks the desired outcome precisely. – Ryan Elkins Nov 24 '15 at 17:50
  • I think you've missed my second (third from the top) comment. – Zoe K Nov 24 '15 at 18:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.