Content Groups
Also known as: Organizing the Page, Organizing Content, Content Chunking, Groups and Items, Titled Sections
Tags: content, showing data
Content groups pattern is about grouping content into logically titled sections. Well organized content allows people to scan information easily and get quickly an overview of the content on the page.
Google Analytics Dashboard displays information quickly and clearly. The information is logically structured and information groups have good titles.
Source: http://www.google.com/analytics/
Google Analytics dashboard.
What problem does the pattern solve?
- There is a lot of content you need to show on a page.
- Content can be formed into meaningful groups (it almost always can).
When to use it?
- There is a lot of content you need to show on a page.
- Content can be formed into meaningful groups (it almost always can).
How to use it?
- 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 Horizontal Module Tabs, Module Tabs (Yahoo!), or Closable Panels (Designing Interfaces), in addition to this, or as an alternative.
Why to use it?
- 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.
Sources
This pattern is inspired by “Titled Sections“ from Jenifer Tidwell’s book “Designing Interfaces: Patterns for Effective Interaction Design“.
Useful links
- Titled Sections - Designing Interfaces
- "Chunking" information - Web Style Guide
- Titled sections - Open Source Design Pattern Library
- Page organization - Web Content Design
- Groups and Items - User Interface Design Patterns
- Gestalt psychology - Wikipedia
Code snippets
- No code snippets yet.
Summary of you financial information
Source: http://www.mint.com/Mint is an online personal finance and money management application. When the user logs in, key information is shown in a personal dashboard. The design is very minimalistic, simple, and aesthetically pleasing. The most important information, alerts for the user, are listed at the top of the page where user usually looks first. In the middle appears top movers and shakers in the user’s stock portfolio. At the bottom of the page graphs display visually clear comparison to the budget targets without reading the numbers on the bars. On the left side of the page is displayed an overview of current account balances in banks where the user has an account.
Summary of financial market information
Source: http://www.google.com/financeGoogle Finance provides summary of the financial market at a glance. The dashboard consists of recent news, equity indices, recent stock quotes, sector summary etc. There is a lot of information on the dashboard, but it still doesn’t look cluttered. Visual elements are being used sparingly and content is organized into logical sections making it easy scan quickly.
Blogging tool admin panel
Source: http://dashboard.wordpress.com/Wordpress dashboard constains a lot of information but it doesn’t look cluttered. The page looks clean because content is organized into logical groups, and minimum amount of visual elements are being used.
Personal homepage
Source: http://www.google.com/igiGoogle has a widgetized dashboard which allows user to create a personalized page. User can select what content he wants to be shown on the page, such as feeds from favorite blogs, latest emails, weather etc. Everything the user adds to iGoogle shows up as a draggable widget, which allows organizing the content as he likes. The page is clean and simple making it easy to view everything at a glance.
LinkedIn dashboard
Source: http://www.linkedin.com/LinkedIn Dashboards keeps you updated about what your contacts are doing. In addition, it suggests people you might know, show events you might be interested in, suggest groups you might like, and so on. The page contains a lot of information and everything doesn’t fit into screen without scrolling, but the most important content is located at the top.
Pattern info
Creative Commons
Template: Patternry full pattern
Comments
Leave a comment