Extras on Demand

Problem

People need flexibility and power but don’t always need or want it in their faces.

Solution

Show the most common or important stuff first, and let people get to extra stuff easily.

Context

• You have too much information or too many commands/options to show at once.
• You can identify and safely tuck away some portion of that stuff to be available when the person indicates she wants it.

Rationale

There are two primary (and often related) reasons to do this. The first is simply that you have too much to show in your interface to show it all at once. The more compelling reason is as it relates to the users. People tend feel overwhelmed when you present a lot of stuff at once, especially if it is unfamiliar.

Taking time to identify what they need most of the time, or maybe just want they need in a particular context, reduces the burden on them and can make them more productive and less anxious. At the same time, they probably do need to have the extra stuff available, so you need to make it easy to get to. Give them the control they need without overwhelming them.

Implementation

Figure out what the people want or need to see and/or use most of the time. Take the rest and stuff it into its own separate view (e.g., page, panel, section, etc.) and hide that by default. Somewhere near the common content, provide an affordance (such as a button, link, tooltip, icon, etc.) that indicates how the person can get more. This is often done using straightforward words like “More Info,” “Read More,” “More Options,” or something like that. You could also use directional pointers (e.g., >>) or an ellipsis (…) if appropriate.

When the user selects that affordance (or makes whatever gesture you indicate is needed to trigger showing the extras), show it. Usually it is good to do this in context like right below or next to the main stuff; however, if the extras are too much, you could show a new page or popup of some sort.

On the extras view, be sure to have a way to hide them again, which could be the inverse of the affordance you used to show or, in the case of a dialog, the standard OK/Close buttons could work. If it is a lightweight overlay, even clicking outside of it could be a good option. If it is a new page in a browser, clicking the browser’s Back button should work.

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

Extras On Demand pattern is implemented in the following ASP.NET controls: WebPanel, WebListBar, WebTab. Check out the samples browser to see it in action.

This pattern can be implemented for custom scenarios using the WebDialogWindow controls as well.

Windows Forms

You can use the NetAdvantage for Windows Forms WinToolTipManager to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called Tooltips With Context to see it in action.

WPF

You can implement this pattern using the dialog launching in the XamRibbon and toggling between collapsed and expanded states of the XamTabControl or the XamDockManager. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser called Dialog Box Launder to see it in action.

Sources

Jennifer Tidwell, Extras On Demand

Tags

Interaction Design, Information Architecture, Form, Information Design.