The three levels of design patterns: Implementation, flow, and context

User interface design patterns work on three levels: implementation, flow, and context. Each level address very different design concerns, so be careful which one you use when.

Categorized in: implementation, levels of design patterns, jared spool, anatomy of design decisions, flow, context, 3 levels of design patterns, sxsw

At SXSW this year, I had the opportunity to watch Jared Spool’s great keynote on the Anatomy of design decisions. In his talk, he argued that design decisions can be made on several levels. The decision level a design is made on reflects on the final product.

It’s not the purpose of this post to explain each level, however they do make sense for this post. The levels are:

  • Unintentional design
  • Self-design – design for me
  • Genius design – we know what works from past experience
  • Activity-focused design – design to support activities
  • Experience-focused design – design for the experience – what happens in between activities

The designer can progress from level to level in order to enable more abstract design decisions. In the latter levels, designers use user interface design patterns to add consistency to the user experience. A user experience is contextual to each design case, why Jared argues that design patterns only make sense when they are contextual to the specific design case.

So does that mean that design patterns of such that is found on are built on false assumptions? No. Jared Spool missed an important point.

Design patterns work on multiple levels

Design patterns can be used on several levels. In broad terms, each level can be seen as helping describing implementation, flow, and context.

The three levels of design patterns

Design patterns aiding implementation

The lowest level is contextual to each design case. It defines that for a given site, the search box should be placed in the upper right, that form labels are to be placed directly above input fields, and that square thumbnails of images should have the dimensions of 100 × 100 pixels. When defining interface design patterns on this particular level, they can only be contextual to a specific design case; to one website.

This is the level Jared Spool refers to, and I don’t disagree with him. If you want to focus on delivering a consistent experience, design patterns on this level are needed. A service like Patternry will assist you in building your own private pattern library for your own projects.

Design patterns aiding flow

The middle level describes what building blocks of recurring solutions that solve common design problems we have available in our toolbox as designers. This level describes functionality and how it will affect flow.

Here designers choose between alternatives that solve the same problem, but will affect the flow and the composition of the experience as opposed to the consistency of experience discussed at the implementation level.

Designers choose between Lazy Registration or Account registration, and decide on what way is the best for getting input from users.

This is the level of design patterns that focus on.

Design patterns aiding context

The highest level of user interface design patterns are the ones who define what context we are in. Are we building an artist, museum, automotive, magazine, or e-commerce site? Choosing to build an artist site, there are several things that are mandatory: an event calender, a biography, discography, and maybe a portfolio. have a bunch these patterns in their library.

About the author


Anders Toxboe builds websites with an outstanding team at Benjamin Interactive in Copenhagen, Denmark. He also founded and a series of other projects.

Published on 5 Apr, 2011
The three levels of design patterns: Implementation, flow, and context The three levels of design patterns: Implementation, flow, and context

Related stories


Post a comment

Required. Real name or initials only.
Required. Will not be published.

Browsing blog posts

Vote down Vote up
Out of 31 votes, 74.19% like this one.

Recent blog posts on twitter

Loading recent tweets...