2

What is a better trade off:

  • Allowing users to move rows around within a grid by dragging them and placing an "Edit" button on each row (see image)
  • Giving users an in-place cell edit capability and using separate "Move Up" and "Move Down" buttons outside the grid.

enter image description here

I'm leaning more toward allowing the dragging of rows and opting for the separate "Edit" button on each row but I'd like to hear your feedback.

Improve this question
3
  • Well you may prefer the drag-and-drop approach, but from an accessibility point-of-view that's quite restrictive to keyboard users.
    – JonW ♦
    Commented May 31, 2012 at 22:18
  • Uh, how are they mutually exclusive? Selection for dragging and dropping (or any other operation for that matter) can be restricted to the row "handle" (the button colored square to the left of each row), while alowing single clicks in a cell to enter edit mode. Alternatively, selection could be single click on the entire row and edit mode could be entered by double click a cell. You still have to decide whether edit mode is ended by moving to another cell or not. Presumably with the edit button this would be done by save/cancel buttons.
    – Marjan Venema
    Commented Jun 1, 2012 at 6:50
  • I thought they had to be mutually exclusive. With goRowSelect on you can't do editing. I'll have to play around some more or even ask on the forumns. Thanks.
    – Michael Riley - AKA Gunny
    Commented Jun 1, 2012 at 17:58

2 Answers 2

Reset to default
1

As @Marjan_Venema already mentioned in a comment, a drag-able row handle solves it.

Drag-able row handle

Regarding drag&drop, another thing you should consider is the visual feedback when rearranging. It can be hard to get right. If it is not easily understood by users what is being dropped exactly where, you risk doing yourself a disservice by implementing it. The up-down-buttons is way easier to implement in a fail-free way. If you implement any form of drag&drop, user test it with real users.

Improve this answer
0

Changing order

Think of these use cases:

  1. User wants to move row up 10 places.

  2. User wants to move 3 rows up 10 places.

How can you simplify both actions?

--> It seems like moving with multiple selection would be a good choice.

How should the user move the rows?

Options:

  1. Up/down arrows at the side of the area with the selection.

  2. Drag and drop.

  3. Enable both.

Option 1 could be problematic - you have to make sure up/down buttons stay in view throughout the movement. - If you use this, consider placing the up/down buttons over the selection instead of at the side.

Option 2 requires changing the cursor, so that users know that drag and drop is possible and also requires listening to ESC so the user can abort accidental drags. Option 2 may also be harder to use with touch screens (e.g. smart phones).

Option 3 is the most flexible for users.

Editing

You gave two options:

  1. Edit button per row.

  2. One edit button at the side.

Option 1 makes sense if you want to edit one row at the time, yet allow multiple selection (for the sake of dragging or copying multiple rows).

Option 2 makes sense if you want to enable editing multiple rows at a time, however, you will need a detail view that summerizes the selection and enables setting a value for a given field (column in data grid) for entire selection at once (e.g. a property grid).

If you choose option 2, you have to make sure it stays in view (once more, consider placing the button over the selection instead of at the side).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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