Pattern Languages for Interaction Design

Written by: Will Evans

Will Evans stalked and captured Erin Malone, Christian Crumlish, and Lucas Pettinati to talk about design patterns, pattern libraries, styleguides, and innovation. Erin, Christian, and Lucas are leading a workshop on design patterns at this year’s Interactions in Vancouver; and, Erin and Christian are writing a book on patterns for designing social spaces for O’Rreilly.

An interaction design pattern is not a step-by-step recipe or a specification. It’s a set of things we’ve learned that tend to work in clearly defined situations as well as some known issues that need to be balanced or sorted out or otherwise addressed. A pattern is closer to a checklist than to a mock or a wireframe.

*How did you get your start in Interaction/Information Design?*

*Christian Crumlish (Xian):* I came from book publishing where I wore many hats over the years (editor, author, agent). I ended up in technical publishing (“computer books”), an aftermarket made possible by shoddy user interfaces. This piqued my interest and the Web democratized information architecture, interaction and interface design.

*Erin Malone:* I actually started out as a print designer and Art Director. I went to grad school at RIT around the peak of CD ROMs. I did a project in Hypercard (in 1993). I thought I was going to do interactive education CDroms when I graduated but then the web happened. I taught myself HTML and came out to California to build Adobe’s first website, and I’ve been doing web applications and interactive work ever since.

*Lucas Pettinati:* I studied Architecture in college after realizing that one doesn’t learn how to design GUIs in a Computer Science program. My first job out of college was at an internet startup where I did general design work but it wasn’t until I created a user flow diagram that I fell in love with the principles of IA and Interaction Design.

*Who do you look to for inspiration?*

*Lucas:* I’m a huge Edward Tufte fan and am always trying to think of ways of displaying information. One of my oddest inspirations came from a Piet Mondrian painting; it helped me visualize a way to display a cluster of available flights relative to their price and departure time.

*Xian:* I steal from everyone. I think we should be careful not to throw out too much of what we knew from print design and layout, typography and rhythm.

*Erin:* I am a big proponent of looking to the past as well as the future. My work is very grounded in what I learned as a graphic designer – typography, color theory, readability etc. I have recently added motion and time as factors to design for. I also believe in looking at nature for inspiration – how things interact, human gestures, the landscape. Etc.

*Christopher Alexander, in his book, “A Pattern Language,” and his talks and papers seems to come from an ideological perspective. What role do you think ideology has in interaction design and in patterns in particular? Do you sometimes face questions or issues where your design decisions are influenced by political, ethical, or ideological considerations?*

*Xian:* For another time perhaps we can address how the pattern language movement has evolved and splintered since Alexander et al.’s beginnings. I think there is always an underlying ideological set of assumptions, examined or not, explicit or not, transparent or not.
That’s only a good thing if you make it so.

*Erin:* I think having a grounding behind the decisions you make is important. Ethics play a big part in many people’s decisions – in the type of work they do as well as the way to design a certain interaction. Being ethical and non-destructive is important as a designer. I think Alexander wanted to enhance and support the human condition and propagate positive interactions between people. That was the ideological perspective for his approach to developing a pattern language. I don’t see anything wrong with having that same attitude as an interaction designer.

*Xian:* I’d say if anything I see ethical dimensions to design problems more often now than ever before, perhaps because of the way our always-on digital interfaces are permeating everyday life more and more thoroughly. In fact, Erin and I agree that there are ethical factors in at least _some_ of the patterns in our forthcoming book, Designing Social Interfaces.

*I’m interested in your take on building corporate pattern libraries. Some companies, like Endeca, are creating a proprietary library for faceted navigation. Is there is an obligation for practitioners to share their design patterns?*

*Lucas:* No, there shouldn’t be an obligation to share a design pattern – but much like the Open Source software movement, I think the future of pattern libraries lies with the participation of a broad community. The important thing to remember is that design patterns are living things. They can evolve over time and are adapted and refined as new technologies emerge. For example, a mere five years ago, the gesture-driven interfaces were in their infancy. Today, we have devices like Apple’s iPhone that rely on flicks, pinches and drags as core patterns for how to interact with the device.

*Good point – and in fact, gestural interfaces have now become such a part of the mainstream—between iPhones and those election maps on CNN—that people in our field aren’t surprised to see Dan Saffer’s new book, “Designing Gestural Interfaces”.*

*Christian, do you agree with Lucas that there’s no obligation to share? Do you think they should be open so they can evolve and become more widespread?*

*Xian:* I don’t personally think there’s any inherent obligation (certainly not in the sense of a mandatory, enforceable one) to share patterns. Over time un-shared patterns probably have limited utility. Patterns are a bit like tamagotchi. If you don’t keep tending them they die, and they’re social in the sense that they thrive and become more refined and useful and subtle the more people are able to engage with them.

*Erin:* For every corporation out there interested in building their own library, almost all of them will want to keep some, if not all, proprietary. I believe that as firms create their own library, they’ll see benefits in adopting open and shared patterns. After all, why reinvent the wheel when there’s already a fine, well-adopted and understood approach to a problem. On the other hand, they will develop a subset of highly proprietary interactions that become brand differentiators. These are the things they can patent and call attention to in a competitive landscape. After a certain point, though, many of these patterns will become part of the vernacular landscape and therefore more open.

…a subset of highly proprietary interactions [can] become brand differentiators. These are the things [companies] can patent and call attention to in a competitive landscape.

*Is a private corporate pattern library simply a style guide? People sometimes confuse the two. How are they different?*

*Erin:* In my mind, the pattern library is the architecture of the system, and the style guide is the wallpaper and paint color. The brand and style guide may change more often than the patterns — the interaction solutions. A certain instance of a pattern — with it’s skin and specific points of interaction and behavior — may also be promoted to a standard in the style guide for various companies as part of their brand experience and there’s nothing wrong with that.

*Xian:* Pattern libraries are often presented as an alternative to, and improvement over, corporate style guides. This is usually based on the idea that they tend to be maintained on an intranet as living repositories rather than as occasionally published brand guidelines in a binder on your shelf. Secondly, a case can be made that thinking in terms of patterns and following one of the semi-standard ways of exploring each pattern can provide for more stable, longer lived guidelines that aren’t as brittle as specs (though they can and should of course point to today’s specs and assets).

*So you fundamentally believe that the difference may lie in their velocities and life span?*

*Xian:* Yeah – To clarify, patterns are on a slower pace layer than most style guides, but the truth is that — yes — you could safely describe most real, existing pattern libraries as a kind of style guide, but a living, moving one.

*Lucas:* It’s easy to get all these different tools — corporate guidelines, style guides, brand values, etc. — mixed up with a pattern library. Pattern libraries address the need of a consistent interaction. Analogously, style guides address the need of a consistent aesthetic, and brand values address the need for a consistent outward image. Though they each serve a unique purpose, my opinion is that keeping these tools as separate entities is by far the easiest way to ensure that design quality will suffer. Integrating of all these different design tools with an engineering code library is what — I believe — is at the heart of a successful plan for communicating design consistency across an organization. This should be the heart of a private company’s pattern library — a way to provide interaction, visual, and engineering consistency for a range of products.

*I have heard it argued that use of design patterns and pattern libraries removes creativity and innovation from the solution-finding process? Do these criticisms have merit?*

*Xian:* I don’t really think that argument holds water. I do understand the concern, and it’s totally possible to apply patterns mindlessly or to force their use inappropriately, but, to my mind, patterns focus innovation and creativity on the leading edge of the problem: the unsolved part.

*Lucas:* As designers, we all want to innovate and take a crack at defining the details of a design. In that respect, using a pattern library does constrain some of the choices that one makes. But this is a very superficial way to look at the benefit of using a pattern library . In reality, a pattern library should house the _archetypes_ of common interactions and help the designer select a solution that best fits the current project. Projects have deadlines and the use of a pattern library helps designers quickly — and confidently — craft parts of a design so the bulk of their time is spent designing what’s unique, rather than what’s common. Think of it this way: the pattern library is like a compass. It’ll tell you what direction you should go in, but it’s up to you to figure our how to get there.

“…The pattern library is like a compass. It’ll tell you what direction you should go in, but it’s up to you to figure our how to get there.”

*Xian:* An interaction design pattern is not a step-by-step recipe or a specification. It’s a set of things we’ve learned that tend to work in clearly defined situations as well as some known issues that need to be balanced or sorted out or otherwise addressed. A pattern is closer to a checklist than to a mock or a wireframe. Patterns can’t do the design for you.

*Erin:* I agree with Christian here. Critics say patterns remove creativity. But that’s like saying that having only 64 crayons in the pack removes creativity. Constraints are a fact of life. Patterns are just tools to guide decisions. Converting every pattern to a component solution with skin and code will limit a designers options but they still have to resolve how it will all go together in a cohesive way — how the hierarchy of information guides the user; how pieces move from one into another; how to keep things from clashing or being confusing. And, in almost every design problem I’ve seen, there are also one-off, new problems to be solved. So I think the criticism is a cop-out.

*Xian:* Agreed — and of course some pattern libraries are really more like catalogs of UI widgets, and a catalog of widgets can be slapped together to create poor design, but I don’t think you can pin that problem on patterns.

*Okay, so patterns don’t kill innovation, people do! Taking a different tack, do you think the use of design patterns and libraries are an effective way to train people new to interaction design?*

*Xian:* I think it’s part of a well balanced breakfast, but there are a lot of fundamentals of design, interaction, and information that come first.

*Erin:* Pattern libraries are tools. Just like having a stencil set and understanding of things like gestalt and readability. The library can be a great reference for designers to start with, to help uncover questions and considerations they might not have considered before, as well as offer ideas for quick solutions to easily solved problems.

*Lucas:* Consuming pattern libraries does not in and of itself create good interaction designers. Writing patterns, on the other hand, is something I feel helps new interaction designers better understand why some designs work and others don’t. Anyone interested in becoming an interaction designer should understand that even when using pattern libraries, there’s an awful lot of original design needed to complete a project.

*”Designing and Building with Patterns and Pattern Libraries” workshop at Interactions ’09*

Erin, Xian, and Lucas are leading a patterns workshop at Interactions ’09 in Vancouver. “Designing and Building with Patterns and Pattern Libraries” is a hands on workshop where participants will come away with some practical experience spotting patterns, describing them, and thinking about how to apply them to design work.

You can find out more about the workshop on the Interaction ’09 website: “http://interaction09.crowdvine.com/talks/show/2574”:http://interaction09.crowdvine.com/talks/show/2574

Christian and Erin’s book, Designing Social Interfaces, has a website where you can contribute to, refine, and discuss social design patterns: “http://designingsocialinterfaces.com/ “:http://designingsocialinterfaces.com/

Calling in the Big Guns

Written by: Will Evans

B&A readers get 10% off when purchasing from Rosenfeldmedia.com (use code WFDBA)
Discount for Boxes and Arrows readers: Get a 10% discount by purchasing the book directly from Rosenfeld Media. Just use the code WFDBA.

The scene is all too familiar. You’re presenting wireframes of the registration process for a new web application when the discussion veers down a dark alley. The sky has turned the color of black ink, and you can smell sulfur in the air as one team member after another debates the alignment of form labels.

Before you can toss up a quick Hail Mary, marketing says that the opt-in for marketing solicitations has to be defaulted to yes, and you can feel your soul sucked out of your body through your nose as a simple one hour meeting turns into a 3 hour discussion over the pro’s and cons of inline validation while your stomach grumbles because you just missed lunch.

I have heard this war story many times from many interaction designers and information architects, with little variation except in the details. What we need is air cover in this battle to design better forms. Now, it’s here.

“Forms Suck!”

And so Luke Wroblewski begins his new book on web form design with a canon shot, providing just the air cover and ammunition interaction designers need; and every review, including this one, begins with a first impression.

Mine was: Boffo.

(bof·fo (bf) slang, adj.: Extremely successful; great.)

Wroblewski opens “Web Form Design” with a strategic exploration of why users interact with forms. News flash: It’s not because they enjoy it. Interaction designers need to confront the truth that a user’s goal is to get to some successful outcome on the other side of a form – as quickly and painlessly as possible. We want our iPhone, tax return, or account with Facebook. We don’t want to fill out forms.

bq. Forms suck. If you don’t believe me, try to find people who like filling them in. You may turn up an accountant who gets a rush when wrapping up a client’s tax return or perhaps a desk clerk who loves to tidy up office payroll. But for most of us, forms are just an annoyance. What we want to do is to vote, apply for a job, buy a book online, join a group, or get a rebate back from a recent purchase. Forms just stand in our way.

Wroblewski has researched everything from the basics of good form design, to labels and most-direct route, delivering his explanations, patterns and recommendations with a casual urgency that avoids preaching. This book is a useful guide for both the novice interaction designer and the battle tested UX guru, offering salient, field tested examples of the good, bad, and often times ugly forms that have proliferated the web like so many mushrooms after a good rain.

Wroblewski has also invited many seasoned professionals to contribute sidebars, including Caroline Jarrett’s no-nonsense perspective on designing great forms by advising us to “start thinking about people and relationships,” instead of just diving into labeling our forms and choosing where to put the Submit button. I especially appreciated her strategic guidelines for picking what questions should go into a form in the first place, which she aptly titles “Keep, Cut, Postpone, or Explain.”

Wroblewski is aware of how challenging most readers will find good form design. It comes as a relief, for instance, when he writes that we should think less about forms as a means of filling a database, and more as a means of creating a meaningful conversation between the user and the company.

He generally succeeds at adopting the warm tone of a confidant who can win you over with self-deprecating, you-too-can-make-dynamic-forms-every-day enthusiasm. The more subtle points of user-centered design or goal-driven design are not discussed explicitly; only the trained ear will detect them.

What’s In the Book?

“Web Form Design” is part of a wave of User Experience books from Rosenfeld Media – books focused on bringing practical, actionable and well-researched methods to actual practitioners in the field. This literature is going to have a powerful effect on our community of practice, maybe as powerful as the effect the Polar Bear book had on our grandparents’ era. This volume is broken out into three sections:

Section one: “Form Structure” begins with an overview of why form design matters and describes the principles behind good form design, followed by Form Organization, Path to Completion, and Labels (hint: your form design should start from goals). Working quickly through strategy to tactics, Wroblewski gives numerous examples – within the context of usability studies – so that you are not left wondering whether these patterns are recommended based just on his opinion.

Section two: “Form Elements,” is a useful, clearly written exploration of each of the components of form design: labels, fields, actions and messages (help, errors, success). Wroblewski attacks each one of these by defining particular problem spaces, and then shows good and bad solutions to the problems while highlighting how these solutions faired in controlled usability tests, including eye-tracking. He then finishes each chapter off with a succinct list of ‘Best Practices’ that I suggest are good enough to staple to the inside of your eyelids.

Section three” “Form Interaction,” includes chapters on everything from Inline Validation to Selection-dependent Inputs (a barn burner). Here we move from the world of designing labels, alignment, and content to designing the actual complex interactions between the system — that wants to be fed like the plant in Little Shop of Horrors –- and the world-weary user that just wants to get to the other side of the rainbow. As Wroblewski explains in his opening of chapter 9 “Inline Validation:”

Despite our best efforts to format questions clearly and provide meaningful affordances for our inputs, some of our questions will always have more than one possible answer…

Inline validation can provide several types of feedback: confirmation that an appropriate answer was given, suggestions for valid answers, and real-time updates designed to help people stay within necessary limits. These bits of feedback usually happen when people begin, continue, or stop entering answers within input fields.

To establish communication between the user and the form, provide clear, easy-to-read feedback so that the user doesn’t get the “select a username or die” travesty that we see in registration forms all over the web. You know the ones: you type in your name, choose a username, enter your email address, and your password (twice), hit the submit button…and…bad things happen. The username is already taken. Worse, the form is cleared and you have to enter all that information all over again. Wroblewski provides advice for validation (without set-in-stone rules), and a bulleted list of best practices.

The final, and perhaps most interesting chapter in the book, covers the topic of Gradual Engagement. This is particularly timely given the kudzu-like proliferation of Web 2.0 applications and services as well as social networking sites and micro-blogging sites. Instead of starting your engagement with a new company that all your friends are raving about with yet another registration form – as Wroblewski writes:

bq. “We can do better. In fact, I believe we can get people engaged with digital services in a way that tells them how they work and why they should care enough to use them.1 I also believe we can do this without explicitly making them fill out a sign-up form as a first step.”

He continues by highlighting the benefits of moving a user through the application or service – actually engaging with it, and seeing it’s benefits, while registration is either postponed, or handled behind the scenes. He explores web applications like JumpCut, where the user steps through the process of creating, uploading and editing their video — and only when they actually want to publish and share it, does the user encounter a form — at which point they have already learned the service, it’s benefits, and it’s value. This is certainly a more engaging experience than being confronted with a form and a captcha before ever realizing the value of the web application. He ends this compelling chapter by providing some advise and best practices :

bq. When you’re exploring if gradual engagement might be right for your Web service, it’s important to consider how a series of interactions can explain how potential customers can use your service and why they should care. Gradual engagement isn’t well served by simply distributing each of your sign-up form input fields onto separate Web pages.

Wroblewski showed three excellent examples of web applications that seem to very successfully utilize this new strategy for engaging new users while avoiding or at least postponing the ubiquitous registration process. This is certainly welcome news. The key is to rethink how new users become engaged with your company. Does the conversation start with a form? Gradually introducing new customers to your service and it’s benefits – letting them actually use it and learn it first seems like a better way to start the conversation.

I wish this chapter had more to it, as it covers an exciting exploration of web application design innovation. Wroblewski wrote a very compelling article in UXmatters back in 2006 titled, “The Complexity of Simplicity,” which was a predecessor to this chapter of the book. After an extensive search online, this was about the only source I could find other than some blog posts referencing that article. One article on ReadWriteWeb, “Good UI Design: Make It Easy, Show Me You Care” did include two more examples – FuseCal, a calendar syncing online application, and Twiddla, an online whiteboarding service.

Another spot that could have used improvement were in the last chapter. Perhaps this was either my reading of it or the way it was presented. What’s Next, certainly made me feel that he would be exploring his vision of the future of form design, and forms in general — which he certainly does in the section on the disappearing form, and proceeds into a very brief discussion of game-like elicitation methods (GEMS). These are welcome additions, I wish that he had gone a bit deeper into this chapter, especially about GEMS. It’s a fascinating discussion point, and we will see more examples in the coming year.

I also wanted more resources and references to studies that a form designer, information architect or interaction designer could use to bolster their design decisions. Many good designers out there know how to design good forms. The hard part is the politics and the negotiation process with stakeholders — and numbers always help.

I am reminded of a conversation I had over lunch about a month ago here in D.C. The UX professional was giving a short presentation on form design to an in-house crowd and was trying to subtly indicate the value that often times less is more in form design. He wanted to show to stakeholders that the concept that adding one, two, or four more form fields in a registration process has a cost, even if the design and development cost is minimal. I suggested that a simple info graphic that showed how, as the number of form fields increased, user signups decreased. His immediate reaction was that some stakeholders would immediately want to see metrics to back up the assertion.

I am unaware of any numbers about fall-off rates, but from my professional experience tells me less is better than confronting a first-time potential user with a long form to complete. Perhaps it would be sufficient to include a “Further Reading” section divided up into sections like Academic Research, Field Studies, and Conference Papers. The book may not the best place to put something like this — I wonder if the online companion to this book has such a thing. Either way, it would be a valuable addition.

Summary

What is likely to win the most converts, though, is the joy Wroblewski takes in designing. This impression becomes clear as you page through the book. He isn’t just an ardent evangelizer, following the rituals of going to conferences selling snake oil. He’s been there in the trenches, just like you; he’s done this a hundred, maybe a thousand times. He’s tested these ideas and provides a framework for you to use from day one. Half the battle in good form design is defending your decisions to stakeholders. This is your air cover, so call it in!

You can get Web Form Design from Rosenfeld Media or Amazon.com. Just keep in mind that, for the same price, Rosenfeld Media tosses in a nicely formatted digital version which you can use to quote from when you have to sell a good form design to a team that wants to bicker over form labels.

Don’t forget the discount for Boxes and Arrows readers: Get a 10% discount by purchasing the book directly from Rosenfeld Media. Just use the code WFDBA.

Web Form Design: Filling in the Blanks
By Luke Wroblewski; foreword by JaredSpool.
RosenfeldMedia: May,2008.
ISBN:1933820241
Buy from: Rosenfeld | Amazon