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:
A recent article by Michelle Slatalla in the New York Times struck my interest. I’ll summarize briefly, however it’s worth a read on it’s own:
A mother signs up for facebook, searches for her daughter’s name, and slowly begins to befriend all of her friends. Mother states:
“Shockingly, quite a few of them - the friends, not the daughter - accepted my invitation and gave me access to their Profiles, including their interests, hobbies, school affiliations and in some cases, physical whereabouts.”
Daughter finds out, states:
“unfriend paige right now. im serious. i dont care if they request you. say no. i will be soo mad if you dont unfriend paige right now.”
As social applications become more and more popular, you’ll cross that generational bridge. Privacy which was once there due to ignorance will suddenly be violated, leaving everything you chose to make public seen and archived.
Consider the Wayback Machine. When I was 12, I never would have considered or even comprehended the idea that my first website might be cached forever. Were you thinking that way? Most of us didn’t, yet at some point we began to.
Or take another example: Instant messaging. I’m always on. Will my kids, too? Will they filter their away messages or profiles, knowing I might possibly view the information they are making publicly available?
I have a feeling this learning and yearning for privacy will begin to show in more and more web applications, where we’ll not only continue to see “parental controls” but we’ll begin seeing options to filter and control each generations access to the other.
Online advertising is getting a great deal of attention days with players like Google, Double Click, Yahoo, just to name a few.
But with almost any advertising, there’s a movement to circumvent it.
.. TV vs DVR, time shifting, fast-forward.
.. FM radio vs Satellite radio, paid subscriptions, commercial free.
Remember the first years of pop-up advertising on websites? ISPs started offering “Pop-up Blocker” software free to their members. It was such a demand that most browsers now implement pop-up blocking as a standard feature.
Advertising is a balancing act. Google has been hugely successful with their text/banner-style AdWords - I believe because they’re not aggressive with their impact. Until this evening, I tolerated, sometimes enjoyed, viewing advertising. I felt like it educated me. A good advertisement might teach me of a new product I hadn’t heard of, a service I might use or recommend. Those AT&T commercials where two people are talking on mobile phones, and one is dropped… hilarious!
Until tonight, when I went to read this article on Wired.com.
Covering 50% of the first few paragraphs is an AT&T advertising overlay. I gave the ad 3 minutes to go away. I tried every key combo, tried following the link of the ad… nothing. The article is unreadable in Firefox. Same result in IE.
The Irony is: the article is about Safari 3 and how “Safari sucks.” Care to guess how the page looks in Safari? flawless. No content-blocking AT&T advertisement.
UPDATE: Wired apologizes for the ad.