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 was wondering which hover cursor is the best choice for dragging elements in one axis only, for example in reordering elements among listing.
cursor: move; It has four arrows, so it's misleading, because there is only one axis available.
cursor: grab; It might be a good choice, but is it?
cursor: n-resize; etc. It looks like cursor:move but has only one axis, so it might be a good solution but it's often being used (like its name stands) for resizing.
What is your opinion?
I would use the move cursor.
The cursor should tell the user how can he interact with the element.
Move cursor: indicates that the element can be moved around while its siblings stay.
Grab cursor: indicates that an element can be grabbed (dragged to be moved). The element can be grabbed with its siblings, as in scrolled.
N-resize: indicates that an element boundary can be displaced, commonly used to resize. This cursor has probably been used as the Move cursor but to indicate the movement is only done in one axis. But as far as I know, this cursor doesn't indicate movement of an element but of its edge.
Maybe, you can create your own custom design for the cursor or use icons* which are available online (image / icon banks) and set the CSS property. 'cursor:copy' can also be considered.
*Images may be subject to copyright.
I think you can choose the suitable cursor by handling these topics:
1) Do the user know he can move the elements? Probably it's mentioned in the action title, instruction - but they are overseen likely. Thus the grab/move cursor should do the job. The resize could be misleading
2) Do the user want do reorder ? This strongly depends on the meaning of the elements to reorder. Thus they are in order and can be reordered (in one axis) I do not now whether the user want to try to arrange them in nonlinear order. Why should he? There is no top10 list with parallel items :-)
3) Does the user need to be taught there is only one axis? see 2). I think the human / users mind is fast enough to see there is only a linear order an he can drag and drop the items to the desired order.
In my opinion this leads to the grab icon. This is the most intuitive for the first action (Drag / Grab / Pick up) and the user will rapidly see what to do with this in the second action (move in one axis)
Grab and Grabbing cursor icons are one solution, but these are not supported by all browsers consistently.
However, the move cursor is also a correct cursor to indicated that something can be moved and is consistent in all browsers. It does not matter that this move cursor shows a 2 axis cross yet the movement is constrain in only one axis. This is because there are other elements of a drag and drop interaction which should be used to indicate movement constraints.
In Bill Scott & Theresa Neil's book "Designing Web Interfaces" they identify up to 15 events and at least 6 actors which you need to be thinking about:
Chapter 2 page 27
Events:
- Page load - before interaction occurs, you can pre-signify the availability of drag and drop.
- Mouse hover - The mouse pointer hovers over an object that is draggable.
- Mouse down - The user holds down the mouse button on the draggable object.
- Drag initiated - After the mouse drag starts (usually some threshold- 3 pixels).
- Drag leaves original location - After the drag is pulled from its location or object that contains it.
- Drag re-enters original location - When the object re-enters the original location.
- Drag enters valid target - Dragging over a valid drop target.
- Drag exits valid target - Dragging back out of the valid target.
- Drag enters specific invalid target - Dragging over an invalid drop target.
- Drag is over no specific target - Dragging over neither valid or invalid target. Do you treat all areas outside valid targets as invalid?
- Drag hovers over valid target - User pauses over the valid target without dropping. This usually when a spring loaded drop target can open up.
- Drag hovers over invalid target - User pauses over invalid target without dropping. Do you care? Will you want additional feedback as to why it is invalid?
- Drop accepted - Drop occurs over a valid target and has been accepted.
- Drop rejected - Drop occurs over an invalid target and drop has been rejected. Do you zoom back the dropped object?
- Drop on parent container - Is the place where the object was dragged from special?. Usually this is not the case, but it may carry special meaning in some contexts.
It is these other aspects of the drag and drop interaction which play an important part in communicating what you can or cannot do, so its not just about the cursor icon.
When the action is to "grab" the item with the mouse and button before dragging it into its new position, the most significant uncertainty the user has is whether s/he has actually "grabbed" the item. So I use the grab cursor for its quality of its feedback: pointer until the button is depressed, then grab cursor til the button is released.
It's much the same in the physical world: if we're going to move something heavy, slippery, or breakable our biggest issue is: do we have a good grip?
Use the "grab" cursor.
You are correct that the "move" cursor is misleading. With its 4 arrows, it generally indicates that an element can be moved freely in any direction, implying greater freedom of movement than your use case actually provides.
The "grab" cursor typically indicates that an element can be grabbed and moved in a linear direction, such as up and down.
