UI Patterns and Techniques

Movable Pieces

From MATLAB 6
Use when:	The page has several coherent UI "pieces" that don't really need to laid out precisely; their meanings are self-evident to users, regardless of their location on the page. You may want users to feel some sense of ownership of the software, or at least have fun playing with it.
Why:	When they'll be working on something for a while, people like to rearrange their environment to suit their working style. They can place needed tools close to where they work; they can hide things they don't need; they can use spatial memory to remember where they put things. Rationally speaking, Movable Pieces helps users get things done more efficiently and comfortably (in the long run -- once they've spent time rearranging it to the way they like it!). But this kind of personalization seems to appeal to people on some other level too. They may do this on infrequently-visited Web sites that provide some kind of entertainment, for instance.
How:	Let the user move the UI pieces around the page at will. Save the layout for the next time the user resumes using the software, especially if it's an important part of their daily life. Depending upon the design you've chosen, you may want to give the user freedom to place these pieces anywhere at all, even if they overlap. Or you may want a prescribed layout grid with "slots" where pieces can be dropped -- this lets the page maintain alignment (and some sense of dignity!) without making the user spend too much time fiddling with windows. If the movable pieces react to mouse clicks or mouse drags, such as for text selection, consider putting a "handle" on each piece that the user can grab to move the piece around. Title bars are good for this. In fact, if you put an "X" on the handle, some users will think that's how to get rid of a piece entirely. (If you implement this, of course, offer a way to recreate the pieces that are gone!) Your users might appreciate a "Revert to Defaults" action somewhere on the UI, if they get completely tangled up and just want to start over.
Examples:
From Winamp The three pieces that make up Winamp can be hidden, shown, rearranged, even separated completely from each other and moved independently. The user can move a piece by dragging its title bar; that title bar also has Minimize and Hide buttons. Hidden pieces are brought back via popup-menu items.