UI Patterns and Techniques

Constrained Resize

From Powerpoint for Windows
Use when:	You're building a graphical editor which lets the user resize objects interactively. But sometimes a user may want to preserve the object's aspect ratio, for instance -- especially in the case of images or formatted text -- or the position of its geometrical center. Normal drag-the-corner interactive resizing makes this difficult or fiddly.
Why:	Quite simply, this 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 -- then the user can focus on what they want the built artifact to look like, not on getting the aspect ratio just right. If the user doesn't have this degree of control over the interface, they might have to resort to doing the resize by typing numbers into a form. That's almost never as nice as doing it via direct manipulation, since it breaks up the user's flow of work.
How:	This is basically a modified resize mode, so it should behave mostly like your normal resize -- by dragging a corner or edge of the object to be resized. Consider using a modifier key to differentiate it from the normal resize, e.g., the user holds down the "Shift" key while dragging. Or if you think most users are always going to want the constraint, make it the default resize operation. Word does this with images. As the user drags the mouse cursor, a resize box should be drawn to show the new dimensions. Whatever kind of constraint you're imposing, show it via the box. There are many reasons why one might constrain a resize. Some variations on a theme: 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've got to work with, the UI should reflect that.) Or you may be working with a snap-to-grid. In any case, the resize box should "jump" from one size to the next. An object may have a size limit. 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 describes this in his book About Face, although the technique is older than that. He generalizes the concept and calls it "constrained drag."