Register
Quick and easy! Create patterns and join discussions on draft patterns! Go here to RegisterLogin
Already a member? Go here to Login now.Browse Patterns
Top Rated Patterns
Contact Us
Titled sections
Design Problem
Orient users. There's a lot of information on the page and the user needs to be able to scan the page and quickly get an overall feel for the information on the page and determine which is relevant.
Solution
Group related items into sections. Split up the content into separate, coherent chunks, and give each chunk a short, simple title.
Use When
- Understandability at a glance is important. There is a lot of content on the page and you want to make it easily scanable and understandable.
- You are able to group information into coherent, meaningful chunks.
How
Break information into coherant chunks and create simple, meaningful titles. Various visual design techniques can help make the titles more scanable and "jump out". You context will drive the specific visual representation but some common techniques:
- larger font size than main text
- strong visual style such as bold
- additional whitespace around the title
- swap out background and foreground colors
- additional whitespace around the title
- strong visual style such as bold
In addition, titled sections should be sensitive to the levels of the heading to make the information hierarchy clear.
Rationale
Minimize information overload. Landing on an information-rich page, with everything of seemingly equal importance, can be overwhelming. Most users will only give the page a few seconds before evaluating relevance. This pattern can help you give them enough information scent on a quick scan to understand what is there and what is most relevant to them.
"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!" (Designing Interfaces by Jennifer Tidwell, http://designinginterfaces.com/Titled_Sections)
Examples
wiki.fluidproject.org and npr.org respectively
Accessibility Considerations
Accessibility concerns for Titled Sections is similar to issues facing accessibility for any HTML page.
- Headers on a page should follow the proper order. H2 should be subsidiary to H1, H3 should follow H2 etc. Placing a H3 after H1 breaks header hierarchy and creates an accessibility issue for users of assistive technology.
- Using styled text to mimic Header-like functionality is strongly discouraged as software like screen readers search out the Header elements to create a navigable hierarchy.
- Titled Sections should be clear and easy to read. Avoid using background colours that are similar to the foreground text.
- Consider using tabindex attribute to quickly allow users to jump to areas of interest.
Reviewed.
By jhungI have reviewed this pattern. Cleared for publishing.
Post new comment