10

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

Improve this question
12
  • 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, 2014 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, 2014 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, 2014 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, 2014 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, 2014 at 6:37

11 Answers 11

Reset to default
7

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

Improve this answer
4
  • 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, 2014 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, 2014 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, 2014 at 17:24
  • @NorandaBrown Just had another idea, will answer again... ;)
    – Franchesca
    May 20, 2014 at 19:45
7

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

EDIT:

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

Improve this answer
3
  • 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, 2014 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, 2014 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, 2014 at 13:04
3

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.

Improve this answer
2
  • 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, 2014 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, 2014 at 15:35
3

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

mockup

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

mockup

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

Improve this answer
1
  • 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, 2014 at 17:56
2

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

Improve this answer
6
  • 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, 2014 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, 2014 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, 2014 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, 2014 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, 2014 at 7:47
1

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.

Improve this answer
1
  • 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, 2014 at 15:28
1

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.

Improve this answer
1
  • 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, 2014 at 17:55
1

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

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

Perhaps you can use smiley's:

  • :-) good area of pie chart / bar
  • :-( bad area pie chart /bar
Improve this answer
2
  • Nice idea! I give it a :-(
    – yuritsuki
    May 20, 2014 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, 2014 at 6:43
0

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

Improve this answer
0

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.

"Never try to teach a pig to sing. It wastes your time and annoys the pig."

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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