UI Patterns and Techniques

Extras On Demand


From the Windows color dialog

Use when:

There's too much stuff on the page, but some of it isn't very important. You'd rather have a simpler UI, but you have to put all this content somewhere.

Why:

A simple UI is an excellent thing, especially for new users, or users who don't need the full functionality you can provide. Let the user choose when to see the entire UI in its full glory -- they're a better judge of that than you are.

If your design makes 80% of the use cases easy, and the remaining 20% are at least possible (with a little work on the user's part), your UI is doing as well as can be expected!

When done right, it can save space, too.

How:

Ruthlessly prune the UI down to its most commonly-used, most important items. Put the remainder into their own page or section. Hide that section by default; on the newly-simplified UI, put a clearly-marked button or link to the remainder, e.g. "More Options." Many UIs use arrows or chevrons, ">>", as part of the link or button label. Others use "...", especially if the button launches a new dialog.

That section should have another button or other affordance to let the user close it again. Remember, most users won't need it most of the time. Just make sure the entrance and exit to this "extras" thing are obvious; test them.

On some dialog boxes, the box literally expands to accommodate the details section, then shrinks down again when the user puts it away. See Closable Panels for more concrete details. Another mechanism is found on various desktop UIs: a dropdown for fill color, for instance, contains a "More Fill Colors..." item which brings up a separate dialog box.

Examples:


From Windows Explorer

Is "Search Options" a link or a button? Doesn't matter -- it does the obvious thing when the user clicks on it! Likewise, clicking the title bar of the Search Options box closes the box. Not shown is another level of Extras On Demand: when the user unchecks "Advanced Options," the indented checkboxes below it disappear. This makes it similar to Progressive Disclosure.