Designing withPatterns in the Real World

Lessons from Yahoo! and Comcast

IA Summit, Miami, April 14, 2008

Christian Crumlish, design.yahoo.com

- -

Efficiency

- -

Efficiency

• Can you streamline web design and development with design patterns?

- -

Efficiency

• Can you streamline web design and development with design patterns?

• Really?

- -

Efficiency

• Can you streamline web design and development with design patterns?

• Really?

• How?

- -

A Brief History of Pattern Languages

Architecture

- -

A Brief History of Pattern Languages

Software Engineering (enter wiki)

- -

A Brief History of Pattern Languages

User Interface (HCI or Interaction Design)

- -

Yahoo’s Pattern Library (so far)

Launched in 2005:

Erin Malone

Matt Leacock

Chanel Wheeler

- -

Yahoo’s Pattern Library (so far)

Open Version of Library Launched in 2006:

Bill Scott

succeeds

Matt as curator

& adds many

rich patterns

- -

My Role

- -

My Role

Curator…

- -

My Role

Curator…

- -

My Role

Curator…

- -

My Role

Curator…

- -

My Role

Curator…

- -

My Role

Curator…

- -

My Role

Curator…

Librarian…

- -

My Role

Curator…

Librarian…

- -

My Role

Curator…

Librarian…

- -

My Role

Curator…

Librarian…

or… Detective?

- -

My Role

Curator…

Librarian…

or… Detective?

- -

What Are Patterns For?

• Avoid reinventing the wheel

• Promote a familiar user experience for our customers

• Free up designers to do innovative leading-edge work

- -

One Company, 100 Designs

- -

Innovation

- -

Innovation

• Do design patterns stifle innovation?

- -

Innovation

• Do design patterns stifle innovation?

• No.

- -

Innovation

• Do design patterns stifle innovation?

• No.

• Now shut up and do your wireframe.

- -

So What Exactly is a Pattern?

• The essence of a pattern:• Problem (what does the user want?)

• Solution (how to meet the user’s needs)

• Context (when to use it)

• Examples (pictures, links)

• High-level, based on principles

• Linking to related specs and documentation (which can change more frequently)

- -

How our user experience designers contribute

• Check the library

• Give Feedback

• Suggest a Pattern

• Help write or review a pattern

- -

Give feedback…

• Comment on patterns

• Make suggestions about how to improve them

• Complain about patterns that seem out-of-date

• Discuss them on our design lists

• Edit a pattern

• Ask me for help

- -

The Burrito Trap

- -

Suggest a pattern…

• Looked for a pattern and couldn’t find one?

• Developing something cool on your property?

• Notice a (needless) inconsistency across Yahoo! sites?

• Notice an emerging trend here or elsewhere around the Web?

- -

Help write or review a pattern

• I post requests on designer list

• Designers can just review drafts or offer suggestions

• Designers can submit diagrams or wireframes or templates

- -

I interview the designer: the debriefing

• We sit down for 45 minutes

• They talk me through a solution

• They point me to their specs

• I write a first draft

• The designer gives feedback

- -

The Pattern Writing Process

• Context

• Problem

• Solution

• Example

• Name it!

- -

Examples and Illustrations are Key

- -

Editing and Reviewing

• We invite volunteers to review

• I do some editing

• When ready, we ask the “official” pattern library reviewers to weigh in

- -

Rating the Patterns

Assign a “level of adherence” rating:

• Working Solution

– Recommended starting point for any new design

– Designer may adapt as needed

• Best Practice

– Strongly recommended

– Requires manager’s permission to deviate

• The Yahoo! Way

– Mandatory

– Requires extremely high level permission to deviate

- -

Keeping Patterns Fresh

• Age-dating patterns (credibility, authority)

• Quarterly review of existing patterns

• Tuning in to user feedback

• Revision and Upkeep

– Marking patterns as under re-review

– Recruiting authors to update or supplant

• Retiring obsolete patterns (quality over quantity!)

- -

Peeve-Driven Patterns (Fixing Antipatterns)

- -

Pattern Ownership

• Pattern Lifecycle

– Submission / Suggestion Process

– Writing

– Editing

– Reviewing & Rating

– Freshness

- -

Yahoo! Pattern Library 2.0?

• Truly open: two-way interaction

• Support our open, social platforms

– as part of YDN give designers and developers UX tools

• Getting beyond old-school IA

• “My Patterns”

– Patterns I’m writing, I wrote, I contributed to

– Patterns I love, I use a lot, I have trouble finding

- -

Who edits and reviews?

• Editing

– Pattern librarian

– Volunteer contributors

– Ready for review

• Reviewing & Rating

– Small team review list (senior ID leaders and enthusiasts)

– Regular review/release cycle

– One week for comments (with wiggle room)

– Back to the drawing board

– Quicker review of revised patterns (to verify that identified issues have been addressed)

- -

Rating the patterns

Assign a “level of adherence” rating:

• Working Solution

– Recommended starting point for any new design

– Designer may adapt as needed

• Best Practice

– Strongly recommended

– Requires manager’s permission to deviate

• Yahoo! Way

– Mandatory

– Requires extremely high level permission to deviate

- -

Keeping patterns fresh

• Age-dating patterns (credibility, authority)

• Quarterly review of existing patterns

• Tuning in to user feedback

• Revision and Upkeep

– Marking patterns as under re-review

– Recruiting authors to update or supplant

• Retiring obsolete patterns (quality over quantity!)

- -

The importance of examples

• Examples as references

– As used on your site

– Reference implementations

– Exemplars from elsewhere online

• As a survey / auditing / research tool

– Make galleries of screenshots

– Compare / contrast

– What works, what doesn’t

- -

Visual examples

• Nobody likes to read specs!

• A picture is worth a thousand bullet points

• Designers are visual. We like diagrams, illustrations, concepts, examples, pictures!

- -

factoryjoe’s design patterns

- -

xian’s Carousel pattern gallery

- -

Wireframe and diagram stencils

Give designers tools that make it easier to adopt the patterns:

- -

Wireframe and diagram stencils

Give designers tools that make it easier to adopt the patterns:

- -

Wireframe and diagram stencils

Give designers tools that make it easier to adopt the patterns:

- -

Wireframe and diagram stencils

Give designers tools that make it easier to adopt the patterns:

- -

Wireframe and diagram stencils

Give designers tools that make it easier to adopt the patterns:

- -

Code is key

• Pattern adoption works best when engineers have reference implementations, examples, and running code

• Developers can then build solutions out of components just as the designers build experiences out of the patterns

• Pattern + Stencil + Code = a very useful building block

- -

I’m looking for an intern

How Big Can You Think?

• The Internet is a big, busy place, and we at Yahoo! are proud to stand out in the crowd. As the world’s number one Internet brand, servicing over a half billion people, we’re determined to maintain our commitment to delivering news, entertainment, information and fun… each and every day.

• In order to maintain our position as one of the world’s most trafficked Internet destinations, we’re always on the lookout for people with big ideas and big talent to help us provide our visitors with the innovative products and services they’ve come to expect from Yahoo!. We’re looking for people like you.

Interaction Design Intern – Yahoo! Developer Network

• Yahoo! Developer Network is the company liaison to external / third party developers.

• The YDN UE staff is responsible for designing and maintaining the YDN website, for developing and maintaining the Yahoo! Pattern Library (both internal and external) and for creating component designs and mashups for YUI and Yahoo! APIs.

Project overview and job responsibilities:

• Design interactive components to illustrate Design Patterns and Best Practices or code examples.

• Additionally, help curate the Design Pattern Library, write design patterns and best practices and work closely with interaction designers across Yahoo!

• Will work closely with the Design Pattern Library curator and other designers on the Yahoo! Developer Network.

Requirements:

• BFA / BA and in MA / MFA program with a concentration on Interaction Design / HCI.

Preferable Job Qualifications:

• Work experience in website and/or application design a plus.

How to Apply:

• Please apply online to requisition # 13577 http://careers.yahoo.com

- -

Thank You!

Christian Crumlish

http://design.yahoo.com