3

My app shows a scatter graph where the X axis is a number of actions (higher is better) and the Y axis is a latency (lower is better).

enter image description here

When we have shown it to customers, they got confused because usually the top right quadrant contains the best performing entities, however in this chart they are on the bottom right quadrant.

I'm looking for creative ideas for transforming the Y axis in such way that higher latency points will be at the bottom and lower latency points will be at the top (I can change the definition of this axis if needed). Simply inverting this axis makes this chart even more confusing, because zero is at the top.

Any ideas? Anything will be appreciated.

Improve this question

1 Answer 1

Reset to default
3

Observations

  • Latency is your vertical axis, which is unfortunate since the higher is better bias is more pronounced with vertical than with horizontal axes (since in many charts the vertical axis is the primary value axis).
  • 'Better' is not labeled on your axes, so users have to read the values and make a cognitive link between lower latency and better. Then, they have to work out what the x-axis means, and then figure out how to orient the chart. This is a LOT of cognitive load.

Design approaches

  • Place the latency on the X-axis to reduce the vertical 'higher is better' bias.
  • Label the axes to show better or worse, to provide orientation anchors for the user.
  • Label the quadrants to show better or worse, again to provide better orientation.
  • Use arrows or other polarity cues in the axes to show better vs worse.
  • Use a gradient in the chart background to provide orientation.
  • Use horizontal drop-lines for the "reversed" latency axis to provide the user with a visual relationship between the point and the unintuitive axis. This will draw better attention to the axis.

Example (DO NOT USE!)

This chart is intentionally overloaded with all of the potential approaches above for the purposes of illustration. You will likely want to pick one or two approaches that fit your situation best:

enter image description here

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.