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.

This question already has an answer here:

all. I'm designing an online form builder (think Forms in Google Docs / Spreadsheets). The functionality is complete, but I'm not happy with the sorting capabilities. Everyone that I have done usability tests with (five or so, including myself) didn't realize that the items could be sorted.

This leaves me with a question: Is there a best practice / most intuitive way to present a list to be manually sorted?

As a few examples:

Google Docs / Spreadsheets / Forms:

Google's method is to have almost no indication that the items in their Forms can be sorted. They use cursor: move; in their CSS to indicate that it is moveable, but nothing more.

jQuery UI:

jQueryUI's Sortable is fairly similar. Almost no interface, save for a double arrow on the left hand side. This is what I am currently using which is not being recognized by users.

Up/down buttons:

I can't think of any examples, but I have seen sorting using [+] and [-] buttons. This seemed to be easy for users to pick up on, but meant the possibility of requiring n-1 clicks to get from the bottom to the top.

share|improve this question

marked as duplicate by Charles Wesley, Code Maverick, 3nafish, dhmholley, Ben Brocka Jul 7 at 14:30

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

    
I would agree that is probably a duplicate. marks comment as correct? heh –  Jack M. May 9 '11 at 15:02
add comment

5 Answers 5

up vote 4 down vote accepted

Displaying a "grip" pattern at one side of the item, combined with the "move" cursor is fairly obvious to moderately savvy users.

Up/Down arrows are an option too, but that obviously falls short of powerful when you can only move one position at a time.

share|improve this answer
    
Any data on this or just gut feeling? Because my gut feeling is that most users just don't get this. –  Phil May 9 '11 at 16:11
    
That is also my feeling, Phil. But it is the most common implementation, and thus far the best reply here. –  Jack M. May 13 '11 at 16:13
add comment

The column headings need to look clickable, either by making them look like links (underlined, color) or by making them look kind of like buttons (gradients and/or shadows to make them pop out a bit).

Definitely turn the cursor into a pointer when hovering as well.

The column that you are currently sorting on should either be highligted in a different color, or maybe bolded, along with an arrow showing which direction you are sorting (ascending or descending).

Windows XP and Mac OS X do this similarly: Windows XP detail view sorted by type, ascending

share|improve this answer
    
There are no columns, I'm looking to do a manual sort, not an automatic one. –  Jack M. May 9 '11 at 15:01
    
Oops, looks like I misread your post. Please disregard. –  Ben Durnell May 9 '11 at 15:25
add comment

I can't for the life of me find a good example of it, but I know there's a website I visit semi-often that has a good UI cue for drag-to-reorder. It's basically a combination of a two things. The first is a hover state on each row; like Twitter, each row is normally a light colour, but the row your mouse is directly over is darker.

Twitter's UI

The second is a handle, an indicator (on the left side, in this case) that shows that it's "draggable", this was a half-centimeter-wide hatched line on the left side (again, darker when the mouse was hovered over it). You can actually see a similarly-draggable handle in the edit boxes on UX when you answer a question :)

An interface handle

It's like a grip, something textured which indicates to the user that it can be "grabbed." It fits nicely with the metaphor. Up-down arrows on the top and/or bottom would also push the metaphor along.

share|improve this answer
add comment

I think the most common indicator used to show that a list element is draggable, is the same one Apple uses on iOS (Phone > Favorites > Edit):

Phone - Favorites - Edit

Still, I think this is not understood by many users. So I would probably go for something like this:

move link (switch to move or hand cursor on mouse over).

Hope that helps, Phil

share|improve this answer
add comment

I like the 8 dots on each row Gmail uses in the left side of the conversations list to show messages can be moved (combined with the hand cursor too):

Gmail UX

share|improve this answer
1  
Interestingly Gmail have recently changed it to 3 dots that only appear on hover. Would be interesting to know why. –  benb Feb 24 '12 at 10:25
    
The cursor also changes to a grabby hand when to the left of the star and not over the checkbox, which helps make the move capability more obvious when a user might be aiming for the checkbox to apply a label. –  Karen Feb 24 '12 at 20:25
add comment

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