Titled Sections

Problem

People get overwhelmed if too much information is presented at once.

Solution

Group information into sections on a view and add prominent titles to them.

Context

• There are logical groupings (such as based on some pre-established information architecture) and meaningful titles for your information.
• You cannot reduce or eliminate information in a way that would make titled sections unnecessary.
• You can fit the information with the titles in the target view, and you need to show it, i.e., something like Tab Dialogs, Closable Panels, Movable Panels, or Extras on Demand wouldn’t be more appropriate. These can also be used in conjunction.

Rationale

A long time ago psychologists figured out that people are better able to absorb (and remember) information if it is broken down into smaller chunks. In fact, it is sort of a primordial basis of classifying information. The same principle applies for information you put into your solutions to be seen by your users—break stuff down into meaningful groups and label them.

Using visually distinct sections will guide people to see the information as chunks. The titles will help them to quickly scan over the chunks to find what is interesting to them, and then they can look deeper at the section if interested.

Implementation

This pattern won’t work if you can’t meaningfully group your information into chunks. You have to get that right first. Once you have them, the titles will probably come naturally (because you already know what makes the information a conceptual chunk), but you may need to whittle it down so that it is short (just a few words, depending on your layout) and concisely communicates the contents of the section.

You also need to consider how to lay out the sections. Usually, using white space (as gutters) to set them off is better than lines, boxes, or background colors (because those add visual noise), though these can help if used strategically or if they fit better with the overall design. Think about whether the sections should go side by side, top to bottom, or maybe both. Or maybe they should they be like floating tiles that can adjust in a Liquid Layout; whether or not they flow, Grid Layout is most likely the best choice for overall layout.

Titles should be visibly prominent (display type), which usually means a larger or wider font, maybe a different font entirely, and maybe a different color or saturation. You can make the title background color different—makes it sort of like a title bar, and you can think about using icons with the titles to further set them off.

When you’re done, take a break—get a cup of joe. Go think about something else, and come back and see if you can quickly take in the information in the chunks you have designed with the given layout. If so, you’re probably good.

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

Tiled Sections can be implemented using the following ASP.NET controls: WebPanel, WebGroupBox, WebListBar, WebDialogWindow. Check out the samples browser to see it in action.

Silverlight

You can use the NetAdvantage for Silverlight xamWebOutlookBar control for this.

Windows Forms

You can use the NetAdvantage for Windows Forms controls: WinGroupBox and WinExplorerBar to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called WinExplorerBar Basic Features to see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF xamOutlookBar. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser under the xamOutlookBar section to see it in action.

Sources

Jennifer Tidwell, Designing Interfaces

Tags

Information Architecture, Page Layout, Information Design, Visual Design, Visual Hierarchy.