PINCH TO SHRINK AND SPREAD TO ENLARGE
WHAT
Two fingers—either the thumb and index finger on a single hand, or both left and right index fingers if both hands are used—are brought closer together (Pinch to Shrink) or farther apart (Spread to Enlarge) while on top of an object, causing that object to change in size, scaling smaller if the fingers are moving closer together and larger if the fingers move farther apart. These two patterns are almost always found together.
USE WHEN
Use these patterns to increase or decrease the size of objects (e.g., maps, web pages, documents, images) or the entire screen, effectively zooming in and out.
WHY
For small devices in particular, users may need to zoom in and zoom out to see an object at the correct level of fidelity and detail. This also effectively eliminates a need to increase font size for some objects with text.
HOW
These two patterns require a system to be able to recognize two touch events (multitouch). The patterns typically scale an object proportionally, although it doesn't necessarily have to be so. They also typically utilize a smooth motion on a scale, not set levels of shrinking. That is, the starting points of the two fingers are usually equal to 100% of the object's starting size. As the fingers move closer together or farther apart, the object scales in real time to match the new distance between the fingers at a ratio that designers will need to determine based on the sizes of the original objects and the size of the screen. For ...