7

Something I often argue with a lot of dev & ux guys,

I think for simplicity of use, arrows will always be easier than using a drag & drop action,

Seeing normal people use drag & drop is just painful, that's not a normal operation for them,

Compared that to arrows, that will enable them to take fast action.

What do you guys think?

| improve this question | |
  • I'm sorry, I don't fully understand what you mean by using the arrows? With what? The usual upload dialogue box? – Majo0od Oct 2 '13 at 20:37
  • Using arrow keys for drag and drop has potential for confusion.There's potential for confusion in what people think arrow keys do. – obelia Oct 2 '13 at 23:33
7

This is a good example of where your opinion must be backed up by--or trumped by--actual user testing within the context of use.

Using arrows that move items up and down a list is an interface paradigm that some users are more comfortable with, and some are less so. It's going to depend on your user population, and how they interact with your application.

Device/user sensitivity: on iOS, users are getting used to having drag "thumbs" they can use to drag and reorder items in a list, usually hidden behind an "Edit" button. But users who have less experience with a mouse can find dragging and dropping challenging--and trackpads also can make it tricky for some users.

Task sensitivity: reordering a short list (3-5 items) is fairly easy with arrow-buttons. But moving an item a long distance is very painful with the arrows, whereas drag-n-drop is only slightly more painful. Conversely, small drag/drop targets will make that interface much more challenging.

So the short answer is, it depends on the task and on the user, and testing is a good way to find out what works in your particular situation.

| improve this answer | |
  • Let's not forget that a drag and drop function is starting to become standardized. All applications (that I can think of) has some sort of drag and drop function. – Majo0od Oct 2 '13 at 20:41
  • 5
    Please also note that having arrows does not exclude the possiblity to have drag and drop as well, so you could actually have both. – Hazzit Oct 2 '13 at 20:44
  • True! Though you've now added some ambiguity to the interface--and you'll need to have some sort of drag affordance, unless you want users to find it purely by chance, so that will also take up extra screen real estate. – Alex Feinman Oct 3 '13 at 13:46
2

It's not as much a question of which of the two will be understood by more people, as it is a question of how to implement each one.

You know how you make buttons look like buttons? Excluding the latest "flat design" fad, pretty much all buttons have a gradient, some drop shadow, or at least a border on one or more sides. This is not just to make them stand out as a "there's action here" element on a page. The main reason, is so that it mimics real life's buttons, which everyone knows how to use.

My point is, even with something as elementary as buttons, we try and give people hints on how to use it.

A few examples

Whatever you end up implementing, make sure you explain to a user how it works. Here are a few example methods off the top of the head;

  • A line or paragraph of text explaining how to sort the items; "Click and drag the icons next to each item to change their order!" that's highlighted at the top of the page.
  • A click & drag indicating icon supported by a tag that pops up on hover saying "click and hold to drag and drop".
  • A big button saying "Order" or "Sort items" or something similar, that transforms all elements in (un-editable) drag & drop elements.

Whichever you end up using, or whatever you come up with, keep in mind that it's about explaining what's going to happen. Whether that be by visual stimulants, text, or a talking paperclip at the bottom of the screen (don't!) - hold their hands and explain the process.

| improve this answer | |
2

A few more points to add:

  • Arrow buttons have the potential to be more accessible (e.g. using) keyboard shortcuts for those with restricted motor skills.
  • Drag and drop is a form of direct manipulation, which if implemented well, can give the user instant feedback about where the thing they are dragging will get placed. Arrow buttons are forms of indirect manipulation, and where I've seen them implemented, there is an "instant switch" effect as the item moves, which maybe needs more examination from the user to check that the item moved correctly as expected.
  • There is also a case for drag-and-drop being quicker in some circumstances. If the user is moving an item several places, then one drag-and-drop motion, with its instant feedback, may be quicker than the user pressing a button several times and very possibly examining the position of the item after each button press.
| improve this answer | |
  • Keyboard short-cuts--great point. But a drag-n-drop interface can provide these if you give the user some way of selecting an item in the list, say by tapping or clicking. – Alex Feinman Oct 3 '13 at 13:47
1

While it's true mouse driven drag/drop is often not ergonomic, using arrow keys for drag and drop has potential for confusion as the more conventional result of up/down arrow keys is to either scroll something or move the selection (not the selected item) up or down.

As mentioned, you really need to test any unconventional UI idioms to see if it's a net gain or loss.

| improve this answer | |
0

Both likely need instructional text to be understood. For longer lists where users may want to reorder multiple items using arrow keys becomes much less efficient.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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