I’ve been a big fan of 37signals for a really long time (pre-Backpack!) so the talk by Ryan Singer at SVA last night was a must-see for me.
Ryan used the ideas of form, context, forces and fitness from Christopher Alexander’s 1964 Notes on the Synthesis of Form to talk about a different way to approach the design problem. He began with a few questions: some designers consistently produce good work — what makes them different? Why does good design work? How do you design from scratch, and how do you evaluate and improve existing design?
Any design problem (“design a tea kettle”) can be broken down into form (the kettle) and context (the stovetop, the kitchen). It’s typical to start with a list of requirements and attributes that are form-determining — the water must be kept hot, but the handle can’t get too hot, the water has to pour out when we tilt the kettle, etc. But what if we shift the problem from form-determining requirements to needs and context (what Ryan calls “the life situation”)? Instead of “making a kettle” to “I want boiling water in the kitchen?” This turns the nature of the design problem on its head and radically different results are possible.
To illustrate a process for designing from scratch, Ryan moved from water in the kitchen to a more relevant example: the design of the 37signals web app Highrise.
Step 1: “Draw a boundary between the form and context.” The form is the Highrise UI. The context is the browser and the needs and life situation of the user.
Step 2: “Identify the forces that make demands on the form.” Understanding the life situation in a design problem means starting from the bottom up with questions, needs and challenges (“I want to keep track of who we talked to, what was said, what to do”).
Step 3: “Resolve related forms into diagrams.” The forces can clump together into families of forces, and the design is sketched. “Independent groups of forces becoming diagrams.” Chunks of forces that work together, that motivate the form.
Ryan used very specific examples from the design of the core screens in Highrise.
Step 4: “Place the built form into context and look for misfits.” Do it for real. Evaluate the design by identifying brokenness, pain-points and conflict. The design is good when there’s an absence of conflict. Redesign to eliminate the conflicts.
Ryan’s takeaways

  • A different take on requirements is needed: use facts about the world, instead of attributes.
  • Designing with forces means understanding why.
  • Starting with forces allows us to design from the bottom up and combine forms into larger wholes.
  • A design is good when it fits the world, not a list of requirements or a trend.

Q & A

  • On customer feedback: “Feedback is information, not direction.”
  • On making difficult design changes: “Get the stakeholders in the room to widen the space of possibility and increase flexibility.”
  • On the biggest iPad design challenge: “No hovers!”

This was really refreshing. This is very much how I design — starting with interviews and my own experiences to identify the situation in a casual, conversational way. What I uncover is almost “evidence” and I use it to construct the design problem, which is frequently different from what the client has defined. I try to minimize my own pre-determined form-giving as much as possible. (I try!) I’ve found that clients love this approach — it puts them at ease, and they feel that they’ve been heard. I love that Ryan identified a real methodology behind this madness — I’m going to read Alexander’s A Pattern Language right away.
(Wow, what is this? Seems like some bizarre website devoted to Alexander. Can’t tell if it’s officially his or not.)
(Seems like this is the official Christopher Alexander website. And a lesson in web design circa 1996.)