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.
|