Whether we realize it or not, the displayed cursor image tells us about the area of the screen below our mouse cursor; it tells us whether or not we need to click, drag, move, resize, or even wait. Now, I know that we all know this, but I believe that sometimes as developers (especially web developers) we forget that not all items in an application have the correct default cursor for the action that is assigned for that item.
The Web Standard
In the web world, the default cursor (without any background movement) means that there is no current actionable item beneath the mouse at that time. Once your mouse moves over something actionable, the cursor will either change (page links), or the background will change to so show a possible action (form buttons).
When the mouse hovers over something like a link or an image used for a form submission, the hand cursor would show to indicate that an action will be executed by clicking on that item (whether it be submitting a form or going to a new page).
Furthermore, there are many other cursors that have different meanings (both actionable and not) when hovering over different elements, both actionable and not.
Taken For Granted
However, I think that sometimes we believe that the user will automatically or inherently know to click on the span or div (or any other random element that has no innate way of communicating required user input) to begin some action without giving them at least one or more of the most possible types of action signaling.
Although the course of action may seem very clear to us as developers, it may be unclear to the user without the proper signals and directors to drive the user to click on an actionable item.
As an example of how things might seem unclear, look at problem 4 in the following article about Sourceforge.net’s landing page:
Moral of the Story
If you are going to make some page element an actionable item (especially those with raised surfaces), at least make the cursor seem like it’s about to execute an action. If you can’t do that, then use the title attribute to show a tooltip about the action to be executed.
Now, there are the counter-arguments that I do agree with on a certain level:
- The hand cursor is reserved for the anchor tag, and the user knows that when they click the anchor they will be taken to a new page.
- This is all bogus because desktop applications and operating systems, which the users are used to, don’t use the hand cursor for actionable.
- This is a weak argument because of one the reasons that I listed above; inside of a web browser, people are used to anchors and buttons being the only way to execute actions. Since the hand cursor is used on hovering over anchors and buttons, it would be fair to say that most actionable items inside of a web browser should follow that same pattern.There are circumstances when not using the hand cursor might be okay; an example might be the +/- tree expansion and collapse (treeview).It’s contextual; you make the call on when you need to use the hand cursor, but err on the side of using it too much.
All it takes is adding the following CSS style to your element to make the cursor change:
- cursor: pointer