One-Window Drilldown

Problem

Sometimes it helps to focus on one thing at a time.

Solution

Show all the views in an application in one window, changing the windows contents as people navigate through it.

Context

• You have a flow or hierarchy that can, or even should, be navigated linearly.
• You have a technological or physical form factor constraint that impedes a multi-window interface, such as small form factor or limited input controls.
• Most of your users are not regular computer users—having multiple windows could be confusing or overwhelming.

Rationale

The more common applications of this pattern do so because they are limited by technological or physical factors. Cell phones, mp3 players, and other handheld devices lend themselves naturally toward a single-window interface with basic drill down/up navigation. Similarly, some kinds of applications that have limited input needs or controls (such as media players) can use this approach to good effect because the goal is focused and directed—find some media and view it, usually in an immersive, full screen approach.

In fact, Web browsers in themselves natively and originally supported this approach of using the full window for content and navigating linearly back and forth through it, though with Ajax and RIA technologies, multi-window interfaces for Web-based applications are becoming more common.

It works because it is a simple, focused interface that guides people through it using clear navigation options that work on our natural time/story-based memory facilities. Even in standard personal computing environments, you may have cases where you want people to focus and/or be guided through a linear process and so would opt for this pattern over more complex multi-window options.

Implementation

This pattern is pretty straightforward. You have to think about the navigation flow and how you can get people to the different views in the application without using multiple windows or multiple points of exit and entry. You want to assist people in understanding the flow, so it is good to constrain to direct paths down and up a hierarchy or simple linear paths (step 1-2-3).

You can use back and forward buttons if available (such as in a browser). If not, consider making them available in stable way. If you have a keyboard, using Escape can be a way to indicate going back, and if the input device has arrow-based indicators, these can and should be used for navigation.

Depending on available screen space, you can use Breadcrumbs or, at minimum, show an indicator of the previous view (i.e., what they’ll get if they go “back”).

Whatever you do, make the navigation options very obvious and accessible and map them appropriately to the input device you have at your disposal.

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

One-Window Drill Down pattern can be implemented using combination of the following ASP.NET controls: WebDataMenu, WebDataTree, WebListBar that will trigger the page to go to a different page. It is also implemented in the WebDataGrid and WebGrid control by going to a detailed view when user clicks on a row. Similar drill down views can be implemented using WebChart and WebGauge by triggering events when user clicks on a data point. Check out the samples browser to see it in action.

Windows Forms

You can use the NetAdvantage for Windows Forms controls: WinToolbarsManager and WinTab/WinTabbedMDI in combination to implement this pattern. Furthermore, the WinGrid and WinChart implement this pattern.

WPF

You can implement this pattern using the NetAdvantage for WPF controls: xamRibbon and xamTabControl.

Sources

Jennifer Tidwell, Designing Interfaces

Tags

Drill-Down, Information Architecture.