In a grid, how to manually reorder rows?

Question

I wish to let my users reorder elements in a grid - not do automatic sorting on a column. They select which element is the first, which one comes after the other, etc.

I thought of and saw some solutions that might work depending on the case:

• Drag and drop: sexy but doesn't work for long grids with scrolling or paging. Another drawback is that it is invisible, you may not even know this functionality is available. Finally some dexterity is required. However it can be used to move more than one element at a time.
• Up/down arrows: understandable and easy to use for small moves, but boring when you have to move the last element at the first place. Also when you move an element a few steps, you have to catch that arrow after each single move. Works only on one element at a time.
• An index column: the user enters a number indicating the element's position. Useful when the user knows the desired absolute position. Difficult to guess what will happen if an already existing number is entered. Works only on one element at a time.

I am tempted to combine two of these techniques like the index column + drag & drop, but I'm afraid to cumulate the drawbacks of both instead of having the benefits of both.

What are the reordering techniques that have proven to work?

Answer 1

Netflix combines three methods in their queue. You can drag-and-drop, but also specify a particular row number, or click to move it to the very top:

What I find interesting about their approach is that they have put the "Top" icon (circled in green) right there on each row, as opposed to requiring the user to make a selection and then click somewhere at the top of the page, where most web apps put such icons or buttons.

In your case, I would use drag-and-drop, but would put a gears icon on every row:

This would permit several actions:

• The user can drag-and-drop one or more rows

• The user can select multiple rows, then click on the gears icon to have a menu drop down and perform any number of things, e.g. move selection to the top or bottom, move selection a specified number of rows up or down (in which case a tiny dialog appears), copy, cut, etc. Virtually no limit.

Answer 2

The first thing you need to ask yourself before you try to figure out how to do it is how frequently users are going to be doing it.

If it's going to be used often I would try to create it so that you use drag and drop and simply auto-scroll the page once a user hit's a certain treshold.

It's a good rule of thumb to say that if a user needs to do something quite often and you can make it easier even by introducing some exotic type of interaction, do it. The user is ok with the learning curve as it will benefit them later on.

If it's not going to be used often I would do an up/down arrow, it's might not be exiting but it's clear.

Answer 3

I'd combine up/down arrows with drag'n'drop.

Having to guess at some number, or having to work it out beforehand, is just plain cumbersome. And though collisions can and should be dealt with in code, for example by simply incrementing all numbers that are on or above the one entered, most users will try to work out the correct one beforehand, if only out of uncertainty about how a duplicate or wrong number will be handled.

The up and down arrows are a much more convenient way of reordering over short distances.

For longer distances and for multiple item moves, drag'n'drop can be added. To ensure the usability of drag'n'drop over distances of more than a single page, auto-scrolling of the grid should be implemented as well. This means that during a drag operation, the grid will automatically scroll when you drag the mouse within a certain margin of the upper or lower border of the grid. Which is exactly what the Windows Explorer does.

To augment this even further, scroll speed can start slow and increase as the drag continues to be in the "scroll sensitive" area. Be careful with this though, plus set a maximum scroll speed: I have been driven to fury by automatic scrolling that sped up so much and/or so rapidly that I always scrolled way past where I needed to be.

Answer 4

The Drupal CMS has a relatively good solution for this that scales to lists of 30-50 items. Not sure how it would scale higher.

Configuring site "blocks" is an example - see the screenshot, below.

• Each item has a 4-way handle that can be grabbed for drag and drop operations.
  The handle provides a visual "affordance" that the item can be dragged.
• The list is divided into sections.
  Moving an item to a particular section can be done by selecting it from the combobox shown for that item

The "drag and drop" approach is much smoother than having arrows that move items one step. JIRA does that and it's really laborious getting things into the right place.

Answer 5

It depends on how you users are using the system:

• If the row number is meaningful (for example position in queue) you probably want to display it and make it editable.

• If "make this first" is a common action you may want to introduce a "move to top" button (or move to bottom).

• If your users like keyboard shortcuts add up and down shortcuts, make sure selection/focus follow the row when it moves so pressing the up shortcut 3 times will actually move the row up 3 places.

• You can add up/down buttons, my users don't like those very much (your users may be different)

• And finally, Drag&Drop, my users favorite way to reorder rows - in my app there are no drag handles and users manage to drag&drop just fine (your users may be different)

And, whatever you do, make sure you test it on your specific users and see how they like it.