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.

Interestingly Gmail have recently changed it to 3 dots that only appear on hover. Would be interesting to know why.
–
benbFeb 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.
–
KarenFeb 24 '12 at 20:25

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.

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

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.