Social Media Design Patterns (BarCampBlock)

Social Media Design Patterns@BarCampBlock

August 18, 2007

BarCampBlock Design Patterns (8/18/7)

Christian Crumlish

Yahoo! Pattern Library Curator

http://developer.yahoo.com/ypatterns

Blog: wake up!

http://xianlandia.com

Who am I?


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

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

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

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

Yahoo! Library History in a nutshell


What’s a Pattern?


•Context•Problem•Solution• (New Context)

Christopher Alexander’s model


• 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


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”


• 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


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)


(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)


• 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


Live brainstorming / discussion / whiteboarding as needed

Write & Review the Draft


• 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

Social Media Design Patterns (BarCampBlock)

Technology

Transcript of Social Media Design Patterns (BarCampBlock)