Pointer Shows Affordance

Examples:

Crosshair or paintbrush pointer in a drawing program
Arrow pointer over the corner of a resizable window or a movable split pane
Finger pointer over a hyperlink, especially pictorial links
Buttons whose borders appear as you move over them

Context: The artifact contains a visual pointer, or "virtual fingertip" (mouse or pen point, for instance) that is the focal point for the user's interaction with the artifact. Patterns that tend to use this a lot are interactive ones with a heavy visual component, including Navigable Spaces, WYSIWYG Editor, and Form (particularly for controls like Forgiving Text Entry and Editable Collection).

Problem: How can the artifact indicate that a visual entity represents an action that the user may take?

Forces:

Static visual affordances aren't always enough to indicate the presence of a manipulable control, especially when space is tight or when an elegant-looking graphic design is of paramount importance.
Multiple affordances can be more effective than one, if they work together properly.
If the pointer is near the border of a manipulable control, especially something with a small target area, the user should get feedback that instantly tells them whether they're "in" or "out."
Textual help (e.g. Short Description) is not as effective as a simple picture for some kinds of actions.

Solution: Change the affordance of the thing as the pointer moves over it. This can be done in one of two ways: by changing the pointer to a small picture illustrating what can be done, or by changing the thing itself to make it stand out visually.

If you change the pointer, use a small picture illustrating what can be done. Use a standard icon if an appropriate one can be found -- crosshairs for drawing, single arrow for selection, I-beam for text entry, hands, pencils, paintbrushes, resize arrows, etc. -- because they are so easily recognized. Keep it small or mostly transparent, so that the user can easily see what's under it.

If you change the thing itself, you have a lot of freedom to experiment. Any visual change may be enough to tell a user that the object is at least clickable; but consider your audience when deciding how flashy or distracting the change is. To be sure that your design actually works, of course, you should test it with potential users.

Resulting Context: Be careful not to use this pattern gratuitously. Now that the tools to implement it are widely available, lots of user interfaces use it as a substitute for static visual affordances. This isn't always wise. Think about the poor user looking at a screenful of borderless icons, some of which are buttons, some of which are moveable objects, and some of which don't do anything at all! The user now has to move the pointer over each object in question to see what it does. Short Description has the same problems in these cases.

For those of us stuck with non-tactile interfaces, such as mice, this pattern produces something like a substitute tactile sense. As you run the pointer over the interface, you get visual responses that correlate to physical sensations -- bumpiness (raised button edges), heat (when something turns from a muted color to a bright color), etc. Says David Cymbala:

"I was cruising the web the other day, and I was using the mouse pointer to 'brush' across an image map that had patches of 'active' areas.The image jumped into my mind of what I was doing: "Feeling" the image map with the mouse. Instead of a 'tactile' sensation, I was correlating the image of the mouse pointer with the movement of my hand through space. I almost 'felt' it physically... The pointer allows me to 'feel' visual space as a replacement for the lost tactile dimension." (From personal correspondence, dated June 17, 1998.)

Notes: Don Norman brought the term "affordance" into the interface designer's vocabulary with his classic The Design of Everyday Things. In it, he defines an affordance as "the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used."

I find that when I'm working quickly, I depend very heavily on the fact that my pointer changes when I'm over a manipulable control; if I want to resize a window, and I move the pointer towards the window edge, I instinctively start the press-drag motion the instant that pointer changes. I don't actually look hard to see if the pointer is over the control. That zone could extend ten pixels beyond the window edge, for all I care. Conversely, it's very hard to deal with direct manipulation if the cursor doesn't change -- I have to pay far too much attention to the screen, and use better fine motion control; and with small controls, there's always this vague uncertainty that the action will succeed.

For some wonderfully bad examples, take a look at the Interface Hall of Shame. Look under the "Visual Elements" section, especially at the Microsoft examples and the first WebZip commentary.

Comments to: jtidwell@alum.mit.edu
Last modified May 17, 1999