Some pointers on default cursors

Published 2016-08-06 category: thoughts

Every so often in a project, the issue comes up of whether cursors on buttons should be ‘the hand’ or default. The spec says they should be default, but many people (myself included, until recently), are unaware. Many designers I’ve worked with want pointer-cursors regardless of what the spec says.

This is the thing: links (<a/>) go to somewhere else, buttons ( <button> s) let users perform actions. The ‘hand’ indicates to a user that their cursor is on a link, which will take them somewhere. And can do so in another tab, copy/paste the link, drag it to another window, et cetera. Other interactive elements on the page (buttons, for example) just get a default cursor. TL;DR: the hand does not mean clickable.

What the standards say

The above is not my personal opinion, it is what the CSS spec says and what all browsers do by default. You can see this when you hover buttons in your OS, or look at the browser buttons to switch tabs. Or on the ‘Search’ button of Google dot com.

Apple’s OS X Human Interface Guidelines also say the ‘hand’ means the content is a URL link.

Microsoft’s guidelines are clear, too:

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. (Emphasis theirs)

If we manually add a hand cursor to a button, we suggest to a user that they will be taken elsewhere, while they won’t. We would be breaking an affordance that was put into the web. It’s like taping a sticker that says ”Push me” over a well designed door handle (see also: Don Norman).

Clearly, standards say the hand is just for links. And there’s a great argument to be made to not mess with browser defaults.

Using ‘the hand’ anyway

Many people apply a pointer cursor to their buttons anyway. I have done so, too. I’ve heard many say they add the pointer to improve usability. In addition, Bootstrap and various other CSS frameworks also apply pointer cursors to their button (note that Normalize used to, but recently removed them).

Whether we just did not know about the standard way, or purposefully ignored it to improve things for our users, ‘the hand’ on buttons is somewhat becoming a de facto standard. It is done all over the place, so some users may now expect hand cursors on buttons.

Basically, I think there are now two standards.

There is a further complication: in practice, there is a grey area between buttons and links.

I find that in team discussions, we talk about something being a ‘button’, yet in my HTML, I use the <a /> . Or even the other way around, occasionally.

Conclusion

The question is, does apply the ‘wrong’ cursor really matter? When I asked around on Twitter, some said applying hand cursors wrongly is a non-issue, as it confuses no one and it’s non-hand cursors that cause usability issues.

However much I think existing standards are the best to follow, I guess we have pretty much reached a situation where there are two standards, and either one is okay to use. Especially since things on the modern web are often not clearly a link or a button. Striving for consistency, at least within the same website, is probably the best thing we can do for your users.

Update 12/08/2016: Normalize no longer applies cursor pointer, as Šime Vidas pointed out to me (thanks!)

Thanks Krijn Hoetmer for the form examples

Comments, likes & shares (27)

Kev, Rik Schennink, Iain van der Wiel @iainvdw@mastodon.social, @timsev@mastodon.social, Anneke Sinnema, JulezRulez, Kilian Valkhof, Bram Smulders, Roel Groeneveld @ 🏠, adrian ▴▴▴, Eric Eggert, Mikey Stilts, Sumner M Davenport (she/her), Todd Libby 🦞 and Alicia Jarvis (She/Her/Hers), CPACC, CSM 🇨🇦💜 liked this

Johan Westling reposted this

Kev wrote on 24 August 2018:
I'm kind of sad that the informal standard is so prevalent. In the world of SPA it would be really useful to be able to differentiate what's going to take me to a new page and what's going to perform an action on the current.
Hidde wrote on 24 August 2018:
that's a great point, Kev. Fully agree
Rik Schennink wrote on 24 August 2018:
Love the title
Peter van Grieken wrote on 13 December 2018:
Hidde, heb jij ook wel eens ergens niet een artikel over geschreven? (Ik deel je genuanceerde mening overigens, leaning naar de pointer voor buttons)
Haha!

‘Wait, there’s a blogpost for that!’
Thomas Steiner wrote on 13 December 2018:
Good article by @hdv on the `Element.scrollIntoView()` API (developer.mozilla.org/en-US/docs/Web…) that has some experimental tricks up its sleeve: hiddedevries.nl/en/blog/2018-1…
Thomas Steiner wrote on 13 December 2018:
Good article by @hdv on the `Element.scrollIntoView()` API (developer.mozilla.org/en-US/docs/Web…) that has some experimental tricks up its sleeve: hiddedevries.nl/en/blog/2018-1…
Peter van Grieken wrote on 13 December 2018:
Ik wil een Hidd-o-mator: type een zoekterm in een krijg het relevante artikel terug. (Hiddipedia mag ook)
Hidde wrote on 13 December 2018:
dit is eigenlijk het secret objective van m'n blog, dat ik m'n mening terug kan vinden via zoekmachines
Gunnar Bittersmann 🏠 wrote on 8 May 2020:
‘The hand’ or default cursors on buttons? Some pointers on default cursors by @hdv hiddedevries.nl/en/blog/2016-0…
Eric Eggert wrote on 7 October 2021:
Thanks for pointing this out to me! I might have cursory overlooked it.