1

I am implementing a container view for a native mobile app that has draggable objects and also allows panning. To drag an object, the user presses and holds until it activates (by highlighting and increasing in size), and then moves the object. However, the container needs to pan while dragging if the touch approaches the edge of the view. There are three questions:

  1. How close to the edge of a pannable container should panning begin while dragging?
  2. How should the distance from the edge affect panning velocity (i.e. panning faster when closer to edge)?
  3. Should these thresholds be absolute in terms of pixels, or relative to the screen/container size (i.e. should they be bigger for a tablet than for a phone)?

I have come up with some ad hoc parameters, but I am afraid that they are far from ideal:

  • Start panning at 10% of container size from edge (e.g., left:20px / right:180px for 200-pixel-wide container)
  • Velocity = Max Velocity Constant × (10% - distance) / 10%

Has there been any research on parameters for this problem?

1

1. Check with your users

Depending on how large the data is that your users need to navigate and drag around could make all the difference between what feels right versus what feels clunky. You will need to test the offsets you come up with and possibly even let the users tweak them somewhere under advanced settings as what is too fast for me may be too slow for you.

2. Use a fixed pixel amount instead of a percentage

Only when the cursor is near the edge should you consider auto-scrolling.

I couldn't find any research data but I can tell you from experience using various frameworks that 20 pixels is usually the default size to check before panning (a.k.a. auto-scrolling). Don't use 10% because that could mean either 1 pixel or 100 pixels and for the most part you hope that everything can be moved around and fit in the current view without panning at all.

I would also consider only having two speeds. A slower one that happens while the cursor remains within the 20 pixel margin around the edge and a faster one when the cursor is outside of the page. Microsoft Excel seems to behave this way and then uses a timer where the longer you are dragging outside the page the faster everything scrolls up to a certain point.

3. Avoid auto-scrolling when possible

Sometimes it isn't possible to keep draggable content in a container that is entirely visible but this really should be the goal. Handling content that unavoidably lands outside the visible screen may never be found by some users regardless of any visual cues we provide them.

To put it another way,

"Truncation is not a content strat..." -- Karen McGrane

  • 1
    Nice tip about two discrete speeds used by Excel. – Kevin Borders Feb 20 '15 at 18:16

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.