Heuristic for dragging items across horizontal pages

Question

I am trying to let users drag items across a collection of horiztonal pages, similar to the Android home or iPhone Springboard. On Android, I find it incredibly hard to get an icon to go from page to page while I am dragging it, but it works pretty intuitively on iOS. (Android haterz and iOS fanboiz, please stay on topic with me here.)

My current code is getting me to a point where I either make it too easy to slide left/right (i.e. I'm trying to put something in the left or right column and I switch pages instead) or get stuck on the screen (it never switches).

So far, I am only looking at x position in making the call when to switch pages, but this does not seem to be satisfying enough. Has anyone implemented something similar with more success? What about using the x-axis velocity of the drag to help hint the action?

Answer 1

One idea may be to provide visual feedback about where the insertion point is. The "target" can show its pliancy (receptiveness to a dropped object), just as the icon can show its afforance (receptiveness to being dragged).

Here is an animated graphic to illustrate, except it won't animate when I preview. :( The user is dragging the calculator icon to the left.

The insertion beam (the yellow I-beam in the illustration) shows the desktop's pliancy — the "place where the icon will go if you drop it now". Since the I-beam anticipates the destination based on the direction of the dragging, the I-beam will snap to the left edge of the page before the user's dragging finger arrives there. This means the user can drop the icon a bit early, to avoid scrolling to another page.

To make this work well, at the start of a drag, the insertion beam should probably appear toward the "inside" of the screen by default (so assume the user will drag toward the middle of the screen by default) until the user starts dragging outward, off the page. A similar type of interaction can accommodate pagination along the vertical axis.

This is just one possible solution. I'm sure there are others. Have fun with it.