3

What is best practice for cursor pointer choice when hovering over a chart that contains interactive elements? It currently seems to be the standard pointer which does not inform or educate the user.

As an example, google "AAPL stock". The chart is interactive however the cursor does not inform the user to this. In fact, the only reason you would learn of it would be serendipitously (as I did).

As there are a limited number of standard CSS cursor:pointer styles, does this also afford the creation of a new cursor:pointer property for this use case?

enter image description here

This discussion is specific to charts containing interactivity. This does not relate to buttons, dropdowns, links or the like.

2 Answers 2

2

it depends on what kind of interactivity. as each will be best represented with a different cursor icon when hovering over it. So it depends what kind of interactivity does your chart have. looking at the collection of icons i can see a few interactions relevant to some of them.

-editable text field.

-adjustable column, row width, height.

-scalable object/cell

-select object

-move object

1

This is a design choice by Google and you should ask them about it to be sure. Good chance they thought the hover elements on the chart are enough to make clear that interaction is possible. If you have doubts and think it isn’t clear enough, do some tests with people around you.

Here's my advice:

For a web application I would recommend to stick with the default arrow and hand cursors. Other cursor types may be used by the operating system, but they are usually not suitable for web applications, it's a different context and people are not used to them there. If an action involves a click, on a web page that is best communicated with a hand cursor. As an example: I am working on a web application with charts that can have three different interactions:

  1. Hovering an item provides more information but the item is not clickable: The cursor is the default arrow.
  2. Hovering an item provides more information and the item is clickable (navigating to a detailed view): The hand cursor appears.
  3. An item doesn’t have more information on hover but can be clicked: Hand cursor

And what about drag interactions?
In the application there are also draggable elements like a list that can be sorted. The items in that list can be dragged by a handle (using the familiar icon with three stripes) and when that handle is hovered the hand cursor appears. It also has a tooltip with the explanation that it should be dragged.

I decided to make all elements that need to be clicked (short, or long for dragging) show the hand cursor on hover to make the click interaction clear and consistent. This application is desktop only.

Last but not least:

There are always exceptions. If you are sure about using other icons, use them sparingly, try not to overwhelm users with al kinds of cursor types from which they can only guess what they mean in that particular situation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.