2

I have a table of search results that have alternating grey and white backgrounds that, on it's own, look quite pleasant in my opinion:

enter image description here

Now, the user also has the option to unselect items by clicking on them, before exporting the dataset. Currently, I'm indicating that an item is unselected by changing the value of the checkbox and by turning the opacity very low:

enter image description here

I see (at least) those two issues:

  1. unselected list items look too similar to regular items with a white background. Especially the alternating grey and white background gets confusing when some items are disabled.
  2. The low-opacity text may be hard to read for visually impaired people. This shouldn't be too big of an issue since they know what they clicked on before they disabled them, and can reenable them any time to see the text, but I imagine it's still quite annoying.

How can I alleviate those two issues, ideally while maintaining the alternating row backgrounds?

I would say a normal user would want to disable between 0 and 10 % of list items, so it's not a huge number.

4
  • 1
    An interesting problem. Zebra striping DOES aid comprehension in tables - especially when cells can contain multiple lines. I only have a suggestion you might want to test with your users: move the checkboxes to the left end of the rows. In LTR reading countries this will be read first and may help users understand which rows are selected. I'm not sure it's a great answer and it will need testing - that's why it's a comment :) Mar 14, 2023 at 11:59
  • Can you loose the zebra thing if there was an alternative table design?
    – Garik
    Mar 14, 2023 at 14:37
  • 1
    The opacity would definitely fail WCAG 1.4.3 Contrast (Minimum). The exception to 1.4.3 is if the element is inactive/disabled, which is not your case. You can still select the checkbox (if you can see it). Mar 14, 2023 at 18:50
  • When unchecked, it sounds like you're trying to give a secondary visual clue that the row is unchecked. Not only is the checkbox unchecked, but you're changing the opacity. I suppose an alternative is to use <s> or <del> on the text rather than changing the opacity. Mar 14, 2023 at 18:54

3 Answers 3

1

Let's assume that alternating row backgrounds (also known as zebra striping) is what you need to make this table more usable and readable. There's not much you can do except keeping it consistent across all rows to maintain that readability.

Your assumption here strikes me:

The low-opacity text may be hard to read for visually impaired people. This shouldn't be too big of an issue since they know what they clicked on before they disabled them, and can reenable them any time to see the text, but I imagine it's still quite annoying.

The low contrast is actually a big problem, it's unreadable. You're asking a lot from people's short-term memory when they need to remember the texts that are unchecked. Short-term memory works something like this: Read, click, forget and move on to the next topic. Even directly after clicking, when on second thought they decide not to (un)check it, the preference is to read again instead of memorise.

A few ideas to improve the table:

My assumption here is that the users read from left to right, so put the checkbox on the left. Keep the zebra stripes consistent. You can slightly lighten the text of unselected rows, but the contrast must be high enough.

enter image description here

Know what users priorities are: Keeping track of all selected rows, or keeping track of the unselected rows. This is a big difference.

If you need to emphasise on the selected rows, use color and/or icons for accessibility reasons. If you think this adds too much clutter, add the icons only at the end of the row. Or if this is desktop only a hover can also be used to show the icons (whole table or even per row). I combined the ideas in this example but it is something to play with.

enter image description here

If you need to emphasise on the unselected rows, the idea of adding strikethrough is a possibility although it reduces readability a bit.

enter image description here

Grouping of selected or unselected rows can also help to quicker see what's selected or not. Use this only if you know this adds any value. Add lines to group them. (Don't reorganize the table, that will only add confusion)

enter image description here

Those are all just ideas based on assumptions I made because I didn't have all the information. You should know what users need and test your designs of course.

1

The problem with this is that you have to keep the lines, otherwise you'd just get rid of them and the CSS would automatically adapt to the new lines.

With that in mind, here's what I'd try: Instead of reducing the opacity of the lines, make them a little darker and keep the accessibility (for example, change the font color to white). This isn't intuitive behavior, but users will probably notice it the first time they interact with the system.

Another option would be to use colors ("warning yellow", "alert red", "info blue").

With either solution, the zebra stripes are preserved, there is a clear difference between selected and not selected, and accessibility is maintained.

Another option without zebra stripes would be to use lines between each line.

But like everything at UX, you need to test this.

0

Watermark

There are several examples of how to add a watermark to a table or row:

1
  • 1
    Interesting idea but the jsfiddle example is invalid html code. There's a <div> as a child of the <table> which is not allowed. Mar 14, 2023 at 18:47

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.