UI Patterns and Techniques

Titled Sections

From http://www.adobe.com
Use when:	There's more than a small handful of controls or text fragments on the page. In other words, almost always -- unless the content of your UI is very small, or is conceptually one thing, like a textual or visual narrative.
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. When the user sees a page sectioned neatly into chunks like this, their eye is guided along the page more comfortably. The human visual system always looks for bigger patterns, whether they exist or not. So put them in deliberately!
How:	First, get the information architecture (IA) 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. Basically what you're doing here is building a visual hierarchy on the screen. This is a concept from graphic design. Grouping, fonts, and judicious use of whitespace can take you a long way. If there's still too much stuff on one page, try Card Stack, Overview Plus Detail, or Extras On Demand to manage it all. You can combine some of these patterns with Titled Sections, too.
Examples:
From Eudora for Mac OS 9 A typical usage in desktop applications. In this example, 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, though it would look a little odd.)
From a Javadoc HTML page This screenshot came from a long page full of programmer-level 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.