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 '20 at 15:33
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 '20 at 15:40
  • 1
    Oh, my bad, didn't notice that. I'll adjust the answer, thanks. Nov 5 '20 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 '20 at 10:00

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