Graphical indication of a 2-dimensional sensor reading inside a range

Question

Showing a single dimensional value inside of a valid range is not unusual, whether using a bar or using a virtual gauge.

My problem is slightly different - I have a two-dimensional value. Temperature and pressure are interrelated - whether the temperature is ok depends on pressure, and vice versa.

Apart from displaying a numerical value, I need a graphical indication for the operator to be able to quickly tell if the current values are ok, are they near to an alarm value, or has it gone into an error territory (which of course will have it's own notification).

Below is a quick mock of the graphical part - two overlaid regions, with a dot to show the actual reading. Not shown in the mock are numerical readings. What I am unsure of is whether to add axes and whether to add crosshair-like lines from the dot to those.

Colors were just a quick pick for the mock, although I do intend to stick to a blue-red combo to be colorblind friendly. Probably should add outlines too.

Additional information:

• this is for industrial equipment, so the focus is on readability and being intuitive, not aesthetics
• there can be up to 24 such indicators on a single 24" screen

Answer 1

If simply knowing if the value is good/bad is insufficient, you'll want to refine the scope of your use case a bit more as this can snowball quickly.

It sounds like there is a desire to show data in a way that can be reacted to before it becomes a problem. While this can be done simply with a 0-dimensional light (with states for good, danger, and error), let's explore what other options might look like.

A 2D representation is a good start if you want to show how close to an error the value is, but the user probably would also want to know which direction the dot is moving. Two readouts with the dot in the same place might have very different interpretations if it is moving left in one and right in the other.

What is the update frequency? Gauges (whether linear or 2D) work best if the data is supplied in real-time. If the dot is jittering, users might assume that to be the case, but there could also be a lot of noise in this approach. You might want the dot to fade (radar-style) to show that the data is becoming stale, or show dimmer dots over time as the reading updates.

In a group of 24 of these, constantly showing the red will be very overpowering, and will decrease the ability to see what's going on at a glance. Likewise, the contrast between the dot and the blue makes it harder to see quickly. Use color only when attention is needed, though you could fade it in gradually as things get closer to the danger threshold.

Answer 2

As you are working with only two values (temperature and pressure) then I suggest you can handle this with a simple 2-axis graph.

Something like this:

Excuse the roughness of it. It is just meant to be an example, you will likely want to pick more visually pleasing styles/colours. It may even make more sense to go with a gradient colour panel.

The idea is simple, you draw your "threshold lines" to suit whatever values you want. Again, my example is just a quick one where I have used a constant line. You could easily opt for a more curved set of points. The idea really is to show a sort of "heat map" and place the current value on it.

I also suggest you do not rely on only having this visual indicator. It would be sensible to also list the values and show how close they are to the limits. This could just be a simple status icon next to the values which would be shown below the graph:

The simplicity of this approach means you don't need it to be very big (could easily be half the size of my example), so you can get plenty of the screen at once.

---

After your comment, and re-reading the question, I think perhaps these are your actually concerns:

What I am unsure of is whether to add axes

Yes, add axis. Even if they don't have values they can be useful for the user to quickly get a feel for what the data means. In addition, to my example above, ensure to show negative axis only when applicable. So for temperature vs pressure you might have something like:

and whether to add crosshair-like lines from the dot to those.

I would say leave the cross-hairs out. The purpose of these displays is to give a quick indicator of how "safe" they are, not what the values are. You already have your text labels to handle this.

You don't want to overload the visual element with too much information, as that will take the user more time to process each one just for the information they need.

Answer 3

Try to use 2-scales indicator similar to this images which I found with Google:

• Round barometer
• Analog thermometer and hygrometer

But your indicators will have dynamic coloring of scales according to your sensor reading diagram. To illustrate the idea I used your original image.

So, you need just to draw 2 lines through your current measurement point and they bring you scale coloring from minimal value to maximal. Obviously, for point A we'll have both scales totally red regardless of temperature and preassure values.

I think that gauge is the best tool to read temperature and pressure values for engineers. And your dynamic scales will give good visual picture.

Hope the idea is clear, sorry for not illustrating it by images because of my poor artistic abilities.