On Web Usability: Mouse Cursors and Actionable Page Elements

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

For years we lived without JavaScript in our browsers; it wasn’t used by developers, or it was turned off or disabled by the user because there were so many security flaws with the JavaScript engine; however, as those security flaws are fixed and JavaScript’s functionality increases, the age of no-script is quickly coming to a close.

One of the side-effects from living without JavaScript for so long is that users are now used to relying on the mouse pointer to signal whether or not something on the page is clickable or actionable.

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

With the advent of JavaScript, more items than just anchor tags and submit buttons became actionable. We can now execute actions based on hovering, clicking, moving, button pressing and other user input actions on any other type of visible elements: span‘s, div‘s, tables, etc.  Moreover, we can even execute actions on browser events that the user has no control over (XMLHttpRequest, onLoad, etc).

People now use JavaScript very freely and frequently on their pages to simulate actionable elements that at one time could only be implemented with anchor tags, img+anchor tag combos, and form buttons.

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.

Counter Arguments

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 true; however, the latter supporting part of the argument fails because when a non-JavaScript actionable page element is clicked, it usually either removes, adds or modifies the page content. Before the advent of JavaScript, this could only be done with forms and anchor tags to make separate HTTP requests; however, with JavaScript we can do the same things without having to waste a request to the server**. Therefore, since the effect is the same, why shouldn’t their signals (mouse cursor) be the same?** Note: Look forward to a future article on the <noscript/> block. In proper usability, you shouldn’t put the blinders on to non-JavaScript enabled browsers and mobile phones.
  • 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.

Final Tip

All it takes is adding the following CSS style to your element to make the cursor change:

  • cursor: pointer

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>