2

I am designing a dashboard where the user can select rows in a table and reorder/resequence the selected rows before clicking on the print button, What could be the best possible solution?

1
  • Do you have any additional details you could provide to help provide context? Could you provide any sketches or descriptions of what you've tried, or what your UI looks like currently? Nov 4, 2020 at 15:33

1 Answer 1

0

Edit: I'm redoing the answer after @Johnny_UX pointed out that the question mentioned multi-selection, which I didn't notice; my bad.

1 - Not absolutely necessary, but it might help to clearly separate your rows:

enter image description here

2 - Use a drag indicator on hover + the hover hand cursor and row highlight to indicate the interaction

enter image description here

3 - Indicate selection during drag with a selection highlight and a closed hand cursor. You can leave behind a "ghost" of the rows and point to the destination, or use some cool animation to move the rows to the position they will be when the user releases the cursor.

enter image description here

For multi-selection, use the hover effect on all the selected rows and link them visually:

enter image description here

Show them together while dragging

enter image description here

enter image description here

3
  • 1
    How would you address the multi-select part of the question?
    – Johnny UX
    Nov 4, 2020 at 15:40
  • 1
    Oh, my bad, didn't notice that. I'll adjust the answer, thanks. Nov 5, 2020 at 10:59
  • No problem :) I'd just mention that if you can use a "shuffling" animation for the rows, you should prefer to use that instead of the "ghost" approach I suggestted. Nov 9, 2020 at 10:00

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