: How to best represent different priority levels using icons? In a web application I'm developing we categorize systems based on their criticality (1-4). A system might have connected emergencies,
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.
More posts by @Odierno310
3 Comments
Sorted by latest first Latest Oldest Best
Options I've been thinking about so far:
System criticality:
Emergency level:
E1, E2, E3
red, yellow, blue (temperature)
red, yellow, green (traffic lights)
!!!, !!, ! (number of exclamation marks)
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...
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.
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:
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.