3

I am building a drag and drop interface where elements can be moved by a mouse or by the keyboard arrows. How should I 'tell' the user these elements are moveable using the keyboard?

Any idea or a link to a similar website is appreciated.

Improve this question
1
  • Keyboard could support more rich functionality: arrows, SHIFT+arrow, CTRL+arrow, CTRL+SHIFT+arrow, etc. In this case it's better to provide some instructions.
    – Alexey Kolchenko
    Sep 30, 2013 at 9:56

2 Answers 2

Reset to default
2

I once used the same (mouse and keyboard) in a serious game (elearning). I guessed that most of the users would start with mouse interaction. By presenting arrows (left/right/up/down) around the draggable object i expect that some users (that would appreciate the keyboard interaction) would try to use the keyboard arrows. Although I didn't get the chance to try it out with user testing...

Improve this answer
1

You could try changing the cursor to the cross cursor to indicate the element is draggable. See image below:

enter image description here

For the keyboard shortcuts, using a rounded square, with the key inside is usually a good indicator. Soundcloud displays their shortcuts like below:

enter image description here

To make even more clear to the user the options for moving the element, you could use onboarding, which basically shows the user how to use the app the first time they log in, in a short and snappy way. Read more here.

Improve this answer

Your Answer

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

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