By Frank Spillers

October-containership Containership is a useful design technique that can help you direct your user's attention and shape their experience.

Maybe you are using this technique and you are not even aware of it! In this post I'll describe, define and show you where you can use it more deliberately to improve your user experience.

What is "containership"?

Containership is a visual grouping technique that shows spatial relationship of similar items or actions.

Think of containership as the curbside of a road (the curb contains the road) or the edging of a garden (the edging contains the flowers).

When you provide deliberate demarcation of a screen area, you signal relationship and hierarchy. For example, a top navigation bar is contained in the "bar" meaning actions there help users navigate globally, or across the website or application.

Containership is so important because we use it in our daily interactions to sense boundaries and relationships of objects to actions. For instance, some people do not feel comfortable writing on a sheet of paper that does not contain lines. In this case the need for the lines offers a container of height to guide hand written characters. Or it could be the influence of an over-bearing third grade teacher or both!

On a website or software application, containership is crucial-- the user experience can not live without it.

What does containership look like?

Typically a line that separates or boxes-in controls or tools. Shading and color can also indicate a "container".

Design containers are subtle but they are vehicles of task-oriented design. Good Information Architects specify containers of objects and actions, giving users confidence where to click and an idea of which controls relate to actions on the page. Good designers sense natural boundaries and instinctively group by proximity and relevancy.

Containership is everywhere, but most of the time its used unconsciously without deliberate awareness.

How is containership useful?

Containership can help:

1. Users know intuitively which controls go together.

2. Guide a user to an area of a page or screen that requires task focus.

3. Provide a visually unifying effect, while strategically demarcating important actions or options.

4. Signal priority of key areas of the screen or interface.

5. Signify relationship of global (site wide)  vs. local (page wide) navigation.

As our user experience calendar meditation (image above) this month says: Providing good containership means providing clear demarcation as to which controls go together. The more deliberate you are about this the more intuitive your user interface layout will be!

Note: We'll be re-running a 2011 User Experience calendar if you missed the calendar last year. Stay tuned- goes on sale in a few weeks.

Best wishes,

Frank

Frank Spillers, MS