Pan/zoom/select in multitouch

Question

I'm currently working on creating a tablet-compatible version of an application. First off, I know that the worst thing to do is to try and shoe-horn in a bad implementation of multi-touch into an existing mouse-based interface. So I'm going back to the drawing board to try and make sure that the interface is an intuitive as possible -- but I'm running into a lack of examples/inspiration for the main part of the interface.

Basically, the main interface is an infinite canvas with objects on it. So I need to let the user pan around the canvas, as well as zoom in/out, and also select/move objects on the canvas as well.

What would be the best approach to making that work well on a multi-touch device?

I think the user will spend more time panning/zooming than selecting and moving, so it makes sense to make that the simplest thing to do, and have that be the single-finger interaction, and a multi-touch pinch for zooming.

But then how do I allow the user to select and move objects? Single-tap-and-hold on an object for a second or two to select it? Or a two-finger tap on an object to select? Then if you do a single-touch drag on a selected object it moves instead of pans?

To throw even more complication on the matter, there really needs to also be an easy way to do multi-selection (which in a keyboard/mouse interface is accomplished by holding Shift while clicking). Also the objects have a secondary (right-click) menu which needs to be accessible. Perhaps a second tap-and-hold when the object is already selected? Or a two-finger tap on the object?

I also thought about doing the opposite, and keeping single-touch-tap/drag for selecting and moving objects, and then having them do a two-finger-drag to pan, but that just seems inaccurate and unintuitive...

Answer 1

As you suggest yourself:
Pan: Move with single finger.
Zoom: Pinch.
Move: Select object + Move with single finger.

Multi-selection: I would suggest a mode solution here. Even though I hate modes, and even if lots of research has shown that modes are confusing for the end user - the use of modes has become a pretty common on touch devices. You could either enter the multi-selection mode by clicking a "select" button or you could enter the mode by long-pressing an object (just like you enter the iPhone shaking icon mode).

I have seen (and used over a longer period of time) solutions with double finger tap, double finger move, triple finger swipe and so on, and it doesn't work very well...

Many RAD tools have a visual designer with a "nudge blocker" to avoid an unintended move when selecting (or double clicking) elements. This works exactly like you describe. Click (or tap) to select the element you want to move, then drag it around on the next mouse down (finger tap&hold).

---

Update:

You should also have a look at Luke Wroblewski's Touch Gesture Reference Guide.

He describes the most basic and common touch gestures very well, and he has also made a list of how popular OS platforms support various touch gestures.

Answer 2

My first reaction was to match your suggested functionality regarding pinch/single finger to move the canvas and touch and hold to select, however I think this depends on the density of objects on the canvas.

Have you considered touch to select, too? This way there's no trial and error (I'd imagine users will only figure out touch-and-hold this way, though rather quickly). Google Maps' own app uses single touch to select a dropped pin and touch and hold to drop a pin.

Will the objects be selected, dragged, and placed?

If the object ARE to be selected, dragged and placed I'd go back to touch and hold to select, however, in order to make the hold more apparent to the user I'd consider having a timer appear once you've pressed which lasts for as long as one should hold to select. This functionality has been used by the Nintendo Wii interface and as a UX tool it works great.

Sorry there's so many variables in there - but I hope I've provided some food for thought!

Answer 3

You may take a look to the MindJet MindManager as an example. They made it in a pretty simple way (although they do not allow multiple selection).

• Select single object: just single tap on the object.

• Move objects: long press (> 500 ms) on the object + drag (note that it would also selected it if not already selected). When the long press has been detected, there should be some feedback. In MindJet MindManager, they vibrate the smartphone. For a tablet that doesn't have an vibrator, you would need an alternative feedback. If the objects in the canvas have some visual link (for example, like in a mind map), then you could break the link when the long press is detected. If your canvas is very dense, then you may bring the object up in the Z axis so that it appears a little bit bigger and on top of the other objects (including with shadow). I think I saw that on the Windows Phone 8 to re-arrange the tiles. Otherwise, you could use some other kinds of visual feedback like on Windows 7 (a circle being drawn bit by bit and when it is complete, the "right-click" action is triggered). This mechanism is great to actually teach the user that if he waits long enough, there will be something happening. The first time he sees the circle building up for a fraction of a second, he may try again a longer press and see what happens at the end.

• Pan/zoom canvas: just like on the Touch Gesture Reference Guide given above. The zoom being the only gesture that would require 2 fingers.

• Multiple selection: Is it required? If really needed, the use of modes might be the most convenient, unless your app heavily relies on multiple selection...

Could you give us maybe a screenshot or wireframe? it would really help if we could know more about what kind of app it is, the context...