28 Things Everybody Should Know, Part II

Respect the Hand Cursor.

In the early days of UI development, the mouse cursor transformed from a full gray ASCII block to the more easily recognizable arrow we know and love today. Soon after, designers came up with a few added icons to give users hints as to what was going on in that beige box of theirs: an hourglass to suggest the computer was busy thinking, an I-bar to show where text could be entered, and double-ended arrows telling us how we could stretch and resize our windows.

Then HyperCard technology gave us a different kind of navigation, and pretty much changed everything. One important visual cue it offered was the obvious and incredibly effective hand cursor, which we now use to inform users of navigation options within a website. Simply put, when you see the pointing hand, you know you can click.

The hand cursor’s been around a long time, and has become an established visual metaphor for interactivity all over the world. It’s been used in Myst, a game initially created in HyperCard, and in a later sequel rendered in 3D, still maintaining its general behavior of pointing to indicate where a user can click.

Many applications, Adobe’s among them, use an open hand cursor that shows a document can be clicked and dragged to change the user’s view. This draws on the same design metaphor, and I’d guess they even found the same guy to model it for them.

The pointing hand cursor works the same way in Flash sites and presentations. However, there exist simple lines of ActionScript that allow developers to override the cursor’s behaviors: disabling the hand cursor when a user rolls over a button, for example, involves a single line of code applied to the button itself.

Without going into too much detail about Flash and its language, this can come in handy when a developer decides to use a rollover action to trigger an event, but doesn’t want to mislead the user into thinking the button should be clicked on. While there are better ways of going about it, this is a great example of understanding the user’s expectations regarding cursor cues and developing accordingly.

The problem arises when a button that is meant to be clicked on doesn’t display the hand cursor, and doesn’t give sufficient clues that it’s meant to be clicked on. The hand cursor is the easiest, fastest way to offer navigation cues to a user.

On the other hand, there are sites that improperly use buttons solely for their rollover behaviors without disabling the hand cursor feature, thereby telling users they should be clicking on elements that do absolutely nothing. Some sites even employ the hand cursor for the duration of the experience across the entire stage of the presentation, nullifying the purpose of its existence. It’s difficult to determine where we are to click when we aren’t told where we are not to click.

One area where it gets tricky is when form buttons are used. Form buttons are those capsule-shaped, gray buttons that seem to pup up out of the screen, and push down into the screen when you click on them. These are used in technical sites used by banks, auto dealers, and sites involving numbers and money. Offline, the shape and behavior of these buttons are used to confirm and close dialog boxes, minimize and maximize windows, and navigate through installation wizards. Online, users know that clicking on them gets something done, like calculating a chart or submitting personal information. But they don’t necessarily inform us as to whether or not they’ll be navigating us away from the current page, resulting in hesitation when dealing with large forms full of numbers that may or may not disappear once the button is pressed. On a good note, websites such as Amazon.com and Washington Mutual’s site have done away with form buttons in exchange for standard image buttons, complete with the hand cursor that instills that much more confidence in every user click.

As more and more developers understand the reasoning behind the cursor’s visual cues and utilize them appropriately, they will gain more users’ trust and acceptance, subconscious as it may be.


0 Responses to “28 Things Everybody Should Know, Part II”

  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: