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
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
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
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
- 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.