SlideShare a Scribd company logo
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

User Story Mapping, Discover the whole story
User Story Mapping, Discover the whole storyUser Story Mapping, Discover the whole story
User Story Mapping, Discover the whole story
Jeff Patton
 
Introduction to Social Network Analysis
Introduction to Social Network AnalysisIntroduction to Social Network Analysis
Introduction to Social Network Analysis
Patti Anklam
 
Leaning into Server to Cloud App Migration
Leaning into Server to Cloud App MigrationLeaning into Server to Cloud App Migration
Leaning into Server to Cloud App Migration
Atlassian
 
How to design and implement a data ops architecture with sdc and gcp
How to design and implement a data ops architecture with sdc and gcpHow to design and implement a data ops architecture with sdc and gcp
How to design and implement a data ops architecture with sdc and gcp
Joseph Arriola
 
Data Mesh using Microsoft Fabric
Data Mesh using Microsoft FabricData Mesh using Microsoft Fabric
Data Mesh using Microsoft Fabric
Nathan Bijnens
 
Product Backlog Management
Product Backlog ManagementProduct Backlog Management
Product Backlog Management
Silvana Wasitova, Scrum & Agile Coach
 
JIRA System Admin Traning
JIRA System Admin Traning JIRA System Admin Traning
JIRA System Admin Traning
Cprime
 
User Story Mapping (2008)
User Story Mapping (2008)User Story Mapping (2008)
User Story Mapping (2008)
Jeff Patton
 
Tips for Effectively Applying the Product Owner Role
Tips for Effectively Applying the Product Owner RoleTips for Effectively Applying the Product Owner Role
Tips for Effectively Applying the Product Owner Role
Roman Pichler
 
Introduction to Microsoft Office 365 for Small Business - by Denver IT Support
Introduction to Microsoft Office 365 for Small Business - by Denver IT SupportIntroduction to Microsoft Office 365 for Small Business - by Denver IT Support
Introduction to Microsoft Office 365 for Small Business - by Denver IT Support
North Star. Inc.
 
Successful Atlassian Cloud Migrations and Optimizations: Real Life Examples
Successful Atlassian Cloud Migrations and Optimizations: Real Life ExamplesSuccessful Atlassian Cloud Migrations and Optimizations: Real Life Examples
Successful Atlassian Cloud Migrations and Optimizations: Real Life Examples
Cprime
 
Business plan vs Lean Canvas
Business plan vs Lean CanvasBusiness plan vs Lean Canvas
Business plan vs Lean Canvas
Ash Maurya
 
How to Build the Data Mesh Foundation: A Principled Approach | Zhamak Dehghan...
How to Build the Data Mesh Foundation: A Principled Approach | Zhamak Dehghan...How to Build the Data Mesh Foundation: A Principled Approach | Zhamak Dehghan...
How to Build the Data Mesh Foundation: A Principled Approach | Zhamak Dehghan...
HostedbyConfluent
 
#bluecruxbites: official presentation March 9th 2022
#bluecruxbites: official presentation March 9th 2022#bluecruxbites: official presentation March 9th 2022
#bluecruxbites: official presentation March 9th 2022
Bluecrux
 
Continuous Discovery in Product-Led Companies
Continuous Discovery in Product-Led CompaniesContinuous Discovery in Product-Led Companies
Continuous Discovery in Product-Led Companies
GLIDR
 
Agile User Stories
Agile User StoriesAgile User Stories
Agile User Stories
kahgeh75
 
Kafka Tutorial - DevOps, Admin and Ops
Kafka Tutorial - DevOps, Admin and OpsKafka Tutorial - DevOps, Admin and Ops
Kafka Tutorial - DevOps, Admin and Ops
Jean-Paul Azar
 
Product Discovery At Google
Product Discovery At GoogleProduct Discovery At Google
Product Discovery At Google
John Gibbon
 
Introduction to Microsoft 365
Introduction to Microsoft 365Introduction to Microsoft 365
Introduction to Microsoft 365
Robert Crane
 
Workshop - Writing Good User Stories
Workshop - Writing Good User Stories Workshop - Writing Good User Stories
Workshop - Writing Good User Stories
Easy Agile
 

What's hot (20)

User Story Mapping, Discover the whole story
User Story Mapping, Discover the whole storyUser Story Mapping, Discover the whole story
User Story Mapping, Discover the whole story
 
Introduction to Social Network Analysis
Introduction to Social Network AnalysisIntroduction to Social Network Analysis
Introduction to Social Network Analysis
 
Leaning into Server to Cloud App Migration
Leaning into Server to Cloud App MigrationLeaning into Server to Cloud App Migration
Leaning into Server to Cloud App Migration
 
How to design and implement a data ops architecture with sdc and gcp
How to design and implement a data ops architecture with sdc and gcpHow to design and implement a data ops architecture with sdc and gcp
How to design and implement a data ops architecture with sdc and gcp
 
Data Mesh using Microsoft Fabric
Data Mesh using Microsoft FabricData Mesh using Microsoft Fabric
Data Mesh using Microsoft Fabric
 
Product Backlog Management
Product Backlog ManagementProduct Backlog Management
Product Backlog Management
 
JIRA System Admin Traning
JIRA System Admin Traning JIRA System Admin Traning
JIRA System Admin Traning
 
User Story Mapping (2008)
User Story Mapping (2008)User Story Mapping (2008)
User Story Mapping (2008)
 
Tips for Effectively Applying the Product Owner Role
Tips for Effectively Applying the Product Owner RoleTips for Effectively Applying the Product Owner Role
Tips for Effectively Applying the Product Owner Role
 
Introduction to Microsoft Office 365 for Small Business - by Denver IT Support
Introduction to Microsoft Office 365 for Small Business - by Denver IT SupportIntroduction to Microsoft Office 365 for Small Business - by Denver IT Support
Introduction to Microsoft Office 365 for Small Business - by Denver IT Support
 
Successful Atlassian Cloud Migrations and Optimizations: Real Life Examples
Successful Atlassian Cloud Migrations and Optimizations: Real Life ExamplesSuccessful Atlassian Cloud Migrations and Optimizations: Real Life Examples
Successful Atlassian Cloud Migrations and Optimizations: Real Life Examples
 
Business plan vs Lean Canvas
Business plan vs Lean CanvasBusiness plan vs Lean Canvas
Business plan vs Lean Canvas
 
How to Build the Data Mesh Foundation: A Principled Approach | Zhamak Dehghan...
How to Build the Data Mesh Foundation: A Principled Approach | Zhamak Dehghan...How to Build the Data Mesh Foundation: A Principled Approach | Zhamak Dehghan...
How to Build the Data Mesh Foundation: A Principled Approach | Zhamak Dehghan...
 
#bluecruxbites: official presentation March 9th 2022
#bluecruxbites: official presentation March 9th 2022#bluecruxbites: official presentation March 9th 2022
#bluecruxbites: official presentation March 9th 2022
 
Continuous Discovery in Product-Led Companies
Continuous Discovery in Product-Led CompaniesContinuous Discovery in Product-Led Companies
Continuous Discovery in Product-Led Companies
 
Agile User Stories
Agile User StoriesAgile User Stories
Agile User Stories
 
Kafka Tutorial - DevOps, Admin and Ops
Kafka Tutorial - DevOps, Admin and OpsKafka Tutorial - DevOps, Admin and Ops
Kafka Tutorial - DevOps, Admin and Ops
 
Product Discovery At Google
Product Discovery At GoogleProduct Discovery At Google
Product Discovery At Google
 
Introduction to Microsoft 365
Introduction to Microsoft 365Introduction to Microsoft 365
Introduction to Microsoft 365
 
Workshop - Writing Good User Stories
Workshop - Writing Good User Stories Workshop - Writing Good User Stories
Workshop - Writing Good User Stories
 

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 Ruffner
Christina 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 Moments
DesignCaffeine, Inc.
 
Designing Social
Designing SocialDesigning Social
Designing Social
Christina Wodtke
 
Designing Structure: Interaction Design
Designing Structure: Interaction DesignDesigning Structure: Interaction Design
Designing Structure: Interaction Design
Christina Wodtke
 
Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)
Christina Wodtke
 
Ux aus prototyping
Ux aus prototypingUx aus prototyping
Ux aus prototyping
Todd Zaki Warfel
 
Designing Brand
Designing BrandDesigning Brand
Designing Brand
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 Matters
Christina Wodtke
 
Designing with Personas
Designing with PersonasDesigning with Personas
Designing with Personas
Christina Wodtke
 
Designing and Understanding Business
Designing and Understanding BusinessDesigning and Understanding Business
Designing and Understanding Business
Christina 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 landscape
Amy Jo Kim
 
The Principles of Interface
The Principles of InterfaceThe Principles of Interface
The Principles of Interface
Christina Wodtke
 
Introduction to User Experience
Introduction to User ExperienceIntroduction to User Experience
Introduction to User Experience
Christina Wodtke
 
User Insights Start the Design Process
User Insights Start the Design ProcessUser Insights Start the Design Process
User Insights Start the Design Process
Steve Portigal
 
Designing Structure Part II: Information Archtecture
Designing Structure Part II: Information ArchtectureDesigning Structure Part II: Information Archtecture
Designing Structure Part II: Information Archtecture
Christina 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 Sites
Marcy 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 2009
Christian 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 Information
Kanda Runapongsa Saikaew
 
Social media 101
Social media 101Social media 101
Social media 101
Craig Lawson
 
Print, pixels & people 10a
Print, pixels & people 10aPrint, pixels & people 10a
Print, pixels & people 10a
Logan 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 sources
Stacy 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 Congress
Aileen 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 Individuals
Rin 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 Activities
lisbk
 
Higher Ed Social Media at SIUC
Higher Ed Social Media at SIUCHigher Ed Social Media at SIUC
Higher Ed Social Media at SIUC
guestfdb32e1
 
Social Media Preso Full
Social Media Preso FullSocial Media Preso Full
Social Media Preso Full
dlaur
 
Libraries & Open Source: Freedom and Community
Libraries & Open Source: Freedom and CommunityLibraries & Open Source: Freedom and Community
Libraries & Open Source: Freedom and Community
Nicole C. Engard
 
Libraries Developing Openly
Libraries Developing OpenlyLibraries Developing Openly
Libraries Developing Openly
Nicole 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 lecture
Ingeborg 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 Usage
Ryan Duggan
 
Designing for Play at WebVisions 2010
Designing for Play at WebVisions 2010Designing for Play at WebVisions 2010
Designing for Play at WebVisions 2010
Christian Crumlish
 
Tools for Making Thinking Visible
Tools for Making Thinking VisibleTools for Making Thinking Visible
Tools for Making Thinking Visible
loater
 
Why Networks Matter in Teaching & Learning
Why Networks Matter in Teaching & LearningWhy Networks Matter in Teaching & Learning
Why Networks Matter in Teaching & Learning
Alec 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 class
Sheila 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, 2013
Christian Crumlish
 
Product is Big IA
Product is Big IAProduct is Big IA
Product is Big IA
Christian Crumlish
 
Playful design-uxlx-2011
Playful design-uxlx-2011Playful design-uxlx-2011
Playful design-uxlx-2011
Christian Crumlish
 
We are all Leonardo now
We are all Leonardo nowWe are all Leonardo now
We are all Leonardo now
Christian 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 2010
Christian 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 Scales
Christian Crumlish
 
Social Design For Patternistas
Social Design For PatternistasSocial Design For Patternistas
Social Design For Patternistas
Christian Crumlish
 
Design Hacks with Stencils & Patterns
Design Hacks with Stencils & PatternsDesign Hacks with Stencils & Patterns
Design Hacks with Stencils & Patterns
Christian 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 world
Christian 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 architecture
Christian Crumlish
 
Grasping Social Patterns
Grasping Social PatternsGrasping Social Patterns
Grasping Social Patterns
Christian 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 Library
Christian Crumlish
 
State of the Patterns 2008
State of the Patterns 2008State of the Patterns 2008
State of the Patterns 2008
Christian Crumlish
 
Heads In Space
Heads In SpaceHeads In Space
Heads In Space
Christian Crumlish
 
Social Media Design Patterns (BarCampBlock)
Social Media Design Patterns (BarCampBlock)Social Media Design Patterns (BarCampBlock)
Social Media Design Patterns (BarCampBlock)
Christian Crumlish
 
Failure *Is* an Option
Failure *Is* an OptionFailure *Is* an Option
Failure *Is* an Option
Christian Crumlish
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information Architecture
Christian Crumlish
 
Every Breath You Take: Presence
Every Breath You Take: PresenceEvery Breath You Take: Presence
Every Breath You Take: Presence
Christian 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 Dead
Christian 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

十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
antonellispunches643
 
The Parthenon Atenas grecia una vista al pasado.pptx
The Parthenon Atenas grecia una vista al pasado.pptxThe Parthenon Atenas grecia una vista al pasado.pptx
The Parthenon Atenas grecia una vista al pasado.pptx
LuiyoSeMa
 
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
drmarathore
 
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdfNeom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Mostafa Abd Elrahman
 
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
monikaservice00
 
2024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_202407082024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_20240708
kousato1
 
Overview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets ModuleOverview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets Module
lakshmichitra031
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
NakulJain35
 
Professional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement EditingProfessional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement Editing
Edit Bank Statement
 
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
rawankhanlove256
 
Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design
Pieter van Langen
 
With Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent ShirtWith Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent Shirt
TeeFusion
 
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
rightchoicelandscapi
 
2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf
kousato1
 
This is Diva abaya look book portfolio .pdf
This is Diva abaya look book portfolio .pdfThis is Diva abaya look book portfolio .pdf
This is Diva abaya look book portfolio .pdf
divathisis
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Mostafa Abd Elrahman
 
Zaha-Hadids-Influence-on-Modern-Architecture.pdf
Zaha-Hadids-Influence-on-Modern-Architecture.pdfZaha-Hadids-Influence-on-Modern-Architecture.pdf
Zaha-Hadids-Influence-on-Modern-Architecture.pdf
Mostafa Abd Elrahman
 
Humans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural worldHumans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural world
Mostafa Abd Elrahman
 
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvjde-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
92nqjwr76x
 
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model SafeGirls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
bookkdreambebe
 

Recently uploaded (20)

十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
 
The Parthenon Atenas grecia una vista al pasado.pptx
The Parthenon Atenas grecia una vista al pasado.pptxThe Parthenon Atenas grecia una vista al pasado.pptx
The Parthenon Atenas grecia una vista al pasado.pptx
 
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
 
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdfNeom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
 
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
 
2024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_202407082024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_20240708
 
Overview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets ModuleOverview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets Module
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
 
Professional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement EditingProfessional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement Editing
 
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design
 
With Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent ShirtWith Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent Shirt
 
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
 
2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf
 
This is Diva abaya look book portfolio .pdf
This is Diva abaya look book portfolio .pdfThis is Diva abaya look book portfolio .pdf
This is Diva abaya look book portfolio .pdf
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
 
Zaha-Hadids-Influence-on-Modern-Architecture.pdf
Zaha-Hadids-Influence-on-Modern-Architecture.pdfZaha-Hadids-Influence-on-Modern-Architecture.pdf
Zaha-Hadids-Influence-on-Modern-Architecture.pdf
 
Humans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural worldHumans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural world
 
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvjde-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
 
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model SafeGirls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
 

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