Draggable canvas

Question

I have a draggable canvas, in the way that the user will have to navigate by dragging the surface, but how do I inform the user that it is actually draggable?

So far I have an open hand when not dragging and a closed one when dragging, like this one:

But is this sufficient? Do I need any other hints?

Answer 1

In their book Designing Web interfaces, Bill Scott and Theresa Neil devote a whole chapter (2) to drag and drop. They talk about interesting moments, where there are at least 15 events and 6 actors, which they plot onto an Interesting Moments grid template. They provide a lot of material on drag and drop, including here, including the interesting moments grid template: http://designingwebinterfaces.com/helpful_resources

One of the initial interesting moments is mouse-over, and changing the cursor icon is just one of the ways to signify draggability. For example you could also change the styling of the object to be dragged, e.g. border or fill, and/or drop shadow (to signify the object is being lifted of the page).

Bill and Theresa also recommend providing an alternative way to accomplish the the dragging goal for people who choose not use a mouse. Because you are moving a canvas you would normally use horizontal and vertical scrollbars as the mouse drag alternative.

Also there are at least 5 primary patterns which dictate which interesting moments you need to think about. I definitely recommend reading this book because it would take too long for me to type it out here ;-)

Answer 2

There are multiple ways you can show draggable feature.

• The hand cursor - This one you are already using.
• The move cursor - This is helpful when you are indicating that a title bar is movable. This should be used when the primary action on an object is that of movement. Otherwise, it can create confusion.

• There is a grid of dots which visually indicate a movable/draggable component. This is a clear indication without the cursor hovering on the control. Following screenshot is for example only

• There is a less intuitive way which ads a drop shadow for the canvas and visually indicates a different z-axis. This should be used in combination with the options above, which clearly shows that the content is draggable.

I hope I have been of help.

Answer 3

In general, when something is draggable and droppable it's easy to understand it. Per example when a new user user came on your website or app... you can show a small box to show to users that your canvas are draggable, just to be sure that if people want to use Drag & Drop they don't have to look if they can or not.

Custom pointer seems to me a good idea, there is no such things on Google Drive and yet open and closed hand are pretty obvious.

Also, you need to select an other way to move your canvas than Drag & Drop, to let choice to users. Eg: For upload a file you can Drag & Drop or Browse your files, in a different way you have to provide different kind of usability.

To get back to your main question, in my opinion, custom pointers are efficient but I think you will need an other hint to show Draggable Canvas. But as always, it depends of the kind of people you are targeting. Who will be your users ?