Yahoo! Pattern Library & Social Design Patterns
•
50 likes•46,491 views
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
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (15)
Similar to Yahoo! Pattern Library & Social Design Patterns
Similar to Yahoo! Pattern Library & Social Design Patterns (20)
More from Christian Crumlish
More from Christian Crumlish (20)
Recently uploaded
Recently uploaded (20)
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
Editor's Notes
- 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.
- 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
- 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
- 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
- Use established open standards so that you can build on what’s come before and so that other people can build on your work
- 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
- 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.
- 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.
- 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.
- Tagged tricks new users into spamming their friends.
- Visualizing the pattern language as a cycle
- Give people a way to identify themselves and be identified.
- the Internet doesn’t know which John Smith you are (this is Personas from MIT)
- Patterns related to People
- Erin sometimes called ID cards or identity cards - short, mini, lead in to profile
- 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
- 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
- Patterns related to Activities involving Social Objects
- Erin
- Erin
- Xian
- 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
- Patterns related to connecting, community, and relationships
- Erin
- Erin
- Erin
- 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
- 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
- Zoomr copied flickr: leaving the e out of name, tagline, source code AOL homepage - copy Yahoo including source code iPhone - Pre, Etc - other phones
- 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
- With Facebook a reply will bounce but with Basecamp it will create a followup comment.
- The Password Anti-Pattern – don’t trick people into giving away their passwords to anyone who asks
- Jeremy Keith was an early identifier of this pattern, in his journal on his website Adactio
- 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.
- 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