4

I have a list of items in a table like this:

Description of First Item    $100
Description of Second Item    -$50
Description of Third Item    $60

I want to indicate that some of the items were voided. Strikethrough seems like an obvious choice but I don't want to reduce the readability of the text or cover up the negative like in the -$50 case. Also adding another column is not a great solution because there is already limited horizontal space.

Would it make sense to add it in text like "VOID: Description of First Item" or does anyone have a better solution?

  • Some context would be helpful. – user31143 Dec 15 '15 at 5:34
3

See if you can gray out the Item which is void, such that it is readable, yet subdued indicating it is VOID.

On mouseover provide tooltip text describing why it is grayed out.

As shown below:-

enter image description here

  • I have an app that makes invoices, with voided line items. I use the grey-out style too, I also re-organize the list with voided items at the bottom and to the right of the item I've place a garbage in (fa-trash) – edoceo Dec 15 '15 at 23:43
2

For this case you have a choice between:

  1. Graying out the voided item(s) so that it communicates the VOID status

  2. Add a label at the end of the VOID item like in GMail Notifications filter

    enter image description here

  3. You should change the color of the VOID items in a color like red, see below

    enter image description here

  • note when using a colour like red or green to indicate the status of an item, make sure you have some other status indicator that is not colour-dependent, as otherwise users with colour-blindness won't be able to see it. "1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)" -- w3.org/TR/UNDERSTANDING-WCAG20/… – Yvonne Aburrow Dec 15 '15 at 11:06
  • Point taken Yvonne; for that reason the label will be a suitable solution – William Dec 15 '15 at 12:36
0

On the top of my head heres some potential solutions (note some are better than others!):


Description of First Item $100
Description of Second Item -$50 (VOID)
Description of Third Item $60


Description of First Item $100
Description of Second Item -$50 (VOID)
Description of Third Item $60


Description of First Item $100
* Description of Second Item -$50 *
Description of Third Item $60

asterix = void

You can also grey out the voided line. Hope it helps.

0

I was looking for solution to this same problem. This worked for me.

How to strike through obliquely with css

enter image description here

Demo: https://jsfiddle.net/jmzf65f4/

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.