Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
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 '13 at 9:56
add comment

2 Answers 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...

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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