I've got so far my drag'n drop indicating where the items will be dropped:

enter image description here

However, i have the same operations available through keyboard shortcuts, ie: ALT + Arrow-Keys. But the keyboard variant works directly, not showing any preview and it also doesn't allow you to move items in a collapsed tree node.

So, should I show the same preview as in the mouse based version and allow the user also to expand tree nodes ?

What do you think ?

ps: i am interested in how this should work for people with no mouse.

  • My arrow keys don't work, what do I do? Commented Dec 7, 2016 at 15:47
  • @Ivan can you explain? i don't understand
    – xamiro
    Commented Dec 7, 2016 at 15:48
  • key arrow keys on my laptop stopped working due to liquid damage. Can I use tab to get to the field I need to drag and then tab to drop it where I need? I can use ctrl+d and ctrl+shift+d to drop though. Commented Dec 7, 2016 at 15:53
  • interesting thought, you could use some keyboard re-mapper tool, or set the mappings in the software instead...
    – xamiro
    Commented Dec 7, 2016 at 16:10
  • Just a tip on UX. I see too many editors where you are bounded to use your arrow keys and it makes me have to choose something else. For example, it would be cool to navigate through the data table using WASD and use keys as input after pressing Enter. Commented Dec 7, 2016 at 16:13

1 Answer 1


You need a different interaction approach to support keyboard only users. You cant just expect the user to know to switch from Tab key to Cursor keys to physically move something.

So you need a hybrid approach.

  • Drag and drop for mouse users
  • Move up and Move down buttons which are revealed when the object receives keyboard focus, and when triggered will move the object either one place up or one place down (depending on which Move button is triggered)
  • nice but unfortunately i still don't know whether the results should be shown as preview as in the mouse version or it should perform the move action immediately. that was the actual question. 2 interfaces: doing the same but looking different...
    – xamiro
    Commented Dec 7, 2016 at 17:03
  • Mouse user drag and drop will benefit from insertion preview, keyboard users will not (especially if they have sight issues). This is why you need two different interaction patterns. Also don't forget that drag and drop is not discoverable, so a keyboard method works for everyone and moves instantly , while drag and drop is a value add for mouse users and shows insertion preview.
    – SteveD
    Commented Dec 7, 2016 at 17:07
  • ok, will think about.
    – xamiro
    Commented Dec 7, 2016 at 17:22
  • ok, if you could rewrite your answer to what you said in your comments, addressing the question then I would accept it, despite i think i need indeed an preview for keyboard since the tree/grid is real-time data and moving items can have crucial results.
    – xamiro
    Commented Dec 7, 2016 at 19:02

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.