Designing Social Interfaces - IA Summit 09 Talk

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

Social design patterns? • Patterns as in Alexander • Design Patterns as in Gang of Four & Tidwell • Social Design as in eGroups, Flickr, Facebook, Twitter • Also, some high-order principle 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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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).

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.

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.

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.

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.

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).

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.

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

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

Thanks Check out the wiki: http://www.designingsocialinterfaces.com/patterns.wiki Christian Crumlish: Erin Malone: • • xian@pobox.com erin@tangible-ux.com twitter: twitter: • • @mediajunkie @emalone

Designing Social Interfaces - IA Summit 09 Talk

3 comments

Notes on slide 1

47 Favorites & 1 Event