Hello Apple. Are you reading this blog? I think you might be, because I love your new availability pages:
Simple and easy to use. Symbols are a great solution when there are only a few keys to differentiate.
For more information on colorblind design and applications, read my previous entry here.
More and more I’m noticing a new trend in web-based forms.
The days of the <select> tag are numbered. The most recent example is GMail’s “More actions” drop-down.
It’s gone from this 
to this
I completely understand why. Unavailable CSS styling and <select> bugs in IE have always been frustrating, but the real motivation to move away from the tag has been its lack of features.
With a JavaScript/DHTML solution you can simply do so much more. In December 2004 when Google released “Google Suggest” (which is an auto-complete-like drop-down of the search field) many developers started to consider abandoning <select> tags. Add to that the flexibility of cross-browser styling, adding images to drop-downs and dramatic visual effects… The end is near.
However, I’m not suggesting the end of the tag’s use. Using a <select> tag gives the browser the responsibility to make the form accessible to vision and mobility-impaired people which is often overlooked in a small project or web-based application.
8% of all males are afflicted with some type of color blindness. 0.5% of all females. This article isn’t about color blindness, it’s about what you should or shouldn’t do when creating a web application regarding color blindness.
Do you see anything wrong with the picture below?
Can you distinguish in-stock vs. out-of-stock? Perhaps most people reading this can because not everyone is colorblind. But for those of us who are this image is completely undecipherable.
The image comes from Apple’s iPhone stock checker website. I completely appreciate the fact they took the initiative to create the website but I’d expect better of Apple.
The W3C’s Techniques for Web Content Accessibility Guidelines 1.0, Guideline #2 is:
Don’t rely on color alone.
It’s just that simple! When it comes to a boolean column, something as simple as a “checkmark/x”, or the text “yes/no”, or text formatted with a “strikethrough/normal” sufficiently differentiates each option. I personally think the “checkmark/x” combination is the most distinguishable to a global audience.
Design becomes more complicated when you need to distinguish between multiple sets of data. Consider the following map:
The map needs to do better job distinguishing the colors to even be remotely useful but that isn’t the full story. What would be best would be a hovering “tooltip” window that lets you know what color and section your mouse is pointing at. This isn’t necessarily easy and would take time to create, but the people who spend the time perfecting things like that usually end up being the best resource in town. And isn’t that what we all want in our web applications?
While I can’t change the fact that someone in the US decided it was a good idea to use red and green stoplights, I can hopefully shed some light on webdesign in the future. Thanks for your time!
For more reading on color blindness and design, I suggest the following links: