There are basically two ways to indicate users when something is unavailable – you can either gray it out or remove it. This is like no brainer. But the question is how you actually apply the concept to your products. It is especially challenging if the wrong design will result in high return rate, low customer satisfaction, or poor task performance.
One time I wanted to buy a pair snow pants and I went to Evogear to look for discounted deals. After some time searching on the site I decided to take a pair of 696 pants since it was on sale with decent price. I clicked on the arrow next to the item, and a dropdown list of sizes was presented to me – S, M, L, XL. I’m really short so I selected S, entered quantity 1, clicked OK, went to my shopping cart and paid. The whole process went smoothly and all I needed to do was wait. But when I got the product I laughed. The length of the innings was like 3 inches longer than my normal pants. I checked the size charts and realized the smallest size was XS, not X. XS was removed from the list because it was sold out. I had to return it and bought another one from the retail store for my ski strip that weekend.
The experience above is a good example of the dilemma between gray out and item removal. The common strategy is, for things that are currently not available (e.g sold out items), gray them out. For things that are not available at all under some conditions, remove them completely.
Let’s learn from some good examples:
- Groupon: This amazing website uses grayed out to indicate users when certain items are sold out and put the word “Sold Out” on the top page when the whole deal is gone. I can’t remember how many times I feel so regret that I don’t make my purchase in time when I see the gray color.
- Eclipse: It detects your OS system and shows you only the versions of software that are compatible with your device after your select “Download”. However for rare cases that you want to download a version that’s not compatible with your current device (like if you use a windows at school to download the software for your mac at home), a list of all available software is presented on the detailed page. Simply smart.
Also bad examples:
- If you’ve applied to a job at Microsoft you would know. It makes you go thru all the applying process and requires you to install Silverlight if you want to click that “Submit” button. Way to go.
- Buttons on a YouTube page. There are so many colors to choose and YouTube has to use gray. And it’s so subtle sometimes I don’t know whether a button is selected or not. E.g. the Like button makes me feel I prob don’t like it that much :p.
Also I was not sure if it’s gray out or grey out so I Googled, and here’s what I found http://grammarist.com/spelling/gray-grey/