designing social interfaces - ia summit 09 talk

Christian Crumlish, Yahoo!

Erin Malone, Tangible ux

Authors of the forthcoming book from O’Reilly Media

Designing Social InterfacesPatterns, Principles and Best Practices for the Social Web

Designing Social InterfacesPatterns, 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

Contexts

Blogs

Photos

Interest

Groups

Influencers

Family &

Friends

Tags

Ratings &Reviews

Discovery

Media

Comments

Identity

& Engagement

Organizing

& Discovery

Relationships

Moderation

Reputation

Participation

Self

Search

Collaboration

Conversations

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: Help! I’m a designer being asked to add “social” to my site!

Possible Solution Patterns:

• Talk Like A Person

• Sign In / Sign Up

• Activity around objects: e.g. tags, ratings, reviews, share this

• Identity: e.g. contact cards, attribution

• Relationship: e.g. adding friends, circles of connections

What are the basics?

Talk Like a Person

• Use the language of contemporary speech, not that of text books, tax forms, or street signs

• Ask yourself if that’s really how you talk.

• Read any copy out loud and strike out anything that feels awkward to say.

• Despite what your English teacher may have told you, it’s OK to use contractions, to split infinitives, and even to start sentences with conjunctions. Just make sure it feels natural.

Sign InWhat

User wants to access their personalized

information or an application that is

stored on the host site.

Use When

• Use when personal data needs to be

stored or when there is customization

or personalization unique to the

particular user.

• Use when the site is a repository for

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.

Forgot your password?

Username:

Password:

Sign In

Register Now!

Tag an ObjectWhat

A user wants to attach their own

keywords to an object for organization

and later retrieval.

Use When

• Use when a person is collecting a

large amount of unstructured data, like

photos.

• Use this pattern when a person wants

to manage a large collection of items,

like books.

• Use this pattern to blend user

generated labels and keywords with

structured metadata.

add a new tag

family

portrait

mom

dad

billy

jane

kids

2008

good times

RatingsWhat

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

above to invite the user to rate the object (e.g. Rate It!).

• As the mouse cursor moves over the icons, indicate the level

of rating (through a color change) and display a text

description of the rating at each point (e.g. Excellent).

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

Why

Rating an object provides a lightweight model for

user engagement. Ratings are often tied with

reviews to encourage richer user contributions and

activity.

Good

Share ThisWhat

User wants to share an object with one

or more people.

How

• Enable people to spontaneously share

content or objects they find.

• Provide the minimal interface needed to

facilitate rapid sending or posting, such

as a ubiquitous Share This widget.

• Offer autocomplete selection from an

address book or set of contacts if

possible. Don't break email.

• Consider including a text field for adding

a personal note.

• Offer the user a checkbox option for

receiving a copy of the message.

Share

Enter an email address:

Share this item

or share with your favorite network:

Digg DeliciousFacebook StumbleUponTwitter MySpaceBebo FriendFeed

+ Share

select from your address book

Contact CardsWhat

A person needs more information about another person in

an online community without interrupting his or her

current task.

How

Open a small panel when the user hovers over a target's

display name or image.

Present a larger version of the user's display image, the

user's full display name, and other pertinent information

about the target that they choose to share with the

community (Real Name, Age, Gender, Location).

Present a Relationship Reflector. Allow the ability to

subscribe to, follow, connect to, unsubscribe or block the

user from this panel.

Why

Identity cards provide the means to reduce identity-

related clutter on the screen.

Presence indicators, Reputation Emblems, and

Relationship Reflectors can be tucked away but be

easily accessible.

Relevant demographic info

UserName

Send Message

Online Presence Indication

Add as Friend

Favorite

Adding FriendsWhat

A user has found people she

knows on a social site and wants

to add them to her circle of

connections.

Use When

• Use when a person’s

connections are a core part of

the site’s experience.

• Use when relationships will be

confirmed providing a

two-way reciprocal relationship.

• Use when allowing one user to

follow another participant

without reciprocity.

UserName

Add as Friend

UserName

Add as Friend

UserName

Add as Friend

UserName

Add as Friend

UserName

Add as Friend

UserName

Add as Friend

UserName

Add as Friend

UserName

Add as Friend

UserName

Add as Friend

People You May Know

Circles of Connections

What

A user wants to indicate nuances in

their relationships with other people to

create contexts for communication and

sharing.

Use When

• Use to distinguish levels of

participation in a person’s network.

• Use to set permissions for shared

activity and content.

• Use to disambiguate real-life versus

online, strong versus weak ties.

• Use this pattern to help users filter

which content to consume.

add a new group Add

UserName

will be added as a contact

you can also add UserName to one of your

other people lists.

Contacts

Friends

Family

Work People

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

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

PossibleSolution Patterns:

• Presence Indicators

• Peer-to-Peer Awards

• Nudging

• Public Conversation

• Followers Badge

PresenceUserName

UserName

UserName

UserName

UserName

UserName

UserName

What

Users need to see who else is online, available and

open to contact.

Use When

• A person wants to determine whether their friend is

online.

• A person wants to see who is available for contact.

• A person wants to see if their friend is available for

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

Why

Enabling your users to compliment each other by

bestowing awards on each other offers another

opportunity for social “grooming” behavior and the

reinforcement of weak ties (giving someone a prize

is less of a commitment than inviting them into your

private group, for example).

For your review of: a very cool restaurant

A brief blurb about the review that

incited this peer-to-peer awardUserName

Location

You're Funny Date Stamp

For your review of: another very cool restaurant

A brief blurb about the review that caused one user

to give a peer-to-peer award to another personUserName

Location

Just a Note Date Stamp

So glad to see you here.

a peer-to-peer award from another personUserName

Location

You're Cool Date Stamp

What

People enjoy giving and receiving compliments and will use

existing message board and guestbook features for this

purpose in a pinch, but the whole system can benefit if these

kinds of gestures are enabled and supported more formally.

Use When

• Use when you’re trying to foster more collaborative and

cooperative peer-to-peer relationships

• In the context of participatory activities (such as posting

content, giving feedback, writing reviews, etc.) and in the

context of a user’s profile

How

• Provide an interface through which a fellow site member can

select a type of award and then customize it by either adding

a note or otherwise decorating or labeling it.

• Optionally, permit the recipient of the award to approve the

award before it is displayed.

• Display the award in a gallery on the recipient’s profile.

NudgingWhat

Providing simple tools for one user to nudge another can get a

conversation going especially if one person is shy or not as

confident online as the other.

Use When

• Use when you want to allow one user to make contact with

another with low effort.

• Use to allow users to encourage others to participate.

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.

• Provide a mechanism for one user to “nudge” another.

• The link, icon or button should be closely associated with the

recipient’s name or on their contact card.

Why

Sometimes people want to let others know they are

thinking of them or are interested in encouraging

them to participate and want a low effort, easy

option to give that extra push.

Relevant demographic info

UserName

Send Message

Add as Friend

Favorite

WAVE to UserName

Public ConversationUserName 1 Posted Status

Status message - may be an overtly entered status or could be an activity alert - like photos

uploaded or items shared

Photo Photo Photo Photo Photo Photo

UserName 2 Posted 6 Photos

Posted XX minutes ago (permalink | delete)


Hey, these are terrific photos. Looks like you had an excellent time at the event. When's

the next outing?


UserName 3 says:

I am going to be taking photos again in a week. Why don't you join us. We'll have a ball.

Besides I can make you look like a movie star with this new lens.


UserName 2 says:

Ha ha. Very funny. I may just show up with sequins and my entourage and then we'll see

who the real movie star is.


UserName 3 says:

Use When

• Use this pattern to differentiate from private

conversations.

How

• Allow users to create a dialog between

themselves. Provide a framework that is flexible

enough to support two or more people in

conversation.

• Provide a form field for text entry. Clearly indicate

the character count for conversing.

• Allow users to block or ignore specific users that

they don’t want to hear from, without disrupting the

flow of conversation to other participants.

Why

Providing options for public conversations allows

the content to become more a shared activity.

While there will always be lurkers, open, public

conversations are more likely to entice folks who

otherwise might not get involved to chime in and

participate.

Followers BadgeWhat

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

interested in the site they are on and

providing easy tools for engagement

can encourage users to connect with

each other.

Recent Visitors

View this site's community

Join this community

Problem: I have an active community on my site but people are misbehaving.

How can I get that under control?

Problem: I have an active community on my site but people are misbehaving.

PossibleSolution Patterns:

• Norms, Model Citizen

• Leaderboard Antipattern

• Community Management e.g. reporting abuse

• Reputation

• RatingsHow can I get that under control?

Norms

• A principle of community management is to establish and communicate social norms to the participants in your community

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

• Founders and community managers can play the role of Model Citizen to demonstrate desirable behavior.

Reputation: LeaderboardsWhat

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.

• Don't use this pattern when the activities

that users engage in are not competitive in

nature (e.g., writing recipes, or sharing

photos).

In most instances,

this is an Anti-Pattern

Report AbuseWhat

A user needs a way to report malicious, abusive or

illegal behavior and content.

Use When

• Use when a large part of your site has been

contributed by your users.

How

• Provide a consistent affordance for reporting

abuse.

• Attach to each piece of granular content.

• Immediately hide the offensive content in the

interface, even before final decisions have been

made.

• Clearly articulate the rules around good and bad

behavior and what happens when someone or

their content is reported.

Why

Abuse and bad behavior can kill an online

community in a short amount of time.

Providing tools to allow the community to

self-moderate helps keep things in check

and empowers them to be self sufficient

within certain boundaries.

Peer-to-peer flagging is a very scalable

solution.

!"##$%"&'($)*#

!"#$"%#&%'(&#')%*"'%+,-%.)%*"'%,/-0

!"#$%!"&'%()*&+%,'"-

1(*'&*%2'&3.4&'

.%/"0%120&%3))45*6%27%08+)3"-0+57%5*9)-:"&5)*%

)*%;"-5)20%8)33'6'%/'<05&'0%"*=%5&%0"#0%&+'%

-'>25-':'*&0%9)-%&+'%08+)3"-0+57%50%'5&+'-%"%?@%

)*%&+'%ABC%)-%"%D?EF%)*%&+'%GACH%C)%:'%&+50%

=)'0*I&%:"4'%"*#%0'*0'H%.%4*)/%&+'%+56+'0&%

08)-'%)*%&+'%GAC%50%?JFF%"*=%D?EF%50%"3:)0&%

+"39%0)%5&%0'':0%&+"&%5&%/)23=%<'%'"05'-%&)%&"4'%

&+'%GACH

7)0&'=%<#%5&')6(7'

!""#$%%#&&

Report Abuse

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: [email protected]

• twitter: @mediajunkie

• Erin Malone: [email protected]

• twitter: @emalone



mailto:[email protected]


