9

I have a table of data, each row represents a quote that can have several statuses. A while back when the status system was less complex I decided it would be best to enrich the status data and display it in pill form on a coloured background with coloured font. Since this information was important and easily fitted within the RAG colours conceptually I thought the was quite good.

However, now that the system has become more complex the it was decided to add more different types of status for example a quote can be accepted subject to some additional information being provided at a later date, or rejected with a query.

Visually the table looks like this:

enter image description here

Here the subjectivity is represented by an exclamation mark

The Asterix represents a query.

The R represents a renewal

I was thinking of enriching the quotes in a different way, so for example moving the R to the upper right hand side. Like: enter image description here

What are some common solutions to similar problems ?

Improve this question
3
  • How many categories of status are there here? It seems there are several, can you elaborate?
    – Mike M
    Commented Mar 14, 2019 at 15:53
  • I echo @MikeM comment. There are statuses and quotes, not sure how they relate. I see R next to Accepted, Review, Query statuses, and then Query highlighted once in red and once in orange...
    – Mo'ath
    Commented Mar 14, 2019 at 17:41
  • I like @Moath's ideas. Just make sure the status text color and background color have at least a 4.5:1 contrast ratio (WCAG 1.4.3). In the screenshot, green 'accepted' on green background would fail as would the tan status and gray status (webaim.org/resources/contrastchecker). Using all white text (like @Moath) is more consistent and makes it easier to read/scan (although the orangey "aborted" button doesn't have sufficient contrast). Good work, though, using both text and color to avoid a WCAG 1.4.1 failure.
    – slugolicious
    Commented Mar 15, 2019 at 5:38

2 Answers 2

Reset to default
6

Here are some suggestions that could improve this design:

enter image description here

1- Make the color labels the same width!

This will make it visually more appealing as alignment makes it easier to scan over the page, also sub-consciously offering a calmer reading experience.

2- Use less rounded borders (border radius) for the highlighting color labels to match the same border radius you are using for the Actions icon for unity and consistency, it will also look better overall.

3- Now for the Quotes:

a. I do not recommend moving the quotes to the upper right hand side, because it will end up under the Actions column not the Status! This way it will not be in place and you will be forcing the user to look in different places for the Status.

b. To reduce the clutter, you may represent Quotes by Colors. You are already highlighting the statuses with a colored label. For example: represent the Quote-R by the Green color label, the Quote-* by the Red color label. This is just a suggestion to utilize the colors. I am a little confused by the color labels you are using as I see Query once highlighted in Red and once in Orange. I am not sure if you are utilizing the colors or not based on that.

c. If the colors are already utilized, you may use the letters or symbols without the color labels on the quotes (i.e you are highlighting the R quote with a red color label, use just a the letter R bolded)

d. I noticed a good height for the table's cells. Instead of having the quotes to the right of status text, maybe you can put the them above or below it, depending on which of them you think the user needs to read first the status text or the quote.

e. How about adding a Quotes column?

4- For the Actions column, if you do not have many actions, you may add the actions directly there without the need to click on the dots icon then display the actions then click on the one desired. See this:

enter image description here

Improve this answer
1

I'm working on the exact same thing and have run a few things through testing.

Here's what we've learned

1)Colours are nice and assist dyslexic users but also contribute visual noise. Use when you have a small set of mutually exclusive states that fall neatly into a traffic light type system. Use colour blind friendly colours.

2)It's better to prioritise the table to a specific state more important than others. In our work this is 'awaiting approval'.

3)Use filters to control what states are displayed. These can be over one table or you can use tabs to split the interaction e.g. for approval/not paid/ etc etc

Improve this answer
2
  • can u please give an example of what point 2 means?
    – Mo'ath
    Commented Mar 14, 2019 at 17:50
  • 1
    Accepted, rejected or queried. One of these states may be of more interest than others
    – colmcq
    Commented Mar 15, 2019 at 11:27

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.