I have a list of products on a page divided into columns by category (see image below). Each item in the list is a link which takes the user to the product's specific page with details. At the top of the list there is drop down which acts as a filter that allows you to only show the products that are available in your state.

I am wondering if strike-through text is a good indicator that the product is unavailable based on the filter the user has selected. I still want the unavailable products to be visible with the filter active, because the user needs to always be able to get more information on a product.

I had originally thought I would just gray out the unavailable products, but there are multiple columns per page and they're not all the same color (some product text is white in one column, and other darker shades in another).

Is strike-through text bad from a usability perspective?

enter image description here

  • I find it concerning that you still want unavailable products to be visible when the filter is active. What if I want to turn on a filter to make it easier to find products to edit?
    – Brian
    Aug 22, 2012 at 19:07
  • I'm still not sure I understand why you want to leave products visible when they are filtered. Could you provide some context? Aug 22, 2012 at 19:11
  • I wouldn't want to remove the unavailable products from the list entirely because there are a variety of users (not just consumers), and some of them may want to see all of the products which are unavailable based on the filter.
    – smoca
    Aug 22, 2012 at 19:21

2 Answers 2


I still want the unavailable products to be visible with the filter active, because the user needs to always be able to get more information on a product.

Except they just told you through the filter that they don't want information about these products.

The purpose of a filter is to reduce the length of the list to something that can be scanned visually easily, without scrolling, to reduce the amount of information available.

To indicate a filter is in place you typically place a notice like this on the end of the list:

56 products excluded by filter. show all

If the order of the products is relevant, and they need to stay in the same position, for whatever reason: grey out the excluded ones, or highlight (by setting to bold or changing background color) the matches.

Strike through indicates "don't bother with this anymore. It's done, we are over it, you will never need this again, this is only for the nitpickers who want to know it once was there."

  • Exactly. Otherwise it's 'let's introduce a filter... and then reverse its effects'. Aug 22, 2012 at 21:38

Strikethru really impairs the readability of text while not being especially visible as you scan down the rows. It also seriously impacts people with vision problems or reading comprehension problems.

I would recommend using another marker, such as a background color, or grouping the unavailable ones together.

  • 1
    or decrease opacity, which is a "cheap" effect in browsers
    – CodeManX
    Oct 24, 2014 at 23:35

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.