1

Sorry if this is the wrong SE site, but I thought it made sense. I have these tables for my web-application and one of the entries is a score, 0 - 100. 0 through 50 are okay so I don't do anything for that. Between 50 and 75 is like a warning, and currently I have the background change to yellow. Between 75 and 100 is danger so I change the background of that table row to red.

Currently I am unhappy with the way things look, and if I am I am sure the users would be. I was looking for advice on alternatives. I still want to bring attention to entries in danger etc.. but maybe a cleaner or more presentable way. Just looking for suggestions. Thanks!

EDIT More info: Thanks for the response. So yeah, the data in the table is based on what a user selects from a dropdown. And the data changes in real time, so if there is an update on the backend the table updates accordingly. If the new value is above the 50 threshold it will change to yellow background (black text still), above 75, red background with white text. The rows of the table are sorted from highest to lowest, so if there are values above 75, the red will always be at the top, then yellow, and then normal.

Improve this question
6
  • Giving us more context to work with will always allow us to help you better! Now, in regards to this table. Can the users filter results as they please or is the view static? Colour changing can some times work but it can cause issues to users who might be colour blind. On that regards it is VERY important that when the background colour is changed, the font colours is also changed appropriately.
    – Daniel Zahra
    Apr 29 '15 at 14:07
  • Thanks for the response @DanielZahra . Updated OP with some more context.
    – erp
    Apr 29 '15 at 14:16
  • Can you provide some dimensions for the table? Is it 1 row? 10? 1000? Does it have 1 column? 10? 100? How many columns contain the 0-100 scores? All of them? If only some of them, then what's in the other columns? For obvious reasons, the design here will depend a lot on what the size and contents of the table are.
    – tohster
    Apr 29 '15 at 14:22
  • There are 2 different tables. Each with 3 columns, one with 10 rows, one with 9. The columns in both tables are as follows: Entry # (1-10 or 1-9), Name, and Score.
    – erp
    Apr 29 '15 at 14:23
  • 1
    could you provide a screenshot and explain exactly why you are not satisfied with the current approach?
    – Alejandro Veltri
    Apr 29 '15 at 15:55
6

Don't highlight the row

  • Table layouts present data cleanly using grid alignment.

  • With grids, you don't need a lot of emphasis to draw a user's attention, so highlighting an entire row is overkill: it damages many of the benefits of a grid layout:

    table with colored rows

The layout will depend on how you are using percentages

  • If the user will need to compare percentages relative to others, then a bar-type presentation accomplishes this best.
  • If relative comparisons are not as important and you want to draw the user's attention to the important (danger/warning) percentages, then a left-aligned, shaded background will work well since the left-column leads-off the row.

tables

Improve this answer
2
  • This solution's definitely more readable/understandable. But what is that blasphemous font you are using?
    – Vince C
    Apr 30 '15 at 8:17
  • I wouldn't know how to do the left side one, but I really do like the right side solution. Thanks for the response! I will probably end up using that.
    – erp
    Apr 30 '15 at 14:31
1

You might want to consider a variation of bullet graphs for your list if you feel the red and yellow background colors are getting in the way of understanding the information.

enter image description here

In the graph above, the black vertical line indicates 100%, the various shades of background indicates the various levels from the target. Use of shades instead of your traditional traffic light colors avoid issues with color blindness.

Note that in this graph it's desirable to reach or exceed the target, so they use the lightest shade at the top range. In your case where it's bad to be at the upper ranges, you want to switch to darker shades at the top. You can also put in a warning indicator (like red dots in the graph) to your 75-100 danger rows to make things super clear. Then line them up from most severe to least like you currently do and I think it should be clean enough to be quickly scannable.

As always, test with your users to confirm whether this approach is better or worse than your current setup.

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.