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

Who we are:

Christian Crumlishxian: most places

mediajunkie: twitterauthor: 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?

• WhenWhen do you use the solution. This is the context.

• HowThis is the detailed solution. What decions in the interface need to be made, what elements need to exist, what behaviors need to be supported

• WhyWhy is this solution the right one. Why should this behavior be supported.

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

Contexts

A Tour of

the Patterns

High-Level Buckets

• Core Principles

• Representations of the Self

• Activities involving social objects

• Community dynamics

High-Level Buckets

• Core Principles

• Representations of the Self

• Activities involving social objects

• Community dynamics

• Principles

• Self

• Activities

• Community

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

• Sign In

• Invitations

• Authorize

• Private Beta

• Welcome Area

• 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

•Named Levels

•Numbered Levels

• Awards

•Collectible Achievements

•Temporal Awards

•Peer-to-peer Awards

• Ranking

•Points

•Leaderboard

•Top X

•Friend Ranking

Activities & Objects

• Collecting

• Broadcasting & Publishing

• Communicating

• Feedback

• Sharing

• Collaboration

• Social Media

Collecting

• Saving

• Favorites

• Add / Subscribe

• Displaying

• Tagging

• Tag an Object

• Find with Tags

• Tag Cloud

Broadcating & Publishing

• Blogs

• Consuming

• Producing

• Rich Media

• Video

• Podcasting

• Many-to-Many

• Rights

• Terms of Service

• Licensing

• Lifecycle

• Freshness

• Archiving

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

• Bookmarklet

• Share This

• Direct Sharing

• Send This

• Casual Privacy

• Give Gifts

• Public Sharing

• Many Publics

• One-Time Sharing

• Social Bookmarking

• Uploading to the Cloud

• Embedding

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

• Face-to-Face Meeting

• Party

• Event Making

• Calendaring

• Reminding

• Mapping

• Geo-tagging

• Geo-mashups

• Neighborhood

• Mobile

• Gatherings

• Statuscasting

Other Considerations

• How Open?

• Badging Out

• Import

• Open APIs

• Data Portability

• Semantics and Microformats

• What’s the Context?

• Mobile

• Enterprise

• Demographics

• Youth

• Boomers & Elderly

• Games

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.

Talk Like a Person in the wild

• Flickr

Talk Like a Person in the wild

• GetSatisfaction

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!

Sign In in the wild

• WordPress

Sign In in the wild

• Geni

Sign In in the wild

• Yahoo!

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

Tag an Object in the wild

• Slideshare

Tag an Object in the wild

• Flickr

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

Ratings in the wild

• Yelp

Ratings in the wild

• Yahoo! Movies

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

Share This in the wild

• The Onion

Share This in the wild

• Add to Any

Share This in the wild

• Facebook

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

Contact Cards in the wild

• Yahoo!

Contact Cards in the wild

• FriendFeed

Contact Cards in the wild

• Flickr

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

Adding Friends in the wild

• Facebook

Adding Friends in the wild

• Yahoo!

Adding Friends in the wild

• Dopplr

Password Anti-PatternWhat

The user is asked to give the site login names and

passwords for another site in order for the first site to

access address books, connection lists or other data

kept on the second site.

Use When

• Don’t use this pattern when you want to allow a

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.

• Even though the process is becoming more and

more prevalent and generally very easy to

implement, this interaction behavior is an anti-

pattern for several reasons.

• The process violates the Terms of Service of many

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.

Why

• Users should have access to their data and should

be allowed to bring it from one site to another.

Social sites shouldn’t propagate bad behavior by

teaching users that it’s ok to give any site their user

names and passwords for all the sites to which

they belong.

Find your friends on this site

View friends

@yahoo.com

Your Password:

Note: We won't save your username and password or spam your friends.

Your Email:

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

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

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

Presence Indicators in the wild

• Yahoo! Messenger

Presence Indicators in the wild

• Facebook

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.

Peer-to-peer Awards in the wild

• Yelp

Peer-to-peer Awards in the wild

• Yahoo! (intranet)

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

Nudging in the wild

• Dopplr

Nudging in the wild

• Match.com

Nudging in the wild

• Twitter

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)

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?

Posted XX minutes ago (permalink | delete)

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.

Posted XX minutes ago (permalink | delete)

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.

Posted XX minutes ago (permalink | delete)

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.

Public Conversation in the wild

• Twitter

Public Conversation in the wild

• FriendFeed

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

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

Norms in the wild

• Justin.tv

Norms & Model Citizen in the wild

• Flickr

Norms & Model Citizen in the wild

• YouTube

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

Leaderboard in the wild

• Yahoo! Answers

Leaderboard in the wild

• Mahalo

Leaderboard in the wild

• TechMeme

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

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: My company wants to be more collaborative across distributed teams.

Can’t we just add Facebook or twitter to our intranet?

PossibleSolution Patterns:

• Group Calendar

• The Wiki Way

• Manage Project

• Group Conversation

• Corporate Identity

Group CalendarWhat

User wants to find or submit an event (public or private)

based on a date or between a date range.

Use When

• 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

Meeting.

How

• Allow users to associate an event with a date. This can

be done through an internal online interface or within a

calendar interface like Yahoo! calendar or Google

calendar.

• Allow the calendar event to be shared. Sharing can be

through selecting directly from the user’s network (i.e

the team they are a part of), through email, or through

RSS on a team page.

• Use the Calendar Picker pattern for picking dates.

Why

Building in a light calendar tool makes meetings and

face-to-face gatherings easy to plan.

If the team is using a suite of tools integrate a light group

calendar so that meeting notes, online discussions and

other documents have a context and history.

Provide enough functionality to be useful without creating

a whole new calendar - scheduling system.

Month Year

Sunday 30 Monday 01 Tuesday 02 Wednesday 03 Thursday 04 Friday 05 Saturday 06

07 08 09 10 11 12 13

14 15 16 17 18 19 20

21 22 23 24 25 26 27

28 29 30 31 01 02 03

Group Calendar in the wild

• Backpack

Group Calendar in the wild

• AirSet

The Wiki WayWhat

A group of users want to collaborate on a document or group

of documents.

Use When

• Use this pattern when providing an interface for collaborative

editing.

How

• Encourage anonymous editing, use version control, enable

refactoring of document content by contributors.

• 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

organized, any reader can edit it as they see fit.

• Incremental - Pages can cite other pages, including pages

that have not been written yet.

• Organic - The structure and text content of the site are open

to editing and evolution.

• Mundane - A small number of (irregular) text conventions

will provide access to the most useful page markup.

• Universal - The mechanisms of editing and organizing are

the same as those of writing, so that any writer is

automatically an editor and organizer.

• Overt - The formatted (and printed) output will suggest the

input required to reproduce it.

• Unified - Page names will be drawn from a flat space so that

no additional context is required to interpret them.

Wiki Page Name

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

the coast of the Semantics, a large language ocean.

A small river named Duden flows by their place and supplies it with the necessary

regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your

mouth.

Even the all-powerful Pointing has no control about the blind texts it is an almost

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

do so, because there were thousands of bad Commas.

Save

This is a minor edit

iB u123

Format Font Size

Edit this page DiscussView History

Preview Save Changes Cancel

• Precise - Pages will be titled with sufficient precision to

avoid most name clashes, typically by forming noun phrases.

• Tolerant - Interpretable (even if undesirable) behavior is

preferred to error messages.

• Observable - Activity within the site can be watched and

reviewed by any other visitor to the site.

• Convergent - Duplication can be discouraged or removed by

finding and citing similar or related content.

Why

The wiki approach has unleashed a torrent of creativity on the

web and seems to have captured in its principles the

fundamental grain of digital, electronic web-enabled

collaboration.

The Wiki Way in the wild

• MediaWiki

The Wiki Way in the wild

• Socialtext

The Wiki Way in the wild

• WikiWiki

Manage ProjectWhat

When people get together and form groups they often discover

a shared desire to accomplish something tangible or complex,

frequently something with a real word (offline) impact.

Use When

• Use this pattern when you have enabled group formation and

wish to host and support group project activities.

How

• Support your members' ability to orchestrate projects by

coordinating goals, tasks and deadlines among multiple

participants with varying degrees of commitment and

availability.

• Provide a workspace for connecting all the facets of the

project (people, tasks, dates, collateral) and if possible offer a

summarized dashboard view linking to more detailed

inventories by facet. This enables asynchronous

communication across disconnected geographies.

• Enable the creator of the project or a participant to bring in

collaborators with invite to participate, and possibly to assign

varying rights by individual or group.

• Support task management with the ability to assign tasks,

accept tasks, and distribute processes among multiple

participants by breaking them down into individual tasks. • Enable project participants to make and keep track of

decisions.

Why

Enabling your community members to work together or co-

manage their own efforts increases the utility of your service

and the culture of the social environment.

However, your users can often do this effectively with email and

phone and perhaps a file sharing system. do you have anything

more to offer? Do you need to?

Project Name

To Do

To Do

To Do

Message

Message

File

File

File

Lorem ipsum dolor sit amet consectateur nonummy lorenzino.

Interdum volgus videt, est ubi peccat.

Lorem ipsum dolor sit amet consectateur nonummy lorenzino.

Interdum volgus videt, est ubi peccat.

Lorem ipsum dolor sit amet consectateur nonummy lorenzino.

Interdum volgus videt, est ubi peccat.

Lorem ipsum dolor sit amet consectateur nonummy lorenzino.

Interdum volgus videt, est ubi peccat.

Lorem ipsum dolor sit amet consectateur nonummy lorenzino.

Interdum volgus videt, est ubi peccat.

Thiswouldbethefilename.doc

Thiswouldbethefilename.pdf

Thiswouldbethefilename.jpg

UserNameCompleted by

UserNameCompleted by

UserNameCompleted by

UserNameCompleted by

UserNameCompleted by

UserNameCompleted by

UserNameCompleted by

UserNameCompleted by

Team Dashboard

Project Name

To Do

Message

Message

File

File

Lorem ipsum dolor sit amet consectateur nonummy lorenzino.

Interdum volgus videt, est ubi peccat.

Lorem ipsum dolor sit amet consectateur nonummy lorenzino.

Interdum volgus videt, est ubi peccat.

Lorem ipsum dolor sit amet consectateur nonummy lorenzino.

Interdum volgus videt, est ubi peccat.

Thiswouldbethefilename.doc

Thiswouldbethefilename.pdf

UserNameCompleted by

UserNameCompleted by

UserNameCompleted by

UserNameCompleted by

UserNameCompleted by

Create a new Project

Item 2

Item 1

To Do List

Item 4

Item 3

Item 5

Item 5

New To Do Item Add

Manage Project in the wild

• Basecamp

Manage Project in the wild

• PublicSquare

Manage Project in the wild

• SourceForge

Group ConversationWhat

Multiple people want to have a discussion together about a

topic of interest.

Use When

• Use to enable multiple users converse in real time.

• Use within communication tools to expand the opportunities

for conversation.

How

• Show the user a large enough window to keep up with the

ongoing conversation.

• Provide a field for the user to enter their participating

thoughts.

• Fields should be flexible and be able to be resized.• Provide tools for text shortcuts like emoticons to visually

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.

• Group conversations can implemented as either public or

private and each has it’s own implications.

Why

Group chats or group conversations allow teams to “meet” in

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.

Who's Here

UserName

UserName

UserName

UserName

UserName

UserName1

UserName2

UserName3

UserName1

Speaking about something having to do with the project at hand

Answering the question that was asked about this project and offering analternative to the idea that was presented by speaker 1.

I agree

Speaking about something having to do with the project at hand

UserName4 Entered the conversation

UserName3

Gives a brief recap of the conversation so far to the new attendee

enter text

Group Conversationin the wild

• Skype

Group Conversationin the wild

• yuuguu

Group Conversationin the wild

• Acrobat Connect

Corporate IdentityWhat

User identity and the ability to control its presentation is

a core element of building a social web site. The ability

to create and manage an identity in relation to the

context of the site is the foundation upon which the rest

– contributions, relationships, reputation – are built. It’s

about people and who they portray themselves to be.

Use When

• Use this pattern when adding social features inside the

corporate environment.

• Use to identify people who work together.

How

• Utilize existing intranet identification and login.

• Be clear on reflecting back to the user what they see

as an editor / owner versus how others see them.

Why

In most corporate environments, there is an intranet and

an internal employee lookup system, which gives

employees information about role, title, email address,

phone number, location and other information about their

fellow colleagues. This information is often managed and

generated by the HR and IT departments and is a source

of truth in terms of data.

Any social tools built for this environment should pull in

this existing profile and identity information rather than

duplicate it. Users should not be required to create

another profile.

Title

CorporateName

Send Message

Online Presence Indication

Phone Number / Extension

Workgroup

Reports to: CorporateName

Location

Corporate Identityin the wild

• Yahoo! UE team

Problem: We also make apps for mobile phones.

•

Problem: We also make apps for mobile phones.

PossibleSolution Patterns:

• Geo

• Gatherings

• Statuscasting

• General mobile patterns

• Infinite Lists

• One-click

GeoWhat

A person wants to let the gps on his phone inform other

people and his phone applications of his location.

Use When

• Use to enable users to plot themselves on a map or

announce their location.

• Use to enable users to meet up with other people

nearby.

• Use to empower features on social applications.

How

• Most mobile phones are now being equipped with geo-

location features, which means more and more

applications and tools can bring together location and

people in interesting ways.

• Utilize the built in features of geo-mapping to allow

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.

Guerre

ro S

t

Dolo

res S

t

20th St

19th St

21st St

25th St

18th St

22nd St

23rd St

24th St

17th St

20th St

21st St

25th St

18th St

22nd St

23rd St

24th St

17th St

Churc

h S

t

Sanchez S

t.

Mis

sio

n S

t

you are

here!

Geo in the wild

• Geo on iPhone

Geo in the wild

• Where for iPhone

GatheringsWhat

A group of users want to meet up spontaneously.

Use When

• Use this to enable groups of people to meet up in either

a planned way or spontaneously based on location.

How

• Allow users to easily see where their network is

located (with permission of course – see the Boyfriend

Anti-Pattern) and send out a message or invite to meet

up to those people.

• Allow users to send out one message to a pre-defined

group of people.

• Consider the option of allowing users to send out one

message to a group pulled together on the fly – based

on proximity.

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.

Gu

erre

ro S

t

Do

lore

s S

t

20th St

19th St

21st St

25th St

18th St

22nd St

23rd St

24th St

17th St

20th St

21st St

25th St

18th St

22nd St

23rd St

24th St

17th St

Ch

urc

h S

t

Sa

nch

ez S

t.

Mis

sio

n S

t

we are

here!

Gatherings in the wild

• Loopt

Gatherings in the wild

• Zannel

StatuscastingWhat

The social mobile person will utilize a variety of tools to

announce their current actions and activities for their network

and the world to see.

Use When

• Use to enable users to share activity, photos and/or videos

from their mobile devices.

How

• When considering a status tool for mobile allow users to plug

into their existing social networks, like Twitter or Facebook.

• Consider pulling in the activity stream from their existing

network onto their mobile device.

• 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

and battery life.

• Allow users to indicate whether their outgoing message is

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.

More complex setup, requiring typing and data entry is easier

with a keyboard than a phone interface.

• But, that said, the setup and upload of content should be easy

on the phone for those not equipped with a computer.• Provide one-click ability to share items of interest to others.

Stream

UserName Posted Status

Status message - latest message

from this user.

UserName is at this restaurant

Status message - checking in via a

geo-location feature - and telling

everyone where they are.

Photo Photo Photo

Photo Photo Photo

UserName Posted 6 Photos

Posted XX minutes ago

(permalink | delete)

Posted XX minutes ago

(permalink | delete)

Posted XX minutes ago

(permalink | delete)

More

Mobile Statuscasting in the wild

• twitterific

Mobile Statuscasting in the wild

• facebook

Other mobile considerations

•Infinite lists that only load as needed to cut down on download costs.

•Auto-complete within forms as much as possible to avoid typing.

•Graceful interpolation of intent when typing on small keyboards.

•Making the ability to share everything and anything from anywhere as easy as possible.

•Larger clickable targets, especially for smart phones that support gestural interactions.

•Take advantage of time and location, (see Geo), to add extra dimensions to social experiences not usually appropriate for the more asynchronous web experiences.

•Leverage existing data, for example, utilize the common information from the user’s address book and location rather than duplicating or requiring new data to be input.

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

ResourcesOur 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: xian@pobox.com

• twitter: @mediajunkie

• Erin Malone: erin@tangible-ux.com

• twitter: @emalone