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/
