Using pointer mouse cursor shape on controls

Question

Microsoft

• talks about affordance
• https://msdn.microsoft.com/en-us/windows/desktop/dn742466.aspx

Google

• talks about navigational elements vs action elements

W3C

• The cursor is a pointer that indicates a link.
• https://www.w3.org/TR/CSS21/ui.html#propdef-cursor

According that, all the classic controls (buttons, checkboxes, comboboxes, etc.) should have a default cursor when hovering on them. The default cursor has the arrow shape.

Links in text and other graphics objects that are not intuitively clickable should have the pointer cursor. The pointer cursor looks like a hand.

Do you really use the pointer (the hand) cursor for links only? In my perspective, using the pointer on controls is a lot nicer while it appears to be not according to a guidance.

I don't get the Google's version as well.

Let's say that we have two buttons next to each other. One opens a new window and the second one clears a console. So semantically it means the first takes you to the new location (a navigational element) and the second one just clears the text in an existing window (an action element). The first button then must have the pointer cursor (the hand shape) and the second one just the default one (the arrow shape). That must be so confusing for a user.

Answer 1

On a device, e.g. traditional PC, where user input is indirect via a mouse or trackpad in another plane, the cursor is a proxy for the user's focus. Consider that on devices with touchscreens you rarely even see one because the user interacts directly with elements on screen.

The classic arrow cursor indicates to the user where they are on the screen. One might argue that a crosshair cursor would be more visually indicative for this role. However, the arrow is easier to see and is intuitive enough. That ideally should be its only role. But that's not reality! Personally, until seeing this question I never paid attention to what cursors Google was using in Gmail or Microsoft in web Outlook.

Having looked at both web apps and at Whether to use pointer (hand) over a button or just the default cursor it's interesting to see how and where the two cursor styles are applied. They differ in their use but neither seems confusing. (There is one oddity in Gmail: switching between the Primary and Social tabs seems to me a case for the "action" (arrow) cursor but they use the pointer. I suppose it does take you somewhere else).

I didn't need really need to pay attention since there are numerous other visual cues that let me know I can interact with elements on the screen. Buttons look like buttons (and certainly not like the minimalist aesthetic that has overtaken iOS where buttons look like links). So perhaps this is something not to worry about too much.Follow convention when it makes sense and otherwise do what you think is right for your unique UX case.

What's important is consistency. Whatever rules you go with, ensure they're applied across the board. If you have something messy or complicated, consider using stylistic differentiation, i.e. if, as in your example, there were two buttons side-by-side with different functionality, don't make them look the same.

Answer 2

If you are in doubt show a hand cursor on everything that is clickable.

For the web application I’m working on I have done a lot of observations and came to the conclusion above. We have almost no direct links so there are a lot of buttons. When we moved to a flat design I got curious if the default arrow cursor would still suffice. The design hints that it’s a button by it’s looks but it lacks the affordance of a button due to the flat design. This is what I observed:

People see the button, hover over it and hesitate a moment. Then they click; What else could they do? The hesitation is more like a second thought. If it is doubt than a tooltip can also help.

With a hand, there was no hesitation.

Now I use a hand for everything that requires a click (even drag handles on draggable items). Disabled buttons are styled like so but show the default arrow cursor to make clear there is no action possible.

On touch devices the above mentioned hesitation will be smaller or gone because a touch is different than having to hover before clicking. People expect something to happen when the cursor moves over something that can be clicked, whether it’s a tooltip or a hand cursor.

I'm not saying you should always use a hand cursor, there are examples where the default arrow shouldn't be a problem: If buttons are shown together in a group or if there is a space where consistently only buttons show up. If people are using the application a lot. Or if there is a need to differentiate between actions with an arrow cursor and links with a hand etc. Consistency is key and it all depends on the context, the users and the type of application. Our users for example are not tech savvy and the application needs to be learned quickly.

Have a look at this question and answer for an example in the context of charts.

Answer 3

Where did you read that pointer cursor shouldn't be used on controls?

The pointer acts as a proxy for the hand, allowing users to interact with screen objects much like they would with physical objects. We humans have an innate understanding of how the human hand works, so if something looks like it can be pushed, we try to push it; if it looks like it can be grabbed, we try to grab it. Consequently, users can figure out how to use objects with strong affordance just by looking at them and trying them.

https://msdn.microsoft.com/en-us/windows/desktop/dn742466.aspx

The pointer cursor (the hand) indicates that after click some action will be performed. And that is what the users are used to. If you don't put hand cursor on a button or other control (checkbox, radio) you will probably confuse the users because their mental model will be violated. They will expect to see the hand, and if they don't they might think something is wrong or it wont work, etc.

Don't worry and user the hand pointer cursor on action controls.

Answer 4

Introduction

First of all, great answers from everyone here, and a great question! I'm happy that people are genuinely concerned with such things! (My friends think I'm strange, I once got strange reactions at a camp fire for what I'm about to say) While I could rewrite many of what has been said already, I will instead add my 2 cents and hope it helps as well!

---

Reasonings

When it came to developing my own website I also had a difficult choice to make when it came to user friendliness and usability. As developers we natively desire our end users to understand what elements are interactive in nature and which are not, usually by indication of the hand cursor, however this method is flawed, as you've said, as it does not apply to other elements.

But there are fixed for this!! As in web design we find that by adding the CSS code given by the chosen answers in another post we ins that adding:

yourelem { cursor: pointer; cursor: hand; }

.. Is plenty enough to give the user that feedback, or is it? While it helps in desktop environments, it does not answer the question for mobile, which gets a little more complex.

Cross-Platform Support

I have managed to get my website mobile touch friendly by applying an opacity decrease during active states, as applied by my CSS sheets. Also, to get touch to activate the CSS styles I needed ontouchstart="" added to the body tag!

Using 2 Methods

Ultimately, I opted out into changing the default cursor implementation for my project, and added style changes for each interactive element for mouse hover, mouse click, and touch press. This solved my problem and made the entire site more intuitive to navigate and use! It was a complete win-win for both navigation experiences!

So while I personally added the hand cursor to any and all interact-able elements I did make said elements indicate that they were interactive on their own, thus providing enough feed back that they did something to the end user.

User Friendliness is Most Important

Because that's what is truly important here:

• That the end user may discover that an object can be used or not,
• that they get proper feedback upon trying to do so,
• that they feel a sense of awareness and usability.

Because there is nothing worse than pressing, or hovering over an item, especially if it says "click me" and it not changing to show activity..

Imagine this, a button with not feedback of current state is alike having a red button painted on a wall, only that in this case the red button actually works and defies understanding, and we don't want to confuse the end user, we want to help them.

So to answer your question (in my own flavor of bias):

• No, it is not important that the cursor changes, and the cursor style should be left alone.
  
  I recently had this same issue with a password "peak" feature and it changed my perspective. My advice is to explore the cursors available to you and use them whenever possible, if there is a cursor and changing it allows for more friendly use cases: GO FOR IT! My stance on the second bullet remains the same:
  
  

• It is important that the user can be shown, preferably before use, that the item in question can be used, via change to the element itself in some fashion:

  1. Fade it a little when the mouse hovers over it (or darken it, however you like)
  2. Fade it (or darken) a lot more when the user clicks on it (or touches it if on mobile, because there is no hover on mobile, yet - I hear it's in the works)

This will ensure that the user will be notified if it can be interacted with on mobile and desktop devices and will save everyone a lot of headache!

I am always eager to hear of new techniques! So please share your resolutions for this common problem!