How to Get High Precision on
a Tablet with a Drawing-Like App
It is in fact possible, however, to get levels of precision comparable to or even better than that of a mouse on a personal computer when using an iPad.
This note will describe the problem and how to deal with it, using as an example a drawing app that I have been developing for the iPad. (The app isn't publicly available; it is intended for use with apps that I have developed that make use of maps that are drawn by the drawing app.).
Jobs did have a point. The size of your fingers is an issue. This comes up most often with web sites that are not designed for a tablet. But it is possible to design apps that have high usability even for small size tablets, if you take care in the design.
To understand how to build a high-precision drawing app, we need to understand the real problem.
Why is it harder to draw with precision on a touchscreen with your finger than it is using a mouse on a PC?
I believe that there are two main problems, and that the size of your finger is not itself the direct problem. They are:
I was initially unsure about whether I could build a map editor for an iPad that would have levels of precision comparable to that of a drawing program like Adobe Illustrator, which runs on a PC with a mouse or trackpad.
The use of a stylus was something I considered, but this has limited value. The typical stylus for an iPad has a blunt rounded surface and, although smaller, is otherwise not much different from a finger. A stylus helps a little, but doesn't really solve the problem.
I initially built an editor that used the pinch-and-spread zoom capability of iOS. The user could zoom in, take the necessary actions with high precision, and then zoom out again. This zooming capability is implemented in the app, but I soon found a way to provide even higher precision that was also easier for the user than zooming.
This solution was to create a rectangle off to the side of the main drawing area that functions as a "virtual touch pad". Users can move their finger (or stylus) up and down and side to side on the touch pad to cause a change to the elements in the map. This works very much like that of a touch pad on a personal computer. Because this touch pad is virtual, how it works can be different for different contexts, and it can provide much higher levels of precision than a mouse or ordinary trackpad if necessary.
To see how this works in practice, I will show two examples from the map editor: drawing a road, and rotating a building that has been added to a map.
The user then "locks" this area, preventing any further zooming or panning of the original Apple/Google map. (The user can now choose to enter a mode that allows zooming and panning, but this is of the new map being created, with the Apple/Google underlying layer only going along for the ride.)
These are tourist maps, and it isn't necessarily desirable to show all of the streets in the area. Typically only the main streets and those needed to travel to tourist attractions and businesses are shown.
The user can draw a road by simply selecting "Draw a Road" from a menu, and tapping on the map for the beginning point and a set of subsequent points. The taps are on top of the road shown by Apple Maps, thus tracing the map.
For many cases this is all that is required. However, if high precision is desired, the setting of each point for the road is a two-step process, with tapping on the map the first step, and the use of the virtual touch pad the second step.
The following figure shows the beginning of a road, in which two points have been added, the initial point of the road and a second point, the latter shown as a crosshair. Note that the second point is off a bit--it should be directly on top of the original road.
What the user does is to move his or her finger across the virtual touch pad. This will cause the position of the second point to change, as shown by the crosshair. With this approach your finger is not obscuring anything, and its size is not an issue. The distance that the crosshair moves can be as little as necessary in order to get the desired position. The crosshair provides the feedback that the similar cursor of a mouse would provide.
The figure below shows the road after the user has moved the second point of the road by use of the virtual touch pad.
This is done in multiple steps. The user selects "Draw a Rectangle" from a menu, and then taps on the map at the desired location. This is only a rough position, to be corrected later. The size of the rectangle is also modified later. Both of these fine adjustments are done with virtual touch pads.
In the figure below the building needs to be rotated so that it is parallel to the road. There are two virtual touch pads shown. Both will cause a rotation of the building that has been selected when the user moves his or her finger to the right or left. (The arcs with the arrows indicate what rotational movements will occur given a movement to the left or right).
The top touch pad area does "coarse" rotation, while the bottom one does "fine" rotation control.
The figure below shows a different configuration of multiple touch pads. This allows the modification of the position, width and height, and rotation of a rectangle with a single screen.