4

In our web application there's a view where we display the stress on a hardware component.

This will be displayed with a percentage value in different colour codes combined with an icon where 100% is the expected stress rate of the component.

If the stress is <=100% the text should be green with a enter image description here icon in front of it.

If the stress is >150% the text would be red with a enter image description here icon in front of it.

The question is now what icon I can use for communicating a value between those values, that is 100% < X <= 150%.

It should convey an alert but of a lower grade. The text will be coloured GoldenRod enter image description here so an icon in the same colour scheme would be something I'm after. I want the icon to have a differing form from the other two, so maybe something inside a square as depicted in the splash of colour above.

However I don't know that symbol to use inside it. I feel as using a exclamation mark could be confusing as it's already used in the High Alert icon.

I do realize that the use of icons combined with text is a debatable issue but the icon would be there as a substitute for users having problems differentiating between colours and thereby not gaining anything from Text Colour Coding.

Does anyone have a good idea for the icon or symbol to communicate this grade of alert? Or has anyone seen an example of how grades of alert has been communicated in other instances?

Improve this question

5 Answers 5

Reset to default
4

How about a green checkmark, an orange "!" in a triangle and a red flashing light (siren).
Another alternative for the red level is an "X" symbol e.g. a red octagon with a black "X" in it.

You could even add a level between the first two - a yellow "i" (information) symbol.

The checkmark makes sense for valid items, the "i" for suggestions/information, the "!" for warnings and the "X" for errors.

Improve this answer
8
  • I've been thinking of a siren as well. but I fear it may be a bit hard to recognize when scaled down to maybe 16 x 16 pixels. The icons in the question are 20 x 20 and they too will be scaled down.
    – AndroidHustle
    Commented Feb 15, 2012 at 12:41
  • 1
    The "i" is a good idea, and is used in other places. The fact that it is an upside down ! is especially cool. It indicates that there is something you may need to know about.
    – Schroedingers Cat
    Commented Feb 15, 2012 at 13:29
  • @AndroidHustle Don't scale down small icons automatically, redraw them to scale. Take advantage of the fact that icons can be changed on mouse over to emphasize their meaning (e.g. siren can glow on mouse over).
    – Danny Varod
    Commented Feb 15, 2012 at 13:51
  • @DannyVarod I know. I have an icon library in a vector raw format. I could incorporate :hover triggers to the icons, however it's still the initial idle state that's the real question.
    – AndroidHustle
    Commented Feb 15, 2012 at 15:36
  • @SchroedingersCat I might consider using the "i" for the middle icon, maybe not a bad idea at all.
    – AndroidHustle
    Commented Feb 15, 2012 at 15:38
4

You've got deeper design issues with this system. Hardware stress isn't one-dimensional and isn't limited to just 3 stages rather it's two-dimensional (current level & direction of change) and is measured on a granulated scale. Thus, when you show just 0 =< x =< 100, 100 < x <150, and x => 150, you aren't communicating enough information to the user to make the right decisions.

Consider the situation where equipment runs steadily at 105% stress and equipment where stress has increased 10% to 145% in the last 5 minutes and continues to grow. Both will have the same icon representing them but the course of action would be very different. The only way the right decision will be made is when the person checking the status will know that, in the first case, the stress is stable while, in the latter case, it's rising. You can achieve this only by showing the actual stress value and a direction of change (↑, ↓, – or =).

Though, you don't have to discard such icons from the interface entirely. They are useful when they indicate significant changes within a predefined period of time.

Most importantly, your current set of icons is nightmare for colorblind people:
Normal vision: enter image description here
Deuteranopes see this: enter image description here
Protanopes see this: enter image description here

You can try changing the shapes to the actual symbols and giving them a black outline (i.e. check-mark, exclamation mark, and whatever on their own without the circle, triangle, square) or darkening the colors to increase the contrast of the white symbol in the middle but it still won't a good solution because of the aforementioned reasons.

Improve this answer
5
  • you're raising a good point. However, in excess of this stress level another parameter displaying the wear/tear of the component is displayed, the stress level simply put is the derivative of the wear level. And another issue is that in the context of which these components are operating there's no luxury of receiving instant status reports. The reports are user triggered and delivered from a terminal via SMS as the carrier, in other words too expensive to have repetitively scheduled. The icons have differing shape to aid the visually impaired, using red/green/yellow for these still stands.
    – AndroidHustle
    Commented Feb 15, 2012 at 16:37
  • If stress level isn't real-time, what's the point of showing it then?
    – dnbrv
    Commented Feb 15, 2012 at 16:50
  • to be totally honest, requirements. There is a big risk that the stress level will be misleading if the report is old, which in that case will have to be communicated to the user. But the stress level is also there to indicate if the component, that should spec-wise be runnable for about 10 years, has a stress level that indicates that it in reality probably only will run for 5 years due to high stress. That's the scenario I know, but there are probably more.
    – AndroidHustle
    Commented Feb 16, 2012 at 8:02
  • In that case, you need to review your requirements for not only how data are shown but also what data are shown. It sounds like that a different number, such as average stress over some period of time, is needed.
    – dnbrv
    Commented Feb 16, 2012 at 15:14
  • How the values are calculated is not my table. The wear % of gathered reports and their time stamps are involved in calculating the stress, but again I'm not involved in that, I just request the value and it delivers. The system is a big deal and without naming any names chances are pretty good that the service providers you're involved with will be using this system in the near future. What I mean is that the people in charge of providing this data are very thorough in their procedure. However I do appreciate the heads up.
    – AndroidHustle
    Commented Feb 16, 2012 at 16:07
2

I'd personally swap the goldenrod and red shapes around, and use a cross as the symbol.

The red square has a connotation of "stop" in, e.g., stereos and video players, and the exclamation mark "street sign" symbol is used by most mainstream operating systems as meaning "warning" (as opposed to a red 'X' meaning "stop" and a lowercase i meaning "information only").

The combination of green circle/yellow triangle/red square is used in at least one existing application I can think of: iChat on the Mac (which optionally uses them for buddy statuses; available, idle and away respectively).

Personally I think your approach caters for red-green colour blindness by changing both the shape and the symbol rather than relying on colour alone. Nonetheless if the red symbol is a matter for significant concern, you may wish to make it stand out more dramatically than it does, possibly by removing the circular enclosure on the tick symbol and letting the tick itself be green.

Improve this answer
1

Is the concept of 100% stress familiar to your users? Can't help feeling both that 100% stress seems high to me, and that if you're having trouble thinking of a suitable symbol, that your users are likely to have similar issues understanding what the symbol means. How about:

  • Normal
  • Elevated
  • Severe

As the ratings, possibly combined with the colours? Is there a need to use a symbol at all (reasons of space)?

Improve this answer
3
  • Hi Peter! I could agree that 100% stress being the reference value is a bit confusing. However that comes from higher up and I doubt I'll have any say in it. I want to combine the text with icons for the reason mentioned in the question, to aid users having problems differentiating between colours to quickly pick up and acknowledge at what grade the stress level is.
    – AndroidHustle
    Commented Feb 15, 2012 at 8:47
  • Darn those requirements ;) If you need to go with icons, I'd consider using the exclamation mark for amber, and something more serious for red - skull and crossbones maybe? An exclamation mark does tend to signal an alert rather than urgency. But, I'd probably also suggest creating alternatives with text and seeing if you can do some A/B testing with users.
    – Peter
    Commented Feb 15, 2012 at 9:06
  • well, what you gonna do..? =) I'm considering using a Bell symbol for the amber icon. I know that conventionally signals Notify or similar, but maybe it could work in this instance.. I'm not sure.
    – AndroidHustle
    Commented Feb 15, 2012 at 9:21
0

I would use < 100% // the green circle with the check 100% < X < 150% // a yellow triangle with "i" 150% < a red stop-sign with the "!"

so you have similar icons and a continuous sign language

Improve this answer

Your Answer

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

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