Response to "Buttons shouldn't have a hand cursor"


This post is in response to Adam Silver's post "Button's shouldn't have a hand cursor".

It's brief and to-the-point, and makes a few arguments about the pointer and its relationship to links. I disagree with some of the points, hence this post.

If you were to ask me, "Should buttons have a hand cursor?" my response would probably be along the lines of, "Nah, they don't need it."

What I disagree with is the normative argument that buttons should not ever have a pointer effect when hovered.

The hand does not mean clickable

The change from the default cursor (default cursor) to the pointer cursor (pointer cursor) when the cursor hovers over a UI feature affords clickability. It's a cue for the user to be aware that something under the pointer is different from its surroundings and may be interacted with via clicking.

This is no different from using the I-beam pointer (I-beam text cursor) for affording text interactions, or diagonal arrows (diagonal top-right to bottom-left resize cursor) to afford resizing.

The hand cursor is for links

Changing to the hand cursor on hover is for any UI element that doesn't otherwise have a hover effect and needs to afford clickability. Examples are rare, and for good reason. It's generally beneficial to use other effects to indicate clickability, such as changing a shape, size, or color. The default style for links is to be blue underlined text that does not otherwise change when hovered. This is the reason links have the pointer.

I can think of a few cases where you may want to use the pointer style on a button.

  1. When you style the button to look like a link, such as a "Read more"/"Read less" toggle.
  2. When the cursor obfuscates the hitbox, such as with very small buttons
  3. Any time the button style must not otherwise change when hovered over

For a real-world example: hover over an individual layer in Photoshop's layer view, and you will see a pointer. The layer can be selected by clicking, which is part of the reason why there isn't a hover effect. The background-colors have meaning, so the affordance is indicated by the cursor.

Affordance is provided by the way something looks regardless of the cursor.

The original meaning of "Affordance" was "the possibility of an action on an object or environment". Donald Norman appropriated "Affordance" for HCI which then led to the unintended redefining of the word to mean "the possibility of actions on an object or an environment that are readily perceivable by an actor".

In the context of hand cursors on buttons. The act of hovering over the button and seeing a pointer helps to enforce an affordance of clickability. If other styles change to indicate clickability then they may be redundant, but this doesn't affect the affordances of the cursor changing.

So, coming full circle. Do most buttons need a hand cursor?

No, absolutely not; nor do many links. If your call-to-action links are styled to match the form buttons on your website, you probably don't need a pointer cursor for them.

Use the cursor that makes the most sense for the UI at hand (pun absolutely intended).