Containment Explained

'Containment' is the effect where one or more elements is shown as part of a group or category, through a visual mechanism.

There are two variations of mechanism:strict encapsulation, where the element is totally contained within abox; and softer containment, where the box is suggested using thehierarchical cascade and white space. Strict: Encapsulation

This is where you show that an element is part of, or a child of,or (one-way) related to, another element, by placing the child withinthe bounds of the parent. The parent might be identified simply by alabel that's either inside the box and towards the origin, or sittingon the edge of the box.

In this example, the three panels clearly belong to the group "Homepage - Features", because the title bar defines a box that contains thethree objects below.

Here, the title describes the child items: they are all "Features on the home page"

Alternatively, it might simply be a box within a box that is otherwise identified (e.g. links associated with this document).

Soft: Hierarchical cascade

This is the softer alternative to the more literal encapsulation.It doesn't depend on the 'higher' element actually encompassing the'lesser' element, but the containment is suggested through visualsuperiority. The 'superior' element should be laid out near the'lesser' or child elements, and toward the origin (either to the left,or above, or both).

Although there is no physical containing box, the title "Bargain flights" obviously applies to every item in the list.

Thisis suggested because the title is situated between the list and thepage origin, and reinforced by the title bar projecting a littlefurther left (towards the origin) than the list, and spanning its fullwidth.

The 3 types of house all belong to the category "Three-bedroomed Homes"

Although the title "Three-bedroomed homes" does not span the the fullwidth of the child elements, it projects slightly left of their leftedge, and no other element exists in the imaginary box created by thewhite space.

Example of too much encapsulation

Click to enlarge

This page uses too much encapsulation, with the result that everything seems separate, with nothing related to anything else. You also don't know where to look first.

Several self-contained sections, like the blue header, create hard breaks across the full width of the content area

The only way to maintain visual relationships in this scenario would beto use strict alignment, indenting elements different amount to suggesttheir relationships. The centre-aligned navigation here is particularlyineffective.

Example of incomplete encapsulation

This snippet shows incomplete boxes. It's encapsulation that's started but not finished.

I think that the end result is worse than having all boxes or just using whitespace and no boxes at all. It causes an illusion that the brain finds unsettling.

Grouping Elements
Grouping similar elements helps the brain quickly decode a page layout. Proximity, Alignment, Containment, Rhythm and Styling are all tools that help indicate grouping...
Visual Hierarchy
Hierarchy. Creating website navigation, dear friends, is all about establishing hierarchy. This tutorial will teach you how it
The Concept of Sitemaps Explained
What are the essential components of site maps and why should we use them? Let the experts at SEOelite.com help you answer this question.
People don't read
The #1 most important feature to appreciate about browsing behaviour is scanning. Web sites designed to be looked at are likely to fail. Web sites designed to be scanned are more likely to succeed...
The Google Sandbox Explained
The Google Sandbox is a metaphorical term to explain why most new websites have very poor rankings in Google Search Engine Results Pages (SERPS).
Google Ranking WITHOUT ever submitting to Google!
A while back, I read an article that explained how to get a good google rating without ever submitting your site to their submission forms. Like you, I was kind of shocked by this statement so I decided to give it a try. In the beginning, I used to submit my site all the time to Google but soon...
PHP Navigation and Connecting to a MySQL Database
PHP Navigation and Connecting to a MySQL Database
.com Not Listed in Regional Yahoo? Don't Despair!
If you
Google Analytics Reviewed and Explained
Google has put in place a great business plan tailored for success. One of the ways in which Google aims to retain its loyalty base is by offering its users free Google analytics. Success is always dependant on long term symbiotic relationships and Google knows that you need to give a little to ta....
Javascript Windows
In this tutorial youll learn how to use Javascript windows. Asking a name with a Promptbox, asking a question with Confirmboxes en ginving an alert with an Alertbox.