SlideShare ist ein Scribd-Unternehmen logo
1 von 76
Downloaden Sie, um offline zu lesen
designing social interfaces
web directions south
christian crumlish
design.yahoo.com
@mediajunkie
“Hello?”

“Is that you, Mr. Gilbert?”

“Hello?”

    Social media is always awkward when
    it’s new




                              10/12/09
New social media: always awkward




                          10/12/09
http://flickr.com/photos/dhbress/87105370/
Five Principles




                  10/12/09
Pave the cowpaths




                    10/12/09
How to Pave the Cowpaths




                           10/12/09
Talk like a person




                     10/12/09
How to Talk Like a Person

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




                                10/12/09
Play well with others




                        10/12/09
How to Play Well with Others (Be Open)

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




                                   10/12/09
How to Play Well with Others (Be Open)

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




                                                  10/12/09
Learn from games




                   10/12/09
How to Learn from Games




                          10/12/09
Respect the ethical dimension




                                10/12/09
How not to Respect the Ethical Dimension




                           10/12/09
Five Principles

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




                       16           10/12/09
96 Patterns




              10/12/09
10/12/09
Give people a way to be identi ed




                                    10/12/09
Give people a way to be identi ed




                                    10/12/09
10/12/09
10/12/09
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.




                                                              10/12/09
User Cards in the wild
FriendFeed




                         10/12/09
User Cards in the wild
Flickr




                         10/12/09
10/12/09
What’s your social object?




                             10/12/09
10/12/09
10/12/09
10/12/09
Give people something to do




                              10/12/09
10/12/09
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)




                                    10/12/09
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.




                                                           10/12/09
Tag an Object in the wild
Flickr




                            10/12/09
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.




                                                             10/12/09
Ratings in the wild
Yelp




                      10/12/09
Ratings in the wild
Yahoo! Movies




                      10/12/09
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.




                                                            10/12/09
Share This in the wild
The Onion




                         10/12/09
Share This in the wild
Add to Any




                         10/12/09
Share This in the wild
Facebook




                         10/12/09
Let the community elevate people & content they value




                                       10/12/09
Let the community elevate people & content they value




                                            Gently moderate
                                       10/12/09
10/12/09
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.




                                                     10/12/09
Adding Friends in the wild
Facebook




                             10/12/09
Adding Friends in the wild
Yahoo!




                             10/12/09
Adding Friends in the wild
Dopplr




                             10/12/09
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.




                                                            10/12/09
Circle of Connections in the wild
Plaxo




                             10/12/09
Circle of Connections in the wild
Flickr




                             10/12/09
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.




                                                           10/12/09
Public Conversation in the wild
Twitter




                            10/12/09
Public Conversation in the wild
FriendFeed




                            10/12/09
Enable a bridge to real life events




                                      10/12/09
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.




                                                          10/12/09
Geo in the wild
Geo on iPhone




                  10/12/09
Geo in the wild
Where for iPhone




                   10/12/09
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




                                   10/12/09
Anti-Patterns!




                 10/12/09
Cargo Cult




             10/12/09
Cargo Cult




             10/12/09
Cargo Cult




             10/12/09
Cargo Cult




             10/12/09
Don’t break email




                    10/12/09
Don't Break Email


don’t:




         do:



                     10/12/09
The Password Anti-Pattern




                            10/12/09
The Password Anti-Pattern




                            10/12/09
Password Anti-Pattern in the wild
iLike




                            10/12/09
Password Anti-Pattern in the wild
Plaxo




                            10/12/09
Ex-Boyfriend Bug




                   10/12/09
Potemkin Village




                   10/12/09
Five Anti-Patterns

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




                          67   10/12/09
thank you!




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


                                10/12/09

Weitere ähnliche Inhalte

Was ist angesagt?

Office 2.0 social life of office documents
Office 2.0 social life of office documentsOffice 2.0 social life of office documents
Office 2.0 social life of office documentsRashmi Sinha
 
Designing for Social Sharing
Designing for Social SharingDesigning for Social Sharing
Designing for Social SharingRashmi Sinha
 
Tagging from personal to social
Tagging from personal to socialTagging from personal to social
Tagging from personal to socialRashmi Sinha
 
UX Week Presentation from Steve Portigal - Cross-Cultural Research
UX Week Presentation from Steve Portigal - Cross-Cultural ResearchUX Week Presentation from Steve Portigal - Cross-Cultural Research
UX Week Presentation from Steve Portigal - Cross-Cultural ResearchSteve Portigal
 
Massively Multiplayer Object Sharing 10328
Massively Multiplayer Object Sharing 10328Massively Multiplayer Object Sharing 10328
Massively Multiplayer Object Sharing 10328Donggi heo
 
Designing Structure Part II: Information Archtecture
Designing Structure Part II: Information ArchtectureDesigning Structure Part II: Information Archtecture
Designing Structure Part II: Information ArchtectureChristina Wodtke
 
Massively multiplayer object sharing
Massively multiplayer object sharingMassively multiplayer object sharing
Massively multiplayer object sharingRashmi Sinha
 
Social Design SlideShare Fowa07
Social Design SlideShare Fowa07Social Design SlideShare Fowa07
Social Design SlideShare Fowa07Rashmi Sinha
 
Social design wordcamp
Social design wordcampSocial design wordcamp
Social design wordcampRashmi Sinha
 
IA summit closing plenery
IA summit closing pleneryIA summit closing plenery
IA summit closing pleneryRashmi Sinha
 
Using Media and Other Personalized Communication to Advance Community Design
Using Media and Other Personalized Communication to Advance Community DesignUsing Media and Other Personalized Communication to Advance Community Design
Using Media and Other Personalized Communication to Advance Community DesignKristen Jeffers
 
Designing Sociability: With Notes
Designing Sociability: With NotesDesigning Sociability: With Notes
Designing Sociability: With NotesChristina Wodtke
 
Onlinecommunity statedpt
Onlinecommunity statedptOnlinecommunity statedpt
Onlinecommunity statedptSusan Tenby
 
e-Health and the Social Web ("Web 2.0")/the 3-D Web: Looking to the future wi...
e-Health and the Social Web ("Web 2.0")/the 3-D Web: Looking to the future wi...e-Health and the Social Web ("Web 2.0")/the 3-D Web: Looking to the future wi...
e-Health and the Social Web ("Web 2.0")/the 3-D Web: Looking to the future wi...Maged N. Kamel Boulos
 
Listening to Difference, Made Practical
Listening to Difference, Made PracticalListening to Difference, Made Practical
Listening to Difference, Made PracticalFit Associates LLC
 
Content Networks: Slides, Video, Audio, Lists, Graphic, Social & Docs
Content Networks: Slides, Video, Audio, Lists, Graphic, Social & DocsContent Networks: Slides, Video, Audio, Lists, Graphic, Social & Docs
Content Networks: Slides, Video, Audio, Lists, Graphic, Social & DocsNick Kellet
 
Design For Social Sharing
Design For Social SharingDesign For Social Sharing
Design For Social Sharingguestbdd02b
 
Google+ features for business and users
Google+ features for business and usersGoogle+ features for business and users
Google+ features for business and usersEnconexo
 

Was ist angesagt? (20)

Office 2.0 social life of office documents
Office 2.0 social life of office documentsOffice 2.0 social life of office documents
Office 2.0 social life of office documents
 
Designing for Social Sharing
Designing for Social SharingDesigning for Social Sharing
Designing for Social Sharing
 
Tagging from personal to social
Tagging from personal to socialTagging from personal to social
Tagging from personal to social
 
UX Week Presentation from Steve Portigal - Cross-Cultural Research
UX Week Presentation from Steve Portigal - Cross-Cultural ResearchUX Week Presentation from Steve Portigal - Cross-Cultural Research
UX Week Presentation from Steve Portigal - Cross-Cultural Research
 
Massively Multiplayer Object Sharing 10328
Massively Multiplayer Object Sharing 10328Massively Multiplayer Object Sharing 10328
Massively Multiplayer Object Sharing 10328
 
Designing Structure Part II: Information Archtecture
Designing Structure Part II: Information ArchtectureDesigning Structure Part II: Information Archtecture
Designing Structure Part II: Information Archtecture
 
Massively multiplayer object sharing
Massively multiplayer object sharingMassively multiplayer object sharing
Massively multiplayer object sharing
 
Social Design SlideShare Fowa07
Social Design SlideShare Fowa07Social Design SlideShare Fowa07
Social Design SlideShare Fowa07
 
Social design wordcamp
Social design wordcampSocial design wordcamp
Social design wordcamp
 
IA summit closing plenery
IA summit closing pleneryIA summit closing plenery
IA summit closing plenery
 
Using Media and Other Personalized Communication to Advance Community Design
Using Media and Other Personalized Communication to Advance Community DesignUsing Media and Other Personalized Communication to Advance Community Design
Using Media and Other Personalized Communication to Advance Community Design
 
How Podcasting Can Build a Community
How Podcasting Can Build a CommunityHow Podcasting Can Build a Community
How Podcasting Can Build a Community
 
Designing Sociability: With Notes
Designing Sociability: With NotesDesigning Sociability: With Notes
Designing Sociability: With Notes
 
Onlinecommunity statedpt
Onlinecommunity statedptOnlinecommunity statedpt
Onlinecommunity statedpt
 
e-Health and the Social Web ("Web 2.0")/the 3-D Web: Looking to the future wi...
e-Health and the Social Web ("Web 2.0")/the 3-D Web: Looking to the future wi...e-Health and the Social Web ("Web 2.0")/the 3-D Web: Looking to the future wi...
e-Health and the Social Web ("Web 2.0")/the 3-D Web: Looking to the future wi...
 
Listening to Difference, Made Practical
Listening to Difference, Made PracticalListening to Difference, Made Practical
Listening to Difference, Made Practical
 
Content Networks: Slides, Video, Audio, Lists, Graphic, Social & Docs
Content Networks: Slides, Video, Audio, Lists, Graphic, Social & DocsContent Networks: Slides, Video, Audio, Lists, Graphic, Social & Docs
Content Networks: Slides, Video, Audio, Lists, Graphic, Social & Docs
 
Design For Social Sharing
Design For Social SharingDesign For Social Sharing
Design For Social Sharing
 
Friendster
FriendsterFriendster
Friendster
 
Google+ features for business and users
Google+ features for business and usersGoogle+ features for business and users
Google+ features for business and users
 

Ähnlich wie Designing Social Interfaces at Web Directions South 2009

Respecting Others' work
Respecting Others' workRespecting Others' work
Respecting Others' workGNBCEC
 
K.handy finalpresentation640.pptx
K.handy finalpresentation640.pptxK.handy finalpresentation640.pptx
K.handy finalpresentation640.pptxklh4127
 
K.handy finalpresentation640.pptx
K.handy finalpresentation640.pptxK.handy finalpresentation640.pptx
K.handy finalpresentation640.pptxklh4127
 
Social Media Discussion with BYU College Communicators
Social Media Discussion with BYU College Communicators Social Media Discussion with BYU College Communicators
Social Media Discussion with BYU College Communicators jonathanmcbride
 
Facebook Unfriend Study
Facebook Unfriend StudyFacebook Unfriend Study
Facebook Unfriend StudyWappow
 
Facebook Unfriend Study shrt
Facebook Unfriend Study shrtFacebook Unfriend Study shrt
Facebook Unfriend Study shrtWappow
 
Horner Atlas Soc Med 022312
Horner Atlas Soc Med 022312Horner Atlas Soc Med 022312
Horner Atlas Soc Med 022312eric_horner
 
Online Community Training
Online Community TrainingOnline Community Training
Online Community TrainingDawn Foster
 
Information Overload or Filter Failure? Week# 4 Participation Literacy
Information Overload or Filter Failure? Week# 4 Participation LiteracyInformation Overload or Filter Failure? Week# 4 Participation Literacy
Information Overload or Filter Failure? Week# 4 Participation LiteracyThe New School
 
Presentations As Social Media In (talk at Portland Presentation Camp)
Presentations As Social Media In (talk at Portland Presentation Camp)Presentations As Social Media In (talk at Portland Presentation Camp)
Presentations As Social Media In (talk at Portland Presentation Camp)Rashmi Sinha
 
Building your professional profile online
Building your professional profile onlineBuilding your professional profile online
Building your professional profile onlineIngrid Koehler
 
Using Social Media for Professional Development
Using Social Media for Professional DevelopmentUsing Social Media for Professional Development
Using Social Media for Professional DevelopmentVanessa Dennen
 
How To Use BandPage To Connect With Your Fans
How To Use BandPage To Connect With Your FansHow To Use BandPage To Connect With Your Fans
How To Use BandPage To Connect With Your FansMichael Brandvold
 
Mini-geekfest Webinar March 14, 2011
Mini-geekfest Webinar March 14, 2011Mini-geekfest Webinar March 14, 2011
Mini-geekfest Webinar March 14, 2011Peggy George
 
Sharebox final pitch
Sharebox final pitchSharebox final pitch
Sharebox final pitchmlin3
 
Jenzabar Foundation Guide For Student Groups
Jenzabar Foundation Guide For Student GroupsJenzabar Foundation Guide For Student Groups
Jenzabar Foundation Guide For Student GroupsJenzabarFoundation
 
Writing for new media
Writing for new mediaWriting for new media
Writing for new mediaDori Adar
 
10 Social Media Practices Your Nonprofit Should Know + Do
10 Social Media Practices Your Nonprofit Should Know + Do10 Social Media Practices Your Nonprofit Should Know + Do
10 Social Media Practices Your Nonprofit Should Know + DoFarra Trompeter, Big Duck
 
Google+ & PR: What it means for you and your company
Google+ & PR: What it means for you and your companyGoogle+ & PR: What it means for you and your company
Google+ & PR: What it means for you and your companySandra Fathi
 

Ähnlich wie Designing Social Interfaces at Web Directions South 2009 (20)

Respecting Others' work
Respecting Others' workRespecting Others' work
Respecting Others' work
 
Big Duck: Best Practices in Social Media
Big Duck: Best Practices in Social MediaBig Duck: Best Practices in Social Media
Big Duck: Best Practices in Social Media
 
K.handy finalpresentation640.pptx
K.handy finalpresentation640.pptxK.handy finalpresentation640.pptx
K.handy finalpresentation640.pptx
 
K.handy finalpresentation640.pptx
K.handy finalpresentation640.pptxK.handy finalpresentation640.pptx
K.handy finalpresentation640.pptx
 
Social Media Discussion with BYU College Communicators
Social Media Discussion with BYU College Communicators Social Media Discussion with BYU College Communicators
Social Media Discussion with BYU College Communicators
 
Facebook Unfriend Study
Facebook Unfriend StudyFacebook Unfriend Study
Facebook Unfriend Study
 
Facebook Unfriend Study shrt
Facebook Unfriend Study shrtFacebook Unfriend Study shrt
Facebook Unfriend Study shrt
 
Horner Atlas Soc Med 022312
Horner Atlas Soc Med 022312Horner Atlas Soc Med 022312
Horner Atlas Soc Med 022312
 
Online Community Training
Online Community TrainingOnline Community Training
Online Community Training
 
Information Overload or Filter Failure? Week# 4 Participation Literacy
Information Overload or Filter Failure? Week# 4 Participation LiteracyInformation Overload or Filter Failure? Week# 4 Participation Literacy
Information Overload or Filter Failure? Week# 4 Participation Literacy
 
Presentations As Social Media In (talk at Portland Presentation Camp)
Presentations As Social Media In (talk at Portland Presentation Camp)Presentations As Social Media In (talk at Portland Presentation Camp)
Presentations As Social Media In (talk at Portland Presentation Camp)
 
Building your professional profile online
Building your professional profile onlineBuilding your professional profile online
Building your professional profile online
 
Using Social Media for Professional Development
Using Social Media for Professional DevelopmentUsing Social Media for Professional Development
Using Social Media for Professional Development
 
How To Use BandPage To Connect With Your Fans
How To Use BandPage To Connect With Your FansHow To Use BandPage To Connect With Your Fans
How To Use BandPage To Connect With Your Fans
 
Mini-geekfest Webinar March 14, 2011
Mini-geekfest Webinar March 14, 2011Mini-geekfest Webinar March 14, 2011
Mini-geekfest Webinar March 14, 2011
 
Sharebox final pitch
Sharebox final pitchSharebox final pitch
Sharebox final pitch
 
Jenzabar Foundation Guide For Student Groups
Jenzabar Foundation Guide For Student GroupsJenzabar Foundation Guide For Student Groups
Jenzabar Foundation Guide For Student Groups
 
Writing for new media
Writing for new mediaWriting for new media
Writing for new media
 
10 Social Media Practices Your Nonprofit Should Know + Do
10 Social Media Practices Your Nonprofit Should Know + Do10 Social Media Practices Your Nonprofit Should Know + Do
10 Social Media Practices Your Nonprofit Should Know + Do
 
Google+ & PR: What it means for you and your company
Google+ & PR: What it means for you and your companyGoogle+ & PR: What it means for you and your company
Google+ & PR: What it means for you and your company
 

Mehr von 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 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
 

Mehr von Christian Crumlish (19)

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
 

Kürzlich hochgeladen

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 

Kürzlich hochgeladen (20)

201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 

Designing Social Interfaces at Web Directions South 2009

  • 1. designing social interfaces web directions south christian crumlish design.yahoo.com @mediajunkie
  • 2. “Hello?” “Is that you, Mr. Gilbert?” “Hello?” Social media is always awkward when it’s new 10/12/09
  • 3. New social media: always awkward 10/12/09
  • 5. Five Principles 10/12/09
  • 6. Pave the cowpaths 10/12/09
  • 7. How to Pave the Cowpaths 10/12/09
  • 8. Talk like a person 10/12/09
  • 9. How to Talk Like a Person • Conversational Voice • Self-Deprecating Error Messages • Ask Questions • Your vs. My • No Joking Around 10/12/09
  • 10. Play well with others 10/12/09
  • 11. How to Play Well with Others (Be Open) 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 10/12/09
  • 12. How to Play Well with Others (Be Open) 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 10/12/09
  • 13. Learn from games 10/12/09
  • 14. How to Learn from Games 10/12/09
  • 15. Respect the ethical dimension 10/12/09
  • 16. How not to Respect the Ethical Dimension 10/12/09
  • 17. Five Principles • Pave the Cowpaths • Talk Like a Person • Play Well with Others (Be Open) • Learn from Games • Respect the Ethical Dimension 16 10/12/09
  • 18. 96 Patterns 10/12/09
  • 20. Give people a way to be identi ed 10/12/09
  • 21. Give people a way to be identi ed 10/12/09
  • 24. 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. 10/12/09
  • 25. User Cards in the wild FriendFeed 10/12/09
  • 26. User Cards in the wild Flickr 10/12/09
  • 28. What’s your social object? 10/12/09
  • 32. Give people something to do 10/12/09
  • 34. 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) 10/12/09
  • 35. 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. 10/12/09
  • 36. Tag an Object in the wild Flickr 10/12/09
  • 37. 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. 10/12/09
  • 38. Ratings in the wild Yelp 10/12/09
  • 39. Ratings in the wild Yahoo! Movies 10/12/09
  • 40. 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. 10/12/09
  • 41. Share This in the wild The Onion 10/12/09
  • 42. Share This in the wild Add to Any 10/12/09
  • 43. Share This in the wild Facebook 10/12/09
  • 44. Let the community elevate people & content they value 10/12/09
  • 45. Let the community elevate people & content they value Gently moderate 10/12/09
  • 47. 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. 10/12/09
  • 48. Adding Friends in the wild Facebook 10/12/09
  • 49. Adding Friends in the wild Yahoo! 10/12/09
  • 50. Adding Friends in the wild Dopplr 10/12/09
  • 51. 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. 10/12/09
  • 52. Circle of Connections in the wild Plaxo 10/12/09
  • 53. Circle of Connections in the wild Flickr 10/12/09
  • 54. 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. 10/12/09
  • 55. Public Conversation in the wild Twitter 10/12/09
  • 56. Public Conversation in the wild FriendFeed 10/12/09
  • 57. Enable a bridge to real life events 10/12/09
  • 58. 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. 10/12/09
  • 59. Geo in the wild Geo on iPhone 10/12/09
  • 60. Geo in the wild Where for iPhone 10/12/09
  • 61. 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 10/12/09
  • 62. Anti-Patterns! 10/12/09
  • 63. Cargo Cult 10/12/09
  • 64. Cargo Cult 10/12/09
  • 65. Cargo Cult 10/12/09
  • 66. Cargo Cult 10/12/09
  • 71. Password Anti-Pattern in the wild iLike 10/12/09
  • 72. Password Anti-Pattern in the wild Plaxo 10/12/09
  • 73. Ex-Boyfriend Bug 10/12/09
  • 74. Potemkin Village 10/12/09
  • 75. Five Anti-Patterns • Cargo Cult Design • Don’t Break Email! • Password Anti-Pattern • Ex-Boyfriend Bug • Potemkin Village 67 10/12/09
  • 76. thank you! Christian Crumlish, Curator Yahoo! Design Pattern Library design.yahoo.com @mediajunkie 10/12/09