13

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!

8 Answers 8

7

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".

1
  • +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, 2013 at 21:37
1

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.

1
1

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.)

1
  • +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. Mar 1, 2013 at 11:37
1

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.

3
  • 1
    That's how I would solve it as well. Mar 1, 2013 at 17:51
  • It's on iOS. It's an interesting suggestion, but seems to need a lot of coding manipulations :P Mar 3, 2013 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 Mar 3, 2013 at 1:05
1

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.

3
  • +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, 2013 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. Mar 3, 2013 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, 2013 at 21:42
0

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.

0

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.

4
  • Could you give some examples, because I've never encountered them. I've seen the drag-handles many times though
    – TomDoes
    Mar 1, 2013 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, 2013 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, 2013 at 12:01
  • I kind of agree with Kit Grose on the "old-school desktop UI" thing. Mar 3, 2013 at 0:10
0

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

Your Answer

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

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