Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
YDN & IxDA-Berlin present

Yahoo! Design Pattern Library & Social Design Patterns
Christian Crumlish, Curator, Yahoo! Desi...
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...
A Brief History of Patterns

User Interface (HCI or Interaction Design)




                                             0...
Yahoo’s Pattern Library (so far)

 Launched in 2005:


 Erin Malone
 Matt Leacock
 Chanel Wheeler




                    ...
Yahoo’s Pattern Library (so far)

Open Version of Library Launched in 2006:


Bill Scott
succeeds
Matt as curator
& adds m...
Yahoo’s Pattern Library (so far)

Library Redesign Completed 2009


I become the
third curator,
focus on social
patterns, ...
One Company, 100 Designs




                           01/31/10
“Hello?”

“Is that you, Mr. Gilbert?”

“Hello?”

    Social media is always awkward when
    it’s new




                ...
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 Jok...
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...
How to Play Well with Others

Embrace open standards
Share data outside of the bounds of your
 application
Accept open sta...
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 t...
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 inte...
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)
• ...
Tag an Object
What
  •   A user wants to attach their own
      keywords to an object for
      organization and later ret...
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 ...
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 spontaneous...
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
Adding Friends
What
  •   A user has found people she knows on a
      social site and wants to add them to her
      circ...
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 creat...
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 us...
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 hi...
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 ...
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...
thank you!




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


                 ...
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Thinking Like an Optimizer, by Jennifer Ruffner
Next
Upcoming SlideShare
Thinking Like an Optimizer, by Jennifer Ruffner
Next
Download to read offline and view in fullscreen.

Share

Yahoo! Pattern Library & Social Design Patterns

Download to read offline

A series of talks I gave sponsored by the Yahoo! Developer Network, in London and Berlin, reviewing the history of UX design patterns and delving into the social design patterns project, isolating 5 principles, 96 patterns, and 5 anti-patterns

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
  30. 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
  33. 01/31/10
  34. 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
  38. 01/31/10
  39. What’s your social object? 01/31/10
  40. 01/31/10
  41. 01/31/10
  42. 01/31/10
  43. 01/31/10
  44. Give people something to do 01/31/10
  45. 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
  58. 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
  79. Don’t break email 01/31/10
  80. Don't Break Email don’t: do: 01/31/10
  81. The Password Anti-Pattern 01/31/10
  82. The Password Anti-Pattern 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
  • kemarbailey1

    Apr. 11, 2016
  • janmejayrathore

    Dec. 29, 2015
  • huwwary

    Feb. 2, 2014
  • sefat

    Dec. 17, 2013
  • visionary

    Mar. 8, 2013
  • micliang30001

    Apr. 1, 2012
  • abarrientos

    Aug. 16, 2011
  • davidwkchen

    Aug. 10, 2011
  • thanhc0110m

    May. 17, 2011
  • walker44

    Mar. 29, 2011
  • ctbayraktar

    Feb. 22, 2011
  • nilsdavis

    Jan. 14, 2011
  • katychuang

    Jan. 8, 2011
  • ramupatil

    Jan. 2, 2011
  • onlyone0001

    Sep. 22, 2010
  • up1

    Sep. 18, 2010
  • napolean

    Sep. 17, 2010
  • lowell

    Aug. 30, 2010
  • zudoku

    Aug. 22, 2010
  • wangshuangfei

    Jul. 12, 2010

A series of talks I gave sponsored by the Yahoo! Developer Network, in London and Berlin, reviewing the history of UX design patterns and delving into the social design patterns project, isolating 5 principles, 96 patterns, and 5 anti-patterns

Views

Total views

52,895

On Slideshare

0

From embeds

0

Number of embeds

11,252

Actions

Downloads

570

Shares

0

Comments

0

Likes

50

×