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.
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
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...
You could try changing the cursor to the cross cursor to indicate the element is draggable. See image below:
For the keyboard shortcuts, using a rounded square, with the key inside is usually a good indicator. Soundcloud displays their shortcuts like below:
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.