5

A mixed bag of interaction and expectation...

You are using the photo app on the iP(hone/od/ad) you know there are a few familiar gestures to interact.

  • Tap to select an image.

  • Swipe left or right to go back or forth through the album.

  • Pinch or stretch to zoom in or out.

  • On any level of zoom one or two fingers navigates the plane of the zoomed image.

These sets of gestures are transferable in other apps, i.e. Cooliris, Flickr et al

What gestures would you imagine, given the current operation of gestures on an Apple multitouch device would flip an image horizontally or vertically?

I am looking to employ gestures that do not conflict with the current implementation of gestures featured in the above apps, so whilst keeping one touch opposing the direction of another, (Think scrolling using touch pads on the Macbooks. A solution James is tackling in his answer) might seem perfectly reasonable to us here it doesn't translate to the iP(hone/od/ad) device as it just sees a pinch.

I have found one gesture that doesn't mimic the others and its swiping up or down. In fact this does nothing unles you are zoomed in.

Improve this question

11 Answers 11

Reset to default
5

The principle of 'the point under the finger follows the finger' is already behind the gestures for pan, swipe, pinch and zoom. The principle suggests how to add new gestures for transforms like rotate and flip too.

  • One index finger left to right at same time as other index finger right to left. Swaps left and right.
  • One index finger top to bottom at same time as other index finger bottom to top. Swaps top and bottom.

These could also be done one handed, using thumb instead of an index finger. The principle is why the existing gestures are relatively intuitive.

Edit:

  • With pinch the gesture stops when fingers meet.
  • With swap, the fingers continue on past.

So there is not much risk of the gestures being confused by the user or the software.

An alternative that still follows the same principle is that a pinch until the fingers are together followed by a stretch - all in the same gesture without removing the fingers - does a flip in the direction of motion. It's relying on our perceptual pattern of 'following the motion rather than following the moving object', so it is as if the finger/thumb have swapped places for us. The animation of shrink then enlarge (reversed) would also work well with this.

Improve this answer
5
  • how are you going to differentiate this from the pinch?
    – Vitaly Mijiritsky
    Apr 4, 2011 at 12:26
  • You would think this could be implemented but the current gestures people have learned is that using two fingers to swipe left or right gives the same results as one finger doing the same. edit: forgot enter submits a comment! While up / down one finger or two does nothing unless you are zoomed in. Perhaps there's something in it.
    – saybeano
    Apr 4, 2011 at 13:01
  • re your edit: the action is triggered once the gesture is recognized. So once you begin pinching, the device will begin zooming out - it won't wait to see whether the fingers meet or go past each other. And when you pinch and stretch, it just zooms in and then out (like here).
    – Vitaly Mijiritsky
    Apr 4, 2011 at 16:07
  • @Vitaly: sure - if you are confined to using existing stock of gestures, and iambeano has now said that that is essential. If you actually track the points of contact, it is possible to shrink through zero and then enlarge again with -ve flipped scaling. In the video the points of contact are still a good cm apart at closest approach.
    – James Crook
    Apr 4, 2011 at 17:12
  • 2
    It's also worth noting that it's tricky to distinguish between the gesture you describe and a rotate gesture, and it would be almost impossible to support both gestures at once without confusion or very unforgiving gesture recognition.
    – Kit Grose
    Jul 4, 2014 at 8:01
2

I do not expect 'flip' to be a gesture.

A gesture might bring up image manipulation tools, which flip might be one of.

'Flip' transforms the image. Gestures tend to manipulate the view of an image, rather than actually alter it.

Improve this answer
1
  • This is all in the interests of altering the view of the image and saving it if you like. Hence attempting to mash existing gestures with new ones. Thanks for your input.
    – saybeano
    Apr 8, 2011 at 1:11
1

I think context is important here. Are we talking about a virtual 3D object? A virtual 2D object in 3D space? Are we talking about flipping the axis of an image ala PhotoShop? Is it a one-function app? Multi-function? etc.

In the context of 2D images, and assuming this is some form of image editing, I think the key is going to be a way to switch modes rather than trying to invent yet-another-gesture.

This is how most image editing apps on the iOS devices work now. I'd imagine clicking on some sort of 'rotation/flip' mode. In that mode, a horizontal swipe would flip along the x axis, vertical swipe along the y axis. Two-finger rotation, and pinch to zoom/scale.

Improve this answer
1
  • Yes. Simply using flat images.
    – saybeano
    Apr 4, 2011 at 15:58
1

Touch interfaces work best when they respond to hand gestures in similar ways to physical objects - like dragging left / right to flick through a novel, or 'stretching' an image with your fingers to zoom in. As such, I'd expect any other gestures to closely map to some real-world behaviours.

Such behaviour could include:

  • rubbing back and forth to delete or clear an item
  • using one finger to hold one object, and another to move one towards it, to group the objects
  • shaking a device to send data and files to another
Improve this answer
1
  • I've been trying to figure out a good way to delete an item using gestures, and I like the rubbing idea. Thanks!
    – jrullmann
    Jun 6, 2012 at 17:23
1

How about rotating to the right or left with multitouch with all the five fingers as if you hold on an old fashioned knob.

Improve this answer
1

Mathematically speaking, flipping an image is the same as scaling it by a negative factor. Many drawing applications (e.g. Illustrator, SketchUp) let you flip an object in this way-- you scale the object to zero, and then keep going out the other side.

The pinch gesture could be made to work this way, although it could be somewhat tricky to do with one hand. It also wouldn't work if you allow for two fingers to rotate and scale at the same time (because the gesture for rotating 180º would be the same as for flipping).

If you did this, users would often want to flip without scaling, and you don't want them to have to judge that visually, because they'd end up with an image flipped and scaled by 97% or 101%. So, it would be highly desirable to have the scale "snap" to 100% when it was close (possibly this behavior should only apply when the image is flipped, because users might otherwise want to tweak the scale by a small amount).

Improve this answer
0

Flip (rotate) the physical device around the horizontal or vertical axis, a partial flip should suffice. You could implement this with accelerometer and/or gyroscope readings. It's a large movement, but flipping images is not something you do all the time (I don't).

Improve this answer
1
  • Thanks but I am attempting to define this through a gesture as Vitaly said rotating a large device is a bit of a clunky idea. Besides, What if you want the picture to rotate but not affect the file data?
    – saybeano
    Apr 4, 2011 at 13:08
0

Three-finger pinch on the relevant axis (thumb, index finger, middle finger)

My first thought was rotating the device as well, but I wouldn't go around rotating the iPad. It would need to be a quick and short gesture, and it's too fragile and too heavy for such jerky operations.

Improve this answer
2
  • I agree on not rotating the device. Though I am not sure how three fingers would be comfortable on an IP(hone/od).
    – saybeano
    Apr 4, 2011 at 13:06
  • Yes three fingers are uncomfortable on a phone. I have tried this. Also I think pinch has a connotation of making smaller/ crumpling/ bringing things together. The more fingers one uses the more one might enforce this connotation. Look at the 3 finger pinch on: liquidtext.net
    – Viraj
    Sep 14, 2011 at 4:53
0

I could picture using 2 fingers on one hand to define a rotation axis, and using 1 finger on the other hand to swipe perpendicular to that axis.

So to flip vertically, take your right index and middle fingers and place them horizontally form each other to define a horizontal axis. This is the axis the image will rotate around. Using your left index finger swipe up or down, perpendicular to the axis. This will spin the image around the horizontal axis.

THe spot under the swiping finger moves relative to the swiping finger.

Improve this answer
2
  • Think I would prefer the horizontal fixed if this was an implementation. I will update the OP in asap. Thanks for your thoughts.
    – saybeano
    Apr 8, 2011 at 1:13
  • the approach where one defines a rotational axis and then gestures around that definition was the approach used by Jeff Han during his Ted.com presentation ted.com/talks/jeff_han_demos_his_breakthrough_touchscreen.html I am working on a solution that uses distance from touchscreen to define rotational access but very much prototypical at the moment. Hugely interesting field though: 3D interactions in 2D space
    – colmcq
    Sep 13, 2011 at 14:06
0

Tried to flip an artificial picture on my table,

My body`s first reaction was;

  • Place and hold your thumb down on the picture
  • Simultaneously with your middle finger, simulate a 30*/60* rotation left to right, or right to left with the thumb as a center point.
Improve this answer
1
  • I agree I was going to suggest something very very similar. What I was going to suggest was: U one finger/ a thumb as an anchor point and move the other finger past it. Depending on the direction of the movement past the finger the flip is either vertical or horizontal (or even diagonal).
    – Viraj
    Sep 14, 2011 at 4:48
0

You could theoretically grab one of the corners of the page and literally flip it over on itself? That would mimic the page-turn animation used in Apple's iBooks app.

If you implemented this, I'd expect to see the image reversed out on the underside of the image and to see the flip be animated dynamically "folding" over the image.

Improve this answer

Your Answer

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

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