Movable Panels

Problem

People are persnickety—they like to organize things the way they make sense to them.

Solution

Group your various tools and content meaningfully into panels and let people move them around to where they like them.

Context

• You have coherent groups of things that don’t need to be positioned in specific places for them to make sense.
• You have multiple, even open-ended (pluggable), groupings that people are likely going to need or want to move around to suit their habits and preferences.

Rationale

As a rule, people like to adjust their environment to suit their needs and tastes, especially when they are going to spend a lot of time there. This is just as true of software as it is of physical spaces. Using moveable panels lets people do this, and in doing so, they can take better advantage of their spatial memory to more effectively and comfortably use the software.

As noted in the Context, movable panels are not appropriate for all solutions—don’t add them just because you can. They’re usually more appropriate for tools and portals that need an open-ended, pluggable UI infrastructure or will be used a lot and can stand to be customized without detriment to effectiveness.

Implementation

In the physical world, the ability to personalize the environment is more usually limited by physical constraints. In software, it is more commonly limited by organizational principles (and sometimes technology and cost), so think carefully about how you organize.

Using movable panels should not be an escape chute from good design, i.e., it should not be a Hail Mary to your users. You still need to think about how to optimally group the items in your solution and also come up with what you believe to be an optimal default arrangement based on good principles of user experience (such as those in visual design, information design, and usability testing).

Once you determine what you believe to be the optimal design, then you can add the capability of movable panels to let people tweak that design to their tastes. Panels provide a good level of grouping and tend to feel like distinct, encapsulated areas of the UI, so they’re a good level at which to provide the ability to rearrange objects.

If you don’t already have this sort of visual grouping, then you need to slice your interface up into them. If it is a software tool, panels usually end up mapping to palettes, tool containers, object browsers, property editors, that sort of thing. If it is content oriented, they’ll be grouped by things like similarity, source, type, or some other predefined packaging. It could be totally open ended like SharePoint and other pluggable infrastructures.

The convention on the Web seems to be to prefer predefined slots for panels, and because of that people will likely expect them. This probably has more to do with early-Web technological difficulties than usability concerns, so this could change, especially with RIA technologies. On the desktop, it is pretty common to see a combination of both slots and free-floating panels; however, if you go with free-floating panels, you should seriously consider adding Magnetism to help people arrange them.

If people can click and drag the panels, you typically want to enable this on the title bar area (as this is how most software windows function) so that your content areas can have free play with the mouse and keyboard events; however, if you know your content doesn’t need this freedom, there’s no sense in making the target smaller—go ahead and let people drag using any part of it. Another, similar approach is to let them click and drag anywhere there isn’t content, which you see more in toolbars. It can help to change the cursor to a “move” cursor, especially if the panel does not feel like a window, or you can change the cursor when they start to drag.

If it is okay for people to close/hide panels, consider adding a close button to the title bar, following platform conventions. You may also want to enable a collapse/expand functionality there, too, for which you can use arrows pointing right (for collapsed) and down (for expanded) or a plus and minus sign.

Lastly, you may want to provide a reset capability that will return the panels to their original, default locations. After all, if you arrange them in the optimal way, people may find they want to go back to that, or maybe they inherited someone else’s customizations and want to quickly start over.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Moveable Panels pattern without docking is implemented in the following ASP.NET control: WebDialogWindow. Check out the samples browser to see it in action.

Windows Forms

You can use the NetAdvantage for Windows Forms WinDockManager control to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called Docking Indicators to see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF XamDockManager Control. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamShowcase called xamSalesManagerto see it in action.

Sources

Jennifer Tidwell, Movable Panels

Tags

Page Layout, Customization.