SlideShare a Scribd company logo
1 of 88
Download to read offline
YDN & IxDA-Berlin present

Yahoo! Design Pattern Library & Social Design Patterns
Christian Crumlish, Curator, Yahoo! Design Pattern Library
January 19 (London) & 21 (Berlin), 2010

                                                             01/31/10
I’m Really Glad to Be Here




                             01/31/10
I’m Really Glad to Be Here




                             01/31/10
I’m Really Glad to Be Here




                             01/31/10
I’m Really Glad to Be Here




                             01/31/10
I’m Really Glad to Be Here




                             01/31/10
A Brief History of Patterns

Architecture




                                 01/31/10
A Brief History of Patterns

Software Engineering (invention of wiki)




                                           01/31/10
A Brief History of Patterns

User Interface (HCI or Interaction Design)




                                             01/31/10
Yahoo’s Pattern Library (so far)

 Launched in 2005:


 Erin Malone
 Matt Leacock
 Chanel Wheeler




                             01/31/10
Yahoo’s Pattern Library (so far)

Open Version of Library Launched in 2006:


Bill Scott
succeeds
Matt as curator
& adds many
rich patterns




                                   01/31/10
Yahoo’s Pattern Library (so far)

Library Redesign Completed 2009


I become the
third curator,
focus on social
patterns, opening
library, redesign




                                  01/31/10
One Company, 100 Designs




                           01/31/10
“Hello?”

“Is that you, Mr. Gilbert?”

“Hello?”

    Social media is always awkward when
    it’s new




                              01/31/10
New social media: always awkward




                          01/31/10
Five Principles




                  01/31/10
Pave the cowpaths




                    01/31/10
How to Pave the Cowpaths




                           01/31/10
Talk like a person




                     01/31/10
How to Talk Like a Person

• Conversational Voice
• Self-Deprecating Error Messages
• Ask Questions
• Your vs. My
• No Joking Around




                                01/31/10
Play well with others (Be open)




                                  01/31/10
How to Play Well with Others

Embrace open standards
Share data outside of the bounds of your
 application
Accept external data within the sphere of your
 application
Support two-way interoperability




                                   01/31/10
How to Play Well with Others

Embrace open standards
Share data outside of the bounds of your
 application
Accept open standards
Embrace
         external data within the sphere of your
  application
Share data outside of the bounds of your application
Support two-way interoperability
Accept external data within the sphere of your application

Support two-way interoperability




                                                  01/31/10
Learn from games




                   01/31/10
How to Learn from Games




                          01/31/10
Respect the ethical dimension




                                01/31/10
How not to Respect the Ethical Dimension




                           01/31/10
Five Principles

• Pave the Cowpaths
• Talk Like a Person
• Play Well with Others (Be Open)
• Learn from Games
• Respect the Ethical Dimension




                       23           01/31/10
96 Patterns




              01/31/10
01/31/10
Give people a way to be identi ed




                                    01/31/10
Give people a way to be identi ed




                                    01/31/10
01/31/10
01/31/10
User Cards
What
  •   A person needs more information
      about another person in an online
      community without interrupting his
      or her current task.

How
  •   Open a small panel when the user hovers over a target's display name or
      image.
  •   Present a larger version of the user's display image, the user's full display
      name, and other pertinent information about the target that they choose to
      share with the community.
  •   Present a Relationship Reflector. Allow the ability to subscribe to, follow,
      connect to, unsubscribe or block the user from this panel.




                                                              01/31/10
User Cards in the wild
FriendFeed




                         01/31/10
User Cards in the wild
Flickr




                         01/31/10
01/31/10
What’s your social object?




                             01/31/10
01/31/10
01/31/10
01/31/10
01/31/10
Give people something to do




                              01/31/10
01/31/10
Activities involving Objects
• Collecting (passive)
• Broadcasting & Publishing (one-to-many)
• Sharing (more intimate)
• Feedback (commenting on objects)
• Communicating (two-way conversation)
• Collaboration (making objects together)
• Social Media (a full ecosystem)




                                    01/31/10
Tag an Object
What
  •   A user wants to attach their own
      keywords to an object for
      organization and later retrieval.

Use When
  •   Use when a person is collecting
      a large amount of unstructured
      data, like photos.
  •   Use this pattern when a person wants
      to manage a large collection of items, like books.
  •   Use this pattern to blend user generated labels and keywords with structured
      metadata.




                                                           01/31/10
Tag an Object in the wild
Flickr




                            01/31/10
Ratings
What
  •   A user wants to quickly leave
      their opinion on an object, with
      minimal interruption to any other task flow they are
      involved in.



Use When
  •   A user wants to leave an opinion quickly.
  •   Use in combination with reviews for richer experience.
  •   Use to quickly tap into the existing "community" of a product.
  •   Ratings are collected together to present an average rating of an object from
      the collective user set.




                                                             01/31/10
Ratings in the wild
Yelp




                      01/31/10
Ratings in the wild
Yahoo! Movies




                      01/31/10
Share This
What
  •   User wants to share an object with
      one or more people.

How
  •   Enable people to spontaneously share
      content or objects they find.
  •   Provide the minimal interface needed
      to facilitate rapid sending or posting, such as a
       ubiquitous Share This widget.
  •   Offer autocomplete selection from an address book or set of contacts if
      possible. Don't break email.
  •   Consider including a text field for adding a personal note.
  •   Offer the user a checkbox option for receiving a copy of the message.




                                                            01/31/10
Share This in the wild
The Onion




                         01/31/10
Share This in the wild
Add to Any




                         01/31/10
Share This in the wild
Facebook




                         01/31/10
Let the community elevate people & content they value




                                       01/31/10
Let the community elevate people & content they value




                                            Gently moderate
                                       01/31/10
01/31/10
Adding Friends
What
  •   A user has found people she knows on a
      social site and wants to add them to her
      circle of connections.

Use When
  •   Use when a person’s connections are a core
      part of the site’s experience.
  •   Use when relationships will be confirmed
      providing a
      two-way reciprocal relationship.
  •   Use when allowing one user to follow another
      participant without reciprocity.




                                                     01/31/10
Adding Friends in the wild
Facebook




                             01/31/10
Adding Friends in the wild
Yahoo!




                             01/31/10
Adding Friends in the wild
Dopplr




                             01/31/10
Circles of Connections
What
  •   A user wants to indicate nuances in their
      relationships with other people to create contexts
      for communication and sharing.

Use When
  •   Use to distinguish levels of participation in a
      person’s network.
  •   Use to set permissions for shared activity and
      content.
  •   Use to disambiguate real-life versus online, strong
      versus weak ties.
  •   Use this pattern to help users filter which content
      to consume.




                                                            01/31/10
Circle of Connections in the wild
Plaxo




                             01/31/10
Circle of Connections in the wild
Flickr




                             01/31/10
Public Conversation
Use When
  •   Use this pattern to differentiate from private
      conversations.

How
  •   Allow users to create a dialog between
      themselves. Provide a framework that is flexible
      enough to support two or more people in
      conversation. Provide a form field for text entry.
      Clearly indicate the character count for
      conversing.
  •   Allow users to block or ignore specific users that
      they don’t want to hear from, without disrupting
      the flow of conversation to other participants.




                                                           01/31/10
Public Conversation in the wild
Twitter




                            01/31/10
Public Conversation in the wild
FriendFeed




                            01/31/10
Enable a bridge to real life events




                                      01/31/10
Geo
What
  •   A person wants to let the gps on his
      phone inform other people and his
      phone applications of his location.




Use When
  •   Use to enable users to plot
      themselves on a map or announce
      their location.
  •   Use to enable users to meet up with other people nearby.
  •   Use to empower features on social applications.




                                                          01/31/10
Geo in the wild
Geo on iPhone




                  01/31/10
Geo in the wild
Where for iPhone




                   01/31/10
Social Design Pattern Categories
• Representations of the Self, self-expression,
  identity
• Activities involving social objects
• Community dynamics growing out of
  relationships, expressed through various
  contexts




                                   01/31/10
Anti-Patterns!




                 01/31/10
Cargo Cult




             01/31/10
Cargo Cult




             01/31/10
Cargo Cult




             01/31/10
Cargo Cult




             01/31/10
Don’t break email




                    01/31/10
Don't Break Email


don’t:




         do:



                     01/31/10
The Password Anti-Pattern




                            01/31/10
The Password Anti-Pattern




                            01/31/10
Password Anti-Pattern in the wild
iLike




                            01/31/10
Password Anti-Pattern in the wild
Plaxo




                            01/31/10
Ex-Boyfriend Bug




                   01/31/10
Potemkin Village




                   01/31/10
Five Anti-Patterns

• Cargo Cult Design
• Don’t Break Email!
• Password Anti-Pattern
• Ex-Boyfriend Bug
• Potemkin Village




                          74   01/31/10
thank you!




Christian Crumlish, Curator
Yahoo! Design Pattern Library
design.yahoo.com
@mediajunkie


                                01/31/10

More Related Content

What's hot

Design thinking 01
Design thinking 01Design thinking 01
Design thinking 01PeaceAmanze
 
Flow and Superfluidity for Design Orgs (Jacqui Frey at DesignOps Summit 2018)
Flow and Superfluidity for Design Orgs (Jacqui Frey at DesignOps Summit 2018)Flow and Superfluidity for Design Orgs (Jacqui Frey at DesignOps Summit 2018)
Flow and Superfluidity for Design Orgs (Jacqui Frey at DesignOps Summit 2018)Rosenfeld Media
 
Efficient Teams Do Not Happen. They are Designed. It's called DesignOps
Efficient Teams Do Not Happen. They are Designed. It's called DesignOpsEfficient Teams Do Not Happen. They are Designed. It's called DesignOps
Efficient Teams Do Not Happen. They are Designed. It's called DesignOpsPatrizia Bertini
 
UX STRAT Online 2021 Presentation by Mike Kuniavsky, Accenture
UX STRAT Online 2021 Presentation by Mike Kuniavsky, AccentureUX STRAT Online 2021 Presentation by Mike Kuniavsky, Accenture
UX STRAT Online 2021 Presentation by Mike Kuniavsky, AccentureUX STRAT
 
Ideo Case Study
Ideo Case StudyIdeo Case Study
Ideo Case StudyAshwin C
 
The actual problems to be solved
The actual problems to be solvedThe actual problems to be solved
The actual problems to be solvedKate Tarling
 
Why and when should you think DesignOps?
Why and when should you think DesignOps?Why and when should you think DesignOps?
Why and when should you think DesignOps?Patrizia Bertini
 
Atelier Design Probes - FLUPA UX-Day 2015
Atelier Design Probes - FLUPA UX-Day 2015Atelier Design Probes - FLUPA UX-Day 2015
Atelier Design Probes - FLUPA UX-Day 2015Carine Lallemand
 
Story writing and mapping.pdf
Story writing and mapping.pdfStory writing and mapping.pdf
Story writing and mapping.pdfDevJam
 
Nossas Soluções De Service Design
Nossas Soluções De Service Design Nossas Soluções De Service Design
Nossas Soluções De Service Design accenture
 
Comptoir OCTO Provence - UX Design System
Comptoir OCTO Provence - UX Design SystemComptoir OCTO Provence - UX Design System
Comptoir OCTO Provence - UX Design SystemOCTO Technology
 
Design Thinking 101 - An Introduction to Design Thinking for Developers
Design Thinking 101 - An Introduction to Design Thinking for DevelopersDesign Thinking 101 - An Introduction to Design Thinking for Developers
Design Thinking 101 - An Introduction to Design Thinking for DevelopersBill Bulman
 
Pushing DesignOps’ Influence into New Global Markets - P. Bertini & A. Mengon...
Pushing DesignOps’ Influence into New Global Markets - P. Bertini & A. Mengon...Pushing DesignOps’ Influence into New Global Markets - P. Bertini & A. Mengon...
Pushing DesignOps’ Influence into New Global Markets - P. Bertini & A. Mengon...Patrizia Bertini
 
Make the leap, take the lead Slideshare | Accenture
Make the leap, take the lead Slideshare | AccentureMake the leap, take the lead Slideshare | Accenture
Make the leap, take the lead Slideshare | Accentureaccenture
 
Design systems: accounting for quality and scalability
Design systems: accounting for quality and scalabilityDesign systems: accounting for quality and scalability
Design systems: accounting for quality and scalabilityuxpin
 

What's hot (20)

Design thinking 01
Design thinking 01Design thinking 01
Design thinking 01
 
User Centered Design
User Centered DesignUser Centered Design
User Centered Design
 
Flow and Superfluidity for Design Orgs (Jacqui Frey at DesignOps Summit 2018)
Flow and Superfluidity for Design Orgs (Jacqui Frey at DesignOps Summit 2018)Flow and Superfluidity for Design Orgs (Jacqui Frey at DesignOps Summit 2018)
Flow and Superfluidity for Design Orgs (Jacqui Frey at DesignOps Summit 2018)
 
Efficient Teams Do Not Happen. They are Designed. It's called DesignOps
Efficient Teams Do Not Happen. They are Designed. It's called DesignOpsEfficient Teams Do Not Happen. They are Designed. It's called DesignOps
Efficient Teams Do Not Happen. They are Designed. It's called DesignOps
 
UX STRAT Online 2021 Presentation by Mike Kuniavsky, Accenture
UX STRAT Online 2021 Presentation by Mike Kuniavsky, AccentureUX STRAT Online 2021 Presentation by Mike Kuniavsky, Accenture
UX STRAT Online 2021 Presentation by Mike Kuniavsky, Accenture
 
Ideo Case Study
Ideo Case StudyIdeo Case Study
Ideo Case Study
 
Design Thinking Method Cards
Design Thinking Method CardsDesign Thinking Method Cards
Design Thinking Method Cards
 
The actual problems to be solved
The actual problems to be solvedThe actual problems to be solved
The actual problems to be solved
 
Why and when should you think DesignOps?
Why and when should you think DesignOps?Why and when should you think DesignOps?
Why and when should you think DesignOps?
 
Atelier Design Probes - FLUPA UX-Day 2015
Atelier Design Probes - FLUPA UX-Day 2015Atelier Design Probes - FLUPA UX-Day 2015
Atelier Design Probes - FLUPA UX-Day 2015
 
Story writing and mapping.pdf
Story writing and mapping.pdfStory writing and mapping.pdf
Story writing and mapping.pdf
 
Nossas Soluções De Service Design
Nossas Soluções De Service Design Nossas Soluções De Service Design
Nossas Soluções De Service Design
 
Service Design
Service DesignService Design
Service Design
 
Comptoir OCTO Provence - UX Design System
Comptoir OCTO Provence - UX Design SystemComptoir OCTO Provence - UX Design System
Comptoir OCTO Provence - UX Design System
 
Design Thinking 101 - An Introduction to Design Thinking for Developers
Design Thinking 101 - An Introduction to Design Thinking for DevelopersDesign Thinking 101 - An Introduction to Design Thinking for Developers
Design Thinking 101 - An Introduction to Design Thinking for Developers
 
Pushing DesignOps’ Influence into New Global Markets - P. Bertini & A. Mengon...
Pushing DesignOps’ Influence into New Global Markets - P. Bertini & A. Mengon...Pushing DesignOps’ Influence into New Global Markets - P. Bertini & A. Mengon...
Pushing DesignOps’ Influence into New Global Markets - P. Bertini & A. Mengon...
 
Lean UX
Lean UXLean UX
Lean UX
 
Make the leap, take the lead Slideshare | Accenture
Make the leap, take the lead Slideshare | AccentureMake the leap, take the lead Slideshare | Accenture
Make the leap, take the lead Slideshare | Accenture
 
Design Mindset
Design MindsetDesign Mindset
Design Mindset
 
Design systems: accounting for quality and scalability
Design systems: accounting for quality and scalabilityDesign systems: accounting for quality and scalability
Design systems: accounting for quality and scalability
 

Viewers also liked

Thinking Like an Optimizer, by Jennifer Ruffner
Thinking Like an Optimizer, by Jennifer RuffnerThinking Like an Optimizer, by Jennifer Ruffner
Thinking Like an Optimizer, by Jennifer RuffnerChristina Wodtke
 
Virtual Seminar: Cross-Channel Design: Magic Mobile Moments
Virtual Seminar: Cross-Channel Design: Magic Mobile MomentsVirtual Seminar: Cross-Channel Design: Magic Mobile Moments
Virtual Seminar: Cross-Channel Design: Magic Mobile MomentsDesignCaffeine, Inc.
 
Designing Structure: Interaction Design
Designing Structure: Interaction DesignDesigning Structure: Interaction Design
Designing Structure: Interaction DesignChristina Wodtke
 
Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)Christina Wodtke
 
Understanding User Experience Design & Why It Matters
Understanding User Experience Design & Why It MattersUnderstanding User Experience Design & Why It Matters
Understanding User Experience Design & Why It MattersChristina Wodtke
 
Designing and Understanding Business
Designing and Understanding BusinessDesigning and Understanding Business
Designing and Understanding BusinessChristina Wodtke
 
Coop First: how non-zero-sum games are reshaping our digital landscape
Coop First: how non-zero-sum games are reshaping our digital landscapeCoop First: how non-zero-sum games are reshaping our digital landscape
Coop First: how non-zero-sum games are reshaping our digital landscapeAmy Jo Kim
 
The Principles of Interface
The Principles of InterfaceThe Principles of Interface
The Principles of InterfaceChristina Wodtke
 
Introduction to User Experience
Introduction to User ExperienceIntroduction to User Experience
Introduction to User ExperienceChristina Wodtke
 
User Insights Start the Design Process
User Insights Start the Design ProcessUser Insights Start the Design Process
User Insights Start the Design ProcessSteve Portigal
 
Designing Structure Part II: Information Archtecture
Designing Structure Part II: Information ArchtectureDesigning Structure Part II: Information Archtecture
Designing Structure Part II: Information ArchtectureChristina Wodtke
 

Viewers also liked (15)

Thinking Like an Optimizer, by Jennifer Ruffner
Thinking Like an Optimizer, by Jennifer RuffnerThinking Like an Optimizer, by Jennifer Ruffner
Thinking Like an Optimizer, by Jennifer Ruffner
 
Virtual Seminar: Cross-Channel Design: Magic Mobile Moments
Virtual Seminar: Cross-Channel Design: Magic Mobile MomentsVirtual Seminar: Cross-Channel Design: Magic Mobile Moments
Virtual Seminar: Cross-Channel Design: Magic Mobile Moments
 
Designing Social
Designing SocialDesigning Social
Designing Social
 
Designing Structure: Interaction Design
Designing Structure: Interaction DesignDesigning Structure: Interaction Design
Designing Structure: Interaction Design
 
Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)
 
Ux aus prototyping
Ux aus prototypingUx aus prototyping
Ux aus prototyping
 
Designing Brand
Designing BrandDesigning Brand
Designing Brand
 
Understanding User Experience Design & Why It Matters
Understanding User Experience Design & Why It MattersUnderstanding User Experience Design & Why It Matters
Understanding User Experience Design & Why It Matters
 
Designing with Personas
Designing with PersonasDesigning with Personas
Designing with Personas
 
Designing and Understanding Business
Designing and Understanding BusinessDesigning and Understanding Business
Designing and Understanding Business
 
Coop First: how non-zero-sum games are reshaping our digital landscape
Coop First: how non-zero-sum games are reshaping our digital landscapeCoop First: how non-zero-sum games are reshaping our digital landscape
Coop First: how non-zero-sum games are reshaping our digital landscape
 
The Principles of Interface
The Principles of InterfaceThe Principles of Interface
The Principles of Interface
 
Introduction to User Experience
Introduction to User ExperienceIntroduction to User Experience
Introduction to User Experience
 
User Insights Start the Design Process
User Insights Start the Design ProcessUser Insights Start the Design Process
User Insights Start the Design Process
 
Designing Structure Part II: Information Archtecture
Designing Structure Part II: Information ArchtectureDesigning Structure Part II: Information Archtecture
Designing Structure Part II: Information Archtecture
 

Similar to Yahoo! Pattern Library & Social Design Patterns

Designing Intuitive SharePoint Sites
Designing Intuitive SharePoint SitesDesigning Intuitive SharePoint Sites
Designing Intuitive SharePoint SitesMarcy Kellar
 
Designing Social Interfaces at Web Directions South 2009
Designing Social Interfaces at Web Directions South 2009Designing Social Interfaces at Web Directions South 2009
Designing Social Interfaces at Web Directions South 2009Christian Crumlish
 
Using Facebook and Google Docs for Teaching and Sharing Information
Using Facebook and Google Docs for Teaching and Sharing InformationUsing Facebook and Google Docs for Teaching and Sharing Information
Using Facebook and Google Docs for Teaching and Sharing InformationKanda Runapongsa Saikaew
 
Print, pixels & people 10a
Print, pixels & people 10aPrint, pixels & people 10a
Print, pixels & people 10aLogan Aimone
 
Designing for Play (at Web Directions @media)
Designing for Play (at Web Directions @media)Designing for Play (at Web Directions @media)
Designing for Play (at Web Directions @media)Christian Crumlish
 
Exploring history through primary sources
Exploring history through primary sourcesExploring history through primary sources
Exploring history through primary sourcesStacy Moore
 
Flicc Institute for Library Technicians 2011 @ the Library of Congress
Flicc Institute for Library Technicians 2011 @ the Library of CongressFlicc Institute for Library Technicians 2011 @ the Library of Congress
Flicc Institute for Library Technicians 2011 @ the Library of CongressAileen Marshall
 
Creating Equitable Digital Spaces for Neurodivergent Individuals
Creating Equitable Digital Spaces for Neurodivergent IndividualsCreating Equitable Digital Spaces for Neurodivergent Individuals
Creating Equitable Digital Spaces for Neurodivergent IndividualsRin Oliver (they/them)
 
How Social Media Can Enhance Your Research Activities
How Social Media Can Enhance Your Research ActivitiesHow Social Media Can Enhance Your Research Activities
How Social Media Can Enhance Your Research Activitieslisbk
 
Higher Ed Social Media at SIUC
Higher Ed Social Media at SIUCHigher Ed Social Media at SIUC
Higher Ed Social Media at SIUCguestfdb32e1
 
Social Media Preso Full
Social Media Preso FullSocial Media Preso Full
Social Media Preso Fulldlaur
 
Libraries & Open Source: Freedom and Community
Libraries & Open Source: Freedom and CommunityLibraries & Open Source: Freedom and Community
Libraries & Open Source: Freedom and CommunityNicole C. Engard
 
Libraries Developing Openly
Libraries Developing OpenlyLibraries Developing Openly
Libraries Developing OpenlyNicole C. Engard
 
Nhh social media marketing research opening lecture
Nhh  social media marketing research opening lectureNhh  social media marketing research opening lecture
Nhh social media marketing research opening lectureIngeborg Kleppe
 
Maximizing Social Capital to Increase Core Facility Exposure and Usage
Maximizing Social Capital to Increase Core Facility Exposure and UsageMaximizing Social Capital to Increase Core Facility Exposure and Usage
Maximizing Social Capital to Increase Core Facility Exposure and UsageRyan Duggan
 
Designing for Play at WebVisions 2010
Designing for Play at WebVisions 2010Designing for Play at WebVisions 2010
Designing for Play at WebVisions 2010Christian Crumlish
 
Tools for Making Thinking Visible
Tools for Making Thinking VisibleTools for Making Thinking Visible
Tools for Making Thinking Visibleloater
 
Why Networks Matter in Teaching & Learning
Why Networks Matter in Teaching & LearningWhy Networks Matter in Teaching & Learning
Why Networks Matter in Teaching & LearningAlec Couros
 
Reflecting on 23 Things: using 23 Things in an Information literacy class
Reflecting on 23 Things: using 23 Things in an Information literacy classReflecting on 23 Things: using 23 Things in an Information literacy class
Reflecting on 23 Things: using 23 Things in an Information literacy classSheila Webber
 

Similar to Yahoo! Pattern Library & Social Design Patterns (20)

Designing Intuitive SharePoint Sites
Designing Intuitive SharePoint SitesDesigning Intuitive SharePoint Sites
Designing Intuitive SharePoint Sites
 
Designing Social Interfaces at Web Directions South 2009
Designing Social Interfaces at Web Directions South 2009Designing Social Interfaces at Web Directions South 2009
Designing Social Interfaces at Web Directions South 2009
 
Using Facebook and Google Docs for Teaching and Sharing Information
Using Facebook and Google Docs for Teaching and Sharing InformationUsing Facebook and Google Docs for Teaching and Sharing Information
Using Facebook and Google Docs for Teaching and Sharing Information
 
Social media 101
Social media 101Social media 101
Social media 101
 
Print, pixels & people 10a
Print, pixels & people 10aPrint, pixels & people 10a
Print, pixels & people 10a
 
Designing for Play (at Web Directions @media)
Designing for Play (at Web Directions @media)Designing for Play (at Web Directions @media)
Designing for Play (at Web Directions @media)
 
Exploring history through primary sources
Exploring history through primary sourcesExploring history through primary sources
Exploring history through primary sources
 
Flicc Institute for Library Technicians 2011 @ the Library of Congress
Flicc Institute for Library Technicians 2011 @ the Library of CongressFlicc Institute for Library Technicians 2011 @ the Library of Congress
Flicc Institute for Library Technicians 2011 @ the Library of Congress
 
Creating Equitable Digital Spaces for Neurodivergent Individuals
Creating Equitable Digital Spaces for Neurodivergent IndividualsCreating Equitable Digital Spaces for Neurodivergent Individuals
Creating Equitable Digital Spaces for Neurodivergent Individuals
 
How Social Media Can Enhance Your Research Activities
How Social Media Can Enhance Your Research ActivitiesHow Social Media Can Enhance Your Research Activities
How Social Media Can Enhance Your Research Activities
 
Higher Ed Social Media at SIUC
Higher Ed Social Media at SIUCHigher Ed Social Media at SIUC
Higher Ed Social Media at SIUC
 
Social Media Preso Full
Social Media Preso FullSocial Media Preso Full
Social Media Preso Full
 
Libraries & Open Source: Freedom and Community
Libraries & Open Source: Freedom and CommunityLibraries & Open Source: Freedom and Community
Libraries & Open Source: Freedom and Community
 
Libraries Developing Openly
Libraries Developing OpenlyLibraries Developing Openly
Libraries Developing Openly
 
Nhh social media marketing research opening lecture
Nhh  social media marketing research opening lectureNhh  social media marketing research opening lecture
Nhh social media marketing research opening lecture
 
Maximizing Social Capital to Increase Core Facility Exposure and Usage
Maximizing Social Capital to Increase Core Facility Exposure and UsageMaximizing Social Capital to Increase Core Facility Exposure and Usage
Maximizing Social Capital to Increase Core Facility Exposure and Usage
 
Designing for Play at WebVisions 2010
Designing for Play at WebVisions 2010Designing for Play at WebVisions 2010
Designing for Play at WebVisions 2010
 
Tools for Making Thinking Visible
Tools for Making Thinking VisibleTools for Making Thinking Visible
Tools for Making Thinking Visible
 
Why Networks Matter in Teaching & Learning
Why Networks Matter in Teaching & LearningWhy Networks Matter in Teaching & Learning
Why Networks Matter in Teaching & Learning
 
Reflecting on 23 Things: using 23 Things in an Information literacy class
Reflecting on 23 Things: using 23 Things in an Information literacy classReflecting on 23 Things: using 23 Things in an Information literacy class
Reflecting on 23 Things: using 23 Things in an Information literacy class
 

More from Christian Crumlish

Designing Social Interfaces - IxDA LA meetup, July 10, 2013
Designing Social Interfaces - IxDA LA meetup, July 10, 2013Designing Social Interfaces - IxDA LA meetup, July 10, 2013
Designing Social Interfaces - IxDA LA meetup, July 10, 2013Christian Crumlish
 
Designing for Play at Web 2.0. Expo SF 2010
Designing for Play at Web 2.0. Expo SF 2010Designing for Play at Web 2.0. Expo SF 2010
Designing for Play at Web 2.0. Expo SF 2010Christian Crumlish
 
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)Christian Crumlish
 
Ukulele For Geeks: Secrets of the Pentatonic Scales
Ukulele For Geeks: Secrets of the Pentatonic ScalesUkulele For Geeks: Secrets of the Pentatonic Scales
Ukulele For Geeks: Secrets of the Pentatonic ScalesChristian Crumlish
 
Social Design For Patternistas
Social Design For PatternistasSocial Design For Patternistas
Social Design For PatternistasChristian Crumlish
 
Design Hacks with Stencils & Patterns
Design Hacks with Stencils & PatternsDesign Hacks with Stencils & Patterns
Design Hacks with Stencils & PatternsChristian Crumlish
 
Designing with patterns in the real world
Designing with patterns in the real worldDesigning with patterns in the real world
Designing with patterns in the real worldChristian Crumlish
 
Presence, identity, and attention in social web architecture
Presence, identity, and attention in social web architecturePresence, identity, and attention in social web architecture
Presence, identity, and attention in social web architectureChristian Crumlish
 
Social Design and the Yahoo! Pattern Library
Social Design and the Yahoo! Pattern LibrarySocial Design and the Yahoo! Pattern Library
Social Design and the Yahoo! Pattern LibraryChristian Crumlish
 
Social Media Design Patterns (BarCampBlock)
Social Media Design Patterns (BarCampBlock)Social Media Design Patterns (BarCampBlock)
Social Media Design Patterns (BarCampBlock)Christian Crumlish
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information ArchitectureChristian Crumlish
 
Every Breath You Take: Presence
Every Breath You Take: PresenceEvery Breath You Take: Presence
Every Breath You Take: PresenceChristian Crumlish
 
Please Forget You Knew My Name: Secretly Influenced by the Dead
Please Forget You Knew My Name: Secretly Influenced by the DeadPlease Forget You Knew My Name: Secretly Influenced by the Dead
Please Forget You Knew My Name: Secretly Influenced by the DeadChristian Crumlish
 

More from Christian Crumlish (20)

Designing Social Interfaces - IxDA LA meetup, July 10, 2013
Designing Social Interfaces - IxDA LA meetup, July 10, 2013Designing Social Interfaces - IxDA LA meetup, July 10, 2013
Designing Social Interfaces - IxDA LA meetup, July 10, 2013
 
Product is Big IA
Product is Big IAProduct is Big IA
Product is Big IA
 
Playful design-uxlx-2011
Playful design-uxlx-2011Playful design-uxlx-2011
Playful design-uxlx-2011
 
We are all Leonardo now
We are all Leonardo nowWe are all Leonardo now
We are all Leonardo now
 
Designing for Play at Web 2.0. Expo SF 2010
Designing for Play at Web 2.0. Expo SF 2010Designing for Play at Web 2.0. Expo SF 2010
Designing for Play at Web 2.0. Expo SF 2010
 
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)
 
Ukulele For Geeks: Secrets of the Pentatonic Scales
Ukulele For Geeks: Secrets of the Pentatonic ScalesUkulele For Geeks: Secrets of the Pentatonic Scales
Ukulele For Geeks: Secrets of the Pentatonic Scales
 
Social Design For Patternistas
Social Design For PatternistasSocial Design For Patternistas
Social Design For Patternistas
 
Design Hacks with Stencils & Patterns
Design Hacks with Stencils & PatternsDesign Hacks with Stencils & Patterns
Design Hacks with Stencils & Patterns
 
Designing with patterns in the real world
Designing with patterns in the real worldDesigning with patterns in the real world
Designing with patterns in the real world
 
Presence, identity, and attention in social web architecture
Presence, identity, and attention in social web architecturePresence, identity, and attention in social web architecture
Presence, identity, and attention in social web architecture
 
Grasping Social Patterns
Grasping Social PatternsGrasping Social Patterns
Grasping Social Patterns
 
Social Design and the Yahoo! Pattern Library
Social Design and the Yahoo! Pattern LibrarySocial Design and the Yahoo! Pattern Library
Social Design and the Yahoo! Pattern Library
 
State of the Patterns 2008
State of the Patterns 2008State of the Patterns 2008
State of the Patterns 2008
 
Heads In Space
Heads In SpaceHeads In Space
Heads In Space
 
Social Media Design Patterns (BarCampBlock)
Social Media Design Patterns (BarCampBlock)Social Media Design Patterns (BarCampBlock)
Social Media Design Patterns (BarCampBlock)
 
Failure *Is* an Option
Failure *Is* an OptionFailure *Is* an Option
Failure *Is* an Option
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information Architecture
 
Every Breath You Take: Presence
Every Breath You Take: PresenceEvery Breath You Take: Presence
Every Breath You Take: Presence
 
Please Forget You Knew My Name: Secretly Influenced by the Dead
Please Forget You Knew My Name: Secretly Influenced by the DeadPlease Forget You Knew My Name: Secretly Influenced by the Dead
Please Forget You Knew My Name: Secretly Influenced by the Dead
 

Recently uploaded

Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 

Recently uploaded (19)

Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 

Yahoo! Pattern Library & Social Design Patterns

  • 1. YDN & IxDA-Berlin present Yahoo! Design Pattern Library & Social Design Patterns Christian Crumlish, Curator, Yahoo! Design Pattern Library January 19 (London) & 21 (Berlin), 2010 01/31/10
  • 2. I’m Really Glad to Be Here 01/31/10
  • 3. I’m Really Glad to Be Here 01/31/10
  • 4. I’m Really Glad to Be Here 01/31/10
  • 5. I’m Really Glad to Be Here 01/31/10
  • 6. I’m Really Glad to Be Here 01/31/10
  • 7. A Brief History of Patterns Architecture 01/31/10
  • 8. A Brief History of Patterns Software Engineering (invention of wiki) 01/31/10
  • 9. A Brief History of Patterns User Interface (HCI or Interaction Design) 01/31/10
  • 10. Yahoo’s Pattern Library (so far) Launched in 2005: Erin Malone Matt Leacock Chanel Wheeler 01/31/10
  • 11. Yahoo’s Pattern Library (so far) Open Version of Library Launched in 2006: Bill Scott succeeds Matt as curator & adds many rich patterns 01/31/10
  • 12. Yahoo’s Pattern Library (so far) Library Redesign Completed 2009 I become the third curator, focus on social patterns, opening library, redesign 01/31/10
  • 13. One Company, 100 Designs 01/31/10
  • 14. “Hello?” “Is that you, Mr. Gilbert?” “Hello?” Social media is always awkward when it’s new 01/31/10
  • 15. New social media: always awkward 01/31/10
  • 16. Five Principles 01/31/10
  • 17. Pave the cowpaths 01/31/10
  • 18. How to Pave the Cowpaths 01/31/10
  • 19. Talk like a person 01/31/10
  • 20. How to Talk Like a Person • Conversational Voice • Self-Deprecating Error Messages • Ask Questions • Your vs. My • No Joking Around 01/31/10
  • 21. Play well with others (Be open) 01/31/10
  • 22. How to Play Well with Others Embrace open standards Share data outside of the bounds of your application Accept external data within the sphere of your application Support two-way interoperability 01/31/10
  • 23. How to Play Well with Others Embrace open standards Share data outside of the bounds of your application Accept open standards Embrace external data within the sphere of your application Share data outside of the bounds of your application Support two-way interoperability Accept external data within the sphere of your application Support two-way interoperability 01/31/10
  • 24. Learn from games 01/31/10
  • 25. How to Learn from Games 01/31/10
  • 26. Respect the ethical dimension 01/31/10
  • 27. How not to Respect the Ethical Dimension 01/31/10
  • 28. Five Principles • Pave the Cowpaths • Talk Like a Person • Play Well with Others (Be Open) • Learn from Games • Respect the Ethical Dimension 23 01/31/10
  • 29. 96 Patterns 01/31/10
  • 31. Give people a way to be identi ed 01/31/10
  • 32. Give people a way to be identi ed 01/31/10
  • 35. User Cards What • A person needs more information about another person in an online community without interrupting his or her current task. How • Open a small panel when the user hovers over a target's display name or image. • Present a larger version of the user's display image, the user's full display name, and other pertinent information about the target that they choose to share with the community. • Present a Relationship Reflector. Allow the ability to subscribe to, follow, connect to, unsubscribe or block the user from this panel. 01/31/10
  • 36. User Cards in the wild FriendFeed 01/31/10
  • 37. User Cards in the wild Flickr 01/31/10
  • 39. What’s your social object? 01/31/10
  • 44. Give people something to do 01/31/10
  • 46. Activities involving Objects • Collecting (passive) • Broadcasting & Publishing (one-to-many) • Sharing (more intimate) • Feedback (commenting on objects) • Communicating (two-way conversation) • Collaboration (making objects together) • Social Media (a full ecosystem) 01/31/10
  • 47. Tag an Object What • A user wants to attach their own keywords to an object for organization and later retrieval. Use When • Use when a person is collecting a large amount of unstructured data, like photos. • Use this pattern when a person wants to manage a large collection of items, like books. • Use this pattern to blend user generated labels and keywords with structured metadata. 01/31/10
  • 48. Tag an Object in the wild Flickr 01/31/10
  • 49. Ratings What • A user wants to quickly leave their opinion on an object, with minimal interruption to any other task flow they are involved in. Use When • A user wants to leave an opinion quickly. • Use in combination with reviews for richer experience. • Use to quickly tap into the existing "community" of a product. • Ratings are collected together to present an average rating of an object from the collective user set. 01/31/10
  • 50. Ratings in the wild Yelp 01/31/10
  • 51. Ratings in the wild Yahoo! Movies 01/31/10
  • 52. Share This What • User wants to share an object with one or more people. How • Enable people to spontaneously share content or objects they find. • Provide the minimal interface needed to facilitate rapid sending or posting, such as a ubiquitous Share This widget. • Offer autocomplete selection from an address book or set of contacts if possible. Don't break email. • Consider including a text field for adding a personal note. • Offer the user a checkbox option for receiving a copy of the message. 01/31/10
  • 53. Share This in the wild The Onion 01/31/10
  • 54. Share This in the wild Add to Any 01/31/10
  • 55. Share This in the wild Facebook 01/31/10
  • 56. Let the community elevate people & content they value 01/31/10
  • 57. Let the community elevate people & content they value Gently moderate 01/31/10
  • 59. Adding Friends What • A user has found people she knows on a social site and wants to add them to her circle of connections. Use When • Use when a person’s connections are a core part of the site’s experience. • Use when relationships will be confirmed providing a two-way reciprocal relationship. • Use when allowing one user to follow another participant without reciprocity. 01/31/10
  • 60. Adding Friends in the wild Facebook 01/31/10
  • 61. Adding Friends in the wild Yahoo! 01/31/10
  • 62. Adding Friends in the wild Dopplr 01/31/10
  • 63. Circles of Connections What • A user wants to indicate nuances in their relationships with other people to create contexts for communication and sharing. Use When • Use to distinguish levels of participation in a person’s network. • Use to set permissions for shared activity and content. • Use to disambiguate real-life versus online, strong versus weak ties. • Use this pattern to help users filter which content to consume. 01/31/10
  • 64. Circle of Connections in the wild Plaxo 01/31/10
  • 65. Circle of Connections in the wild Flickr 01/31/10
  • 66. Public Conversation Use When • Use this pattern to differentiate from private conversations. How • Allow users to create a dialog between themselves. Provide a framework that is flexible enough to support two or more people in conversation. Provide a form field for text entry. Clearly indicate the character count for conversing. • Allow users to block or ignore specific users that they don’t want to hear from, without disrupting the flow of conversation to other participants. 01/31/10
  • 67. Public Conversation in the wild Twitter 01/31/10
  • 68. Public Conversation in the wild FriendFeed 01/31/10
  • 69. Enable a bridge to real life events 01/31/10
  • 70. Geo What • A person wants to let the gps on his phone inform other people and his phone applications of his location. Use When • Use to enable users to plot themselves on a map or announce their location. • Use to enable users to meet up with other people nearby. • Use to empower features on social applications. 01/31/10
  • 71. Geo in the wild Geo on iPhone 01/31/10
  • 72. Geo in the wild Where for iPhone 01/31/10
  • 73. Social Design Pattern Categories • Representations of the Self, self-expression, identity • Activities involving social objects • Community dynamics growing out of relationships, expressed through various contexts 01/31/10
  • 74. Anti-Patterns! 01/31/10
  • 75. Cargo Cult 01/31/10
  • 76. Cargo Cult 01/31/10
  • 77. Cargo Cult 01/31/10
  • 78. Cargo Cult 01/31/10
  • 83. Password Anti-Pattern in the wild iLike 01/31/10
  • 84. Password Anti-Pattern in the wild Plaxo 01/31/10
  • 85. Ex-Boyfriend Bug 01/31/10
  • 86. Potemkin Village 01/31/10
  • 87. Five Anti-Patterns • Cargo Cult Design • Don’t Break Email! • Password Anti-Pattern • Ex-Boyfriend Bug • Potemkin Village 74 01/31/10
  • 88. thank you! Christian Crumlish, Curator Yahoo! Design Pattern Library design.yahoo.com @mediajunkie 01/31/10

Editor's Notes

  1. I almost didn’t make it to Europe in January after a scary car accident just before the holidays in December that sprained my ankle rather badly and dislocated my pinkie finger, but I brought my crutch onstage for sympathy and carried on.
  2. Pave the Cowpaths is an expression that means to put the road where they’re already naturally being established instead of trying to fight (human) nature
  3. Dogster - Started a photo sharing product, noticed customers putting pics of pets up - niche not being served, so ended up building social network for pets
  4. Talk Like a Person – to encourage users to act like people and relate to other people through your site, make sure they know the makers of the site are people too, and not lawyers or robots
  5. Use established open standards so that you can build on what’s come before and so that other people can build on your work
  6. Embrace open standards Share data outside of the bounds of your application Accept external data within the sphere of your application Support two-way interoperability
  7. Games are social: they have rules but people play together and create the final result themselves. Social spaces can learn from this. The picture shows Lombard Street in San Francisco, “the crookedest street in the world,” turned into the child’s game Candyland.
  8. Ludicorp was a company (ludi- is a Latin root meaning “play” or “playful”) that made a game called Game Neverending. Then they made a site called Flickr.
  9. This shows an old-fashioned US patent medicine making medical claims that re probably not true. Social design involves literally playing with people’s lives and you have to be careful or at least aware of the ethical aspects of every design choice you make.
  10. Tagged tricks new users into spamming their friends.
  11. Visualizing the pattern language as a cycle
  12. Give people a way to identify themselves and be identified.
  13. the Internet doesn’t know which John Smith you are (this is Personas from MIT)
  14. Patterns related to People
  15. Erin sometimes called ID cards or identity cards - short, mini, lead in to profile
  16. Social Objects give people something to talk about and something to do. The slides show a wide range of social objects. Give users a reason to rally. Why would someone come to your site? What’s your social object ? Friendster and the fakesters Christian
  17. This is a picture of a “barn raising” – a community of farmers comes together to build a barn for a member of the community. Give people something to do together, so they can start small and build up their level of engagement over time
  18. Patterns related to Activities involving Social Objects
  19. Erin
  20. Erin
  21. Xian
  22. Gently Moderate Let the Community elevate people and content they value - of the people, by the people with some gentle oversight Reputation, recommendations gentle moderation Flickr - interestingness - views, comments, favorites plus some gentle algorythm to elevate the objects the community values Erin
  23. Patterns related to connecting, community, and relationships
  24. Erin
  25. Erin
  26. Erin
  27. Enable a bridge to real life – acitvities, events, geolocation The picture is from a movie in which the main characters decide to “put on a show” with all their firends. Let’s put on a show = spontaneous gatherings, broadcasting of gatherings - enable, embrace location and mobile tools - and the crossover
  28. Cargo Cult – people on an island who meet more technologically advanced people and think the consumer good (the “cargo”) can be brought back by imitating the shape of an airplane, a landing strip, a military installation. Patterns - used blindly without understanding context and need
  29. Zoomr copied flickr: leaving the e out of name, tagline, source code AOL homepage - copy Yahoo including source code iPhone - Pre, Etc - other phones
  30. Don’t Break Email – if you use email to notify users, let them use their reply function The picture shows a door that goes nowhere in the Winchester Mystery House in California
  31. With Facebook a reply will bounce but with Basecamp it will create a followup comment.
  32. The Password Anti-Pattern – don’t trick people into giving away their passwords to anyone who asks
  33. Jeremy Keith was an early identifier of this pattern, in his journal on his website Adactio
  34. Ex-Boyfriend Bug Dodgeball discovered this because it would sometimes notify ex-lovers that they were nearby, causing problems. Just because people seem related in your social graph it doesn’t mean they want to be connected.
  35. A Potemkin Village is a fake village designed to impress someone or make them think there are more people living there than really are. In social design it means creating too many empty discussion boards before a site has even launched