3

In a web application I'm developing we categorize systems based on their criticality (1-4). A system might have connected emergencies, which have emergency levels (1-3). Combined they give you the priority of an emergency.

My first draft includes traffic-light colors for displaying emergency levels, but it's not really extendible as you only have three categories (green, yellow, red) and it's all but verbose.

For criticality I think about using basic shapes with increasing edge count: circle ●, triangle ▼, quad ■ (or triangle pointing up ▲), star ★ (from least critical to most critical).

The good thing here is that you can combine colors and shapes, but on the other side the colored icons still don't feel anything like easy to read.

Are there better design elements for showing such things? I'd rather not display these attributes as plain numbers.

Improve this question
5
  • 1
    I suppose you have to think about your end-user and how they are going to interpret it. Will they know that these icons suggest levels of priority? It is nice to have well thought out design element, but form should follow function, especially in something that is "critical".
    – Bagseye
    Mar 7 '16 at 15:57
  • A numeric scale should be given consideration. 1 becomes your highest possible priority, then set a constant to be your lowest. That way you can easily change the lowest priority later. Or you could have it as an application level variable. This really isn't a graphics question, it's more to do with system design.
    – Paul
    Mar 7 '16 at 16:25
  • I do have internal names for both. My criticalities are C1, C2, C3 and C4. The priorities are internally handled as P1..P8
    – Hubert Grzeskowiak
    Mar 7 '16 at 16:27
  • 2
    I havn't got time to post a decent answer now, but one thing I will say is a star - to me - doesn't represent critical, and will probably lead to confusion.
    – Cai
    Mar 7 '16 at 16:39
  • Thanks for the input. My idea behind the star is that it usually stands for "favorite", "likable" or "important". Not exactly the meaning I want (except for the last one), but an exclamation mark would draw too much attention and not suit the other icons. Do you have a better idea?
    – Hubert Grzeskowiak
    Mar 8 '16 at 10:37
4

Numbers are probably the quickest way users would comprehend your priority levels, but I understand you are seeking an alternate solution. The shape concept you mention would be hard for your users to grasp I think.

The volume solution mentioned by @Paul is good. I have employed a heat / color map type method before. This would require you to provide an easy to access legend for users to quickly make sense of the information. For example, here is a heat map of the united states...

enter image description here

You could take this idea into the form of a color icon, using a range from cyan to red, oranges, etc to color your icons. Then in a legend organize the icon colors in order of lowest priority to highest priority.

UPDATE 3-11-16 9:50 AM CST

I understand better now your issue is two-fold. One the representation of your Criticality and Two the representation of your Emergency Levels. The fact that they tie together makes it more challenging, but consider this:

The familiar triangle icon implies urgency/warning. Possibly you could remove the exclamation point and insert numbers 1,2,3 or 4 for your critical level. Or roman numerals. Then to indicate your Emergency level I would stick to the heat map colors and color the triangle behind the number. The stop light colors may limit you in the future as there are only three but the heat map offers more room for expansion. See concept I drafted below. Plus here's a link to an image with a key. You can always expand out into more yellows and reds or use more blue/green shades to add more Emergency levels.

enter image description here

Improve this answer
3
  • This pretty much where I'm getting at the moment. Pls read the updated question.
    – Hubert Grzeskowiak
    Mar 11 '16 at 0:30
  • I see your conundrum, it's not so much the issue of representing a level, but that you have two level tiers that work together... let me think on it some more.
    – streetfire
    Mar 11 '16 at 15:49
  • Answer updated.
    – streetfire
    Mar 11 '16 at 16:09
1

The problem with using shapes like that is that you have to stop and count their edges, especially if it climbs past four.

A four point colour marker of green, yellow, orange, red is an obvious colour traffic light system, and fits your traffic light analogy perfectly.

You could try a volume or reception type look, like so:

enter image description here

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.