Design social interface
-
Upload
gabriela-cosma -
Category
Technology
-
view
116 -
download
1
description
Transcript of Design social interface
![Page 1: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/1.jpg)
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
![Page 2: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/2.jpg)
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
![Page 3: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/3.jpg)
Who we are:
Christian Crumlishxian: most places
mediajunkie: twitterauthor: The Power of Many
pattern detective at Yahoo!
![Page 4: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/4.jpg)
Who we are:
Erin Malone• emalone: twitter• erin_designr: flickr• founder of the pattern
library at Yahoo!• principal at Tangible ux
![Page 5: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/5.jpg)
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?
![Page 6: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/6.jpg)
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.
![Page 7: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/7.jpg)
Where did this taxonomy come from?
![Page 8: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/8.jpg)
Where did this taxonomy come from?
![Page 9: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/9.jpg)
Where did this taxonomy come from?
![Page 10: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/10.jpg)
Where did this taxonomy come from?
![Page 11: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/11.jpg)
Where did this taxonomy come from?
![Page 12: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/12.jpg)
Where did this taxonomy come from?
![Page 13: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/13.jpg)
Where did this taxonomy come from?
![Page 14: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/14.jpg)
Where did this taxonomy come from?
![Page 15: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/15.jpg)
Where did this taxonomy come from?
![Page 16: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/16.jpg)
Where did this taxonomy come from?
![Page 17: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/17.jpg)
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
![Page 18: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/18.jpg)
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.
![Page 19: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/19.jpg)
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.
![Page 20: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/20.jpg)
The Landscape
![Page 21: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/21.jpg)
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
![Page 22: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/22.jpg)
Contexts
![Page 23: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/23.jpg)
A Tour of
the Patterns
![Page 24: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/24.jpg)
High-Level Buckets
• Core Principles
• Representations of the Self
• Activities involving social objects
• Community dynamics
![Page 25: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/25.jpg)
High-Level Buckets
• Core Principles
• Representations of the Self
• Activities involving social objects
• Community dynamics
• Principles
• Self
• Activities
• Community
![Page 26: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/26.jpg)
Core Principles
• Design for Everyone
• Talk Like a Person
• Be Open
• Be a Game
• Check Your Ethics
• Don’t Break Email!
• Cargo Cult (Antipattern)
![Page 27: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/27.jpg)
Design for Everyone
• Deliberately Leave Things Incomplete
• Pave the Cowpaths
• Strict vs. Fluid Taxonomies
• Palimpsest!
![Page 28: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/28.jpg)
Talk Like a Person
• Conversational Voice
• Self-Deprecating Error Messages
• Ask Questions
• Your vs. My
• No Joking Around
![Page 29: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/29.jpg)
Representing the Self
• Engagement
• Identity
• Presence
• Reputation
![Page 30: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/30.jpg)
Engagement
• Signup (aka Registration)
• Sign In
• Invitations
• Authorize
• Private Beta
• Welcome Area
• Reengagement
![Page 31: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/31.jpg)
Engagement (cont’d)
• Sign In
• Sign-in Continuity
• Invitations
•Receive Invitation
•Send Invitation
•The Password Antipattern
![Page 32: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/32.jpg)
Identity
• Profile
• Reflectors
• User Cards
• Attribution
• Testimonial
• Avatar
• Personal Dashboard
![Page 33: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/33.jpg)
Presence
• Dimensions of Presence
• Availability
• Mood
• Environment
• Personal Feed
• Keep Company
![Page 34: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/34.jpg)
Personal Feed
• Statuscasting
• Activity Stream (aka Vitality)
• Updates
• Updated Opt-in Disclosure
• Manage Incoming Updates
• Life Stream
• Statistics
![Page 35: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/35.jpg)
Keep Company
• Signs of Life
• User Gallery
• Who’s Here Now
• Ambient Intimacy
![Page 36: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/36.jpg)
Reputation
• Competitive Spectrum
• Levels
• Labels
• Awards
• Ranking
• Statistical Evidence
• Monitoring
![Page 37: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/37.jpg)
Reputation (cont’d)
• Levels
•Named Levels
•Numbered Levels
• Awards
•Collectible Achievements
•Temporal Awards
•Peer-to-peer Awards
• Ranking
•Points
•Leaderboard
•Top X
•Friend Ranking
![Page 38: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/38.jpg)
Activities & Objects
• Collecting
• Broadcasting & Publishing
• Communicating
• Feedback
• Sharing
• Collaboration
• Social Media
![Page 39: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/39.jpg)
Collecting
• Saving
• Favorites
• Add / Subscribe
• Displaying
• Tagging
• Tag an Object
• Find with Tags
• Tag Cloud
![Page 40: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/40.jpg)
Broadcating & Publishing
• Blogs
• Consuming
• Producing
• Rich Media
• Video
• Podcasting
• Many-to-Many
• Rights
• Terms of Service
• Licensing
• Lifecycle
• Freshness
• Archiving
![Page 41: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/41.jpg)
Communicating
• Synchronous vs. Asynchronous
• Sign in to Participate
• Forums
• Public Conversation
• Private Conversation
• Group Conversation
• Flamewars
![Page 42: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/42.jpg)
Feedback
• Comments
• Reviews
• Ratings
• Favorites
• Vote to Promote
• Thumbs Up / Down
• Soliciting Feedback
![Page 43: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/43.jpg)
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
![Page 44: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/44.jpg)
Collaboration
• Manage Project
• Voting
• Collaborative Editing
• Edit This Page
• The Wiki Way
• Unbook
• Crowdsourcing
![Page 45: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/45.jpg)
Social Media
• Social Objects
• Tuning In
• Filtering
• Recommendations
• Social Search
• The Notificator
• Pivoting
![Page 46: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/46.jpg)
Community Dynamics
• Relationships
• Groups
• Community Moderation
• Place, Geography, Location
![Page 47: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/47.jpg)
Relationships
• Relationship Terminology
• Find People
• Add Friend / Unfriend
• Circle of Connections
• Publicize Relationship
• Dating & the Ex-Boyfriend Antipattern
• Buddy List
![Page 48: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/48.jpg)
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
![Page 49: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/49.jpg)
Groups
• Ridiculously Easy Group Formation
• Create Group
• Find Group
• Join Group
• Participate in Group
• Invite to Group
![Page 50: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/50.jpg)
Community Moderation
• Norms, Rules, Jargon
• Collective Choices
• Participating in Your Own Community
• Model Citizen
• Forking a Group
• Facilitate Discussion
• Don’t Feed the Trolls!
![Page 51: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/51.jpg)
Place, Geo-, Location
• Being Local
• Face-to-Face Meeting
• Party
• Event Making
• Calendaring
• Reminding
• Mapping
• Geo-tagging
• Geo-mashups
• Neighborhood
• Mobile
• Gatherings
• Statuscasting
![Page 52: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/52.jpg)
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
![Page 53: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/53.jpg)
Some typical
scenarios
![Page 54: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/54.jpg)
Problem: Help! I’m a designer being asked to add “social” to my site!
What are the basics?
![Page 55: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/55.jpg)
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?
![Page 56: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/56.jpg)
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.
![Page 57: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/57.jpg)
Talk Like a Person in the wild
• Flickr
![Page 58: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/58.jpg)
Talk Like a Person in the wild
• GetSatisfaction
![Page 59: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/59.jpg)
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!
![Page 60: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/60.jpg)
Sign In in the wild
• WordPress
![Page 61: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/61.jpg)
Sign In in the wild
• Geni
![Page 62: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/62.jpg)
Sign In in the wild
• Yahoo!
![Page 63: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/63.jpg)
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
![Page 64: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/64.jpg)
Tag an Object in the wild
• Slideshare
![Page 65: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/65.jpg)
Tag an Object in the wild
• Flickr
![Page 66: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/66.jpg)
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
![Page 67: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/67.jpg)
Ratings in the wild
• Yelp
![Page 68: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/68.jpg)
Ratings in the wild
• Yahoo! Movies
![Page 69: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/69.jpg)
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
![Page 70: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/70.jpg)
Share This in the wild
• The Onion
![Page 71: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/71.jpg)
Share This in the wild
• Add to Any
![Page 72: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/72.jpg)
Share This in the wild
![Page 73: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/73.jpg)
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
![Page 74: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/74.jpg)
Contact Cards in the wild
• Yahoo!
![Page 75: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/75.jpg)
Contact Cards in the wild
• FriendFeed
![Page 76: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/76.jpg)
Contact Cards in the wild
• Flickr
![Page 77: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/77.jpg)
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
![Page 78: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/78.jpg)
Adding Friends in the wild
![Page 79: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/79.jpg)
Adding Friends in the wild
• Yahoo!
![Page 80: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/80.jpg)
Adding Friends in the wild
• Dopplr
![Page 81: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/81.jpg)
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:
![Page 82: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/82.jpg)
Password Anti-Pattern in the wild
• iLike
![Page 83: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/83.jpg)
Password Anti-Pattern in the wild
• Plaxo
![Page 84: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/84.jpg)
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
![Page 85: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/85.jpg)
Circle of Connections in the wild
• Plaxo
![Page 86: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/86.jpg)
Circle of Connections in the wild
• Flickr
![Page 87: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/87.jpg)
Problem: People come and read my content, but they’re invisible to each other.
![Page 88: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/88.jpg)
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
![Page 89: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/89.jpg)
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.
![Page 90: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/90.jpg)
Presence Indicators in the wild
• Yahoo! Messenger
![Page 91: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/91.jpg)
Presence Indicators in the wild
![Page 92: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/92.jpg)
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.
![Page 93: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/93.jpg)
Peer-to-peer Awards in the wild
• Yelp
![Page 94: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/94.jpg)
Peer-to-peer Awards in the wild
• Yahoo! (intranet)
![Page 95: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/95.jpg)
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
![Page 96: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/96.jpg)
Nudging in the wild
• Dopplr
![Page 97: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/97.jpg)
Nudging in the wild
• Match.com
![Page 98: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/98.jpg)
Nudging in the wild
![Page 99: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/99.jpg)
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.
![Page 100: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/100.jpg)
Public Conversation in the wild
![Page 101: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/101.jpg)
Public Conversation in the wild
• FriendFeed
![Page 102: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/102.jpg)
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
![Page 103: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/103.jpg)
User Gallery in the wild
• MyBlogLog
![Page 104: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/104.jpg)
User Gallery in the wild
![Page 105: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/105.jpg)
Problem: I have an active community on my site but people are misbehaving.
How can I get that under control?
![Page 106: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/106.jpg)
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?
![Page 107: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/107.jpg)
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.
![Page 108: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/108.jpg)
Norms in the wild
• Justin.tv
![Page 109: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/109.jpg)
Norms & Model Citizen in the wild
• Flickr
![Page 110: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/110.jpg)
Norms & Model Citizen in the wild
• YouTube
![Page 111: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/111.jpg)
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
![Page 112: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/112.jpg)
Leaderboard in the wild
• Yahoo! Answers
![Page 113: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/113.jpg)
Leaderboard in the wild
• Mahalo
![Page 114: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/114.jpg)
Leaderboard in the wild
• TechMeme
![Page 115: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/115.jpg)
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
![Page 116: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/116.jpg)
Report Abuse in the wild
• Yahoo! Answers
![Page 117: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/117.jpg)
Report Abuse in the wild
• craigslist
![Page 118: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/118.jpg)
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
![Page 119: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/119.jpg)
Labels in the wild
• GetSatisfaction
![Page 120: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/120.jpg)
Labels in the wild
• Yelp
![Page 121: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/121.jpg)
Labels in the wild
• Yahoo! Answers
![Page 122: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/122.jpg)
Exercise #1
![Page 123: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/123.jpg)
Problem: My company wants to be more collaborative across distributed teams.
Can’t we just add Facebook or twitter to our intranet?
![Page 124: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/124.jpg)
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
![Page 125: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/125.jpg)
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
![Page 126: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/126.jpg)
Group Calendar in the wild
• Backpack
![Page 127: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/127.jpg)
Group Calendar in the wild
• AirSet
![Page 128: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/128.jpg)
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.
![Page 129: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/129.jpg)
The Wiki Way in the wild
• MediaWiki
![Page 130: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/130.jpg)
The Wiki Way in the wild
• Socialtext
![Page 131: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/131.jpg)
The Wiki Way in the wild
• WikiWiki
![Page 132: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/132.jpg)
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
![Page 133: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/133.jpg)
Manage Project in the wild
• Basecamp
![Page 134: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/134.jpg)
Manage Project in the wild
• PublicSquare
![Page 135: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/135.jpg)
Manage Project in the wild
• SourceForge
![Page 136: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/136.jpg)
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
![Page 137: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/137.jpg)
Group Conversationin the wild
• Skype
![Page 138: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/138.jpg)
Group Conversationin the wild
• yuuguu
![Page 139: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/139.jpg)
Group Conversationin the wild
• Acrobat Connect
![Page 140: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/140.jpg)
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
![Page 141: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/141.jpg)
Corporate Identityin the wild
• Yahoo! UE team
![Page 142: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/142.jpg)
Problem: We also make apps for mobile phones.
•
![Page 143: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/143.jpg)
Problem: We also make apps for mobile phones.
PossibleSolution Patterns:
• Geo
• Gatherings
• Statuscasting
• General mobile patterns
• Infinite Lists
• One-click
![Page 144: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/144.jpg)
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!
![Page 145: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/145.jpg)
Geo in the wild
• Geo on iPhone
![Page 146: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/146.jpg)
Geo in the wild
• Where for iPhone
![Page 147: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/147.jpg)
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!
![Page 148: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/148.jpg)
Gatherings in the wild
• Loopt
![Page 149: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/149.jpg)
Gatherings in the wild
• Zannel
![Page 150: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/150.jpg)
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
![Page 151: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/151.jpg)
Mobile Statuscasting in the wild
• twitterific
![Page 152: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/152.jpg)
Mobile Statuscasting in the wild
![Page 153: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/153.jpg)
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.
![Page 154: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/154.jpg)
Exercise #2
![Page 155: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/155.jpg)
Be civil to all; sociable to many; familiar with few;
friend to one; enemy to none.
Benjamin Franklin
![Page 156: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/156.jpg)
Wrap Up
Remember a few core things:
![Page 157: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/157.jpg)
Wrap Up
Remember a few core things:
• Start small and learn from your community
![Page 158: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/158.jpg)
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.
![Page 159: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/159.jpg)
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
![Page 160: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/160.jpg)
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)
![Page 161: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/161.jpg)
Contribute to this project
http://www.designingsocialinterfaces.com/patterns.wiki
• Give feedback
• Contribute patterns and principles
• Ask questions
• Challenge assumptions
![Page 162: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/162.jpg)
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
![Page 163: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/163.jpg)
Check out the rough cut of our new book: http://oreilly.com/roughcuts/
![Page 164: Design social interface](https://reader034.fdocuments.net/reader034/viewer/2022050905/54c6138f4a795970618b4569/html5/thumbnails/164.jpg)
Thanks
• Christian Crumlish: [email protected]
• twitter: @mediajunkie
• Erin Malone: [email protected]
• twitter: @emalone