Re-ordering grid rows when dragging is not available

Question

I have a grid where the user can reorder the rows. However, my installation target will not afford the ability to drag items to reorder them. What is the best design strategy to allow reordering?

To allow this, I have a "Move Up" Up-Arrow and a "Move Down" Down-Arrow button in each row. I realize this is redundant e.g. clicking "Move Down" on row 1 has the same effect as clicking "Move Up" on row 2. I could remove one to free up real estate and improve performance.

Should I remove one, and if so, which one?

Is there an overall better strategy?

Answer 1

Users sometimes want to move things up, sometimes move things down; so you should offer both.

Asking users to calculate an alternative way to achieve their task reduces usability.

Consider the following daily task list:

• Tidy room.
• Buy a book on Amazon.
• Reply to John's email.

A person might go:

I can't be asked cleaning my room, this is the least of my priorities for today.

And sometime she'll go:

I really need to reply to John's email, or I might won't be able to renew the tenancy agreement. I must do this first.

If you only keep up or down, in one of these cases you practically asking your users to interact with an item other than the item of interest and achieve their task in a convoluted way.

Answer 2

Instead of having two buttons for each row, you may have only two buttons above the grid ("UP" and "DOWN") that will move the selected row up or down.

Additionally you may add another two buttons above the grid ("FIRST", "LAST"), that will move the selected row at the beginning or the end of the list. This will reduce the need to repeatedly press the UP/DOWN button.

Answer 3

In General -

You'll have to look at the use cases you want to cover: You said it's about "sequential events to occur", which sounds like users want to advance or delay events (1). You also said sometimes large movements are required (2). Additional questions are:

3. How many items are (typically) in the list?

4. How many items does the user (typically) need to move (into different destinations)?

5. Do users need to move single rows, or entire blocks of rows?

6. Are the top and bottom places often-used targets?

(1) requires up and down functions on all items, as @Izhaki already explained very nicely.

(5) requires the possibility to mark a range of rows, and movement of this block. The typical solution is a checkbox on each row, and toolbar functions operating on selected rows.

(6) will require a move-to-top function in addition to move-up (and same for down direction).

(2) might - depending on the answer to (3) - require entering the destination instead of moving small steps. An easy solution is an input field showing the current position and allowing to enter a new position. In this case, how does the user know the new position (assuming so many items that the destination is not visible on the same screen)? If large moves are (nearly) always to the top or bottom, maybe that solution is sufficient?

(4) can even indicate a completely different design: If the order needs to be constructed anew, picking the next item from a list of still remaining ones might be more appropriate (i.e., recreating a new list from an existing one which is emptied in the process).

Assuming -

you have no need for moving blocks of rows, and have a large list of rows where only a few need reordering, you might end up with a design that has move-to-top, move-up-10-rows, move-up-1-row, move-down-1-row, move-down-10-rows, move-to-bottom as functions per row.

Displaying six buttons per row is visually far too busy, but you may consider only reserving the space for these function and displaying them only on hover (if that's available on your target device).