1

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: enter image description here

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

1
  • Can you add some context to the question? Is it a web app, what does the canvas contain, why is it dragged etc.?
    – jazZRo
    May 9, 2016 at 10:09

3 Answers 3

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 ;-)

1

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.

enter image description here

  • 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

enter image description here

  • 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.

enter image description here

I hope I have been of help.

6
  • Thank you for your comment! Maybe I was not clear enough in my post, but I am talking about a draggable canvas, not an element, instead of the traditional scrolling, the user has to navigate by dragging the surface
    – efrethe
    May 9, 2016 at 9:12
  • I agree @tessfred. However, visually, there is an area which offers the drag function. Balsamiq didn't allow me to perfectly show in the third section. I can give an example of Trello. Each card is currently using a hand cursor and entire card is draggable. I was just providing other variations.
    – Harshal
    May 9, 2016 at 9:16
  • Still, I don’t know if we are on the same page here :) I am talking about a way to navigate, like the way Google Maps use. By dragging the surface of the canvas you move to another place on the map :)
    – efrethe
    May 9, 2016 at 9:21
  • The hand is very well known. So User's mental model is already with you for it. The move icon comes next. Even Google Maps uses the Move icon at mouse down when you are moving across the map.
    – Harshal
    May 9, 2016 at 9:26
  • Okay, good! :) But would you say it is better with the closed hand or the move icon that google maps use? Although there is no hint on google maps saying the user can navigate by dragging the canvas, how do we know really??
    – efrethe
    May 9, 2016 at 10:20
0

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 ?

Your Answer

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

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