Christian Crumlish, Erin Malone, Lucas Pettinati
Abstract
In this full-day workshop we will teach participants how to identify patterns; write, review, and rate patterns; build a pattern library; leverage the interaction guidelines codified in a pattern library to rapidly design websites and applications; and efficiently prototype and build rich interactive experiences. We’ll share some insights and some lessons learned from the nearly four–year history of the Yahoo! library, and probe examples and case studies, some using the Yahoo! Design Pattern Library and the Yahoo! User Interface Library. Additionally we will give tips and pointers for selling the idea through the organization and up the chain to executives who may be footing the bill.
Topics covered during the workshop include:
- Identifying patterns
- Writing patterns (and building consensus)
- Reviewing and rating patterns
- Organizing patterns into a library
- Attaching templates and code modules to patterns
- Rapid prototyping of web experiences
- Rapid development of production-ready web experiences
- Using design patterns to create flexible APIs
- Selling within the organization
The day will consist of presentations introducing key concepts, discussions to clarify common questions and ensure comprehension, and hands-on activities in small groups, closely monitored and facilitated by the presenters.
Activities include identifying patterns through brainstorming in large groups, auditing multiple variations of interaction design examples to extract common patterns from them, writing patterns in small groups, creating taxonomies and other organization structures for pattern languages, identifying opportunities to leverage patterns and distinguishing them from interactions that cannot be built from patterns, and using the YUI in tandem with patterns to build rich interactions.
The activities will be tailored to the participants and are dependent on their level of experience as well as the mix of IAs, other UX practitioners, and design managers.
Workshop Details
Core information-architecture issues we’ll address include
- Structure of web sites
- Building site flows with patterns
- Organization of pattern libraries
- Association of IA deliverables and templates with patterns
- Use of patterns to create semantically sound web sites
Justification for a pre-conference workshop
The Pattern Library workshop is most successful when participants can collaborate through discussions and hands on activities. The information is best learned in this manner rather than through a 45 minute presentation.
Where & when the seminar has been previously conducted
We presented this workshop at last year’s IA Summit and it was quite successful. In the year since, we have refined our information, added information and given variations of the information in talks and short workshops in Brazil’s IA Summit October 2008, at PloP October 2008 and at in-house brownbags.
Seminar agenda / time-line of the session
CREATING & MANAGING A LIBRARY
- Introductions
- Patterns History
- Library History
- Identifying Patterns
- Exercise: Identifying Patterns
- Writing Patterns
- Exercise: Writing Patterns
LUNCH
- Reviewing & Rating Patterns
- Exercise: Reviewing Patterns
- Organizing a Pattern Library
- Collecting Materials for a Pattern Library
- Exercise: Organizing a Library
WORKING WITH A LIBRARY
- Prototyping with Patterns
- Exercise: Creating a Stencil
- Exercise: Paper Prototype
- Patterns and Engineers
- Getting Code From a Pattern
Speaker Details
Christian Crumlish has been designing and writing about online user experiences since 1994. He is the curator of the Yahoo! Design Pattern Library and is in his second elected term as a Director of the Information Architecture Institute. He studied philosophy at Princeton and painting at the San Francisco School of Art. He is the author of, most recently, The Power of Many: How the Living Web is Transforming Politics, Business, and Everyday Life (Wiley, 2004), and he is currently writing a book with Erin Malone called Designing Social Interfaces for O’Reilly Media. He lives in Oakland, California, with his wife, Briggs, and his cat, Fraidy.
Erin Malone, Principal with Tangible UX, has over 20 years of experience leading design teams and developing social experiences as well as web and software applications and system-wide solutions. Prior to Tangible, she spent 4 years at Yahoo! leading the Platform User Experience Design team where they were responsible for building the Yahoo! Design Pattern Library and for providing design expertise to the popular YUI (Yahoo! User Interface Library). Additionally, she led the redesign of the Yahoo! Developer Network, oversaw the redesign of Yahoo!’s registration system, developed the ux team’s intranet and worked on other cross-company initiatives. Before Yahoo!, she was a Design Director at AOL, Creative Director at AltaVista and chief Information Architect for Zip2. She was the founding editor-in-chief of Boxes and Arrows, is the author of several articles on interaction design history and design management and a founding member of the IA Institute. She is currently working on the book Designing Social Interfaces with Christian Crumlish for O’Reilly Media.
Lucas Pettinati is a Principal Interaction Designer at Yahoo! working on several international projects. Since joining Yahoo! in 2004 he has designed the Yahoo! Developer Network website, was responsible for Yahoo’s all new user registration process, the redesigned Yahoo! Personals site, and created the Yahoo! design stencil kit. Before learning to yodel, Lucas designed products for American Express, Sabre Holdings, and BMC Software. He holds a BA in Architecture form the University of California at Berkeley and sits on the industry advisory board for the Georgia Institute of Technology’s HCI Master’s program.