I am working in the interface for a software, and it is very important to keep it as simple as possible. For this specific problem it was decided that colours should be avoided (if possible), so not to cause problems for people with colour-blindness.

The information that I need to display is a performance metric in a certain time interval compared to the performance for a previous time interval - for that an arrow is used: pointing up means improvement, pointing down means decline, pointing to the right side means "no significant change". However another metric needs to be displayed: a goal for the performance - the best solution I could come up for that was a horizontal bar: if the arrow is below the bar it means we're below the goal, if the arrow is above the bar, it means we are above the goal, and if both are at the same level, it means we're very near the goal.

This is an example mockup I made:


The problem with this solution is that it is very easy to confuse the meaning of the vertical position of the bar: the bar being at the top actually means "bad". Compare cases 2 and 6 on the mockup.

What could I do to improve this interface? I believe it is a simple and elegant solution, I just need a way to remove the ambiguity cited above.


  • For what it's worth I think you're off to a good start. While reading your question and before getting to the mock up I envisioned a nearly identical solution. – Snowman May 17 '16 at 16:49

Since the issue is the relative position of the bar, you could try fixing the bar by keeping it in the middle.

Something like this :

enter image description here enter image description here

It also has the advantage of representing the fact that the goal is fixed and not moving, while your performance is.

| improve this answer | |
  • That's an excellent solution, and very neat. Thanks a lot! – Bruno Philipe May 17 '16 at 19:50
  • 1
    Keeping the bar in the same position is important, but how would you show that you are near the goal and not trending up or down? – Michael Lai May 18 '16 at 0:05
  • @MichaelLai Perhaps a horizontal arrow as in OP? – Snowman May 18 '16 at 0:11

If you want to avoid any confusion, what you really should do is to separate the two pieces of information that you are trying to show, which is A) Trend status and B) Goal status.

Because the trend is relative to previous dataset(s) and the goal is absolute to a given number (at least that's what I would assume), it is easy to misinterpret the information because you are mixing relative and absolute measures in one display.

So this would indicate that you are below the goal but trending up

Below goal but trending up

And this would indicate that you are above the goal but staying still

Above goal but holding stable

| improve this answer | |

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.