Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Related: ui.stackexchange.com/questions/216/… –  Patrick McElhaney Sep 1 '10 at 23:18
add comment

2 Answers 2

up vote 21 down vote accepted

37signals' Basecamp does a great job with this:

Basecamp's drag indicator

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 tasks drag indicator

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.

share|improve this answer
4  
+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. –  Mike Strobel Sep 1 '10 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. –  LoganGoesPlaces Sep 1 '10 at 21:51
    
@LoganGoesPlaces Yeah. I posted these examples because the question is about reordering rows in a table, which implies the vertical constraint. –  Rahul Sep 1 '10 at 22:02
1  
Oh it's definitely a +1, great answer! –  Dan Barak Sep 1 '10 at 22:08
    
Thanks! Does anyone have either of those "grab" images? –  Adam Sep 1 '10 at 23:53
show 4 more comments

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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