Best way to reorder long list of items

Question

I'm currently working on reordering items in a list. The tricky part though is that I need to be able to reorder up to 100 items. I have some solutions in mind but the design will break once it tackles probably more than 20 items. This would lead to a very bad experience for users. Would love to get your thoughts and ideas on how to allow reordering of a long list of items.

Some solutions I thought of:

Option 1: Drag and Drop to reorder items

As you can see, it would be hard to drag the items up to 100th. Scrolling would be a pain as well. It would be great if you could share your thoughts for better ways to use drag and drop.

Option 2: Arrow Button Up and Down to reorder items

Reordering works here when you click the arrow up and down. The issue here though is when you reorder items that are too far apart, like if you want to move Item 98 to Item 2.

Quick solution to solve this is through pagination where we only show 10 items per page at a time. Reordering just happens within that though. So the problem there is when you reorder items from other pages.

Option 3: Using drop-down to select position of the item

Would be very happy to hear your solutions. Thanks!

Update: I'd like to add some context on the use case for reordering this long list of items as some might wonder what this is for. This is use for a questionnaire that has a long list of questions. Drag and drop might not best suited for the persona of the users thus, I'm exploring some options and alternatives. Thanks to everyone who have shared their solutions and suggestions.

Answer 1

Before you go on reading, maybe you want to explain (in your question) a little more about the use case... I'd be very interested to get more information why anyone should be tasked with manually sorting 100 entries.

• If I got the requirement to design a page where the user can manually sort 100 items, I would go back and question the requirement. I mean, how much load do you place on a user asking these questions: "Is item A really on rank 94, or is it on rank 95?" Maybe you can use automatic sorting based on an attribute, maybe the real requirement is picking the best five as favorites, ...

• For the less-than-5%-chance that the requirement really is to manually sort 100 items,

  • make sure they are always completely visible (might mean that you have to buy new monitors for your users ;-) Sorting pages separately and merging them later is an old computer sort algorithm (merge sort), but I think it has fallen out of favor even for algorithms.
  • add a lot of personalizable columns. I would guess users will need a lot of contextual information (attributes) about the items to be able to make 100 decisions about which should be ranked higher.
  • add as many different ways to reorder as you can. For long-range moves, users will need the "to-top" and "to-bottom" functions, as well as the possibility to enter the new position (don't use drop-down boxes, as 100 dropped-down number will down your users as well; use a number entry field). Be sure to include the rank per item, so the user can identify which number to enter as target. For short-range moves, the "one-up" and "one-down" are needed as well, of course. Drag-and-drop is nice of mid-range movements.
  • provide keyboard access. As I think this is a "5% use case" (i.e., very rare), I also think your users are using computers heavily. Those users still like keyboard support. In addition, moving items around means your mouse will have to follow if you need to nudge the item up a second time. The position of the keys stays the same.
  • keep the visual presentation of the list very stable. If the user changes the sequence somehow, only change the presentation for the changed items. Do not redisplay the entire table, even if it is redisplayed at the same position. The flicker (or worse, flipping back to top) will disorient your users and let them loose their position in the list.

Answer 2

Sorting long lists is not all that unusual. The most common case that I run into it is with music playlists.

My recommendation is: All of the above.

When you have a lot of items that need to be sorted, you should provide a lot of assistance by way of tooling.

For short lists or items that need to be rearranged close to one-another, you should provide drag-and-drop support. Keep in mind that this will be inaccessible to certain users, so you will also need to provide sorting buttons that can be accessed via keyboard controls.

You will need "sort up" and "sort down" buttons, but it's also helpful to have "send to top" and "send to bottom" buttons.

Then, after all of that, it's also helpful to be able to move a specific item to a specific position.

This is commonly done by providing a number field in between the "sort up" and "sort down" buttons:

----                 /\
----   Item Name    [##]
----                 \/

Some other sorting features that can be helpful in specific circumstances:

• Sorting mode that must be toggled on to prevent accidental drag-and-drop
• Quick-access sorting buttons to reset the sort to some trivially programmable dimension (alphabetical, date, etc)
• Group selection with drag and drop so that many items can be sorted as a unit (As a quick example: Chrome's browser tabs can do this via Ctrl+Click)

Answer 3

I've (unfortunately) had to deal with allowing users to reorder fields on a form... some of those forms get ridiculously long. In this scenario, I needed to optimise for occasionally moving a single field or group of consecutive fields to a new location, not reordering the entire list.

There's a couple approaches that helped:

• Your standard drag/drop for short-range reordering.
• The ability to cut and paste after or paste before other fields. This was more intuitive for users used to a GUI. This can alternatively be a move to before/after..., or mark for move and move here.
• Assigning each field an index the user could see and manipulate. A gap of 10 between indices (10, 20, 30, etc.). The more technical users could use this as a shortcut, by entering a value such as 25 to place between 20 and 30. (Indices get regenerated whenever the order is changed.)
• Encouraging users to create logical groups of fields wherever possible, to reduce the number of elements on each level. The ability to cut and paste inside helped here.

Answer 4

Netflix has a lot of experience with this, because users who still subscribe to their DVD service need to be able to reorder their queues. They have changed their approach many times, which tells me that the problem is actually a hard one. Some points about their current approach:

• When you add something to the list, it starts out at the end, but you are given the option to move it to the beginning.
• You can drag entries up and down.
• If you click on the drag handle, a small box pops up where you can type a number for where you want to move it to in the list. (I think this is preferable to having a long pulldown from which to select a number.)
• They don't have buttons to move up and down one row at a time.

So they offer multiple approaches. If you think large moves in long lists will be common, I really don't see a better approach than letting the user type a destination index for the row being moved.

Answer 5

As virtualnobi says in their excellent answer, you need to decide if the user really needs to manually sort the whole list.

However, if they do I would like to point to the example used on the Premier League Fantasy Draft website. It’s a fantasy football game, where users can save players for later referral and can manually sort their order. Major things to consider:

• Always display all items (paging makes it very awkward, scrolling is preferable)
• Provide plenty of options
• Auto sorting (based on whatever metrics you have; this will allow the user to quickly get a rough estimate)
• Filtering options

The reason I point to the Premier League Fantasy Draft is because they allow you to reorder, while you are filtering, and I think it’s a great implementation.

For example:

Initial List:

Filtered to only show “MID” (Midfielders):

At this point the order of the complete list is still displayed (Priority), but the user can sort this filtered list and make an impact on the overall list.

For example, the user can move Snodgrass from 4th in this list (7th overall) to 2nd in this list, which puts them 4th overall, which is an average between the 2 players they’ve just put them between.

Answer 6

That sure is a strenous requirement. Assuming, somebody has to manually sort 100 items, I would prefer to make it a game for the user. Have you seen this puzzle toy for kids to arrange numbers in ascending order. My suggestion is to make it something like that.

• Divide your screen area into 4 parts - each part able to hold 25 items => 100 items together on screen. Always give complete data to user to manually sort.
• Provide drag and drop functionality, it is easier than clicking > 100 times to accomplish a task.
• Should the sorting be done in one go, i.e can the user can come back and start from where he has left? It would be useful to save the state if that is possible, since even a game which is repetitive, is boring. Giving points after finishing 10 items or so would be a good strategy, in that case.

^{download bmml source – Wireframes created with Balsamiq Mockups}

This approach has the advantage that user will get a validation, how much he has completed.

Answer 7

Something that might work well for this situation (getting people to produce a ranking of a large number of items) is a kitten wars-style instrument where all the user has to do is view pairs of the items and choose which of the two gets the higher rank. There is code out there to implement this with. It would choose which pairs to show the user and after a sufficient number of pairs have been evaluated, the full 100-item ranking can be calculated based on their responses. It's fun and easy because the user only ever has to compare two items at a time.

Answer 8

Alright, I think my approach hasn't been covered by the others:

"So this is use for a questionnaire that has a long list of questions." So, you want the user to weigh which answers they think are more important. Something similar I can think of is the Voting Helper used heavily about every election in my country (Netherlands). In it, you answer questions "nuclear energy is better than wind energy" "Defense should get more money than Healthcare", and then you assign which of these you find more important. Implementations differ.

So if the use case is anything like this, the exact spot (out of 100) an item is doesn't matter all that much, and it is easy to compare two questions by importance. So do that. Keep asking questions "which would rank higher, question XA or question XB?", which are easily answerable, until you can establish a sufficient ordering on your items. You probably don't need to know the exact ranking of every item, so you can stop after you have figured out what the top 25 is, and then only ask questions to sort those. Or you could make the user stop whenever he wants, and for you to work with incomplete data. Better than no data.

You need to ask at least 100 questions before you have any shot of a complete ordering, but they're simple questions. Otherwise, you would have to answer 100 questions too, except in the form of "What rank do you think question XA should have? XB? XC?". Those are hard, because you need to have an overview of this item's importance compared to the other 99.

If the exact order is still of great importance, you can at least make a pretty-much-sorted list out of these answers, (like compare 50 pairs, then compare all the winner and lose pairs, so you know the top 25%(that 'won' both matches) and the bottom 25%(that lost them) after just 100 comparisons). Then show it to the user for the final touches. Most items won't need to move a lot.