21

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?

46

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.

enter image description here

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.

http://www.enchantedlearning.com/math/tally/tallytable2.GIF

  • 5
    +1 for a great answer that considers the accessibility needs. Mental +1 for having an awesome Batman avatar. – Benjamin S Aug 6 '15 at 13:45
  • 2
    +1 for good example and suggestion of variation. Maybe try to have the coloured backgrounds same width, independent of their content and just center the text within. – RobSeg Aug 6 '15 at 14:13
  • 6
    Color blind users will appreciate the linguistic clue. – borjab Aug 6 '15 at 15:48
  • Great answer. I would go with Medium instead of Normal and I would choose colors in a way that every text is white (or black). – Gustav Aug 7 '15 at 12:53
  • We're switching to DEFCON specs at our team. – Rayraegah Aug 7 '15 at 13:49
5

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.

enter image description here

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

enter image description here

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

enter image description hereenter image description here

  • thanks my contribution wasn't meant to be all encompassing because you pretty much hit it all the points. I guess the last mock up i added summarizes my points. – Frank Visaggio Aug 7 '15 at 14:46
  • I'm no UX expert, so my opinion shouldn't count for much, but as a colour-blind person myself (To my knowledge, the most common type) I'd just like to say that different colours still often enhance an interface. I wouldn't suggest dulling down an interface for the purposes of assisting people with colour-blindness -- making it an option, or taking a 2-pronged approach (ex diff color & shade) I think are better approaches. I can't speak for people with worse conditions than myself, but I think we're pretty used to not being tailored for - even a 'colour-blind mode' makes me respect a developer! – Ashley Davies Aug 7 '15 at 20:30
  • Yeah it's super hard to empathize for me. I noticed there's a variety of different types of colorblindness and websites show the how images appear to the different types. Do you know which type yours is? – Frank Visaggio Aug 7 '15 at 20:35
  • I remember seeing a really good slide in grad school with the colors translated to a colorblind view and the UI lost its meaning completely, it was something with airline flights or air traffic controllers. I wish I still had that slide. – Frank Visaggio Aug 7 '15 at 20:38
1

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.

  • 1
    Yup. Simple iconography and/or wording combined with color 'heatmap' that should be interpretable by almost anyone, with a small legend at the beginning of the document/project just in case. – PixelSnader Aug 6 '15 at 13:27
1

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

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

enter image description here

  • Thanks for you answer, but concept of grouping is not really appliable in our case, as we can have thousands of entries, which we need to label. – freedom26 Aug 8 '15 at 9:39
  • I'm not sure about your use case, but usually nobody ever needs to see thousands of entries! A human cannot process 100 entries at once. He can see a count, he can search a specific entry with full text, or see the first 10 via some sorting and has a page count like google search results. Sometimes there can be an easier approach to display what the user actually needs. – Falco Aug 8 '15 at 22:12
  • 2
    It's data shown in form of a data table, in which the importance is one of the parameters (columns) on which the user can filter on (and other parameters too). So there is an option to drill down, thus showing reasonable amount of data. – freedom26 Aug 10 '15 at 8:01
0

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;
}
  • 1
    There definitely needs to be colour here – hd. Aug 7 '15 at 9:44
  • As in Falco's response, the concept of grouping is not really appliable in our case, as we can have thousands of entries, which we need to label. – freedom26 Aug 8 '15 at 9:40

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.