Also known as: Organizing the Page, Organizing Content, Content Chunking, Groups and Items.

Why

• Having the information logically organized makes scanning easier and helps to understand the content quickly.
• People like well-organized sites that make important information easy to find.

How it works

• First, you need to know the users to be able to organize content logically to them - who they are and what information they need?
• Decide is it important to show everything on the same page or would it be better to divide the content into several pages.
• Organize the content into sections and subsections that reflect users’ needs.
• Give each section a short, descriptive title.
  • Sometimes it is good to add some description text also to tell what that section is about.
• Place the most important information towards the top of the page.
  • It is the prime real screen estate on the page - area where users look first.
  • This also improves usability for screen readers as they usually start reading from the top of the page.
• Group related sections together.
• Visually differentiate each content group from each other, but use visual elements as little as you can to keep the page clean and easy to scan.
  • Make titles stand out from the content
  • Use white space, and if needed, lines, light borders around sections, and/or background colors to separate content groups.
• Depending on the context of use, consider using patterns like Stacked Tabs, Module Tabs (Yahoo!), or Closable Panels (Designing Interfaces), in addition to this, or as an alternative.

History

This pattern was created by Janne Lammi. It is inspired by ‘Titled Sections’ from Jenifer Tidwell’s book “Designing Interfaces: Patterns for Effective Interaction Design”.

Pattern Gallery

Show Your Pattern Examples Here!

Add your examples to this pattern by adding them to flickr.com group UIPatternFactory.com and tagging with this tag:

More photos in Flickr group "UIPatternFactory.com" tagged with content-groups