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 OReilly Media

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 OReilly 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?

Where did this taxonomy come from?

Where did this taxonomy come from?

Where did this taxonomy come from?

Where did this taxonomy come from?

Where did this taxonomy come from?

Where did this taxonomy come from?

Where did this taxonomy come from?

Where did this taxonomy come from?

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 Dont 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 (contd) 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 Whos Here Now Ambient Intimacy

Reputation Competitive Spectrum Levels Labels Awards Ranking Statistical Evidence Monitoring

Reputation (contd) 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 (contd) 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 Dont 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? Whats the Context? Badging Out Mobile Import Enterprise Open APIs Demographics Data Portability Youth Semantics and Boomers & Elderly Microformats Games

Some typical scenarios

Problem: Help! Im a designer being asked to add social to my site! What are the basics?

Problem: Possible Help! Im 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 its OK to use contractions, forms, or street signs to split infinitives, and even to start sentences with conjunctions. Just Ask yourself if thats 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 quot;communityquot; 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 quot;emptyquot; 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 persons UserName UserName connections are a core part of Add as Friend Add as Friend the sites 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 Dont 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 shouldnt propagate bad behavior by implement, this interaction behavior is an anti- teaching users that its 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 persons 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 theyre invisible to each other.

Problem: Possible People come and Solution read my content, but Patterns: theyre 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 youre 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 users 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 recipients 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 recipients 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 terric photos. Looks like you had an ex Allow users to block or ignore specific users that the next outing? they dont 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, its 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 quot;Who is better?quot; 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 !quot;##$%quot;&'($)*# !quot;#$quot;%#&%'(')%*quot;'%+,-%.)%*quot;'%,/-0 !quot;#$%!quot;&'%()*&+%,'quot;- What A user needs a way to report malicious, abusive or 1(*'&*%2'&3.4&' .%/quot;0%120&%3))45*6%27%08+)3quot;-0+57%5*9)-:quot;&5)*% illegal behavior and content. )*%;quot;-5)20%8)33'6'%/'