Mathew Sanders /

Dr. House & Design

In Beer & Design I talked about the two senses of design: style and function. This is an important idea to grasp but doesn’t have a lot of immediate practical value. In this post I introduce the framework that helps guide my day-to-day design work.

From the outside, I image design can appear as an enormous collection of rules and best practices, often contradictory, and glued together with a fair amount of hand-waving, and luck. It worries me that this vagueness of design prevents many developers becoming more involved with the design community.

Channeling my inner Vulcan I like to strip away most of the romance around design and see it simply a series of problems. But like Dr. House and his diagnosticians (uh-oh you think, he’s switched analogies already), the hard work is less about finding the solution, and more about gaining insight and clarity around the problems we’re aiming to solve (hint: It’s not lupus).

The trick to understanding a problem in more detail is to increase the resolution of your thinking. Using a framework to help you view and deconstruct a problem is like a blurry picture coming into focus allowing details and nuances that would otherwise been overlooked to be seen. Using another alcoholic analogy, imagine your journey to becoming a connoisseur of wine. At first you can (hopefully) tell the difference between a red and a white wine. As you accumulate knowledge you find yourself being able to distinguish between the variety of grape, location, its vintage and other subtleties. Doing so you’ve picked up specialist language for discussing and thinking about wine. You’ve increased your resolution for thinking about wine.

How can we do that with design? To start it helps to return to the idea of design as the continuum between function & style, and carve that into smaller parts. There’s more than one way to do this but I like to borrow from Jesse James Garrett’s five elements of user experience and break design into layers of strategy, scope, structure, skeleton and surface.

Quickly touching on each of these (you can read more at The Elements of User Experience) the surface is the most visible and tangible of the layers. It represents the design-as-style end of the continuum. For many is the most familiar meaning of design as it represents our subjective response to what our senses perceive of the design. In most cases this is what we see but can also include what hear, smell and feel with out sense of touch. Choices around colour, texture, tone, typography and animation are all factors to explore at this level.

The skeleton is the first level down the path of abstraction and is the designers equivalent of semantic markup. Here we ask questions like what is the hierarchy of information we are presenting? How can we learn from Gestalt principles and make use of hard-wired cognitive circuits to intuitively infer meaning? This level is often explored and communicated with sketches, wireframes and prototypes.

How people flow (or hobble in unfortunate cases) through your design is explored in structure which asks how are features and content are connected to each other and the paths people take to uncover them. People who specialise in this area often call themselves Information Architects. Ideas here might be explored with user-flow diagrams (again see Visual Vocabulary for Information Architecture), a site map for static content, and ideas tested or validated with various card sorting techniques.

Choosing what content and features should (and the harder question shouldn’t) be included is explored with scope. A critical factor to remember here is that the features we choose to design and build are means to an end. In themselves, features are only tools with little value. It’s how people use them for some activity or purpose which is the interesting part, and like many tools they are often interchangeable. I find Indi Young’s ideas around mental models incredibly useful for making sure that the tools we pick are aligned with people’s needs.

Finally, at the most abstract/objective design-as-function end of the continuum is strategy where we ask what activities and tasks people we are aiming to support, the business goals we hope to achieve, the qualities and principles that are important for us and the roadmap that will guide us where we want to go (an interesting aspect of digital-design is the attitude perpetual beta: that work is never complete and we should always keep an eye on what we’re aiming for in future releases).

What does this effort gain us? As well as a common vocabulary to better discuss ideas with peers and colleges I find this approach helps me organize my process into smaller manageable pieces without becoming overwhelmed with the hugeness of a problem. It helps me work efficiently and progress with the confidence that all my bases are covered (or at least awareness of areas that are weak and need further work) and provides a foundation for critical and constructive feedback about a design.

Lastly, while it can be difficult to reconcile the subjective and objective qualities of design in a single step, the five elements offer a way to anchor surface to strategy through intermediary steps which for me at least is a satisfying feeling.

I introduced these steps from surface to strategy but there is no correct way to progress through these levels. You could start at strategy by identifying a problem that people struggle with in the real world and work up. You might start with an idea for an interesting feature and work up and down the elements from there. In practice I find the separation between elements blurs and I find myself exploring on several aspects at once, where other times I fill focus my attention on a very narrow area. I think this is healthy and part of learning to become a good designer is to follow your instincts and trust yourself what is appropriate for each step.