I have a table on a web page where I need to let the user reorder the rows. I was thinking of letting the user drag the rows to reorder them. But how would I let the user know that he could do that? Should I make an empty cell as the first column with dots or vertical lines like gmail has for each email in the inbox? Where can I get an image like that? Do I use a "grabbing hand" icon for the cursor or a "move" cursor? Do I show the cursor while hovering over the table or just the "grab area"? Do I let the user grab any part of the row to drag?
Answer
37signals' Basecamp does a great job with this:
When hovering over an item, controls appear to the left of the item. One of the controls is an up/down arrow. When hovering over that control, the mouse cursor changes into a move cursor. Holding down the mouse button moves the position of the grabbed item on the vertical axis corresponding with the position of the mouse. Releasing the mouse button drops the item in the nearest acceptable position. The position of the item being dragged is constantly updated on the screen so you know where it is.
Gmail's Tasks feature handles it a bit differently by showing a drag surface to the left when you hover over an item. Hovering over the drag surface changes the cursor into a hand icon (not a grab icon, which is a closed hand). Further behaviour is identical to Basecamp.
For more information on this pattern, consult the Yahoo Design Pattern Library and refer to the interesting moments storyboard grid.
No comments:
Post a Comment