Yesterday, I made some cryptic comments referring to accessibility of window widgets on the Mac compared to on Windows which Adam and Seth promptly asked me to expound on what I was talking about. Instead of leaving a short comment, I decided I'd make a new entry about it.
Before we begin, I want to get one thing clear. I picked the Mac as an example because it's a classic mistake and one which I constantly notice when I'm on that platform. But Apple isn't the only one getting this sort of thing wrong.
The purpose to using colors in your application isn't always because you want to make things pretty. Quite often, you use colors to provide visual cues to the user about interactive parts of your interface. For instance, on the Mac, the default button is a different color from non-default butons, and it pulsates as well. However, one thing you need to remember is that 9% of the adult male population (world-wide) has a color weakness disability. Think about that number for a moment. 9%. That's almost 1 in 10. Chances are very good that you know someone who's "color blind."
Color "blindness" itself is actually very rare and is the condition where someone cannot differentiate between any colors at all. More common is color "weakness", where the ability to see certain color ranges is weakened. The most common form of color weakness, is deuteranomaly, which is a red/green color weakness. There are other forms of color weakness as well. Some of them are also red/green (such as protanomaly), and others are blue/yellow (such as tritanopia and tritanomaly).
What happens when someone is color weak is that their eyes simply lose color information (I'm really glossing this over a lot, btw) about the colors they are weak in. So if you suffer from deuteranomaly, then it means reds and greens "wash out"; you can't see them.
Ok, that's neat and all, but you don't read my blog because of my ocular knowledge (if you want that kind of smarts, you should go talk to Dr Scott -- he's forgotten more about vision than I've ever known).
(At this point, I want to mention that I'm taking these graphics from a Power Point presentation I did at REAL World 2006 about accessibility)
One problem people without a color weakness disability commonly run into is that they have no idea what it's like to have a color deficiency, so they don't fully grasp how important colors can be. Thank goodness for VisCheck! This handy and free web app allows you to upload images to see what they look like under various color weakness conditions.
This picture is one that I took while out hiking with Lis while in Texas. I'm not certain what type of flower it is, but it was sure pretty. It's a very vibrant red color in the foreground with an equally vibrant green in the background.
So if you suffered from one of the red/green color weakness (as almost 1 in 10 adult males do), this is what that scene would look something like to you:
The thing you'll notice (assuming you're don't have red/green deficient eyesight) is that all of the shades of red and green faded towards a brownish-yellow color. Since you've lost the majority of the red/green "seeing" cones in your eyes, all that are left are ones which spot blues and yellows, so everything tends to wash towards brown like that. If you look carefully at the picture, you'll notice that the contrast between the flowers in the foreground is mostly lost with the leaves in the background. The only cue you're left with is the focus.
So, back to the original question Seth and Adam had: how does this relate to my gripe about Apple's window widgets? Why do I think so poorly of them?
(Sorry for the small picture size, but this is "life sized.")
As you may be able to see, the color information is entirely washed out and those widgets are now inaccessible. They all look relatively the same shade of yellow/brown, with only very slight differentiation between them. This is what I'm talking about when I say Apple missed the accessibility boat. Microsoft doesn't fall prey to this for two simple reasons: the colors they've picked won't conflict if you're in the 9% of adult males, and they don't rely on color information to convey meaning.
One common accessibility practice is to differentiate based on shapes or sizes instead of colors. The more important things are larger than the less important things (such as the close button on Windows compared to maximize and minimize). Shapes convey some form of information, though they can simply be used to tell one item apart from another.
Apple almost gets this right by providing shapes in the widgets, but they still didn't get it right since it requires foreknowledge that these items are interactive. You must move the mouse over the item in order to see the shapes within the widget. You may be thinking "aww, but anyone must know there's some way to close the window, so they'd at least try." And you're right (to a certain degree), but there's another flaw. Remember what I said about size being a way to convey importance? Well, a lot of windows on the Mac have a toolbar, and those toolbars have a wide button on the right to toggle the visibility of the toolbar. So now you're facing a user with three round items with no information about them, and one long item that's off by itself. It's perfectly reasonable for them to assume the larger loner does something important and destructive like close the window. Another issue that you can run into is the "dirty dot" in the close button -- that hides information as well as shows it.
So now that I've yelled and complained about what Apple's doing wrong, let me balance the scales by discussing one which Apple has done right. Remember how I talked about the default push button? That's an example of getting accessibility right. Not only is the button a different color from the other buttons on the window, but it pulsates as well. By doing this, you're differentiating on multiple levels. Not only based on color, but animation. This is a good deal and one widget which Apple got right.
Hopefully this clears up the confusion Seth and Adam were having about my "window widget" accessibility complaints. If you've got questions, feel free to ask them! And if this is all "old-hat" information to you since you came to my REAL World accessibility talk, then great! :-)
Yeah, but who really cares about eye-sight defectives anyway?
You do.
uh...ok...forget what I said about eye-sight challenged losers, uh, I mean defectives, uh, forget it.
Of course, Apple could easily fix this problem by just removing the other two buttons, neither of which I have ever actually used. Well, at least not intentionally. :)
LoL, or change their shape. Or leave visual cues such as the 'X' in there all the time. Or heck, even pick better colors that don't conflict so much and leave everything else the same.
I definitely see your point. But the colors weren't picked to be "pretty"; they were picked to convey information to the 99% of us that aren't color-impaired. It's supposed to be based on a stoplight metaphor, and although us abstract users usually don't realize it, it's a big help when teaching new users (you see, green means go, red means stop, yellow means slow down for now).
So while I recognize that there are problems with depending on color for 1% of the population, changing the color would completely ruin the experience for the other 99%. Perhaps what's needed is a checkbox in Universal Access to always show the X/-/+ icons. But I suspect that by the time one found that option, he'd have learned the widgets by position anyway.
@Adam -- I think you meant the 90% who aren't color impaired. And the gov't has stated before that if they could pick different colors for the stoplights, they would. Interestingly enough, the have started phasing the true green out in favor one which uses more of the blue wavelengths so that the color differentiation is correct.
Basically put, saying "but it's like stoplights" is a cop-out. Stop lights are no more accessible (even less so, in many situations) and are a horrible idea to model after. Also, conceptually, it's a stupid analogy anyways. What's "yield" and "go" have anything to do with maximize or minimize? Absolutely nothing aside from contrived explanations. Red is the only one which makes sense, and that's grounded in "danger" much more than it is "stop." And having a single red button isn't the problem -- it's having red, green and yellow which all become the same color for one with color weakness that's the issue.
Sorry Adam, but I strongly disgaree with your reasoning. I've done plenty of research, and all signs point to "Apple messed up."
Ah yes, sorry, I missed the statistic. Boy, that's high.
The point is this: we don't get to remake society the "right" way. Regardless of whether the government wishes it could change the stoplights, it doesn't--minor wavelength changes regardless. So if we want to use real-world metaphors, there will inevitably be some problems. But I hold that the benefit from using such metaphors far outweighs the minor accessibility problems.
I won't argue whether the "stoplight" is a bad metaphor or not; that's far too subjective. I've personally found it useful when teaching new users.
Finally, I have never, ever heard of a user that was confused by the window widgets on Mac OS for more than 1 minute. Unless you are afflicted simultaneously by color weakness *and* a strange lack of spatial memory, you can simply memorize their order. Even in that case, mousing over does reveal their action--which is good enough for me.
So I guess we'll have to disagree. I would rather use a system that's beautiful and easy to use for *me*, even if it does leave 10% of users out in the cold (sorry Scott, and 10% of the world's men). There are plenty of hacks and/or options that allow other users to make their systems easy to use.
Oh, and a postscript: if you change the system color to "Graphite", all the window widgets are gray with no differentiating information! This proves that ignoring the color weakness problem is an intentional design choice, and not an oversight.
@Adam -- So what it sounds like you're saying is, "this doesn't affect me, and I think it's pretty, therefore it's not an accessibility issue." I don't follow your logic, and you've not pointed out anything which actually contradicts my original point, which was "this isn't accessible." You've tried pointing out reasoning as to why it's not that big of a deal, but you haven't actually countered with anything of substance.
This isn't a fanyboy discussion. Apple made an accessibility mistake. It's not like this is the first. It's not like Microsoft hasn't made them either. I picked a highly visible (pun only marginally intended) example of a common accessibility bug. I didn't pick it because I felt like going on a bash-Apple tirade.
If I had instead written this discussion about the original Show/Hide empty events toolbar button in REALbasic (which had a red dot and a green dot), I doubt you'd react this way.
I'm not attacking your personal opinions on aesthetics. You find them to be pretty, and that's cool with me. What I am "attacking" is the misconception that there's not a problem with them. There *is* a problem, and that's irrefutable (unless you can point me to some concrete evidence to the contrary).
I agree that color blindness is an issue that should be looked at as one moves from development to production (hey at least apple doesn't move the gum drops around so ordering is consistent) A great tool on the mac for this is Sim-Daltonism. It lets you overlay a pane over anything on your screen and simulate different color blindness issues (including degree of severity) It is really clever. It's particularly relevant for me now as my boss is color blind, so we get hammered on design problems all the time ;)
Sam D
http://www.michelf.com/projects/sim-daltonism/
@Sam -- awesome! Any apps like that for Windows that you're aware of? That's a really handy tool, thanks for pointing it out.
1. The choice of colors for the Mac window buttons, while correct for color normal users, is not correct for color deficient users. However, the precise colors that these should be would differ depending upon the type and severity of color deficiency. This problem could be settled solved with a preference to use the standard colors or to select one's own color settings for the buttons.
2. Spatial positioning of the buttons is an adequate cue for their correct use (much like muscle memory is for positioning of menu its and controls).
3. Still, the greater thedifferences between the buttons, the faster and more accurately you'll be able to locate them. Additional button shape differences would only enhance their discriminability.
Keep in mind that if you are looking directly at the window's corner, it's easy to note the button positions. However, in typical use, you're fixating the center of a window and planning to move the mouse to the corner of the window. If the buttons are very discriminable, you'll be more likely to make a correct initial trajectory for the mouse. If you make a mistake, you've got to correct your mouse movement, which takes time and attention.
Aaron, I don't know about a program like SimDaltonism for Windows, but there are available Photoshop filters for simulating color vision deficiencies. These may be cross-platform.
One last point: the button colors do not have identical color contrasts or luminance contrasts. Color and luminance contrast also affect detectability and form discrimination.
Well then Dr Scott, I think we may have a fun project to do once you ace your exams this month. How would you like to explore the idea of writing an app which does this on Windows? I could take care of the technical details of getting the screen cap below the window and so on, and you could take care of filtering the colors properly. Sound interesting, or like way too much work?
Oh Aaron, now you are in all your glory, you have an expert to validate all your crackpot theories.
SIgh. Now, we will not hear the end of it.
I have used the "Graphite" theme since 10.0, so it's not much of an issue for me I guess. I don't think something like that is too much of a problem, as once the new Mac user clicks on any of the three buttons, they'll get pretty acquainted with their use within about 5 tries at most. After that, I don't think most users would even have to think about the color part, just the placement. If there were 10 buttons up there, it maybe would help - but with just 3, I doubt very many people who've pushed them more than a few times are too confused (color impaired or not)...hmmm...
@Chad -- you're right, eventually spatial memory would kick in and the user wouldn't have to think about it. But that's essentially a visual workaround to an accessibility bug. The bug still remains that the buttons are almost indistinguishable from one another. It's just that the user has a way to overcome that limitation via spatial ordering.
Think on this though: without looking at the window, what does the green button do vs the yellow one? I know I couldn't tell you without guessing. But what does the button with a dash do compared to the one with a box? That, I could tell you without any guessing. Generally speaking, shapes convey more complex information than colors do. However, they also come with their own pitfalls which colors and size can compensate for. Accessibility is a very complex subject to study and it's not as black-and-white as a quick blog posting portray. People write entire books on this stuff. :-)
Hi Aaron- Just got home from working a full day seeing patients, then out to dinner with my wife. Of course, I'd be happy to work with you on this project. Once my exam is over (July 25), my only other obligation in September (besides a full teaching load) is working on 2 clinical research papers (and getting back to work on my RBLibrary articles).
@Scott -- we should discuss this more off-line. I've got something which I think will work in terms of a UI already laid out. Not certain of the performance, but it's all set for you to do matrix transformations on the screen capture, or just monkey with the bits of the data directly. I think it'll rock.
And don't you mean Aug 25? July was last month, my friend. ;-)
Hey Aaron!
You'll be so proud of me, I just got home, I closed the bar!! ZTired!!!
@Elissa,
Yeah, but by the time you closed the bar, were you able to differentiate between green #234 and green #235?
No, really serious question woman!
Oh Bill, you're too cute.
Bill, back off, she's mine. You've got one of your own. ;-)