The Second Edition is out!
Visit designinginterfaces.com to read excerpts and learn more.

Titled Sections


From http://www.adobe.com

What:

Define separate sections of content by giving each one a visually strong title, and then laying them all out on the page together.

Use when:

There's a lot of content on the page, but you want to make the page easy to scan and understand. You can group the content into thematic or task-based sections that make sense to the user.

Why:

Well-defined and well-named sections structure the content into easily-digestible chunks, each of which is now understandable at a glance. It makes the information architecture obvious. (Information architecture is basically about rendering content in a way that communicates its semantic structure.)

When the user sees a page sectioned neatly into chunks like this, her eye is guided along the page more comfortably. The human visual system always looks for bigger patterns, whether they're deliberate or not. So put them in deliberately!

How:

First, get the information architecture right -- split up the content into coherent chunks, and give them short, memorable names (one or two words, if possible). Next, choose a presentation:
  • For titles, use a font that stands out from the rest of the content -- bold, wider, larger point size, stronger color, etc. (Remember that nothing's stronger than black, not even red.)
  • Try reversing the title against a strip of contrasting color. White on dark can make it look like a Windows title bar.
  • Use whitespace to separate sections.
  • Putting sections on different background colors works well on Web pages and "flashy" interfaces, though it's unusual on desktop UIs.
  • Boxes made from etched, beveled, or raised lines are familiar on desktop UIs. They can get lost -- and just become visual noise -- if they're too big, or too close to each other, or deeply nested. It can be done well when combined with the title; see the examples.

If there's still too much stuff on one page, try Card Stack, Two-Panel Selector, or Extras On Demand to manage it all. You can combine some of these patterns with Titled Sections, too. Closable Panels and Movable Panels are alternative ways of presenting "chunked" content.

If you're having trouble giving reasonable titles to these chunks of content, that may be a sign that the grouping isn't a natural fit to the content. Consider reorganizing it into different chunks that are easier to name and remember. "Miscellaneous" categories may also be a sign of not-quite-right organization, though sometimes they're genuinely necessary.

Examples:


From Eudora for Mac OS 9

This is a typical usage of Titled Sections in desktop applications. In Eudora's preferences dialog, the boxes look good around the grids of checkboxes, the bold titles stand out clearly, and there is sufficient white space between the sections to give them visual "breathing room." (In fact, this example would work even if the boxes were erased.)


From a Javadoc HTML page

This screenshot came from a long page full of Java documentation. Each section is labeled with the blue bars, which are very easy to find and read as the user scrolls rapidly down the page. Notice the use of visual hierarchy here: the main sections are marked with large fonts and darker color, while the minor section at the bottom uses a smaller font and lighter color. At the next level down the hierarchy, the names of classes and methods stand out because they're green and outdented; finally, the body text is small and black, as body text usually is.