Design social interface
6 likes6,900 views
The document discusses designing social interfaces and patterns for the social web. It introduces Christian Crumlish and Erin Malone, the authors of the forthcoming book. It then provides an overview of social design patterns, where they came from, what they are, and the parts of a design pattern. Finally, it shares examples of specific social patterns like profiles, presence, relationships and groups.
Design social interface
- 1. Designing Social Interfaces Patterns, Principles and Best Practices for the Social Web Christian Crumlish, Yahoo! Erin Malone, Tangible ux Authors of the forthcoming book from O’Reilly Media
- 2. Designing Social Interfaces Patterns, Principles and Best Practices for the Social Web Christian Crumlish, Yahoo! Erin Malone, Tangible ux Authors of the forthcoming book from O’Reilly Media
- 3. Who we are: Christian Crumlish xian: most places mediajunkie: twitter author: The Power of Many pattern detective at Yahoo!
- 4. Who we are: Erin Malone • emalone: twitter • erin_designr: flickr • founder of the pattern library at Yahoo! • principal at Tangible ux
- 5. Who are you? Are you a designer? Are you a developer? Are you defining the business? Are you just starting to think about the social space? Do you already work in the social space?
- 6. Social Design Patterns • Patterns as in Christopher Alexander • Design Patterns as in Gang of Four & Jenifer Tidwell • Social Design as in eGroups, Flickr, Facebook, Twitter • Includes high-order principles and emerging practices • Designing these interfaces is a holistic exercise that extends from the data architecture to the presentation layer.
- 7. Where did this taxonomy come from?
- 8. Where did this taxonomy come from?
- 9. Where did this taxonomy come from?
- 10. Where did this taxonomy come from?
- 11. Where did this taxonomy come from?
- 12. Where did this taxonomy come from?
- 13. Where did this taxonomy come from?
- 14. Where did this taxonomy come from?
- 15. Where did this taxonomy come from?
- 16. Where did this taxonomy come from?
- 17. Social Pattern Language • Emergent interaction patterns • Components and pieces that are the building blocks • Support the entire lifecycle of the social experience • Building a vocabulary and language for social application design in the same spirit as Alexander
- 18. What is a pattern? • A pattern describes an optimal solution to a common problem within a specific context. • A pattern is not a finished piece of code or design. • Patterns are meant to inform all the considerations needed to solve a specific problem • Context matters. A lot.
- 19. 4 parts to a design pattern • What This defines the problem. What does the user want to do - includes a visual example? • When When do you use the solution. This is the context. • How This is the detailed solution. What decions in the interface need to be made, what elements need to exist, what behaviors need to be supported • Why Why is this solution the right one. Why should this behavior be supported.
- 20. The Landscape
- 21. C Collaboration Moderation Blogs Influencers Tags Reputation Relationships Conversations Search Interest Groups Organizing Photos & Discovery Participation Ratings & Comments Reviews Family & Self Friends Identity Discovery & Engagement Media Social Media Ecosystem
- 22. C
- 23. A Tour of the Patterns
- 24. High-Level Buckets • Core Principles • Representations of the Self • Activities involving social objects • Community dynamics
- 25. High-Level Buckets Principles • Core Principles • Self Representations of the Self • Activities involving social objects • Community dynamics
- 26. Core Principles • Design for Everyone • Talk Like a Person • Be Open • Be a Game • Check Your Ethics • Don’t Break Email! • Cargo Cult (Antipattern)
- 27. Design for Everyone • Deliberately Leave Things Incomplete • Pave the Cowpaths • Strict vs. Fluid Taxonomies • Palimpsest!
- 28. Talk Like a Person • Conversational Voice • Self-Deprecating Error Messages • Ask Questions • Your vs. My • No Joking Around
- 29. Representing the Self • Engagement • Identity • Presence • Reputation
- 30. Engagement • Signup (aka • Authorize Registration) • Private Beta • Sign In • Welcome Area • Invitations • Reengagement
- 31. Engagement (cont’d) • Sign In • Sign-in Continuity • Invitations • Receive Invitation • Send Invitation • The Password Antipattern
- 32. Identity • Profile • Reflectors • User Cards • Attribution • Testimonial • Avatar • Personal Dashboard
- 33. Presence • Dimensions of Presence • Availability • Mood • Environment • Personal Feed • Keep Company
- 34. Personal Feed • Statuscasting • Activity Stream (aka Vitality) • Updates • Updated Opt-in Disclosure • Manage Incoming Updates • Life Stream • Statistics
- 35. Keep Company • Signs of Life • User Gallery • Who’s Here Now • Ambient Intimacy
- 36. Reputation • Competitive Spectrum • Levels • Labels • Awards • Ranking • Statistical Evidence • Monitoring
- 37. Reputation (cont’d) • Levels • Ranking • Named Levels • Points • Numbered Levels • Leaderboard • Awards • Top X • Collectible Achievements • Friend Ranking • Temporal Awards • Peer-to-peer Awards
- 38. Activities & Objects • Collecting • Broadcasting & Publishing • Communicating • Feedback • Sharing • Collaboration • Social Media
- 39. Collecting • Saving • Tagging • Favorites • Tag an Object • Add / Subscribe • Find with Tags • Displaying • Tag Cloud
- 40. Broadcating & Publishing • Blogs • Rights • Consuming • Terms of Service • Producing • Licensing • Rich Media • Lifecycle • Video • Freshness • Podcasting • Archiving • Many-to-Many
- 41. Communicating • Synchronous vs. Asynchronous • Sign in to Participate • Forums • Public Conversation • Private Conversation • Group Conversation • Flamewars
- 42. Feedback • Comments • Reviews • Ratings • Favorites • Vote to Promote • Thumbs Up / Down • Soliciting Feedback
- 43. Sharing • Tools for Sharing • Public Sharing • Bookmarklet • Many Publics • Share This • One-Time Sharing • Direct Sharing • Social Bookmarking • Send This • Uploading to the • Casual Privacy Cloud • Embedding • Give Gifts
- 44. Collaboration • Manage Project • Voting • Collaborative Editing • Edit This Page • The Wiki Way • Unbook • Crowdsourcing
- 45. Social Media • Social Objects • Tuning In • Filtering • Recommendations • Social Search • The Notificator • Pivoting
- 46. Community Dynamics • Relationships • Groups • Community Moderation • Place, Geography, Location
- 47. Relationships • Relationship Terminology • Find People • Add Friend / Unfriend • Circle of Connections • Publicize Relationship • Dating & the Ex-Boyfriend Antipattern • Buddy List
- 48. Relationships (cont’d) • Relationship Terminology • friend, family, fan, follower • contact, colleague, connection, cohort • Find People • browse, friends of friends, search • recommendations • Implicit vs. Explicit relationships
- 49. Groups • Ridiculously Easy Group Formation • Create Group • Find Group • Join Group • Participate in Group • Invite to Group
- 50. Community Moderation • Norms, Rules, Jargon • Collective Choices • Participating in Your Own Community • Model Citizen • Forking a Group • Facilitate Discussion • Don’t Feed the Trolls!
- 51. Place, Geo-, Location • Being Local • Mapping • Face-to-Face • Geo-tagging Meeting • Geo-mashups • Party • Neighborhood • Event Making • Mobile • Calendaring • Gatherings • Reminding • Statuscasting
- 52. Other Considerations • How Open? • What’s the Context? • Badging Out • Mobile • Import • Enterprise • Open APIs • Demographics • Data Portability • Youth • Semantics and • Boomers & Elderly Microformats • Games
- 54. Problem: Help! I’m a designer being asked to add “social” to my site! What are the basics?
- 55. Problem: Possible Help! I’m a Solution designer being Patterns: asked to add • Talk Like A Person “social” • Sign In / Sign Up to my site! • Activity around objects: e.g. tags, ratings, reviews, share this What are • Identity: the basics? e.g. contact cards, attribution • Relationship: e.g. adding friends, circles of connections
- 56. Talk Like a Person • Use the language of • Despite what your English contemporary speech, not teacher may have told you, that of text books, tax it’s OK to use contractions, forms, or street signs to split infinitives, and even to start sentences • Ask yourself if that’s really with conjunctions. Just how you talk. make sure it feels natural. • Read any copy out loud and strike out anything that feels awkward to say.
- 57. Talk Like a Person in the wild • Flickr
- 58. Talk Like a Person in the wild • GetSatisfaction
- 59. Sign In What User wants to access their personalized Username: information or an application that is stored on the host site. Password: Use When • Use when personal data needs to be stored or when there is customization Forgot your password? or personalization unique to the Sign In particular user. • Use when the site is a repository for Register Now! user generated content and the submissions or files need to be identified and/or managed by the author. • Use when there are security or privacy concerns and the user's data needs to be protected.
- 60. Sign In in the wild • WordPress
- 61. Sign In in the wild • Geni
- 62. Sign In in the wild • Yahoo!
- 63. Tag an Object What A user wants to attach their own family portrait keywords to an object for organization mom and later retrieval. dad billy jane Use When kids • Use when a person is collecting a 2008 good times large amount of unstructured data, like photos. add a new tag • 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.
- 64. Tag an Object in the wild • Slideshare
- 65. Tag an Object in the wild • Flickr
- 66. Ratings What A user wants to quickly leave their opinion on an object, with Good 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. How • Show clickable items (most often used are stars) that provide rollover feedback to infer clickability. • Initial state should be "empty" and show invitational text Why above to invite the user to rate the object (e.g. Rate It!). Rating an object provides a lightweight model for • As the mouse cursor moves over the icons, indicate the level user engagement. Ratings are often tied with of rating (through a color change) and display a text reviews to encourage richer user contributions and description of the rating at each point (e.g. Excellent). activity. • The saved rating should be indicated with a change in final color of the items and a text indication that the rating is saved. • An aggregate or average rating should also be displayed. • Users should be able to change their rating later if they change their mind.
- 67. Ratings in the wild • Yelp
- 68. Ratings in the wild • Yahoo! Movies
- 69. Share This What + Share User wants to share an object with one or more people. Share this item Enter an email address: How Share • Enable people to spontaneously share select from your address book content or objects they find. or share with your favorite network: • Provide the minimal interface needed to Digg Delicious facilitate rapid sending or posting, such Facebook Twitter StumbleUpon MySpace as a ubiquitous Share This widget. Bebo FriendFeed • 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.
- 70. Share This in the wild • The Onion
- 71. Share This in the wild • Add to Any
- 72. Share This in the wild • Facebook
- 73. Contact Cards UserName What Relevant demographic info A person needs more information about another person in Send Message an online community without interrupting his or her current task. Add as Friend Favorite How Open a small panel when the user hovers over a target's Online Presence Indication 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 Why community (Real Name, Age, Gender, Location). Identity cards provide the means to reduce identity- related clutter on the screen. Present a Relationship Reflector. Allow the ability to subscribe to, follow, connect to, unsubscribe or block the Presence indicators, Reputation Emblems, and user from this panel. Relationship Reflectors can be tucked away but be easily accessible.
- 74. Contact Cards in the wild • Yahoo!
- 75. Contact Cards in the wild • FriendFeed
- 76. Contact Cards in the wild • Flickr
- 77. Adding Friends What A user has found people she People You May Know knows on a social site and wants UserName UserName to add them to her circle of Add as Friend Add as Friend connections. UserName UserName Add as Friend Add as Friend Use When • Use when a person’s UserName UserName connections are a core part of Add as Friend Add as Friend 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.
- 78. Adding Friends in the wild • Facebook
- 79. Adding Friends in the wild • Yahoo!
- 80. Adding Friends in the wild • Dopplr
- 81. Password Anti-Pattern What The user is asked to give the site login names and passwords for another site in order for the first site to Find your friends on this site access address books, connection lists or other data Your Email: @yahoo.com kept on the second site. Your Password: Use When View friends • Don’t use this pattern when you want to allow a Note: We won't save your username and password or spam your friends. user to grab friends and contacts from another site. • Use this pattern if you want to teach your users how to be phished. • Use this pattern to discourage adoption of open social portability standards. follow another participant without reciprocity. Why • Users should have access to their data and should • Even though the process is becoming more and be allowed to bring it from one site to another. more prevalent and generally very easy to Social sites shouldn’t propagate bad behavior by implement, this interaction behavior is an anti- teaching users that it’s ok to give any site their user pattern for several reasons. names and passwords for all the sites to which • The process violates the Terms of Service of many they belong. of the third-party sites. • By encouraging the user to freely give their username and password away, social sites are teaching users how to be phished.
- 82. Password Anti-Pattern in the wild • iLike
- 83. Password Anti-Pattern in the wild • Plaxo
- 84. Circles of Connections What A user wants to indicate nuances in UserName their relationships with other people to will be added as a contact create contexts for communication and you can also add UserName to one of your sharing. other people lists. Contacts Use When Friends • Use to distinguish levels of Family participation in a person’s network. • Use to set permissions for shared Work People activity and content. add a new group Add • Use to disambiguate real-life versus online, strong versus weak ties. • Use this pattern to help users filter which content to consume.
- 85. Circle of Connections in the wild • Plaxo
- 86. Circle of Connections in the wild • Flickr
- 87. Problem: People come and read my content, but they’re invisible to each other.
- 88. Problem: Possible People come and Solution read my content, but Patterns: they’re invisible to each other. • Presence Indicators • Peer-to-Peer Awards • Nudging • Public Conversation • Followers Badge
- 89. Presence UserName What UserName Users need to see who else is online, available and open to contact. UserName Use When UserName • A person wants to determine whether their friend is UserName online. • A person wants to see who is available for contact. UserName • A person wants to see if their friend is available for communication. UserName • A person wants to show that they are busy to their contacts. Why Revealing availability is the fundamental building block of online presence. Providing your users with dead- easy ways to do this facilitate the sense of presence and availability that helps a social system feel inhabited by real people with realistic comings and goings.
- 90. Presence Indicators in the wild • Yahoo! Messenger
- 91. Presence Indicators in the wild • Facebook
- 92. Peer-to-peer Awards What People enjoy giving and receiving compliments and will use You're Funny Date Stamp existing message board and guestbook features for this For your review of: a very cool restaurant UserName A brief blurb about the review that purpose in a pinch, but the whole system can benefit if these Location incited this peer-to-peer award kinds of gestures are enabled and supported more formally. Just a Note Date Stamp Use When For your review of: another very cool restaurant UserName A brief blurb about the review that caused one user • Use when you’re trying to foster more collaborative and Location to give a peer-to-peer award to another person cooperative peer-to-peer relationships • In the context of participatory activities (such as posting You're Cool Date Stamp content, giving feedback, writing reviews, etc.) and in the So glad to see you here. UserName a peer-to-peer award from another person context of a user’s profile Location How Why • Provide an interface through which a fellow site member can Enabling your users to compliment each other by select a type of award and then customize it by either adding bestowing awards on each other offers another a note or otherwise decorating or labeling it. opportunity for social “grooming” behavior and the • Optionally, permit the recipient of the award to approve the reinforcement of weak ties (giving someone a prize award before it is displayed. is less of a commitment than inviting them into your • Display the award in a gallery on the recipient’s profile. private group, for example).
- 93. Peer-to-peer Awards in the wild • Yelp
- 94. Peer-to-peer Awards in the wild • Yahoo! (intranet)
- 95. Nudging What Providing simple tools for one user to nudge another can get a conversation going especially if one person is shy or not as UserName confident online as the other. Relevant demographic info Send Message Use When • Use when you want to allow one user to make contact with Add as Friend another with low effort. Favorite • Use to allow users to encourage others to participate. WAVE to UserName How • A simple link like “nudge” or “poke” or “wave” or “wink” can be used to trigger an alert or send a canned private message to the recipient. Why • Provide a mechanism for one user to “nudge” another. Sometimes people want to let others know they are • The link, icon or button should be closely associated with the thinking of them or are interested in encouraging recipient’s name or on their contact card. them to participate and want a low effort, easy option to give that extra push.
- 96. Nudging in the wild • Dopplr
- 97. Nudging in the wild • Match.com
- 98. Nudging in the wild • Twitter
- 99. Public Conversation Use When UserName 1 Posted Status • Use this pattern to differentiate from private Status message - may be an overtly entered status or could uploaded or items shared conversations. Posted XX minutes ago (permalink | delete) How • Allow users to create a dialog between Photo Photo Photo Photo Photo Pho themselves. Provide a framework that is flexible enough to support two or more people in Posted XX minutes ago (permalink | delete) conversation. UserName 2 Posted 6 Photos • Provide a form field for text entry. Clearly indicate the character count for conversing. UserName 3 says: • Allow users to block or ignore specific users that Hey, these are terrific photos. Looks like you had an ex the next outing? they don’t want to hear from, without disrupting the flow of conversation to other participants. Posted XX minutes ago (permalink | delete) UserName 2 says: Why I am going to be taking photos again in a week. Why d Providing options for public conversations allows Besides I can make you look like a movie star with this the content to become more a shared activity. Posted XX minutes ago (permalink | delete) UserName 3 says: While there will always be lurkers, open, public Ha ha. Very funny. I may just show up with sequins an conversations are more likely to entice folks who who the real movie star is. otherwise might not get involved to chime in and Posted XX minutes ago (permalink | delete) participate.
- 100. Public Conversation in the wild • Twitter
- 101. Public Conversation in the wild • FriendFeed
- 102. Followers Badge Recent Visitors What A technique for signaling the transient presence of other visitors is the faceroll widget, which shows recent visitors to a blog or site and can give the current visitor a sense that they have company while reading the blog, especially if they recognize some of the faces or names. Why Allowing users to see who else is View this site's community Join this community interested in the site they are on and providing easy tools for engagement can encourage users to connect with each other.
- 103. User Gallery in the wild • MyBlogLog
- 104. User Gallery in the wild • Twitter
- 105. Problem: I have an active community on my site but people are misbehaving. How can I get that under control?
- 106. Problem: Possible I have an active Solution community on my Patterns: site but people are • Norms, Model Citizen misbehaving. • Leaderboard Antipattern • Community Management e.g. reporting abuse • Reputation How can • Ratings I get that under control?
- 107. Norms • A principle of community • Founders and community management is to establish managers can play the role and communicate social of Model Citizen to norms to the participants in demonstrate desirable your community behavior. • While this may be done with interface copy, help text, support forums, newbie tutorials and so forth, it’s best communicated directly from member to member.
- 108. Norms in the wild • Justin.tv
- 109. Norms & Model Citizen in the wild • Flickr
- 110. Norms & Model Citizen in the wild • YouTube
- 111. Reputation: Leaderboards What In highly competitive communities using a ranking system, users may want to know who are the very best performers in a category or overall. Use When • The community is highly competitive, and the activities that users engage in are competitive in nature (e.g., player-vs-player contests, or coaching a fantasy football team.) • You want to enable player-to-player comparisons, or permit users to definitively settle "Who is better?" arguments. In most instances, • Don't use this pattern when the activities that users engage in are not competitive in this is an Anti-Pattern nature (e.g., writing recipes, or sharing photos).
- 112. Leaderboard in the wild • Yahoo! Answers
- 113. Leaderboard in the wild • Mahalo
- 114. Leaderboard in the wild • TechMeme
- 115. Report Abuse !"##$%"&'($)*# !"#$"%#&%'(&#')%*"'%+,-%.)%*"'%,/-0 !"#$%!"&'%()*&+%,'"- What A user needs a way to report malicious, abusive or 1(*'&*%2'&3.4&' .%/"0%120&%3))45*6%27%08+)3"-0+57%5*9)-:"&5)*% illegal behavior and content. )*%;"-5)20%8)33'6'%/'<05&'0%"*=%5&%0"#0%&+'% -'>25-':'*&0%9)-%&+'%08+)3"-0+57%50%'5&+'-%"%?@% Use When )*%&+'%ABC%)-%"%D?EF%)*%&+'%GACH%C)%:'%&+50% • Use when a large part of your site has been =)'0*I&%:"4'%"*#%0'*0'H%.%4*)/%&+'%+56+'0&% 08)-'%)*%&+'%GAC%50%?JFF%"*=%D?EF%50%"3:)0&% contributed by your users. +"39%0)%5&%0'':0%&+"&%5&%/)23=%<'%'"05'-%&)%&"4'% &+'%GACH How 7)0&'=%<#%5&')6(7' Report Abuse • Provide a consistent affordance for reporting !""#$%%#&& abuse. • Attach to each piece of granular content. Why • Immediately hide the offensive content in the Abuse and bad behavior can kill an online interface, even before final decisions have been community in a short amount of time. made. Providing tools to allow the community to • Clearly articulate the rules around good and bad self-moderate helps keep things in check behavior and what happens when someone or and empowers them to be self sufficient their content is reported. within certain boundaries. Peer-to-peer flagging is a very scalable solution.
- 116. Report Abuse in the wild • Yahoo! Answers
- 117. Report Abuse in the wild • craigslist
- 118. Reputation: Labels What Community members need to identify other, "special" members of the community - those who've distinguished themselves in some way. Use When • You have identified some desirable behaviors for your community that you'd like to promote. • You want to allow users to volunteer for a 'role' or responsibility within the community. • You need a reputation to reflect that a user has been vetted or validated, either by your organization or a trusted 3d-party. • The community's culture appears at any point along the Competitive Spectrum
- 119. Labels in the wild • GetSatisfaction
- 120. Labels in the wild • Yelp
- 121. Labels in the wild • Yahoo! Answers
- 122. Exercise #1
- 123. Problem: My company wants to be more collaborative across distributed teams. Can’t we just add Facebook or twitter to our intranet?
- 124. Problem: Possible My company wants Solution to be more Patterns: collaborative across distributed teams. • Group Calendar • The Wiki Way Can’t we just add • Manage Project Facebook • Group Conversation or twitter • Corporate Identity to our intranet?
- 125. Group Calendar Month Year Sunday 30 Monday 01 Tuesday 02 Wednesday 03 Thursday 04 Friday 05 Satu What User wants to find or submit an event (public or private) 07 08 09 10 11 12 based on a date or between a date range. Use When 14 15 16 17 18 19 • Use this pattern to create date driven events. • Use this pattern to find events by date. • Use this pattern in combination with Face-to-Face 21 22 23 24 25 26 Meeting. How 28 29 30 31 01 02 • Allow users to associate an event with a date. This can be done through an internal online interface or within a calendar interface like Yahoo! calendar or Google calendar. • Allow the calendar event to be shared. Sharing can be Why through selecting directly from the user’s network (i.e Building in a light calendar tool makes meetings and the team they are a part of), through email, or through face-to-face gatherings easy to plan. RSS on a team page. If the team is using a suite of tools integrate a light group • Use the Calendar Picker pattern for picking dates. calendar so that meeting notes, online discussions and other documents have a context and history. Provide enough functionality to be useful without creating a whole new calendar - scheduling system.
- 126. Group Calendar in the wild • Backpack
- 127. Group Calendar in the wild • AirSet
- 128. The Wiki Way View Edit this page Discuss History Wiki Page Name Format Font Size B i u 1 2 3 What Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at A group of users want to collaborate on a document or group the coast of the Semantics, a large language ocean. of documents. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Use When Even the all-powerful Pointing has no control about the blind texts it is an almost • Use this pattern when providing an interface for collaborative unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to editing. do so, because there were thousands of bad Commas. How • Encourage anonymous editing, use version control, enable This is a minor edit refactoring of document content by contributors. Preview Save Changes Save Cancel • Here are the original principles Ward Cunningham cited when recalling the design principles that underpinned the first wiki: • Open - Should a page be found to be incomplete or poorly • Precise - Pages will be titled with sufficient precision to organized, any reader can edit it as they see fit. • Incremental - Pages can cite other pages, including pages avoid most name clashes, typically by forming noun phrases. • Tolerant - Interpretable (even if undesirable) behavior is that have not been written yet. • Organic - The structure and text content of the site are open preferred to error messages. • Observable - Activity within the site can be watched and to editing and evolution. reviewed by any other visitor to the site. • Mundane - A small number of (irregular) text conventions • Convergent - Duplication can be discouraged or removed by will provide access to the most useful page markup. finding and citing similar or related content. • Universal - The mechanisms of editing and organizing are the same as those of writing, so that any writer is Why automatically an editor and organizer. The wiki approach has unleashed a torrent of creativity on the • Overt - The formatted (and printed) output will suggest the web and seems to have captured in its principles the input required to reproduce it. fundamental grain of digital, electronic web-enabled • Unified - Page names will be drawn from a flat space so that collaboration. no additional context is required to interpret them.
- 129. The Wiki Way in the wild • MediaWiki
- 130. The Wiki Way in the wild • Socialtext
- 131. The Wiki Way in the wild • WikiWiki
- 132. Manage Project Team Dashboard Project Name Create a new P What To Do Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat. Completed by UserName To Do List When people get together and form groups they often discover To Do Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat. Completed by UserName Item 1 a shared desire to accomplish something tangible or complex, To Do Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat. Completed by UserName Item 2 frequently something with a real word (offline) impact. Message Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat. Completed by UserName Item 3 Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Item 4 Message Interdum volgus videt, est ubi peccat. Completed by UserName Use When Item 5 File Thiswouldbethefilename.doc Completed by UserName • Use this pattern when you have enabled group formation and Item 5 wish to host and support group project activities. File Thiswouldbethefilename.pdf Completed by UserName New To Do Item File Thiswouldbethefilename.jpg Completed by UserName How Project Name • Support your members' ability to orchestrate projects by Lorem ipsum dolor sit amet consectateur nonummy lorenzino. To Do Completed by UserName Interdum volgus videt, est ubi peccat. coordinating goals, tasks and deadlines among multiple Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Message Completed by UserName participants with varying degrees of commitment and Interdum volgus videt, est ubi peccat. Lorem ipsum dolor sit amet consectateur nonummy lorenzino. availability. Message Interdum volgus videt, est ubi peccat. Completed by UserName • Provide a workspace for connecting all the facets of the File Thiswouldbethefilename.doc Completed by UserName project (people, tasks, dates, collateral) and if possible offer a File Thiswouldbethefilename.pdf Completed by UserName summarized dashboard view linking to more detailed inventories by facet. This enables asynchronous communication across disconnected geographies. Why • Enable the creator of the project or a participant to bring in Enabling your community members to work together or co- collaborators with invite to participate, and possibly to assign manage their own efforts increases the utility of your service varying rights by individual or group. and the culture of the social environment. • Support task management with the ability to assign tasks, accept tasks, and distribute processes among multiple However, your users can often do this effectively with email and participants by breaking them down into individual tasks. phone and perhaps a file sharing system. do you have anything • Enable project participants to make and keep track of more to offer? Do you need to? decisions.
- 133. Manage Project in the wild • Basecamp
- 134. Manage Project in the wild • Public Square
- 135. Manage Project in the wild • SourceForge
- 136. Group Conversation UserName1 What Who's Here Speaking about something having to do with the project at hand Multiple people want to have a discussion together about a UserName topic of interest. UserName2 UserName Answering the question that was asked about this project and o alternative to the idea that was presented by speaker 1. Use When UserName • Use to enable multiple users converse in real time. UserName UserName3 • Use within communication tools to expand the opportunities I agree UserName for conversation. UserName1 Speaking about something having to do with the project at hand How • Show the user a large enough window to keep up with the UserName4 Entered the conversation ongoing conversation. UserName3 • Provide a field for the user to enter their participating Gives a brief recap of the conversation so far to the new attende thoughts. • Fields should be flexible and be able to be resized. • Provide tools for text shortcuts like emoticons to visually enter text impart emotions like laughing, sarcasm, sadness etc. If possible, show the graphic interpretation of the text symbols. • Clearly indicate who is saying what. Show the speaker’s name and consider showing a time stamp for each part of the conversation. Why • Group conversations can implemented as either public or Group chats or group conversations allow teams to “meet” in private and each has it’s own implications. real-time. For distributed teams, this ability to gather and converse can offer time savings and alleviate misunderstandings that can happen with email or sequential one on one conversations.
- 137. Group Conversation in the wild • Skype
- 138. Group Conversation in the wild • yuuguu
- 139. Group Conversation in the wild • Acrobat Connect
- 140. Corporate Identity What User identity and the ability to control its presentation is CorporateName a core element of building a social web site. The ability Title to create and manage an identity in relation to the Workgroup context of the site is the foundation upon which the rest Reports to: CorporateName – contributions, relationships, reputation – are built. It’s Location about people and who they portray themselves to be. Send Message Phone Number / Extension Use When Online Presence Indication • Use this pattern when adding social features inside the corporate environment. • Use to identify people who work together. Why How In most corporate environments, there is an intranet and • Utilize existing intranet identification and login. an internal employee lookup system, which gives • Be clear on reflecting back to the user what they see employees information about role, title, email address, as an editor / owner versus how others see them. phone number, location and other information about their fellow colleagues. This information is often managed and generated by the HR and IT departments and is a source of truth in terms of data. Any social tools built for this environment should pull in this existing profile and identity information rather than duplicate it. Users should not be required to create another profile.
- 141. Corporate Identity in the wild • Yahoo! UE team
- 142. Problem: We also make apps for mobile phones. •
- 143. Problem: Possible We also make apps Solution for mobile Patterns: phones. • Geo • Gatherings • Statuscasting • General mobile patterns • Infinite Lists • One-click
- 144. Geo What A person wants to let the gps on his phone inform other people and his phone applications of his location. 17th St 17th St Use When 18th St 18th St • Use to enable users to plot themselves on a map or 19th St announce their location. you 20th St • Use to enable users to meet up with other people are St 20th nearby. 21st St here! • Use to empower features on social applications. 21st St Guerrero St Mission St Sanchez St. How Church St 22nd St Dolores St 22nd St • Most mobile phones are now being equipped with geo- location features, which means more and more 23rd St 23rd St applications and tools can bring together location and 24th St 24th St people in interesting ways. • Utilize the built in features of geo-mapping to allow 25th St 25th St users to share their location to a trusted network. • Allow users to turn off presence or location indicators. • Use a user’s location to show nearby businesses or events of interest. • Allow users to indicate who, from their network, can see their location.
- 145. Geo in the wild • Geo on iPhone
- 146. Geo in the wild • Where for iPhone
- 147. Gatherings What A group of users want to meet up spontaneously. 17th St 17th St Use When 18th St 18th St • Use this to enable groups of people to meet up in either a planned way or spontaneously based on location. 19th St 20th St we are 20th St How here! • Allow users to easily see where their network is 21st St located (with permission of course – see the Boyfriend 21st St Guerrero St Anti-Pattern) and send out a message or invite to meet Mission St Sanchez St. Church St up to those people. 22nd St Dolores St 22nd St • Allow users to send out one message to a pre-defined 23rd St 23rd St group of people. • Consider the option of allowing users to send out one 24th St 24th St message to a group pulled together on the fly – based on proximity. 25th St 25th St Why Using a combination of geo-location and text messaging users can easily pull together an impromptu gathering. Services like Dodgeball Foursquare and Loopt offer the ability to see yourself and those in your network plotted on a map.
- 148. Gatherings in the wild • Loopt
- 149. Gatherings in the wild • Zannel
- 150. Statuscasting What Stream The social mobile person will utilize a variety of tools to announce their current actions and activities for their network UserName Posted Status and the world to see. Status message - latest message from this user. Use When Posted XX minutes ago • Use to enable users to share activity, photos and/or videos (permalink | delete) from their mobile devices. UserName is at this restaurant How Status message - checking in via a • When considering a status tool for mobile allow users to plug geo-location feature - and telling into their existing social networks, like Twitter or Facebook. everyone where they are. • Consider pulling in the activity stream from their existing network onto their mobile device. Posted XX minutes ago (permalink | delete) • Allow the user to indicate how often to pull data. User should be able to easily turn off the stream to save on data charges UserName Posted 6 Photos and battery life. • Allow users to indicate whether their outgoing message is Photo Photo Photo sent via an application, into an existing network or sent as an SMS or text message to their network. • Allow the user to do their setup on the web as an option. Photo Photo Photo More complex setup, requiring typing and data entry is easier with a keyboard than a phone interface. • But, that said, the setup and upload of content should be easy Posted XX minutes ago on the phone for those not equipped with a computer. (permalink | delete) • Provide one-click ability to share items of interest to others. More
- 151. Mobile Statuscasting in the wild • twitterific
- 152. Mobile Statuscasting in the wild • facebook
- 153. Other mobile considerations • Infinite lists that only load as • Take advantage of time and needed to cut down on download location, (see Geo), to add extra costs. dimensions to social experiences not usually appropriate for the • Auto-complete within forms as more asynchronous web much as possible to avoid typing. experiences. • Graceful interpolation of intent • Leverage existing data, for when typing on small keyboards. example, utilize the common • Making the ability to share information from the user’s everything and anything from address book and location rather anywhere as easy as possible. than duplicating or requiring new data to be input. • Larger clickable targets, especially for smart phones that support gestural interactions.
- 154. Exercise #2
- 155. Be civil to all; sociable to many; familiar with few; friend to one; enemy to none. Benjamin Franklin
- 156. Wrap Up Remember a few core things:
- 157. Wrap Up Remember a few core things: • Start small and learn from your community
- 158. Wrap Up Remember a few core things: • Start small and learn from your community • Design around activity and social objects - make sure there is a there there.
- 159. Wrap Up Remember a few core things: • Start small and learn from your community • Design around activity and social objects - make sure there is a there there. • Build to support existing behaviors
- 160. Wrap Up Remember a few core things: • Start small and learn from your community • Design around activity and social objects - make sure there is a there there. • Build to support existing behaviors • Don’t try and do it all (there are options in each category)
- 161. Contribute to this project http://www.designingsocialinterfaces.com/patterns.wiki • Give feedback • Contribute patterns and principles • Ask questions • Challenge assumptions
- 162. Resources Our wiki: http://www.designingsocialinterfaces.com/patterns.wiki Our flickr stream: http://www.flickr.com/photos/socialpatterns/sets/ Books of interest: • Designing for the Social Web by Joshua Porter • Design for Community by Derek Powazek • Community Building on the Web: Secret Strategies for Successful Online Communities by Amy Jo Kim • Designing Interfaces by Jenifer Tidwell • Designing Web Interfaces by Bill Scott and Theresa Neil
- 163. Check out the rough cut of our new book: http://oreilly.com/ roughcuts/
- 164. Thanks • Christian Crumlish: • Erin Malone: xian@pobox.com erin@tangible-ux.com • twitter: • twitter: @mediajunkie @emalone