Design technique: Use Containership to shape User Experience

Summary: Containership is a useful interaction design technique that can help you direct your user’s attention and shape their experience by giving them visual boundaries. Containership indicates a separation of controls or navigation in an activity space so users know there is a control and it lives in relationship to that section or sub-section of your site or app.

The deliberate use of containership can improve your user experience. It can give users intuitive cues either visually or through proximity and hierarchy.

What is “containership”?

Containership is a visual grouping technique that shows spatial relationship of similar items or actions. Visually shaded areas contain the icon, information, or action a user is expected to perform. 

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 handwritten 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 it’s 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.

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!


Best wishes,


Frank Spillers, MS

Leave a Reply

Your email address will not be published. Required fields are marked *

The reCAPTCHA verification period has expired. Please reload the page.



Recent Posts

Scroll to top

Get a quote or discuss your project

Tell us about your project

Arrange a 30 min call

Project in mind?


Fight for the rights of your users. We'll show you how.

Read more articles like this for exclusive insights into the best ways to approach UX and Service Design challenges. Find out when events occur first. Privacy protected, no exceptions.

Subscribing indicates your consent to our Privacy Policy

Should we add you to our email list?

Privacy protected-You can unsubscribe at any time.

Download the Better UX kit