UI Patterns and Techniques

One-Window Drilldown

From TiVo, courtesy of http://tivo.com
Use when:	Your application consists of many pages or "panels" of content for the user to navigate through. They might be arranged linearly, or in a hyperlinked network, or -- most commonly -- hierarchically. Address books, calendars, email readers, and other familiar software often follow this kind of organizational scheme. One or both of these constraints might apply to you: You are building for a device with tight space restrictions, such as a handheld, a cellphone, or a TV (as in the example above). On these miniature screens, Overview Plus Detail is impractical, because there just isn't enough room to do it well. Even if you are building for a desktop or laptop screen, you may have a complexity limit. Your users may not be habitual computer users -- they might have little patience with (or understanding of) having many application windows open at once, for instance. Or they may not deal well with complex screens or fiddly input devices. Users of information kiosks fall into this category; so do novice PC users.
Why:	Keep it simple. When everything's on one screen or window, the options at each stage are clear, and the user knows they don't need to focus their attention anywhere else. Besides, everyone these days knows how to use a Web browser, with its single window (usually!) and simple back/forward page model. People expect that when they click on a link or button, the page they're looking at will get replaced, and when they click "Back," they'll go back to where they were before. Multiple windows can be used to show the different spaces that a user navigates through -- a click in a main window may bring up a second window, a click there brings up a third, etc. But that gets confusing. Even sophisticated users can easily lose track of where their windows are (though they can see several windows side-by-side, and place them where they want). One-Window Drilldown is an alternative to several of the higher-density patterns and techniques discussed here. As pointed out above, Overview Plus Detail may not fit, or it may make the screen layout or interactions too complex for the typical user. Tiled windows, Closable Panels, Movable Pieces, and Cascading Lists also have space and complexity issues. They don't work on miniature screens or novice-intended interfaces.
How:	You are given a window to work with -- a miniature screen, or a full-sized screen, or a browser window, or an application window that lives on the desktop alongside other apps. Structure your content into panels that fit gracefully into that window; not too large, not too small. On these panels, design obvious "doors" into other UI spaces, like underlined links, buttons, or clickable table rows. When the user clicks on one of these, replace the current panel with the new one. Thus the user "drills down" deeper into the content of the app. How does the user go back? If you're designing for a device with back/forward buttons, that's one solution. (If not, create those buttons and put them in one permanent place on the window -- usually the upper left, where browsers put them!) You could also put "Done" or "Cancel" controls on panels where the user is doing some kind of task or selection; these give the user a sense of closure, of "being done." Remember that with no graphic depiction of the app's structure, nor of where they are in that structure, a one-window app forces the user to form a mental picture of how all these spaces fit together. Simple linear or hierarchical structures work best. In usability tests, make sure people can use the thing without getting lost! Implementations of Hub and Spoke often use this as their physical structure, especially on the Web and on miniature screens.
Examples:
From the Mac OS/X System Properties The OS/X System Properties tool keeps everything within one window. The main panel is on the left; a drilldown panel (for the Dock) is shown on the right. There's only one level of drilldown panels, and the user goes back to the main panel via the "Show All" button in the upper left. Mac screens are usually large, and OS/X users are varied in their levels of experience. The System Properties designers may have chosen a One-Window Drilldown approach because of the sheer number and diversity of subpanels -- that main panel takes up a lot of space, and it probably didn't play well in a tiled Overview-plus-Detail window.
From Pine The email client Pine is a lightweight, text-only user interface that is driven entirely from the keyboard. The greater-than and less-than keys are used to navigate the panel hierarchy: the main screen, a list of mailboxes, a list of messages within one mailbox (seen on the left), the text of a message (seen on the right), attachments to a message. It's a deep hierarchy of UI "spaces," but it works well within one window. Compare this to the screenshot of Mac Mail in the Overview Plus Detail pattern -- both are good interfaces, but they have very different designs.