Movable Panels
MATLAB | |
What: |
Put different tools or sections of content onto separate panels, and let the user move them around to form a custom layout. |
|
The page has several coherent interface "pieces" that don't really need to be laid out in one single configuration; 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 are 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; hide things they don't need; and use
Spatial Memory (Chapter 1) to remember where they put things.
Rationally speaking, Movable Panels 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 his 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 panels 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. Titlebars are good for this. In fact, if you put an "X" on the handle, some users will conclude that that is how they 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 Default Layout" action somewhere on the UI, if they get completely tangled up and just want to start over. When you usability-test Movable Panels, watch especially for accidental panel moves -- a user who unintentionally drags a panel into an odd place may not know immediately what he did or how to undo it.
|
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. You can bring back hidden pieces via popup-menu items. These screenshots show Winamp's default configuration, and disassembled. |
|