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?
-
Related: ui.stackexchange.com/questions/216/…– Patrick McElhaneySep 1, 2010 at 23:18
Add a comment
|
2 Answers
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.
-
5+1 for the "drag handle" approach (ala Gmail). The icon with the arrows in the first example is the kind of visual metaphor I would use for resizing -- not reordering. Sep 1, 2010 at 21:36
-
I like the Basecamp method, but it is best used on vertical lists of items because the icon points up and down. A traditional drag surface applies to a less restricted drag and drop, but it isn't as obvious what it does. I believe the most important part is the cursor change. It is easier for the user to notice their cursor changing shapes as they move around than for them to recognize what a few dots or some other icons mean. Sep 1, 2010 at 21:51
-
@LoganGoesPlaces Yeah. I posted these examples because the question is about reordering rows in a table, which implies the vertical constraint.– RahulSep 1, 2010 at 22:02
-
1
-
As long as your layout is not overcrowded, multiplying the hints does help users figure out what features are available.
In addition to the drag handles, you might therefore want to add a "Drag rows to reorder" caption near the top of your table.
