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.

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

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.

  • 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

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

  • 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

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

  • 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.
    – bendur
    May 9 '11 at 15: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.

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.


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

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