Containment

Containment

www.webdesignfromscratch.com

'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 a box; and softer containment, where the box is suggested using the hierarchical 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 within the bounds of the parent. The parent might be identified simply by a label that's either inside the box and towards the origin, or sitting on the edge of the box.

In this example, the three panels clearly belong to the group "Home page - Features", because the title bar defines a box that contains the three 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 visual superiority. 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.

This is suggested because the title is situated between the list and the page origin, and reinforced by the title bar projecting a little further left (towards the origin) than the list, and spanning its full width.

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

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

Example of too much encapsulation

Click to view image full-size

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 be to use strict alignment, indenting elements different amount to suggest their relationships. The centre-aligned navigation here is particularly ineffective.

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.