I have an interesting UI challenge. I have a ratio that I am showing in two ways: one using a percentage surrounded by a circumference pie chart, and the other showing a status bar. In some cases a higher percentage is better and in other cases a lower percentage is better. I am trying to come up with an intuitive way to show which direction the data should be heading towards (0 or 100%) without using arrows that will draw the user's attention away.

ui design

In this example, we have a population of patients and we're trying to measure how well they are being cared for at a hospital. Let's say 23 patients out of a possible 46 patients with diabetes had a foot exam in the past year. In this case, a higher numerator is better. Now let's say 23 patients out of a possible 46 patients with heart problems were given incorrect heart medication. In this case, a lower numerator is better.

It would make things a lot easier if I could change how these measures are worded (ex. change incorrect medication to correct medication in the second example above), but I cannot do so. So, how do I create a UI that conveys this information while keeping the design simple and sleek (uni-color flat)?

  • Is there a reason why you can't simply display the bar as (100 - value) for the ones where 0 is more desirable? The "goal" would then always be a full bar. – Brian S May 20 '14 at 16:47
  • This was one of my first thoughts, however in this case the numerator and denominator both have significant meanings, so doing this would confuse the user. – Noranda Brown May 20 '14 at 17:20
  • If you could tell more about what these ratios are for, maybe someone can suggest an entirely different method to convey the information! What the app is about? What is it that needs to be high percentage and what needs to be low? – kBisla May 20 '14 at 18:12
  • 1
    I am a bit confused by your question. Directionality is important, yet your most prominent display is of a circle and a percent (neither of which show directionality as-is). You don't want to change the direction of the bar because it will confuse folks who need the numerator and the denominator, which are important, but also don't show directionality. Changing the bar doesn't seem to resolve those apparent disconnects, so perhaps a slight edit better clarifying your problem would be advisable? – jmac May 21 '14 at 5:19
  • I understand that you do not want to use colors but why not using a single color gradient to indicate which side of the bar/circle is most desirable ? – mathieu May 21 '14 at 6:37

11 Answers 11


What about something like a revs dial or speedometer? Doing it this way you can use the bar to indicate the good / bad ranges of values (colour and text), and use a pointer to show the value.

Something roughly along these lines:

download speedometer

The same concept can also be applied to a linear bar

  • I had not thought of this, but it's not a bad idea! I am however trying to keep the design to one color, which makes it a little tougher. I also run into the issue with using any text in the bar graph because I am comparing them relatively to each other and thus a bar graph may be only a few pixels wide. – Noranda Brown May 20 '14 at 15:31
  • 3
    @NorandaBrown I'm assuming from your icon this is something medical. If this is the case you could do a stripped down version of the idea, and just spend 50% of you bar and pie width indicating where the "normal" range might be (perhaps with a dotted line in the same colour). – Franchesca May 20 '14 at 15:53
  • It is indeed a healthcare app. I guess the issue is there isn't really a "normal" range here. I think that I just need to somehow indicate that higher number are better or worse. Hmm... – Noranda Brown May 20 '14 at 17:24
  • @NorandaBrown Just had another idea, will answer again... ;) – Franchesca May 20 '14 at 19:45

Have you considered simply inverting the direction of fill to indicate which is the desired motion?

Your original for 100% is the target:

original fill

And when 0% is the target:

Inverted fill


As the above is probably not really intuitive for most people, I would consider a simple nondescript token in the corner of the goal end. Here I selected border color, and personally don't find it distracting. This can work as well with a thicker circumference chart. (here assuming top is 0%/100%)

If you are set against ornamentation at all, modify the shape of the bar itself. The knocked off corner indicates the goal. It is about as simple as you can get. (This is my personal favorite.)

For the circumference graph, add a bump at the goal. In the image 0%/100% is on the bottom of this one.

enter image description here

  • 7
    This was one of my first thoughts. The reason I don't like it is because it doesn't seem intuitive enough for me. If I was a user, I would notice the difference but not necessarily know what the difference means. – Noranda Brown May 21 '14 at 17:57
  • 1
    @NorandaBrown I agree, I've updated with a couple more simple suggestions. Oh please disregard the dot in the middle. – Mr.Mindor May 22 '14 at 19:33
  • Great suggestions! I think I like the second one best. It's still not quite as intuitive as I would like, but is a step in the right direction. I will give this some thought. – Noranda Brown May 23 '14 at 13:04

Using the bar, we used background color (green, yellow, red, with obvious meanings) in the bar for an indication whether more is better or worse. Some key figures must be within a range, which can be shown like this as well.

That's not an accessible solution, however.

  • I agree, colors seem the most obvious (like on the stock market where green clearly means going up and red means going down) but I also agree that there are accessibility complications to that. – Mishax May 20 '14 at 15:00
  • Colors would definitely make this work, however the problem with having bright reds and oranges in my uni-color design is it becomes the focal point on the page, which is not the intention. I guess I'm looking for some subtle way to indicate direction within the charts. I've mocked up circles, triangles, indicator icons, goal-lines, but none seem to be intuitive enough. – Noranda Brown May 20 '14 at 15:35

I think the progress bar is fine, just add a target text to it.


download bmml source – Wireframes created with Balsamiq Mockups

(Aside: I had no idea ux.stackexchange had mockups built in...)

EDIT Thinking about it some more, maybe you could use very different shapes, orientations, colours etc for the two styles. So in this case, a blue horizontal bar should always be "trying to fill up", while a red vertical bar with a grey border is "trying to be empty".


download bmml source

Another option would be to try to flip all your metrics so they all aim for 100%. So not "0% page load failures" but "100% page load successes".

  • 1
    I like the simplicity of this, but it adds more text than I would like. I'd thought about using a target icon or finish line, but again it seemed to draw attention away from the data. – Noranda Brown May 21 '14 at 17:56

You somewhat nerd sniped me with this interesting problem, so here is a different answer (after thinking about it some more).

What about dividing the bar into 2, and showing the value as a wedge like this:

enter image description here

You can see from the wedge shape if it is going in the right direction, and reinforce this with the tick and cross. If you want to go even more minimal you don't even need the icons and grid. The "fat end" / "thin end" should be enough to indicate how it is going.

The "fat end" = better, "thin end" = worse could also be used in the circular representation (sorry I can't draw it on my tablet, perhaps I will add it later if it's useful).

  • 1
    So the top one is a "score" of 60% where big=bad and the bottom is a score of 80% where big=good? And what are the checks and x's for? It could be because you whipped it up quickly, but for me it's not easy to understand at a glance. – sgryzko May 20 '14 at 23:01
  • @interrobang The distance along the bar represents the percentage. The direction of the slope indicates if it is getting better or worse. Going upwards from left to right is improving, going downward from left to right is getting worse. A slope ending in the tick = good, a slope ending in the x = bad (the tick and cross are probably not required though). – Franchesca May 21 '14 at 7:29
  • 1
    Thanks for the explanation. I agree that the tick and cross aren't required. I think truncating the triangles like this would also help. – sgryzko May 21 '14 at 15:32
  • This is a great idea and has my brain churning. My only concern is that the edges are so sharp. Perhaps the two can be combined into one that still shows the information I want to show in a simple way? – Noranda Brown May 21 '14 at 17:51
  • @NorandaBrown With sharp edges I'm assuming you mean the corners of the wedge? What I have there is a very rough version using triangles, but there is no reason why you couldn't give them rounded corners – Franchesca May 22 '14 at 7:47

Only a very quick mockup, but the use of of colour at each end of the status bar could indicate progress towards good/bad:

Coloured bars

Edit: Sorry, didn't refresh before posting and missed the other answer. Personally I think if an app is quite heavy on data visualisation then the ability to turn visual accessibility features on/off is the best route. If they are turned on, simply using ticks/crosses/warning symbols on the bars may work.

  • 2
    I had actually given this idea some thought, but decided that adding color and gradients to the charts doesn't really mesh well with the uni-color flat design I currently have. While color can be an effective way to distinguish good and bad, I'd like to exhaust all other options first. I suppose I'm looking for something more subtle, yet still intuitive. Tough problem! – Noranda Brown May 20 '14 at 15:28

Why don't you make all things the same? e.g. Everything is evaluated positively... It seems like you are trying to engineer a solution to a problem that needn't exist.

  • This would involve changing the numerator, which has a specific meaning to the item. While the item itself could be negated to counteract this, it would involve changing the data, which I can't do. – Noranda Brown May 21 '14 at 17:55

What about using shades of the color you're using instead? This way you can keep your flat one-color design.

A lighter shade of blue for when it's close to 0 %, a darker one closer to 100 %.

(I would've posted this as a comment if it wasn't for StackExchange and its rules..)

  • This is actually a pretty good idea. I'll see what I can come up with. Thanks! – Noranda Brown May 22 '14 at 13:19
  • You're welcome. Let me know what you come up with – Vince Caregnato May 23 '14 at 6:27

Perhaps you can use smiley's:

  • :-) good area of pie chart / bar
  • :-( bad area pie chart /bar


  • Nice idea! I give it a :-( – yuritsuki May 20 '14 at 20:32
  • +1 Because I don't see a reason why this answer should be less thoroughly researched than the other answers. The OP is looking for ideas and this is one. Other questions are equally long only coming along with additional mockups. – stefan.s May 22 '14 at 6:43

I think you answered your own question in the OP. I like when 'higher' and 'lower' are shown as such, maybe combined with some of what @Mr.Mindor or others expressed. I've included a couple snapshots of an idea. I think your horizontal bar will always read as a progress bar, not as something representing higher or lower. Maybe something like this:

Approaching 0:

Approaching 0

Approaching 100:

Approaching 100


Attempting to represent a ratio as a circular percentage is the cause of loss of detail.

It appears that the OP comments avoid this simple defect. So long as someone is "requiring" a circle-gram, their desire will thwart your design decisions. You have phrased this as if the requirement is immutable; if so, document your objection and do it the way they specified.


Lazarus Long (a.k.a. Robert A. Heinlein)

Your Answer

