Buttons shouldn't have a hand cursor

Like many people in the web community, I used to believe that the hand (or pointer) cursor signifies an element is clickable. But that’s actually not what the pointer cursor was originally intended for.

In this article I’ll explain why that is and how using the pointer cursor might be harmful to users when it’s used to signify things that are clickable.

The hand doesn’t mean clickable

It’s no accident that browsers don’t apply the pointer cursor to buttons, and many other elements. See the screenshot below which shows a plethora of interactive elements that aren’t given the hand cursor.

Chrome on Mac OS
Google's search page on Chrome Mac OS

The screen shot shows an interface with menus, tabs, whitespace (context menus), browser buttons and text box. All of them are clickable, but none of them are given the pointer cursor.

The same goes for select menus, sliders, checkboxes, radio buttons, labels, images, and text. None of them are given the pointer cursor.

These things can be tapped, dragged, selected, pressed, left clicked, right clicked. But like buttons, they are not signified by the cursor changing to the pointer when the user hovers on them.

License Agreement is a link and gets the pointer cursor. Buttons don’t.

The way users perceive an element’s behaviour is shaped by how something looks before interaction. This is important because not everyone uses a pointing device, like a mouse.

This is why, for example, checkboxes are never round. This is also why links are typically underlined and given the pointer cursor.

What the authorities say

The reason links are given the pointer cursor is because they have weak perceived affordance.

Microsoft’s design guidelines says:

Text and graphics links use a hand […] because of their weak affordance. While links may have other visual clues to indicate that they are links (such as underlines and special placement), displaying the hand pointer on hover is the definitive indication of a link.

To avoid confusion, it is imperative not to use the hand pointer for other purposes. For example, command buttons already have a strong affordance, so they don’t need a hand pointer. The hand pointer must mean “this target is a link” and nothing else.

Apple’s Human Interface Guidelines says:

The content beneath the pointer is a URL link to a webpage, document, or other item.

W3C User Interface Guidelines says:

The cursor is a pointer that indicates a link.

The pointer cursor is for links

Links are not buttons. Links came along with the web. To help users understand that links are different from buttons and other interactive elements, they are given the pointer cursor.

This is because links open web pages or other downloadable resources without changing data like buttons are likely to do.

And users are also able to right click (or tap and hold on touch devices) to reveal additional options like opening in new windows, copying the address to the clipboard, bookmarking the link and more.

In conclusion

Buttons that have the point cursor indicate that the user is interacting with a link when they’re not. If you want to give users feedback on hover you can change the background colour for example.

A well-designed button—that is one that looks like a button—doesn’t need a pointer cursor to help users realise it’s clickable. It should look clickable anyway.

The pointer cursor signifies a link because links have special behaviour that’s worth signifying to users.

Continue to part 2.