How to display different levels of importance?

Question

On one of my projects I am currently trying to solve a problem of levels of importance. Due to technical reasons we need five levels of importance, which would be shown to the user in some abbreviated form. We would show this information in form of labels and also as a column in a table.

I've come up with a couple of ways how to present the five stages to the user:

1. Using numbered system (i.e. 1, 2, 3, 4, 5)

   • PROS:
     • Short, readable on quick glimpse
     • Easily scannable when used in table
     • Used as a grading system in schools in some countries
   • CONS:
     • Not understandable without context or explanation
     • Might be confusing - Is 5 the least, or the most important (is it grade - 1 is the best, or points - 5 is the best)
     • Some countries schools systems uses 5 as the best mark and 1 as the worst

2. Using letter system (i.e. A, B, C, D, E)

   • PROS:
     • Short, readable on quick glimpse
     • Easily scannable when used in table
     • Used as a grading system in schools in most countries around the world
   • CONS:
     • In some countries school systems the A is actually not the best mark ( there is one above, like S)
     • Might evoke feeling of quality grading in users (that is means quality level and not a importance)
     • Not understandable without context or explanation

3. Using short descriptions (i.e. Vital, Very important, Fairly important, Slightly important, Insignificant)

   • PROS:
     • Human readable format (This is vital. This is only slightly important.)
     • Easily understandable, even without context
     • Reduces chance of confusion about the levels (versus numbered and letter systems)
   • CONS:
     • Harder to read on quick glimpse
     • Harder to scan when used in table format
     • It’s hard to pick strings that are not confusing (for non-native speakers) - i.e. fairly vs. slightly important
     • Might be complicated to translate accurately to other languages

What would be the best way to present this information to the user, and are there any other approaches you would use?

Answer 1

Priority shouldn't be numbered or substituted with characters. Traditionally they've always been a label to instruct the end user what they represent.

This is what we use. A combination for Color and Label or Icon and Label. For a user with accessibility or someone using a screen reader, the priority is read out as text.

Ideally, there has to be a visual clue and a linguistic clue that's self-explanatory.

To pick words for the adverbs use comparative and superlative degrees. You can look up a thesaurus for synonyms that are the least complex or fairly straight forward.

Here's a nice suggestion for colors https://ux.stackexchange.com/a/82681/13276 with accessibility in mind.

The visual cue would make it easy to understand the priority at a quick glimpse and help non-native speakers too.

You could simply use the first two characters of the label instead of the word or symbols.

We even used Tally Marks in the past, which is stupid, but it sorta worked.

Answer 2

Here is a supplemental answer.

Dont show priority with different colors! Use Different shades of the same color

8% of men are colorblind

You can change the shade of a color to prioritize or show emphasis without introducing new colors.

By altering shade you can show similar emphasis than introducing different colors.

*note the other strategies such as position and numbering I agree with but I feel as though using the color wheel is not the best strategy and it is 100% useless for 4.5% of the population (8% of males and I think 1% of females).

In short I feel as though the design on the left isnt much worse than the design on the right

I am not colorblind so its hard to empathize with see the following images to have a better understanding

Answer 3

I would say that the most important one should be at the top.

Maybe you should also make this visible throu color. An color with high saturation looks more important that one with less saturation

You can also make things important by taking up more space and using bigher fonts. You can also use an ! as Symbol to mark things important.
You can use more attention marks to increase the effect.

$$$ is more that $
!!! is more than !

I recommend to also use a small description - as you said - to justify why wxacrly this is more important that the previous section.

Answer 4

Inspired by MonkeyZeus - you can group the categories to achieve an easier structured overview:

View Fiddle: http://jsfiddle.net/o3mbryg6/

Answer 5

Since you are looking for a relatively small number of categories I would suggest displaying the data in categories so that it is easily scannable and prioritizable.

Rayraegah's answer is pretty good but I really dislike the cognitive load.

Here is my suggest: http://jsfiddle.net/L3xeqvd0/

---

HTML

<div class="section">
    <div class="title">Immediate</div>
    <div class="item">Job 1</div>
    <div class="item">Job 2</div>
    <div class="item">Job 3</div>
</div>
<div class="section">
    <div class="title">Less Immediate</div>
    <div class="item">Job 1</div>
    <div class="item">Job 2</div>
    <div class="item">Job 3</div>
</div>
<div class="section">
    <div class="title">We would like to do this</div>
    <div class="item">Job 1</div>
    <div class="item">Job 2</div>
    <div class="item">Job 3</div>
</div>
<div class="section">
    <div class="title">We don't need to do this</div>
    <div class="item">Job 1</div>
    <div class="item">Job 2</div>
    <div class="item">Job 3</div>
</div>
<div class="section">
    <div class="title">Pfft, good luck!</div>
    <div class="item">Job 1</div>
    <div class="item">Job 2</div>
    <div class="item">Job 3</div>
</div>

CSS

.section{
    margin-bottom:10px;
}
.item{
    padding:2px 0px 2px 20px;
}