Hiding vs disabling for showing concept features

Question

Although the ubiquitous question about hiding vs disabling menus and icons is more than discussed, I would like to know your opinion about the same debate but concerning the representation of properties using visual hints.

For instance, let's say you're describing a product and you want to show its features by using meaningful icons. Some products have all those features, some have few.

Should the product description include all features and disable the ones that don't apply, or should those features simply be removed from the description page?

Answer 1

If you are only interested in promoting only this particular version (or the only version) of your product, then you should only display the features it does have. Otherwise the missing features might be viewed as issues, or your product might be viewed as lacking functionality or unfinished.

If however you want to promote an alternate (more expensive) version of your product that does have those features, then displaying those features the product doesn't have might be an incentive for customers to buy the more expensive version.

Answer 2

Don't Disable

Disabling (dimming) the icon is ambiguous because dimming usually means something is temporarily not responsive. That’s not necessarily the same thing as an attribute being absent. There’s also the problem that gray is a fashionable color often applied with no symbolic meaning (e.g., the gray status icons beside “Stack Exchange” in the upper left of this page*). If a product lacks all the features (the users see a row of gray icons), the users may assume that means the product has all features –they may think gray is the only color the icons appear as.

Don't Hide

Hiding is ambiguous because it could mean information about the feature is unavailable, as oppose to the feature is not present. Unless the users see some products that have feature, they won’t even know if your site ever tracks the presence of that feature.

Strike Out

An unambiguous indication would be to show the icon crossed out if the feature is absent.

If you are concerned about drawing too much attention to what the product does not have, then reduce the salience of the cross-out icons relative to the others. You can mute the cross-out icons appearance by coloring them gray-scale (but not all gray) or low-saturation monochromatic (e.g., dark silhouette). Don't cross them out with a red X; black is sufficient. The other more colorful icons will then stand out more. You can also make the other icons stand out more by super-imposing them over a large positive symbol (e.g., green light, check mark, or star)

---

*Yes, using gray to for active and present functionality is a bad practice, and shouldn’t be done, but it doesn’t change the fact that it is done, and you have to live with the expectations that sets in your web-abused users.