Social Media Design Patterns (BarCampBlock)

Slide 1: Social Media Design Patterns @BarCampBlock August 18, 2007

Slide 2: Who am I? Christian Crumlish Yahoo! Pattern Library Curator http://developer.yahoo.com/ypatterns Blog: wake up! http://xianlandia.com BarCampBlock Design Patterns (8/18/7)

Slide 3: 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) BarCampBlock Design Patterns (8/18/7)

Slide 4: What’s a Pattern? BarCampBlock Design Patterns (8/18/7)

Slide 5: Christopher Alexander’s model • Context • Problem • Solution • (New Context) BarCampBlock Design Patterns (8/18/7)

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

Slide 7: Sharing Pattern Languages PLML Pattern Microformat? • Pattern Language Markup • Being discussed on Language http://tech.groups.yahoo.com/ • XML Format • Not sure it’s needed or desirable • Begun at CHI 2004/5 • Can be built from existing • Currently Being Revised microformats? • Martijn van Welie using it • Better for “transclusion” BarCampBlock Design Patterns (8/18/7)

Slide 8: 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 • BarCampBlock Design Patterns (8/18/7)

Slide 9: factoryjoe’s Pattern Collection BarCampBlock Design Patterns (8/18/7)

Slide 10: xian’s Pattern Gallery BarCampBlock Design Patterns (8/18/7)

Slide 11: xian’s Carousel Pattern Gallery BarCampBlock Design Patterns (8/18/7)

Slide 12: 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 BarCampBlock Design Patterns (8/18/7)

Slide 13: 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 • BarCampBlock Design Patterns (8/18/7)

Slide 14: 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) BarCampBlock Design Patterns (8/18/7)

Slide 15: Write & Review the Draft Live brainstorming / discussion / whiteboarding as needed BarCampBlock Design Patterns (8/18/7)

Slide 16: 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 BarCampBlock Design Patterns (8/18/7)