22

I am making an app with a drag and drop UI. I plan on changing the cursor when hovering over the draggable elements.

What's the difference between the move and grab cursors?
Can they be used interchangeably?

Cursor: grab from MSDN Cursor: move from MSDN


References:

25

Move objects to rearrange them, grab objects to perform operations on them

The move cursor should be used when objects are just being rearranged (translated) without any alteration to their properties other than position. For example:

  • Rearranging shapes on a canvas
  • Rearranging items in a list

The grab cursor is usually used for drag and drop operations when the object is being manipulated to perform an operation which may alter it or create a clone. For example:

  • Dragging a file into a dropzone to perform an operation
  • Dragging an object into a toolbar to edit it or create a shortcut
  • Dragging an object onto a color palette to color it

Examples of drag vs grab operations

enter image description here


This is idiomatic use, i.e. while these are popular approaches to using the two cursors, they aren't formal standards and in practice designers may stick to the arrow pointer for either or both use cases, or choose some totally different cursor.

  • 3
    Great use of graphics. – Danger14 Apr 7 '15 at 0:51
6

In many drawing programs, grab is used to move the drawing surface (canvas) around, i.e., to show a different part of it. This is called panning.

Move is used to move the selected object around within the canvas.

3

From my experience, the grab and grabbing cursor behaviour works when you need an explicit hover and click & hold behaviour for movable UI elements, which makes sense for desktop applications because these are standard cursor interactions. The move cursor tends to be used when there is no particular need to differentiate between the hover and click & hold behaviour for movable UI elements.

What this means for the user interaction design is that if the elements are clearly movable (such as list of elements that you can order) then you can use the move cursor since the user doesn't really have to discover which elements can be moved around. However, if your UI is a little bit more complex then the grab + grabbing pair facilitates the user hovering and discovering which elements can be grabbed and then apply the click & hold behaviour to drag it around.

If you are looking to adapt these patterns to mobile apps it can be a little bit tricky so my suggestion would be to make the UI as simple and clear as possible so you only have to apply the click/tap and drag behaviour without the hover/discovery behaviour. Hover/discovery is more easily accommodated for desktop apps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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