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'm currently facing a design problem with drag and drop on tablets.

Scenario: The screen is split in half, on the right side, I have a list of items and on the left side I have a list of boxes. I can pick up an item and drop it in a box.

On the right side, it's possible to scroll the list if there are so many items that don't all fit on the screen.

I have three solutions for picking up an item to drag, all of them have problems:

  1. Touch and hold for 0.5s, then the item is picked up, then it's possible to drag. Problem: Most people just don't hold and try to drag right away. They fail and it annoys them.

  2. Instant drag on touch, the item is draggable instantly on touch. Problem: When they try to scroll, they pick up the item instead of scrolling the list. It doesn't do that they wanted and it annoys them.

  3. Have a drag handle, so if they touch on the handle, they instantly pick up the item and can drag it. If they touch elsewhere, the item is not picked up. Problem: Has to make the item icon bigger. The draggable area (drag handle) can be small so harder to pick up an item.

I think drag and drop is the most natural interaction for this scenario, but I can't find a perfect way to do it. Do you guys have any suggestions?

It's possible to avoid drag and drop totally, but I would resort to that as the last solution.

Thanks!

share|improve this question
add comment

8 Answers 8

I suggest you should use 'select+drag' approach instead. This is similar to 'double-tap-drag' described by PhonicUK but doesn't require immediate drag.

User selects an item first by tapping it once, the item is then highlighted and ready for a drag operation. Other items won't accept drag until they are selected so scrolling is still available.

I think I've seen this approach used in games on iPad where you select items from a scrollable toolbar.

You should also include a little help note, e.g. "tap to select, then drag".

share|improve this answer
    
+1 This is looking like the best solution to me. It's not great because it requires instructions, but there is no ideal solution to this problem. –  obelia Mar 3 '13 at 21:37
add comment

I wouldn't go with option 2. It seems the least user friendly out of all the solutions.

Regarding option 1 & 3, they both have the potential to work, but this depends heavily on the visual feedback during the interaction.

However in my opinion, option 3 seems to have the least amount of resistance when it comes to usability. In my mind, it's easier to comprehend (and instruct) that touching a specific location (ex: 4 sided arrow icon on the left) would move an object than holding an object for a given amount of time.

I would also include an introduction animation of what the user needs to do in combination of one of your options.

share|improve this answer
    
At the moment, I have implemented Option 3. I will test it on users and see how they react. Will report back :) Here's how I implemented it: dropbox.com/s/dc2olcumqk2fofx/IMG_0645.MOV?m –  Van Du Tran Mar 3 '13 at 0:09
add comment

Have you thought about adding a scrollbar/strip onto the box holding the items? Give the user a handle to drag up and down in order to scroll your items. Then they can drag the individual items immediately.

The other thing you might consider is a brief circle that shows up around the object and quickly fills in once the user starts holding, showing feedback that they are waiting a half second to drag. (I am thinking of the Shazam app or the Kinect interface, if you are familiar with either.)

share|improve this answer
    
+1 for the scrollbar/strip! I think that it should be possible to give user an ability to scroll through items somehow: maybe by a scroller or paging or something like this. –  alexeypegov Mar 1 '13 at 11:37
add comment

I'm not sure which platform you're using but can you detect the direction the drag operation is going? If it's going to the side as if the user is trying to move the object to the other list, then it's drag and drop. If the motion is up and down, interpret it as a scroll. You should wait for a minimum thresh hold before you engage either operation.

share|improve this answer
1  
That's how I would solve it as well. –  Stewart Dean Mar 1 '13 at 17:51
    
It's on iOS. It's an interesting suggestion, but seems to need a lot of coding manipulations :P –  Van Du Tran Mar 3 '13 at 0:11
    
The flow is simple on touch start listening to pointer moved event (store the start point), in the pointer moved handler check the new position against origin, if delta X is over the threshold start drag and drop, if delta y is over threshold start scroll, otherwise do nothing –  Mike Brown Mar 3 '13 at 1:05
add comment

I think touch/hold is unacceptable. It's not an established convention (that I've ever seen) so it's bound to be confusing and irritating.

A couple more possibilities:

4) If there's any blank space around the list items that could be the target for scrolling.

5) Scroll buttons: a button at the top to scroll up and a button at the bottom to scroll down.

Whatever solution you use, it should have strong feedback, e.g. when an item begins to be dragged it should "light-up" so there's a clear indication that something is happening to that one item and the touch is probably not the begininning of a scroll.

I wouldn't be too set on drag drop. If a comfortable feeling drag drop cannot be worked out I wouldn't force it, I'd try another approach. There may be a better solution.

share|improve this answer
    
+1 for your option 4. It maintains a sense of direct manipulation where so many other suggestions introduce abstraction. User drags an item, item moves. User drags background of pane, whole pane moves. Maybe for power users implement as an additional gesture two-finger scrolling that ignores the drag entirely. –  Kit Grose Mar 2 '13 at 11:58
    
I've tried option 4 but there's not much space around the items in my case. People always accidentally pick up the item because they put their finger randomly on the screen and not on the background. –  Van Du Tran Mar 3 '13 at 0:06
    
@VanDuTran - in that case I vote for the suggestion by jfrej above, tap to select, then the selected item is draggable. It's better than touch-hold, which should be reserved for very infrequent tasks. –  obelia Mar 3 '13 at 21:42
add comment

what you could do is stick to option 1 and provide visual indication that the item being touched is preparing for drag, maybe a tooltip with 'drag...' fades in over the 0.5 seconds - this leaves users free to scroll without dragging accidentally which I think is most desirable.

share|improve this answer
add comment

What you often see on touch devices is a 'double-tap-drag' - you tap quickly once, then press and hold immediately to drag. It's near instant and gives you a way to differentiate between a drag and a scroll. If you use a desktop with a trackpad mouse it usually works like this.

share|improve this answer
    
Could you give some examples, because I've never encountered them. I've seen the drag-handles many times though –  TomDoes Mar 1 '13 at 11:07
1  
Just use a Laptop with Windows on it and use the trackpad to do a drag-drop. You tap, then immediately re-tap and hold to drag. Works for icons, dialogs, or anything else that you'd drag. Same also applies to tablet computers with Windows on them. –  PhonicUK Mar 1 '13 at 11:09
    
This effectively creates a modal interface and breaks the idea that on touch screens you make changes by directly manipulating objects. It's the way old-school desktop UIs work because mouse interaction is so relatively restrictive, while being precise. –  Kit Grose Mar 2 '13 at 12:01
    
I kind of agree with Kit Grose on the "old-school desktop UI" thing. –  Van Du Tran Mar 3 '13 at 0:10
add comment

You could dictate that using 1 finger performs a drag and 2 fingers perform a scroll, or vice-versa.

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.