designing social interfaces at web directions south 2009
DESCRIPTION
Slides from my talk at WDS09, on the topic of social design of digital productsTRANSCRIPT
web directions southdesigning social interfaces
christian crumlishdesign.yahoo.com@mediajunkie
10/12/09
Social media is always awkward when it’s new
“Hello?”
“Is that you, Mr. Gilbert?”
“Hello?”
10/12/09
New social media: always awkward
http://flickr.com/photos/dhbress/87105370/
10/12/09
Five Principles
10/12/09
Pave the cowpaths
10/12/09
How to Pave the Cowpaths
10/12/09
Talk like a person
10/12/09
How to Talk Like a Person
• Conversational Voice• Self-Deprecating Error Messages• Ask Questions• Your vs. My• No Joking Around
10/12/09
Play well with others
10/12/09
How to Play Well with Others (Be Open)
Embrace open standardsShare data outside of the bounds of your
applicationAccept external data within the sphere of your
applicationSupport two-way interoperability
10/12/09
How to Play Well with Others (Be Open)
Embrace open standardsShare data outside of the bounds of your
applicationAccept external data within the sphere of your
applicationSupport two-way interoperability
Embrace open standards
Share data outside of the bounds of your application
Accept external data within the sphere of your application
Support two-way interoperability
10/12/09
Learn from games
10/12/09
How to Learn from Games
10/12/09
Respect the ethical dimension
10/12/09
How not to Respect the Ethical Dimension
10/12/09
Five Principles
• Pave the Cowpaths• Talk Like a Person• Play Well with Others (Be Open)• Learn from Games• Respect the Ethical Dimension
16
10/12/09
96 Patterns
10/12/09
10/12/09
Give people a way to be identi!ed
10/12/09
Give people a way to be identi!ed
10/12/09
10/12/09
10/12/09
User 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.
• Present a Relationship Reflector. Allow the ability to subscribe to, follow, connect to, unsubscribe or block the user from this panel.
10/12/09
User Cards in the wildFriendFeed
10/12/09
User Cards in the wildFlickr
10/12/09
10/12/09
What’s your social object?
10/12/09
10/12/09
10/12/09
10/12/09
Give people something to do
10/12/09
10/12/09
Activities involving Objects• Collecting (passive)• Broadcasting & Publishing (one-to-many)• Sharing (more intimate)• Feedback (commenting on objects)• Communicating (two-way conversation)• Collaboration (making objects together)• Social Media (a full ecosystem)
10/12/09
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.
10/12/09
Tag an Object in the wildFlickr
10/12/09
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.
10/12/09
Ratings in the wildYelp
10/12/09
Ratings in the wildYahoo! Movies
10/12/09
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.
10/12/09
Share This in the wildThe Onion
10/12/09
Share This in the wildAdd to Any
10/12/09
Share This in the wildFacebook
10/12/09
Let the community elevate people & content they value
10/12/09
Let the community elevate people & content they value
Gently moderate
10/12/09
10/12/09
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.
10/12/09
Adding Friends in the wildFacebook
10/12/09
Adding Friends in the wildYahoo!
10/12/09
Adding Friends in the wildDopplr
10/12/09
Circles of ConnectionsWhat
• 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.
10/12/09
Circle of Connections in the wildPlaxo
10/12/09
Circle of Connections in the wildFlickr
10/12/09
Public ConversationUse 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.
10/12/09
Public Conversation in the wildTwitter
10/12/09
Public Conversation in the wildFriendFeed
10/12/09
Enable a bridge to real life events
10/12/09
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.
10/12/09
Geo in the wildGeo on iPhone
10/12/09
Geo in the wildWhere for iPhone
10/12/09
Social Design Pattern Categories• Representations of the Self, self-expression,
identity• Activities involving social objects• Community dynamics growing out of
relationships, expressed through various contexts
10/12/09
Anti-Patterns!
10/12/09
Cargo Cult
10/12/09
Cargo Cult
10/12/09
Cargo Cult
10/12/09
Cargo Cult
10/12/09
Don’t break email
10/12/09
Don't Break Email
don’t:
do:
10/12/09
The Password Anti-Pattern
10/12/09
The Password Anti-Pattern
10/12/09
Password Anti-Pattern in the wildiLike
10/12/09
Password Anti-Pattern in the wildPlaxo
10/12/09
Ex-Boyfriend Bug
10/12/09
Potemkin Village
10/12/09
Five Anti-Patterns
• Cargo Cult Design• Don’t Break Email!• Password Anti-Pattern• Ex-Boyfriend Bug• Potemkin Village
67
10/12/09
thank you!
Christian Crumlish, CuratorYahoo! Design Pattern Librarydesign.yahoo.com@mediajunkie