23
Buttons shouldn't have a hand cursor (medium.com)
7 years ago from Adam Silver, Interaction designer focused on inclusive design and design systems
71 comments
Daniel De Laney, 7 years ago
Oh dear sweet Jesus, Adam, I disagree with you and even the way you've applied the link to my writing, but I love that you care this much about the fundamentals of form design. That's what design and taste are all about—caring whether things succeed or fail in even the smallest ways. Keep designing.
I'll offer my nuanced counter-argument when I have the time to present it completely and also do justice to your thoughtful perspective.
It makes me so glad to inhabit the same industry as you.
Adam Silver, 7 years ago Thanks Daniel. Look forward to hearing your counter-argument :)
Thompson George, 7 years ago
I like the passive-aggressive smile.
I’m back!
This is a difficult stance for me to take because I’m so often on the side of browser convention. I, like you, am constantly telling people to stop breaking the standard, default behavior of their browsers in the name of novelty. The browser makers already got it right, I tell them. Except sometimes they didn’t, and I think this is one of those times.
I think buttons should use the hand cursor, or at least they could in a well-designed system, because that cursor signals that something is clickable—and that’s all it signals. Links have been styled as buttons and buttons styled as links for so long and with such interchangeability that I scarcely see a meaningful difference between them, and I doubt that users commonly see a clear distinction.
Some OS and browser conventions do specify that links have certain behavioral signals and buttons do not, but those conventions aren’t clear enough. They’re employed too inconsistently, and without a readily apparent rationale—at least in my mind. I expect that if you performed a user test you’d find that the hand cursor performed slightly better. If you asked users directly about their perception of why certain things got the hand cursor and others didn’t, I imagine you’d get a mixed bag of responses:
- I don’t know
- Lack of standardization
- Perhaps some developers forgot to put it in
- A variety of definite answers (possibly including yours) that are incompatible with one another
Where I suggest that something should be a certain way, it’s because that thing affects the user’s perception or behavior in a definite way. I don’t think buttons and links are different enough to warrant separate standards, and I don’t think users do or would consistently understand such a difference. If I’ve read articles by designers arguing opposite ideas of how links and buttons should be different, how can I expect users to agree?
My theory is that without a broadly-understood consensus on what the difference should be, any difference, no matter how rationally designed, proves out in practice to be carefully considered noise.
Gabriel Lovato, 7 years ago
This deserves 1000 upvotes!
Adam Silver, 7 years ago Daniel, we so often agree on things but on this case we disagree...
In a "well designed system" there would be no need for the hand cursor. If you're using a hand cursor to help the user understand it's a button that does something, then that is poor design.
It's poor design because you're relying on users using a mouse for one, and for two, moving that mouse around trying to work out whats clickable by the subtle change of a cursor. This is draining on the user. And it can be down to many little things that degrade the user experience overall.
If something looks like what it is meant to look like then the user will understand it.
The history is that first we had OSs, and most interactive elements used the arrow as I explain in the article.
Then the web came along, and we had this new thing, this new special thing: the hyperlink.
Styling and a special cursor was applied by operating systems and browsers to explain this to users.
Then, a bunch of designers, made the incorrect assumpting that the hand cursor means clickable and started putting it everywhere. And for this reason, they have chipped away at the meaning.
If you have a well designed button, link and whatever else, I would suspect there would be nothing to ask the user in a user test regarding this.
Then there is the fact that the majority of people don't understand the difference between a computer, operating system and browser. They just get on and use it.
And there are many apps that contain web views within. Does that mean buttons within a web view should have a hand cursor, and that the buttons in the shell should not? Of course not. You could consider the OS the shell, and the browser the web view. The user doesn't care.
At the end of the day, the hand has never been used to denote clickable. Designers came along and messed about with it. Some have even put them on labels and select boxes.
Concerning the main point, I don’t think we disagree directly; it’s not that we have incompatible opinions on the same subject, it’s that we’re talking about things which are very nearly the same but not identical.
If the user requires a hand cursor to suspect that something is a button, the button is poorly designed—on this we agree perfectly. Users should not be expected to use their pointing device like a metal detector, sweeping it across the screen attempting to find buttons by means of the hand cursor. However, if the user hovers over something that he believes is a button and does not get the hand cursor, this might lower his confidence that the button is in fact a button. I’ve experienced this myself, but I don’t know how prevalent it is. Counter-wise, the presence of the hand cursor is feedback intended to increase confidence. The hand cursor is not the initial signal that the element is a button, but it’s an expected behavior of buttons for at least a subset of desktop users.
As far as the historical bit, I think we do actually disagree. Whether buttons used to have the hand cursor is immaterial to my opinion on whether they ought to have it now.
It used to be that the word “gay” had a meaning equivalent to “joyful”. I don’t imagine you’re in the habit of correcting people who use “gay” to mean “homosexual”, telling them that they’re perpetuating a widespread mistake. You accept that English is a living language, defined more by common usage than the proclamations of originalists. You acknowledge that “gay” in the here and now is an effective tool for communicating the idea of homosexuality between practically all English speakers, regardless of whether that used to work. Even if you try to use “gay” to mean “joyful”, the primary (though not original) meaning will at least briefly surface in your listeners’ minds, potentially detracting from your point.
Similarly, UI conventions are a living language. All sorts of things are being expanded and amended all the time. Whether buttons should have hand cursors according to the original logic isn’t relevant to the way I design modern interfaces. What matters to me is the language of today, and how the audience behaves in response to the interface they’re given.
Adam Silver, 7 years ago Yes, we so nearly agree :) Your analogy implies (in my opinion) that because everyone has done this, it's now the done thing. I can see the argument, and it's one that I anticipated receiving in response.
I can search for a whole load of websites that don't override the cursor. But I don't think that serves as reason. Just like if you were to show me how "Google" or "Facebook" do it. Reason, being is because that's appealing to Popularity and Authority etc.
A link is different to a button. It does different things. It always has and it always will. I don't think we should trample on those differences or try to ignore them.
In the end, we agree to disagree. That's okay. I am still going to follow your work closely (obviously) :)
The good news is that out of all the silly things people design and build on the internet, we still haven't broken it yet (yet!).
This is the wrongest thing I've ever read.
Ix Techau, 7 years ago
"There is this belief that the hand cursor means “clickable”, but this is incorrect and potentially problematic"
Umm...if the belief is that it means clickable, then it means clickable. UX is about recognisable patterns and usability within those patterns...so if most people associate the hand cursor with something being clickable, then that is what it should be used for to avoid confusion.
Bevan Stephens, 7 years ago
I'd like to see some user testing on this, I'm not sure that the majority users would see this as a problem. They might actually find the extra affordance an improvement.
Adam Silver, 7 years ago I'd like to see some user testing that shows a well designed button with the addition of the hand cursor helps the user understand that it's a button before and during hover.
Well written but so very theoretical. Except for some technical and somewhat cryptic semantic meaning that only nerds care about, there isn't really any negative side for users of having the pointer cursor in everything that's clickable. At worst it won't bother, at best it will help them when the hover state is not clear enough.
Adam Silver, 7 years ago (edited 7 years ago ) I'm not saying that it is necessarily fatal when looking at an individual interaction (it isn't).
But of course an experience normally comes down to many interactions big and small.
If u take a look at what designers and developers have done to the web. It's still not broken :) Just about anyway. Users persevere. They have a limited supply of energy. Every little cognitive burden tires them out. Etc
There is also the case of a learned behaviour. Now that the hand cursor has been override so much for so long it's now the "done thing".
Like web pages that are totally broken when not in chrome. They are now the done thing. Users are used to that too :)
But at the end of the day the hand does not mean clickable. It means link.
Jordan Little, 7 years ago (edited 7 years ago )
You're catching some flack on here, but Gmail (off the top of my head) has stopped using the hand cursor in their UI. Mousing over any of their UI buttons gets you a default cursor while hovering a link in the body of an email gets me the hand cursor. The web is indeed moving to a more native-app experience.
I'm not sure I agree with what you're saying as a sweeping, general rule, but if you look at some of the big players in UI, they're doing exactly what you're recommending here.
Thanks for posting.
Edit: After checking out a few more apps, I'm not sure there's a trend to be found. Even Google Docs is inconsistent with Gmail on their usage of cursors. I'll certainly be paying more attention to it now.
Adam Silver, 7 years ago Thanks for your comment. There are good and bad examples all over the internet. But one thing, just because Google or whoever does or does not do it, does not make it wrong or right etc.
John Jackson, 7 years ago I respectfully disagree with this article. The last thing that you want to do is force your users to analyze an element to determine whether or not they can interact with it. As a user, I should not have to think about whether or not I can click a button.
The "hand" cursor ensures that users know they can interact with an element. It shouts "Hey, you can click me and I'll do something!" The hand cursor is already widely associated with "I can click this." Therefore, changing that will cause confusion among your users.
You don't want users to have to think. If you design a website with elements that leave your users confused, you need to reevaluate your decisions.
We're here to solve problems, not manufacture them.
stephen f, 7 years ago
Although you make a good point I think that most users have come to expect almost any clickable item to have a hand cursor, so removing it could potentially confuse... plus the functionality are now pretty blurred between a standard link and what a button actually does, most being just styled links these days, and most users just seeing btns as an emphasis link unless explicitly stated (like a download btn).
Adam Silver, 7 years ago Buttons are often overriden (hence the article) much less often labels. Glad not much else; everything else typically left alone e.g select boxes, input elements, text, imagery etc.
Kyle Donmoyer, 7 years ago
I think your hand cursors should come with an arm attached to it, because this is a MAJOR REAAAAAACH. Trying too hard to "write an article every day" or something.
Eduard Giménez, 7 years ago
After reading it I think we should be more liberal on the use of the hand cursos, specially in OS X. Now I'm annoyed that the red/yellow/green balls, the icons on the desktop or the menus don't have a hand cursor.
Adam Silver, 7 years ago Oh dear :)
Jim Silverman, 7 years ago
i agree with this. what's the harm in the additional affordance of the cursor?
Adam Silver, 7 years ago The article explains that that hand does not mean clickable. It means link. Thats the harm.
all of the buttons i clicked to reply to your comment used a hand cursor. while your argument does hold some weight, it has become nearly ubiquitous practice to use the hand cursor for anything clickable on the web. i don't think anyone feels confused or harmed by this.
rather, i'd say that the examples in the article are less usable for not using the hand cursor. users must rely on designer-created CSS to determine if an element is clickable or not. google, for example, does not have a hover state on it's clickable user avatar that unveils vital account controls. now that's harmful.
maybe it would be more beneficial to revisit the default behavior of buttons, rather than limiting cursor usage to hyperlinks.
Sander Visser, 7 years ago (edited 7 years ago )
And there we go again on DesignerNews. Someone writes an article with a different point of view than most of the 'community' and he gets shit from 75%.
I'm glad some of the people here were able to type a reasonable comment, discussing what points Adam made or explaining why they think he's not right.
For the others, they who question Adam's job title, ask him if he actually has a job or post 'funny' gifs, I hope you see that you're not bringing any value in to a reasonable discussion about something related to our field.
Responses like these occur way too often here in my opinion. And to be honest, a few more of these and I'm out of here.
PS: Adam, I enjoyed your article and see your point. I actually never realised buttons on native systems didn't have hand cursors. Although I'm not sure what would be best on the UX side of things, I think it's a legit question to ask.
Adam Silver, 7 years ago Thank you for the support Sander.
Terry O, 7 years ago
Here we go again. Someone puts up a questionable concept, responders pick it apart, and then some gallant hero rides in to the criticise the critics. Rinse and repeat.
Yep, this time it's me, because no one else did it yet. Do you prefer that this whole community likes to bash on each others opinion?
Next on Medium!
Michael Goldkamp, 7 years ago
I wish DN had a downvote button. I would click that hand cursor so damn hard.
Tim Silva, 7 years ago
Great article Adam, thanks for sharing. :)
I got into design in 2004 when flash was in. I first seriously considered cursor states and affordances when I noticed that the hover states for buttons in flash (in both Mac/Windows) were different than from what users would see in standard HTML links. Anyone remember this?: http://i.imgur.com/F0698H4.png
Back then, I discovered that you could disable that cursor state when hovering over buttons in flash, and then I later learned that you could do the same with CSS. You can even add "text," "help," "move," "default," etc. I have always made sure to use these whenever possible for mouse-based web interfaces, even thought they seem to be uncommon, nice-to-have details. Luckily, the CSS specs and all modern browsers let us actually actually choose with ease. Unlike some of the hacky JavaScript methods that we often used to hide the real cursor and show a kitten paw or something cheesy instead.
While this has always been on my radar, I never gave much thought to what your thesis is about the distinction between links and buttons, and I think you make some really sound arguments here. I often build what a user/laymen would a "button" with an a/link tag rather than a button element. So by default, these buttons inherit the pointer state. While I can also think of many reasons why this is beneficial, I will definitely consider that the cost of leaving it that way may minimize the significance of actual links. I think that each web interface needs to have its links and buttons clearly defined before any of this tweaking can be made, at that distinction might not always be obvious.
I think that whatever designers/developers end up choosing, consistency is arguable the most important quality.
Adam Brace, 7 years ago Its kinda ironic that the buttons on Adams website have a hand cursor
Adam Silver, 7 years ago They don't Adam.
Adam Brace, 7 years ago http://maintainablecss.com the main CTA button has a hand cursor
Connor Norvell, 7 years ago
All of them except the email sign up button have hand cursors
Calum Smith, 7 years ago
His whole point is that isn't a button. It's a link, and it takes you to another page. Therefore, hand cursor.
Stuart McCoy, 7 years ago
But it has the perceived affordance of a button, therefore it should not, according to his theory, use a hand cursor. If he were to really follow proper UX, those should be styled to look like links, perhaps with an arrow after them if he wanted them to be more graphical, instead of buttons.
I don't really know what you mean by perceived affordance, outside of just appearance, but:
When a button has the hand cursor, it subtly and subconsciously misleads the user to believe they are interacting with a link when they’re not.
In this case, they are interacting with a link.
He styled these links to look like buttons (perceived affordance), instead of links though. It doesn't matter what the underlying code says they are, the perception to the user is that these are buttons that will perform some action, not open a link. Therefore he should have switched the cursor to a pointer.
Adam Brace, 7 years ago Exactly.
Overall I believe that many users 1. Don't understand these differences 2. The hand cursor gives them satisfaction that they can click here.
Adam Silver, 7 years ago They are links, that would be why they have the hand cursor, as per the article.
And you call yourself an 'engineer'. You stuff is weak.
Matthew R. Miller, 7 years ago
No need for that shit.
Very true.
Be nice. Or else.
Adam, how do you have a job?
He's a UX Engineer, don't you know? Engineers are more special.
Tristam Goch, 7 years ago
My gut says at this point users associate the hand with meaning interactive in the context of the web. I'd be all for seeing some testing on this though.
Also be interested to get some thoughts on how you would apply this to the different types of button (i.e.
<a class="button">,<button>,<input type="button">). Sometimes it makes sense to style an anchor like a button, but it's behaviour is that of a link. Does it make sense to give it acursor:pointer;because it's a link, or should it behave like your other buttons, and show a default cursor?Adam Silver, 7 years ago (edited 7 years ago ) <a>is a link regardless of the class attribute.The question of links being styled as buttons is an interesting one, one that I have thought about a lot.
It basically comes down to making links look different to buttons, because typically the behaviour is different.
The way this manifests will be different based on the project/website/brand etc.
P GB, 7 years ago
because typically the behaviour is different
Ignore the fact I'm a designer. Explain to me as a user why the behaviour is different?
It's different to us, because we know a form submission not the same as linking to another page.
I have a hard time believing an average user would notice the difference between the two. They navigate far faster, I suspect they pay less attention to detail than Adam seems to think.
Yeah, thats exactly the point I'm making. I agree.
This post is going over a whole lot of heads. The point is that buttons and links are and do different things. You can put a roundrect and a background on a link, but that doesn't make it a button, at least not in the sense he's talking about. A hand cursor tells the user that it's a link, and it's going to take you somewhere else.
Darrell Hanley, 7 years ago
I think the question is do common users on the web associate the hand cursor with links exclusively, or do they just associated it with interactivity. I definitely feel like this would be a stronger argument to make if it were 1997, but minus any actual case study which shows that dropping the hand cursor somehow improved user experience, its definitely moot, especially since most online activity is done on interfaces that don't have cursors at all.
Siddharth Gupta, 7 years ago
I'd modify this claim a little - Buttons shouldn't rely solely on the hand cursor to communicate the "clickable" affordance. Users should be able to tell if it is clickable without needing to hover on it.
I'd argue this is an example of designer-focussed design, rather than user-focussed. User's don't mind or care, only people who notice are designers, but even then i'm not so sure. Lots of other more important things to solve.
Adam Silver, 7 years ago I agree Terry, that on it's own it's not going to be fatal. It's just one of many little things that can eventually fatigue a user. A well-designed button does not need a cursor to change to a hand.
Jordan Singer, 7 years ago
This doesn't hold for the browser. Buttons are generally links.
Adam Silver, 7 years ago No, input=submit or button is a button. An a is a link etc.
Lucian Marin, 7 years ago (edited 7 years ago )
Tabs are buttons and links at the same time. They redirect people to a different page unlike on desktop software. This just one example where your theory doesn’t apply.
Also, what if a input[type=submit] redirects the user to another page after form is submitted?
Duke Cavinski, 7 years ago
I really do not follow how this is "problematic" at all. I've never in a single UX study or interview experienced a user being confused by a hand cursor doing something they didn't expect it to.
Adam Silver, 7 years ago Have u ever experienced a test/study that showed that a well-designed button without a cursor was harmful?
No Name, 7 years ago
I think there needs to be clarification on what is or is not a button.
anthony thomas, 7 years ago
This author is so unclear and I find his justification weak. Is he suggesting that ALL BUTTONS including ones on websites shouldn't have a hand cursor or just buttons on operating systems and browsers?
If he's suggesting the former then he is wrong. Buttons on websites should have hand cursors because it distinguishes clickable graphic images from non-clickable ones. A site has so many graphics and text that it needs this distinction.
For example, if you go to apple.com you will see a bunch of product images. There's no hover effect on them only a hand cursor. If you removed that hand cursor most users would think that it's just a static product image.
Adam Silver, 7 years ago Would that be an image wrapped in a link by any chance? :)
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now