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

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
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

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 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

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

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