5

In a mobile app, I have a two-finger drag gesture as an advanced feature. I already know about the discoverability problems with multi-touch gestures, and this question is not about that aspect.

The gesture in question is a sideways drag to the left or the right, and only the distance of the drag matters: that is, the user can see the effect of the drag on the thing being edited, and can simply drag back to the starting point to abort the edit. The effect of the operation can be quite subtle, so I think it's important to show extra feedback to make it clear that the app has recognised the user's drag gesture, as well as to show where the user needs to return to if he changes his mind.

My first idea for showing this feedback was to show a vertical line where the drag started, with a horizontal bar leading from it, showing how far he's dragged. The problem with this is that in a multi-touch drag there's no real "start point". Picking one finger to use as the start point, or using their centroid, works in simple cases, but the gesture has to keep going if the user lifts one of the fingers and/or puts down an extra finger. The magnitude of the edit shouldn't change when this happens, so the "start point" will jump about (to stay the same distance from the new centroid or the remaining finger).

It seems undesirable that the on-screen feedback for the start point should jump about this way, possibly at some distance from where the fingers are located. How can I either mitigate this problem, or show the feedback differently in a way that won't jump about when the set of active fingers changes?

I've described my situation in detail to make it clear what the problems are with the naïve design, but if there's a general principle that applies to this situation as well as other kinds of multi-touch gesture or other kinds of feedback, that would make a good answer.

4
  • Is this gesture not constrained to any part of the user interface (i.e. context sensitive)? Also, is there are reason to have both one and two finger gesture and how will you distinguish between them?
    – Michael Lai
    Dec 1, 2013 at 22:34
  • The gesture's not a drag on a specific object, so the start point has no other effect apart from that I've already described. It's constrained to start in a horizontal command bar (which is why it's only a horizontal drag in this case). The idea is to be an alternative to starting a one-finger drag on a dedicated button, to save the space the button takes up on small screens, and to reduce finger movement on larger screens. One-finger touch and drag are both used for the main controls. I distinguish between them by whether two fingers have been down during the gesture.
    – Dan Hulme
    Dec 1, 2013 at 23:14
  • I don't think I understand exactly what would be taking place in this interaction, but what would you think about a circle in the center of the screen that increases radius as the user drags? Dec 2, 2013 at 18:53
  • ^ Maybe two circles that grow in size to remind you that you're doing a two finger drag?
    – Max
    Dec 6, 2013 at 0:20

1 Answer 1

1

It seems that the current problem is the feedback not being in a stationary place.

You can portray the feedback as changing units so that they may be displayed in a single place.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The number would dynamically change as the user moves the selection. The number could be a delta from the time a new movement started.

For example:

  • The user places two fingers (movement is 0 because none has occurred yet)
  • The user begins to move the selection (number changes with movement accordingly)
  • 1 finger is lifted (movement is now 0, indicating that the change in finger placement reset the delta calculation)
  • A second finger is placed (movement still 0)
  • User begins to move fingers (number changes according to movement)
  • User places a 3rd finger (movement is 0 at that instant)
  • User moves all three fingers (movement changes, showing the delta of movement accordingly)

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.