Social Patterns Talk - Web 2.0 version

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

Who we are: Christian Crumlish xian: most places mediajunkie: twitter author: The Power of Many pattern detective at Yahoo!

Who we are: Erin Malone • emalone: twitter • erin_designr: flickr • founder of the pattern library at Yahoo! • principal at Tangible ux

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?

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.

Where did this taxonomy come from?

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

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.

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.

The Landscape

C Collaboration Moderation Blogs Influencers Tags Reputation Relationships Conversations Search Interest Organizing Groups & Discovery Photos Participation Ratings & Comments Reviews Self Family & Identity Friends Discovery & Engagement Media Social Media Ecosystem

C

A Tour of the Patterns

High-Level Buckets • Core Principles • Representations of the Self • Activities involving social objects • Community dynamics

High-Level Buckets Principles • Core Principles • Self Representations of the Self • Activities involving social objects • Community dynamics

Core Principles • Design for Everyone • Talk Like a Person • Be Open • Be a Game • Check Your Ethics • Don’t Break Email! • Cargo Cult (Antipattern)

Design for Everyone • Deliberately Leave Things Incomplete • Pave the Cowpaths • Strict vs. Fluid Taxonomies • Palimpsest!

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

Representing the Self • Engagement • Identity • Presence • Reputation

Engagement • Signup (aka • Authorize Registration) • Private Beta • Sign In • Welcome Area • Invitations • Reengagement

Engagement (cont’d) • Sign In • Sign-in Continuity • Invitations • Receive Invitation • Send Invitation • The Password Antipattern

Identity • Profile • Reflectors • User Cards • Attribution • Testimonial • Avatar • Personal Dashboard

Presence • Dimensions of Presence • Availability • Mood • Environment • Personal Feed • Keep Company

Personal Feed • Statuscasting • Activity Stream (aka Vitality) • Updates • Updated Opt-in Disclosure • Manage Incoming Updates • Life Stream • Statistics

Keep Company • Signs of Life • User Gallery • Who’s Here Now • Ambient Intimacy

Reputation • Competitive Spectrum • Levels • Labels • Awards • Ranking • Statistical Evidence • Monitoring

Reputation (cont’d) • Levels • Ranking • Named Levels • Points • Numbered Levels • Leaderboard • Awards • Top X • Collectible Achievements • Friend Ranking • Temporal Awards • Peer-to-peer Awards

Activities & Objects • Collecting • Broadcasting & Publishing • Communicating • Feedback • Sharing • Collaboration • Social Media

Collecting • Saving • Tagging • Favorites • Tag an Object • Add / Subscribe • Find with Tags • Displaying • Tag Cloud

Broadcating & Publishing • Blogs • Rights • Consuming • Terms of Service • Producing • Licensing • Rich Media • Lifecycle • Video • Freshness • Podcasting • Archiving • Many-to-Many

Communicating • Synchronous vs. Asynchronous • Sign in to Participate • Forums • Public Conversation • Private Conversation • Group Conversation • Flamewars

Feedback • Comments • Reviews • Ratings • Favorites • Vote to Promote • Thumbs Up / Down • Soliciting Feedback

Sharing • Tools for Sharing • Public Sharing • Bookmarklet • Many Publics • Share This • One-Time Sharing • Direct Sharing • Social Bookmarking • Send This • Uploading to the Cloud • Casual Privacy • Embedding • Give Gifts

Collaboration • Manage Project • Voting • Collaborative Editing • Edit This Page • The Wiki Way • Unbook • Crowdsourcing

Social Media • Social Objects • Tuning In • Filtering • Recommendations • Social Search • The Notificator • Pivoting

Community Dynamics • Relationships • Groups • Community Moderation • Place, Geography, Location

Relationships • Relationship Terminology • Find People • Add Friend / Unfriend • Circle of Connections • Publicize Relationship • Dating & the Ex-Boyfriend Antipattern • Buddy List

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

Groups • Ridiculously Easy Group Formation • Create Group • Find Group • Join Group • Participate in Group • Invite to Group

Community Moderation • Norms, Rules, Jargon • Collective Choices • Participating in Your Own Community • Model Citizen • Forking a Group • Facilitate Discussion • Don’t Feed the Trolls!

Place, Geo-, Location • Being Local • Mapping • Face-to-Face • Geo-tagging Meeting • Geo-mashups • Party • Neighborhood • Event Making • Mobile • Calendaring • Gatherings • Reminding • Statuscasting

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

Some typical scenarios

Problem: Help! I’m a designer being asked to add “social” to my site! What are the basics?

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

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 with conjunctions. Just Ask yourself if that’s really • make sure it feels natural. how you talk. Read any copy out loud • and strike out anything that feels awkward to say.

Talk Like a Person in the wild Flickr •

Talk Like a Person in the wild GetSatisfaction •

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.

Sign In in the wild WordPress •

Sign In in the wild Geni •

Sign In in the wild Yahoo! •

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.

Tag an Object in the wild Slideshare •

Tag an Object in the wild Flickr •

Ratings What Good 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. 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.

Ratings in the wild Yelp •

Ratings in the wild Yahoo! Movies •

Share This + Share What 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 StumbleUpon Twitter 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.

Share This in the wild The Onion •

Share This in the wild Add to Any •

Share This in the wild Facebook •

Contact Cards UserName Relevant demographic info What A person needs more information about another person in Send Message an online community without interrupting his or her Add as Friend current task. Favorite How Online Presence Indication 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 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.

Contact Cards in the wild Yahoo! •

Contact Cards in the wild FriendFeed •

Contact Cards in the wild Flickr •

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.

Adding Friends in the wild Facebook •

Adding Friends in the wild Yahoo! •

Adding Friends in the wild Dopplr •

Password Anti-Pattern What The user is asked to give the site login names and Find your friends on this site passwords for another site in order for the first site to 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.

Password Anti-Pattern in the wild iLike •

Password Anti-Pattern in the wild Plaxo •

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 add a new group • Use to disambiguate real-life versus online, strong versus weak ties. • Use this pattern to help users filter which content to consume.

Circle of Connections in the wild Plaxo •

Circle of Connections in the wild Flickr •

Problem: People come and read my content, but they’re invisible to each other.

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

Presence UserName What UserName Users need to see who else is online, available and UserName open to contact. UserName Use When • A person wants to determine whether their friend is UserName online. UserName • A person wants to see who is available for contact. • A person wants to see if their friend is available for UserName communication. • 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.

Presence Indicators in the wild Yahoo! Messenger •

Presence Indicators in the wild Facebook •

Peer-to-peer Awards What You're Funny People enjoy giving and receiving compliments and will use Date Stamp For your review of: a very cool restaurant existing message board and guestbook features for this A brief blurb about the review that UserName purpose in a pinch, but the whole system can benefit if these incited this peer-to-peer award Location kinds of gestures are enabled and supported more formally. Just a Note Date Stamp For your review of: another very cool restaurant Use When A brief blurb about the review that caused one user UserName • Use when you’re trying to foster more collaborative and to give a peer-to-peer award to another person Location cooperative peer-to-peer relationships You're Cool • In the context of participatory activities (such as posting Date Stamp So glad to see you here. content, giving feedback, writing reviews, etc.) and in the a peer-to-peer award from another person UserName 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).

Peer-to-peer Awards in the wild Yelp •

Peer-to-peer Awards in the wild Yahoo! (intranet) •

Nudging What Providing simple tools for one user to nudge another can get a UserName conversation going especially if one person is shy or not as confident online as the other. Relevant demographic info Send Message Use When Add as Friend • Use when you want to allow one user to make contact with Favorite another with low effort. • 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 Why to the recipient. Sometimes people want to let others know they are • Provide a mechanism for one user to “nudge” another. thinking of them or are interested in encouraging • The link, icon or button should be closely associated with the them to participate and want a low effort, easy recipient’s name or on their contact card. option to give that extra push.

Nudging in the wild Dopplr •

Nudging in the wild Match.com •

Nudging in the wild Twitter •

Public Conversation Use When UserName 1 Posted Status Status message - may be an overtly entered status or could • Use this pattern to differentiate from private 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: Hey, these are terriﬁc photos. Looks like you had an ex • Allow users to block or ignore specific users that 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 Besides I can make you look like a movie star with this Providing options for public conversations allows 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.

Public Conversation in the wild Twitter •

Public Conversation in the wild FriendFeed •

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.

User Gallery in the wild MyBlogLog •

User Gallery in the wild Twitter •

Problem: I have an active community on my site but people are misbehaving. How can I get that under control?

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?

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.

Norms in the wild Justin.tv •

Norms & Model Citizen in the wild Flickr •

Norms & Model Citizen in the wild YouTube •

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 this is an Anti-Pattern that users engage in are not competitive in nature (e.g., writing recipes, or sharing photos).

Leaderboard in the wild Yahoo! Answers •

Leaderboard in the wild Mahalo •

Leaderboard in the wild TechMeme •

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% =)'0*I&%:\"4'%\"*#%0'*0'H%.%4*)/%&+'%+56+'0&% • Use when a large part of your site has been 08)-'%)*%&+'%GAC%50%?JFF%\"*=%D?EF%50%\"3:)0&% contributed by your users. +\"39%0)%5&%0'':0%&+\"&%5&%/)23=%<'%'\"05'-%&)%&\"4'% &+'%GACH Report Abuse 7)0&'=%<#%5&')6(7' How !\"\"#$%%#&& • Provide a consistent affordance for reporting abuse. Why • Attach to each piece of granular content. Abuse and bad behavior can kill an online • Immediately hide the offensive content in the community in a short amount of time. interface, even before final decisions have been Providing tools to allow the community to made. self-moderate helps keep things in check • Clearly articulate the rules around good and bad and empowers them to be self sufficient behavior and what happens when someone or within certain boundaries. their content is reported. Peer-to-peer flagging is a very scalable solution.

Report Abuse in the wild Yahoo! Answers •

Report Abuse in the wild craigslist •

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

Labels in the wild GetSatisfaction •

Labels in the wild Yelp •

Labels in the wild Yahoo! Answers •

Exercise #1

Problem: My company wants to be more collaborative across distributed teams. Can’t we just add Facebook or twitter to our intranet?

Problem: Possible My company wants Solution to be more Patterns: collaborative across • Group Calendar distributed teams. • The Wiki Way Can’t we just add • Manage Project Facebook • Group Conversation or twitter • Corporate Identity to our intranet?

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. Why • Allow the calendar event to be shared. Sharing can be Building in a light calendar tool makes meetings and through selecting directly from the user’s network (i.e face-to-face gatherings easy to plan. the team they are a part of), through email, or through If the team is using a suite of tools integrate a light group RSS on a team page. calendar so that meeting notes, online discussions and • Use the Calendar Picker pattern for picking dates. other documents have a context and history. Provide enough functionality to be useful without creating a whole new calendar - scheduling system.

Group Calendar in the wild Backpack •

Group Calendar in the wild AirSet •

The Wiki Way View Edit this page Discuss History Wiki Page Name u 1 B i Format Font Size 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 ﬂows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences ﬂy 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. avoid most name clashes, typically by forming noun phrases. • Incremental - Pages can cite other pages, including pages • Tolerant - Interpretable (even if undesirable) behavior is that have not been written yet. preferred to error messages. • Organic - The structure and text content of the site are open • 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.

The Wiki Way in the wild MediaWiki •

The Wiki Way in the wild Socialtext •

The Wiki Way in the wild WikiWiki •

Manage Project Team Dashboard Create a new P Project Name What Lorem ipsum dolor sit amet consectateur nonummy lorenzino. UserName Completed by To Do Interdum volgus videt, est ubi peccat. To Do List When people get together and form groups they often discover Lorem ipsum dolor sit amet consectateur nonummy lorenzino. UserName Completed by To Do Interdum volgus videt, est ubi peccat. Item 1 a shared desire to accomplish something tangible or complex, Lorem ipsum dolor sit amet consectateur nonummy lorenzino. UserName Completed by To Do Item 2 Interdum volgus videt, est ubi peccat. frequently something with a real word (offline) impact. Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Item 3 UserName Completed by Message Interdum volgus videt, est ubi peccat. Item 4 Lorem ipsum dolor sit amet consectateur nonummy lorenzino. UserName Completed by Message Interdum volgus videt, est ubi peccat. Use When Item 5 UserName Completed by File Thiswouldbethefilename.doc • Use this pattern when you have enabled group formation and Item 5 wish to host and support group project activities. UserName File Completed by Thiswouldbethefilename.pdf New To Do Item UserName Completed by File Thiswouldbethefilename.jpg How Project Name • Support your members' ability to orchestrate projects by Lorem ipsum dolor sit amet consectateur nonummy lorenzino. UserName Completed by To Do Interdum volgus videt, est ubi peccat. coordinating goals, tasks and deadlines among multiple Lorem ipsum dolor sit amet consectateur nonummy lorenzino. UserName Completed by Message participants with varying degrees of commitment and Interdum volgus videt, est ubi peccat. Lorem ipsum dolor sit amet consectateur nonummy lorenzino. availability. UserName Completed by Message Interdum volgus videt, est ubi peccat. • Provide a workspace for connecting all the facets of the UserName Completed by File Thiswouldbethefilename.doc project (people, tasks, dates, collateral) and if possible offer a UserName File Completed by Thiswouldbethefilename.pdf 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.

Manage Project in the wild Basecamp •

Manage Project in the wild Public • Square

Manage Project in the wild SourceForge •

Group Conversation UserName1 Who's Here What 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. UserName Use When • Use to enable multiple users converse in real time. UserName3 UserName I agree • Use within communication tools to expand the opportunities 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.

Group Conversation in the wild Skype •

Group Conversation in the wild yuuguu •

Group Conversation in the wild Acrobat • Connect

Corporate Identity What CorporateName User identity and the ability to control its presentation is Title a core element of building a social web site. The ability Workgroup to create and manage an identity in relation to the Reports to: CorporateName context of the site is the foundation upon which the rest Location – contributions, relationships, reputation – are built. It’s 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 In most corporate environments, there is an intranet and How an internal employee lookup system, which gives • Utilize existing intranet identification and login. employees information about role, title, email address, • Be clear on reflecting back to the user what they see phone number, location and other information about their as an editor / owner versus how others see them. 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.

Corporate Identity in the wild Yahoo! UE • team

Problem: We also make apps for mobile phones. •

Problem: Possible We also make apps Solution for mobile Patterns: phones. • Geo • Gatherings • Statuscasting • General mobile patterns • Infinite Lists • One-click

Geo What A person wants to let the gps on his phone inform other 17th St people and his phone applications of his location. 17th St 18th St Use When 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. here! 21st St • 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- 23rd St location features, which means more and more 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.

Geo in the wild Geo on iPhone •

Geo in the wild Where for iPhone •

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! 21st St • Allow users to easily see where their network is 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.

Gatherings in the wild Loopt •

Gatherings in the wild Zannel •

Statuscasting Stream What 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 Posted XX minutes ago network onto their mobile device. (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. Posted XX minutes ago • But, that said, the setup and upload of content should be easy (permalink | delete) on the phone for those not equipped with a computer. • Provide one-click ability to share items of interest to others. More

Mobile Statuscasting in the wild twitterific •

Mobile Statuscasting in the wild facebook •

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 information from the user’s • Making the ability to share address book and location rather everything and anything from than duplicating or requiring new anywhere as easy as possible. data to be input. • Larger clickable targets, especially for smart phones that support gestural interactions.

Exercise #2

Be civil to all; sociable to many; familiar with few; friend to one; enemy to none. Benjamin Franklin

Wrap Up Remember a few core things:

Wrap Up Remember a few core things: • Start small and learn from your community

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.

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

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)

Contribute to this project http://www.designingsocialinterfaces.com/patterns.wiki • Give feedback • Contribute patterns and principles • Ask questions • Challenge assumptions

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

Check out the rough cut of our new book: http://oreilly.com/ roughcuts/

Thanks • Christian Crumlish: • Erin Malone: xian@pobox.com erin@tangible-ux.com • twitter: • twitter: @mediajunkie @emalone

Social Patterns Talk - Web 2.0 version

5 comments

Notes on slide 1

67 Favorites & 2 Groups