Social Media Design Patterns @BarCampBlock August 18, 2007

Christian Crumlish Yahoo! Pattern Library Curator http://developer.yahoo.com/ypatterns Blog: wake up! http://xianlandia.com Who am I?

Christian Crumlish

Yahoo! Pattern Library Curator

http://developer.yahoo.com/ypatterns

Blog: wake up!

http://xianlandia.com

Internal resource, wiki, informal (Irene Au, Christine Wodtke) Internal resource, drupal, structured (Erin Malone, Matt Leacock, Chanel Wheeler) Ajax/“rich” patterns, open library release (Erin, Bill Scott) Social patterns, pattern galleries, microformats, pattern language, toolkits (Erin, me) Yahoo! Library History in a nutshell

Internal resource, wiki, informal (Irene Au, Christine Wodtke)

Internal resource, drupal, structured (Erin Malone, Matt Leacock, Chanel Wheeler)

Ajax/“rich” patterns, open library release (Erin, Bill Scott)

Social patterns, pattern galleries, microformats, pattern language, toolkits (Erin, me)

What’s a Pattern?

What’s a Pattern?

Context Problem Solution (New Context) Christopher Alexander’s model

Context

Problem

Solution

(New Context)

Metadata: Name of Pattern Author & Contributors Terms (tags, categories, facets) Related patterns (parent, child, related) Rating Main Elements Sensitizing example (illustration) Problem Summary Use When Solution Rationale Special Cases Open Questions (doesn't go to public library) Yahoo!’s Pattern Model Related Resources Supporting Research associated Toolkit (if any) Code (YUI, YDN, etc.) Stencils, Templates, Wireframes, specs, other documentation More examples/Pattern Gallery (from Yahoo, from elsewhere on Web) Similar Patterns in Other Libraries Further Reading (blog posts, etc.) Contacts BOLD ELEMENTS ARE ESSENTIAL

Metadata:

Name of Pattern

Author & Contributors

Terms (tags, categories, facets)

Related patterns (parent, child, related)

Rating

Main Elements

Sensitizing example (illustration)

Problem Summary

Use When

Solution

Rationale

Special Cases

Open Questions (doesn't go to public library)

Related Resources

Supporting Research

associated Toolkit (if any)

Code (YUI, YDN, etc.)

Stencils, Templates, Wireframes, specs, other documentation

More examples/Pattern Gallery (from Yahoo, from elsewhere on Web)

Similar Patterns in Other Libraries

Further Reading (blog posts, etc.)

Contacts

BOLD ELEMENTS ARE ESSENTIAL

PLML Pattern Language Markup Language XML Format Begun at CHI 2004/5 Currently Being Revised Martijn van Welie using it Sharing Pattern Languages Pattern Microformat? Being discussed on http://tech.groups.yahoo.com/ui-pattern-authors/ Not sure it’s needed or desirable Can be built from existing microformats? Better for “transclusion”

PLML

Pattern Language Markup Language

XML Format

Begun at CHI 2004/5

Currently Being Revised

Martijn van Welie using it

Pattern Microformat?

Being discussed on http://tech.groups.yahoo.com/ui-pattern-authors/

Not sure it’s needed or desirable

Can be built from existing microformats?

Better for “transclusion”

Jenifer Tidwell (of course) Common Ground (original site) Designing Interfaces (book and website) Martijn van Welie (most active) Sari Laakso (somewhat moribund) UC Berkeley’s library (new!) Little Springs Mobile User Interface Design Patterns Shirky’s Moderation Strategies social pattern language wiki Ajax Patterns factoryjoe’s design pattern collection on Flickr See also: Sally Fincher’s meta analysis of pattern formats Other Good Pattern Libraries

Jenifer Tidwell (of course)

Common Ground (original site)

Designing Interfaces (book and website)

Martijn van Welie (most active)

Sari Laakso (somewhat moribund)

UC Berkeley’s library (new!)

Little Springs Mobile User Interface Design Patterns

Shirky’s Moderation Strategies social pattern language wiki

Ajax Patterns

factoryjoe’s design pattern collection on Flickr

See also: Sally Fincher’s meta analysis of pattern formats

factoryjoe’s Pattern Collection

xian’s Pattern Gallery

xian’s Carousel Pattern Gallery

A social media pattern language? Brainstorm patterns Brainstorm scales, relationships Starter list of topics to discuss Presence Attention Identity Reputation Notes from session posted at http://barcamp.org/BarCampBlockSocialMediaDesignPatterns Patterns Exercise (part 1)

A social media pattern language?

Brainstorm patterns

Brainstorm scales, relationships

Starter list of topics to discuss

Presence

Attention

Identity

Reputation

Notes from session posted at http://barcamp.org/BarCampBlockSocialMediaDesignPatterns

(didn’t get to this on Aug 18) Hands on - writing a pattern Discussion as a group (mock review) Organizing a pattern language (library?) Applying to a project - design Patterns Exercise (part 2)

(didn’t get to this on Aug 18)

Hands on - writing a pattern

Discussion as a group (mock review)

Organizing a pattern language (library?)

Applying to a project - design

Name the pattern Define the problem (short description) Use when? Describe the solution Offer a rationale Identify open questions Gather and point to other resources (including examples and illustrations) Define and Describe the Pattern

Name the pattern

Define the problem (short description)

Use when?

Describe the solution

Offer a rationale

Identify open questions

Gather and point to other resources (including examples and illustrations)

Live brainstorming / discussion / whiteboarding as needed Write & Review the Draft

Live brainstorming / discussion / whiteboarding as needed

Place the pattern in the library’s taxonomy Or build a pattern language relating to scale, as in the original architectural Pattern Language Or structure the patterns by page types Or add faceted terms to the pattern Or apply tags Or allow users of the library to tag patterns And plan on rethinking these structures as the library grows Organize the Pattern

Place the pattern in the library’s taxonomy

Or build a pattern language relating to scale, as in the original architectural Pattern Language

Or structure the patterns by page types

Or add faceted terms to the pattern

Or apply tags

Or allow users of the library to tag patterns

And plan on rethinking these structures as the library grows