User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
References:
The move cursor should be used when objects are just being rearranged (translated) without any alteration to their properties other than position. For example:
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:
Examples of drag vs grab operations
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.
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.
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.
