On the web, maybe buttons should have a hand cursor
As always, the answer is: it depends.
In my job as a UX designer, I always find the nuances in interaction design really intriguing. Small decisions and changes can sometimes make a great difference for people trying to use and make sense of our designs. That’s why I, probably just like many others working on the web, found myself trying to answer the same question over and over again: should I use the hand cursor (pointer, to be precise) for hover on buttons in my design?
A while ago, in mid to end 2016, I read an interesting article by Adam Silver on why we absolutely should not use the hand cursor for buttons. Go read it here:
I could follow his thought and it does make a lot of sense. Yet, his argument is heavily based on examples and guidelines concerning OS and app design for desktops (namely Microsoft’s design guides and Apple’s Human Interface Guidelines). What Adam is missing, however, is that there are important differences to consider between desktop systems and the web.
1. Buttons and links are not clearly separated on the web
On desktop, the difference between buttons and links is pretty clear: Buttons modify data, perform an action or navigate to a different section. They generally act within the bounds of the system (the OS in our case). Links, in contrast, navigate to a destination outside the system, to a website in most cases.
On the web, the separation is not so clear. The bounds between inside and outside the system become blurred. You may argue that staying within the realm of one website is staying inside, and links to other websites are considered outside. That would mean using buttons with a regular cursor for inside navigation, though technically and by W3C definition these would still be links with a pointer cursor.
Moving away from the technical and towards the visual perspective, it becomes even less clear. With the dominance of mobile and the growth of responsive web apps, it makes a lot of sense to restyle navigational elements from the underlined text to something more “tappy”. And that usually makes it look more like a button. And that’s ok. More people use mobile devices than desktops by now. Apps don’t make the differentiation and favour usability with clumsy fingers over the historically correct implementation.
2. Desktop OS’s have clear separation of controls and content
Have a look at your desktop OS. Everything about it is for navigating or manipulating the system. Everything is controls. That is because traditional apps are meant to get work done and to manipulate stuff, not to get you content delivered. Imagine everything was now using a hand cursor to indicate you can interact with it. That would be really redundant and annoying, since you can effectively interact with everything. Because of that history, whenever there actually is content to show, there is a clear separation between the system part of the controls and the area that is meant to play content. Just look at your browser. You immediately know what’s the system part and what’s dynamic content.
On the web that’s a completely different story. There is no restriction for content and control separation, since from a system/OS perspective everything is content. Content and controls often blend seamlessly. This allows for a myriad of interesting layouts, but also makes differentiating interactive from static elements all the harder. That’s why I believe the classic definition of button vs. links doesn’t hold up anymore.
What are the majors doing?
You and me are clearly not the only ones confused about this. Let’s have a look at how the big players handle their buttons.
Apple’s app store is a great example, as it is a very web-like, content heavy desktop application. They use the regular cursor for all the elements in the system UI frame, but use the pointer for all other elements inside the content area, no matter if button or link.
iTunes on the Mac behaves pretty much the same. Everything system UI, in this case including the white navigation bar, uses the regular cursor, while all elements in the For You, Discover, Radio and Store tabs uses the hand cursor. Interestingly, the My Music tab uses the regular cursor for almost all actions. My guess is, that’s because it is visually clear that these are system level controls.
Google Docs, being a web app living inside the browser, behaves pretty interestingly. Though it clearly sits within the content area of the browser, mimicking a desktop application it has its own clear separation of controls and content. That’s why, I suppose, Docs uses the regular cursor for all interactive elements in its UI.
Google Play Music is another interesting example where content and controls are inherently mixed. Though you could argue it’s mostly controls, you’re getting new suggestions based on your interests, pictures and info on artists, etc… that one can count as content. They use the hand cursor for every button and interactive element.
Amazon, in contrast, comes across as more of a traditional website. I’d argue they are known for prioritizing usability and efficiency over visual aesthetics. They are also using the hand cursor for every interactive element, not differentiating between buttons and links.
Conclusion
With the convergence of web and apps, the difference between buttons and links becomes less important, to the point that people simply don’t care about it anymore. Most websites and web apps make use of the greater flexibility they have on the web and come up with their own content and navigation patterns. And mixing up content and controls reduces the controls’ relative visual affordance. While I agree that there are other ways to indicate appropriate affordance, in my opinion, adding the hand cursor to interactive elements only makes their interactivity more obvious in most cases.
Lastly, the question of wether to use a hand cursor for your buttons is none that can’t be answered in general, but rather comes down to your specific case. I’d argue it mostly depends on how clearly and consistently your content is separated from your controls, and how much your controls section follows known desktop paradigms.
If you like what I write and want to make me smile, simply ♡, comment and/or follow. If you don’t, do it anyways, life is short, do something nice! Either way, thanks a ton for reading! — Peace
