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
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.
No comments:
Post a Comment