Windows Visual Affordances

Although I don't care for the term "intuitive," the properties I have just outlined are significant in user interface design, since even a first-time computer user is able to instantly figure out a feature that has these properties. Such a feature has the highest level of visibility.

A better way to describe such a feature is to say it has affordance. Affordance relates to the ability of a user to determine how to use an object just by looking at its visual clues. For example, people understand how to use everyday items such as doorknobs, hand tools, and kitchen utensils just by interpreting the appearance of these items. Of course, our understanding of each object's use is gained through real-world experience (for example, through the opening of doors), but once gained that understanding is permanently associated with the object. A doorknob's affordance, then, is the set of properties related to its use that comes to mind when we see a doorknob: the doorknob is "grabbable," "turnable," "related to the opening of a door," and so on. I'll discuss both affordance and its interpretation in more detail in Chapter 12, "Learn from The Design of Everyday Things."

Windows uses several visual affordances, specifically:

• Raised items can be clicked.
• Items that become highlighted when the mouse cursor passes over them can be clicked.
• Recessed items cannot be clicked.
• Items with a white background and a flashing vertical bar can be edited.
• Items with a gray background cannot be edited.
• Gray items are disabled.
• Raised lines can be dragged.

You should take advantage of these affordances whenever possible and maintain them, unless you have an extraordinarily good reason not to. For example, note that a command button has affordance because it is drawn with a raised 3-D rectangle that looks like it can be pushed. If something looks like a button, users had better be able to push it because they are certainly going to try. On the other hand, users aren't going to click something that is recessed, since the visual clue indicates that it isn't clickable. Note how the modern two-dimensional menu bars and toolbars maintain their affordance by becoming raised when you pass the cursor over them. This is known as hot-tracking. This is a simple yet effective mechanism for making it clear when an item can be clicked that has the benefit of reducing the visual complexity on the screen. However, note that this technique works well for menu bars and toolbars because users can easily identify them and know that they can click them. Using the cursor to reveal affordance in other circumstances is most likely a bad idea, since the user would have to pass the cursor over all of the program's graphic elements to distinguish the interactive graphics from decorations.