Most intuitive way to offer manual sorting?

Question

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 09 '11 at 15:02

score 4 · Accepted Answer · answered May 07 '11 at 22:37

4

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.

answered May 07 '11 at 22:37

NocturnalDev

106
2

Any data on this or just gut feeling? Because my gut feeling is that most users just don't get this. – Phil May 09 '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

score 3 · Answer 2 · edited Feb 24 '12 at 10:01

3

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

edited Feb 24 '12 at 10:01

agib

2,203
15
23

answered May 12 '11 at 23:14

solarc

141
2

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

score 1 · Answer 3 · answered May 07 '11 at 05:07

1

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

answered May 07 '11 at 05:07

bendur

2,134
1
14
14

There are no columns, I'm looking to do a manual sort, not an automatic one. – Jack M. May 09 '11 at 15:01
Oops, looks like I misread your post. Please disregard. – bendur May 09 '11 at 15:25

score 1 · Answer 4 · answered May 07 '11 at 23:39

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.

Phil · Answer 5 · 2011-05-09T16:12:52.263

1

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

edited May 09 '11 at 16:12

answered May 09 '11 at 15:58

Phil

8,084
3
31
60

Most intuitive way to offer manual sorting?

Google Docs / Spreadsheets / Forms:

jQuery UI:

Up/down buttons:

5 Answers5

Linked

Related