Excerpts from the O'Reilly book,
public discussion, and new patterns.
Buy the book

Constrained Resize

Resizing a picture; Word preserves a picture's aspect ratio when corners are dragged
What:	Supply resize modes with different behavior, such as preserving aspect ratio, for use under special circumstances.
Use when:	You're building a graphical editor that lets the user resize objects interactively, such as by dragging a corner. But sometimes a user may want to preserve certain properties, like the object's aspect ratio, for instance -- especially of pictures and formatted text -- or the position of the object's geometrical center. Normal drag-the-corner interactive resizing makes this task difficult.
Why:	Quite simply, this technique can save the user a lot of work. If the UI constrains the resize to work in certain ways, such as by forcing the width and height to remain in the same proportion to each other, then the user can focus on what he really wants it to look like. If the user doesn't have this degree of control over the interface, he might resort to doing the resize by typing numbers into a form. That works, but it's almost never as nice as direct manipulation. It breaks up the user's flow of work and forces him to think numerically instead of visually -- something not everyone does well. Direct manipulation better supports Incremental Construction (see Chapter 1).
How:	This technique is basically a modified resize mode, so it should behave much like your normal resize -- usually by dragging a corner or edge of the object to be resized. How should you differentiate this mode from a normal resize mode? Consider using a modifier key; many applications go into a constrained-resize mode when you hold down the Shift or Function key while dragging a corner. Or, if you think most users are always going to want the constraint, make it the default resize operation. Word does this with pictures and clip art; see the example above. Thus users don't accidentally end up with vertically or horizontally squished faces in their baby announcements. As the user drags the mouse cursor, a resize box should be drawn to show the new dimensions and/or position. This box gives the user immediate feedback about what's going to happen; if the user is alert, he can even tell from the resize-box behavior whether or not the resize is constrained. You can constrain a resize in several ways. Here are some possibilities: Retain the object's original aspect ratio (the ratio of width to height). Leave the object's geometric center in the same place, and resize symmetrically around it. Resize by units larger than pixels. For instance, a GUI builder may require that a list box's height be some integral number of text lines. (Probably not a good idea in general, but if that's what you have to work with, the UI should reflect it.) The resize, by default, should "jump" from one size quantum to the next. Similarly, the graphical builder's canvas might use a Snap-to-Grid mechanism; again, the resize should jump between grid squares. Limit the size of the object. Once the user has hit the size limit in one dimension or the other, don't let the resize box expand (or contract, as the case may be) any further in that dimension. Alan Cooper and Robert Reimann describe this technique as "constrained drag" in About Face 2.0: The Essentials of Interaction Design. The technique dates back to at least the mid-1990s.
Examples:
From Illustrator Adobe Illustrator has at least two constrained-resize modes: one for preserving the object's aspect ratio, and one for preserving its geometric center. This figure shows a normal drag-the-corner resize, in its "before" (with grabbable handles), "during," and "after" states. The blue outlines, which change in real time as the user drags the corner, show what the object's new size and position would be, should the user release the drag.
These screenshots show the two constrained-resize modes. When the user holds down the Shift key, the aspect-preserving mode kicks in. When the user holds down the Alt key instead, the object can be resized freely in both dimensions, but the center stays fixed.