Alternative Views

Problem

You have competing, sometimes mutually exclusive, design needs for an interface.

Solution

Create multiple, alternative views of the same interface that address competing design needs.

Context

• You cannot sufficiently address the needs for an interface using one design.
• The needs are distinct enough to warrant multiple views—usually requiring structural differences, not just styling.
• You can separate the competing needs into targeted views that make sense to users.
• You have the time and resources to create multiple views for the same interface.

Rationale

When your design needs become so at variance that trying to suit them all would make your interface unusable or technically impossible, you need to consider creating multiple views. Probably the most common such instance is printing, especially on the Web, where just using the browser print functionality results in low readability due to navigational and ancillary visual elements that are not directly pertinent to the content at hand.

Similarly, you may need to provide views for very different form factors, such as phones or other handheld devices, or maybe you need to provide a portable format such as a PDF so that users can take the information offline in a readable manner.

More advanced applications of this pattern would be geared towards different views on the same data such as different visualizations and/or browsing mechanisms to help users analyze and discover what they need to. You may also go as far as to create adaptive views so that users who need the interface optimized for speed are not hindered by design elements intended to help novice and occasional users or maybe you need to surface extra information or functionality that is not normally required by most users.

Whatever the details are, if you find yourself in a situation where an interface starts getting clunky or simply cannot address all of the usage needs you have for it, alternative views can be an optimal solution. Just be sure that the views you create actually do serve the distinct competing needs better—it would be a terrible waste of time and resource to make multiple views that are equally hard to use!

Implementation

The implementation of multiple views will vary as widely as the needs of various application interfaces do. The key thing is to identify that you have competing usage needs that cannot be served well with one interface, segregate them into one or more alternative views.

Often it is just one incompatible need (such as printing, portability, performance, form factor), so the alternative structure is obvious. However, sometimes it is not obvious until you add something to your default view, and then it just doesn’t feel right or feels to cluttered, at which point you need to try to rationalize other views.

There is a temptation to do the beginner vs. advanced view, but that segregation is not particularly helpful. A more helpful means for determining views could be the use of personas or, at least, roles that inform what those particular types of users will need. For instance, you can imagine a reviewer/editor role needing a different view—one with more functionality or extra information—from the default author role for a document. Thinking in terms of user types (roles or personas) can help identify what particular views you need to create by focusing on their goals and tasks.

If there is no reason, such as security, not to, you should provide easy ways to switch between views. If there is no reason, such as security, not to, you should provide easy ways to switch between views. If the view contains user state (e.g., they’re working on a form or document), you should ensure that the state is kept/transferred between the views.

Some presentation layer technologies like HTML, Windows Presentation Foundation, and Silverlight have support for creating multiple views with styles that can be changed independently of the application’s code. In HTML you can use CSS and in Windows Presentation Foundation & Silverlight, styles and templates.

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

Alternative Views pattern is implemented in the following ASP.NET control: WebHtmlEditor. Check out the samples browser to see it in action.

You can implement this pattern for other scenarios using WebTab to separate different views on the same screen.

Windows Forms

You can use the NetAdvantage for Windows Forms controls: WinGrid, WinListView, WinPrintDialog, WinDocumentExporter, and WinExcelExporter to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called WinGrid -> CardView, [WinListView] Infragistics File Explorer, and Print Preview – Basic Features to see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF controls: XamDataPresenter and Infragistics.Reports. You can see an example of this pattern implemented here.

JavaServer Faces

There are many ways to implement this pattern in JSF. Tabs and stack bars are certainly the most common, though providing secondary views via a popup window is also common. A common andpopular versionof this pattern, using tabs, is available here.

Sources

Jennifer Tidwell, Designing Interfaces

Tags

Data Analysis, Information Architecture, Displaying Complex Data, Customization.