Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Design social interface
1. Designing Social Interfaces
Patterns, Principles and Best Practices for the Social Web
Christian Crumlish, Yahoo!
Erin Malone, Tangible ux
Authors of the forthcoming book from O’Reilly Media
2. Designing Social Interfaces
Patterns, Principles and Best Practices for the Social Web
Christian Crumlish, Yahoo!
Erin Malone, Tangible ux
Authors of the forthcoming book from O’Reilly Media
3. Who we are:
Christian Crumlish
xian: most places
mediajunkie: twitter
author: The Power of Many
pattern detective at Yahoo!
4. Who we are:
Erin Malone
• emalone: twitter
• erin_designr: flickr
• founder of the pattern
library at Yahoo!
• principal at Tangible ux
5. 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?
6. 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.
17. 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
18. 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.
19. 4 parts to a design pattern
• What
This defines the problem. What does the user want to do -
includes a visual example?
• When
When do you use the solution. This is the context.
• How
This is the detailed solution. What decions in the interface
need to be made, what elements need to exist, what
behaviors need to be supported
• Why
Why is this solution the right one. Why should this behavior
be supported.
24. High-Level Buckets
• Core Principles
• Representations of the Self
• Activities involving social objects
• Community dynamics
25. High-Level Buckets
Principles
• Core Principles
• Self
Representations of the Self
• Activities involving social objects
• Community dynamics
26. Core Principles
• Design for Everyone
• Talk Like a Person
• Be Open
• Be a Game
• Check Your Ethics
• Don’t Break Email!
• Cargo Cult (Antipattern)
27. Design for Everyone
• Deliberately Leave Things Incomplete
• Pave the Cowpaths
• Strict vs. Fluid Taxonomies
• Palimpsest!
28. Talk Like a Person
• Conversational Voice
• Self-Deprecating Error Messages
• Ask Questions
• Your vs. My
• No Joking Around
39. Collecting
• Saving • Tagging
• Favorites • Tag an Object
• Add / Subscribe • Find with Tags
• Displaying • Tag Cloud
40. Broadcating
& Publishing
• Blogs • Rights
• Consuming • Terms of Service
• Producing • Licensing
• Rich Media • Lifecycle
• Video • Freshness
• Podcasting • Archiving
• Many-to-Many
41. Communicating
• Synchronous vs. Asynchronous
• Sign in to Participate
• Forums
• Public Conversation
• Private Conversation
• Group Conversation
• Flamewars
43. Sharing
• Tools for Sharing • Public Sharing
• Bookmarklet • Many Publics
• Share This • One-Time Sharing
• Direct Sharing • Social Bookmarking
• Send This • Uploading to the
• Casual Privacy
Cloud
• Embedding
• Give Gifts
47. Relationships
• Relationship Terminology
• Find People
• Add Friend / Unfriend
• Circle of Connections
• Publicize Relationship
• Dating & the Ex-Boyfriend Antipattern
• Buddy List
49. Groups
• Ridiculously Easy Group Formation
• Create Group
• Find Group
• Join Group
• Participate in Group
• Invite to Group
50. Community Moderation
• Norms, Rules, Jargon
• Collective Choices
• Participating in Your Own Community
• Model Citizen
• Forking a Group
• Facilitate Discussion
• Don’t Feed the Trolls!
51. Place, Geo-, Location
• Being Local • Mapping
• Face-to-Face • Geo-tagging
Meeting • Geo-mashups
• Party
• Neighborhood
• Event Making
• Mobile
• Calendaring
• Gatherings
• Reminding
• Statuscasting
52. Other Considerations
• How Open? • What’s the Context?
• Badging Out • Mobile
• Import • Enterprise
• Open APIs • Demographics
• Data Portability • Youth
• Semantics and • Boomers & Elderly
Microformats • Games
55. Problem: Possible
Help! I’m a Solution
designer being Patterns:
asked to add
• Talk Like A Person
“social”
• Sign In / Sign Up
to my site! • Activity around objects:
e.g. tags, ratings,
reviews, share this
What are • Identity:
the basics? e.g. contact cards,
attribution
• Relationship:
e.g. adding friends,
circles of connections
56. Talk Like a Person
• Use the language of • Despite what your English
contemporary speech, not teacher may have told you,
that of text books, tax it’s OK to use contractions,
forms, or street signs to split infinitives, and
even to start sentences
• Ask yourself if that’s really with conjunctions. Just
how you talk. make sure it feels natural.
• Read any copy out loud
and strike out anything
that feels awkward to say.
58. Talk Like a Person in the wild
• GetSatisfaction
59. Sign In
What
User wants to access their personalized
Username:
information or an application that is
stored on the host site.
Password:
Use When
• Use when personal data needs to be
stored or when there is customization Forgot your password?
or personalization unique to the
Sign In
particular user.
• Use when the site is a repository for Register Now!
user generated content and the
submissions or files need to be
identified and/or managed by the
author.
• Use when there are security or privacy
concerns and the user's data needs to
be protected.
63. Tag an Object
What
A user wants to attach their own family
portrait
keywords to an object for organization mom
and later retrieval. dad
billy
jane
Use When kids
• Use when a person is collecting a 2008
good times
large amount of unstructured data, like
photos. add a new tag
• Use this pattern when a person wants
to manage a large collection of items,
like books.
• Use this pattern to blend user
generated labels and keywords with
structured metadata.
66. Ratings
What
A user wants to quickly leave their opinion on an object, with Good
minimal interruption to any other task flow they are involved in.
Use When
• A user wants to leave an opinion quickly.
• Use in combination with reviews for richer experience.
• Use to quickly tap into the existing "community" of a product.
• Ratings are collected together to present an average rating
of an object from the collective user set.
How
• Show clickable items (most often used are stars) that provide
rollover feedback to infer clickability.
• Initial state should be "empty" and show invitational text Why
above to invite the user to rate the object (e.g. Rate It!). Rating an object provides a lightweight model for
• As the mouse cursor moves over the icons, indicate the level user engagement. Ratings are often tied with
of rating (through a color change) and display a text reviews to encourage richer user contributions and
description of the rating at each point (e.g. Excellent). activity.
• The saved rating should be indicated with a change in final
color of the items and a text indication that the rating is
saved.
• An aggregate or average rating should also be displayed.
• Users should be able to change their rating later if they
change their mind.
69. Share This
What + Share
User wants to share an object with one
or more people.
Share this item
Enter an email address:
How
Share
• Enable people to spontaneously share select from your address book
content or objects they find.
or share with your favorite network:
• Provide the minimal interface needed to
Digg Delicious
facilitate rapid sending or posting, such Facebook
Twitter
StumbleUpon
MySpace
as a ubiquitous Share This widget. Bebo FriendFeed
• Offer autocomplete selection from an
address book or set of contacts if
possible. Don't break email.
• Consider including a text field for adding
a personal note.
• Offer the user a checkbox option for
receiving a copy of the message.
73. Contact Cards UserName
What Relevant demographic info
A person needs more information about another person in Send Message
an online community without interrupting his or her
current task. Add as Friend
Favorite
How
Open a small panel when the user hovers over a target's Online Presence Indication
display name or image.
Present a larger version of the user's display image, the
user's full display name, and other pertinent information
about the target that they choose to share with the Why
community (Real Name, Age, Gender, Location). Identity cards provide the means to reduce identity-
related clutter on the screen.
Present a Relationship Reflector. Allow the ability to
subscribe to, follow, connect to, unsubscribe or block the Presence indicators, Reputation Emblems, and
user from this panel. Relationship Reflectors can be tucked away but be
easily accessible.
77. Adding Friends
What
A user has found people she People You May Know
knows on a social site and wants UserName UserName
to add them to her circle of Add as Friend Add as Friend
connections.
UserName UserName
Add as Friend Add as Friend
Use When
• Use when a person’s
UserName UserName
connections are a core part of Add as Friend Add as Friend
the site’s experience.
• Use when relationships will be
confirmed providing a
two-way reciprocal relationship.
• Use when allowing one user to
follow another participant
without reciprocity.
81. Password Anti-Pattern
What
The user is asked to give the site login names and
passwords for another site in order for the first site to Find your friends on this site
access address books, connection lists or other data
Your Email: @yahoo.com
kept on the second site.
Your Password:
Use When
View friends
• Don’t use this pattern when you want to allow a
Note: We won't save your username and password or spam your friends.
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.
Why
• Users should have access to their data and should • Even though the process is becoming more and
be allowed to bring it from one site to another. more prevalent and generally very easy to
Social sites shouldn’t propagate bad behavior by implement, this interaction behavior is an anti-
teaching users that it’s ok to give any site their user pattern for several reasons.
names and passwords for all the sites to which • The process violates the Terms of Service of many
they belong. 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.
84. Circles of Connections
What
A user wants to indicate nuances in UserName
their relationships with other people to will be added as a contact
create contexts for communication and
you can also add UserName to one of your
sharing. other people lists.
Contacts
Use When Friends
• Use to distinguish levels of
Family
participation in a person’s network.
• Use to set permissions for shared Work People
activity and content.
add a new group Add
• Use to disambiguate real-life versus
online, strong versus weak ties.
• Use this pattern to help users filter
which content to consume.
88. Problem: Possible
People come and Solution
read my content, but Patterns:
they’re invisible to
each other. • Presence Indicators
• Peer-to-Peer Awards
• Nudging
• Public Conversation
• Followers Badge
89. Presence UserName
What UserName
Users need to see who else is online, available and
open to contact. UserName
Use When UserName
• A person wants to determine whether their friend is
UserName
online.
• A person wants to see who is available for contact. UserName
• A person wants to see if their friend is available for
communication. UserName
• 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.
92. Peer-to-peer Awards
What
People enjoy giving and receiving compliments and will use You're Funny Date Stamp
existing message board and guestbook features for this For your review of: a very cool restaurant
UserName A brief blurb about the review that
purpose in a pinch, but the whole system can benefit if these Location incited this peer-to-peer award
kinds of gestures are enabled and supported more formally.
Just a Note Date Stamp
Use When For your review of: another very cool restaurant
UserName A brief blurb about the review that caused one user
• Use when you’re trying to foster more collaborative and Location to give a peer-to-peer award to another person
cooperative peer-to-peer relationships
• In the context of participatory activities (such as posting You're Cool Date Stamp
content, giving feedback, writing reviews, etc.) and in the So glad to see you here.
UserName a peer-to-peer award from another person
context of a user’s profile Location
How
Why
• Provide an interface through which a fellow site member can
Enabling your users to compliment each other by
select a type of award and then customize it by either adding
bestowing awards on each other offers another
a note or otherwise decorating or labeling it.
opportunity for social “grooming” behavior and the
• Optionally, permit the recipient of the award to approve the
reinforcement of weak ties (giving someone a prize
award before it is displayed.
is less of a commitment than inviting them into your
• Display the award in a gallery on the recipient’s profile.
private group, for example).
95. Nudging
What
Providing simple tools for one user to nudge another can get a
conversation going especially if one person is shy or not as UserName
confident online as the other. Relevant demographic info
Send Message
Use When
• Use when you want to allow one user to make contact with Add as Friend
another with low effort. Favorite
• Use to allow users to encourage others to participate.
WAVE to UserName
How
• A simple link like “nudge” or “poke” or “wave” or “wink” can
be used to trigger an alert or send a canned private message
to the recipient. Why
• Provide a mechanism for one user to “nudge” another. Sometimes people want to let others know they are
• The link, icon or button should be closely associated with the thinking of them or are interested in encouraging
recipient’s name or on their contact card. them to participate and want a low effort, easy
option to give that extra push.
99. Public Conversation
Use When UserName 1 Posted Status
• Use this pattern to differentiate from private Status message - may be an overtly entered status or could
uploaded or items shared
conversations.
Posted XX minutes ago (permalink | delete)
How
• Allow users to create a dialog between
Photo Photo Photo Photo Photo Pho
themselves. Provide a framework that is flexible
enough to support two or more people in Posted XX minutes ago (permalink | delete)
conversation. UserName 2 Posted 6 Photos
• Provide a form field for text entry. Clearly indicate
the character count for conversing. UserName 3 says:
• Allow users to block or ignore specific users that Hey, these are terrific photos. Looks like you had an ex
the next outing?
they don’t want to hear from, without disrupting the
flow of conversation to other participants. Posted XX minutes ago (permalink | delete)
UserName 2 says:
Why I am going to be taking photos again in a week. Why d
Providing options for public conversations allows Besides I can make you look like a movie star with this
the content to become more a shared activity. Posted XX minutes ago (permalink | delete)
UserName 3 says:
While there will always be lurkers, open, public
Ha ha. Very funny. I may just show up with sequins an
conversations are more likely to entice folks who who the real movie star is.
otherwise might not get involved to chime in and
Posted XX minutes ago (permalink | delete)
participate.
102. Followers Badge Recent Visitors
What
A technique for signaling the transient
presence of other visitors is the faceroll
widget, which shows recent visitors to
a blog or site and can give the current
visitor a sense that they have company
while reading the blog, especially if
they recognize some of the faces or
names.
Why
Allowing users to see who else is View this site's community
Join this community
interested in the site they are on and
providing easy tools for engagement
can encourage users to connect with
each other.
105. Problem:
I have an active
community on my
site but people are
misbehaving.
How can
I get that
under control?
106. Problem: Possible
I have an active Solution
community on my Patterns:
site but people are
• Norms, Model Citizen
misbehaving.
• Leaderboard Antipattern
• Community Management
e.g. reporting abuse
• Reputation
How can • Ratings
I get that
under control?
107. Norms
• A principle of community • Founders and community
management is to establish managers can play the role
and communicate social of Model Citizen to
norms to the participants in demonstrate desirable
your community behavior.
• While this may be done with
interface copy, help text,
support forums, newbie
tutorials and so forth, it’s
best communicated directly
from member to member.
111. Reputation: Leaderboards
What
In highly competitive communities using a
ranking system, users may want to know
who are the very best performers in a
category or overall.
Use When
• The community is highly competitive, and
the activities that users engage in are
competitive in nature (e.g., player-vs-player
contests, or coaching a fantasy football
team.)
• You want to enable player-to-player
comparisons, or permit users to definitively
settle "Who is better?" arguments. In most instances,
• Don't use this pattern when the activities
that users engage in are not competitive in this is an Anti-Pattern
nature (e.g., writing recipes, or sharing
photos).
115. Report Abuse !"##$%"&'($)*#
!"#$"%#&%'(&#')%*"'%+,-%.)%*"'%,/-0
!"#$%!"&'%()*&+%,'"-
What
A user needs a way to report malicious, abusive or 1(*'&*%2'&3.4&'
.%/"0%120&%3))45*6%27%08+)3"-0+57%5*9)-:"&5)*%
illegal behavior and content.
)*%;"-5)20%8)33'6'%/'<05&'0%"*=%5&%0"#0%&+'%
-'>25-':'*&0%9)-%&+'%08+)3"-0+57%50%'5&+'-%"%?@%
Use When )*%&+'%ABC%)-%"%D?EF%)*%&+'%GACH%C)%:'%&+50%
• Use when a large part of your site has been =)'0*I&%:"4'%"*#%0'*0'H%.%4*)/%&+'%+56+'0&%
08)-'%)*%&+'%GAC%50%?JFF%"*=%D?EF%50%"3:)0&%
contributed by your users. +"39%0)%5&%0'':0%&+"&%5&%/)23=%<'%'"05'-%&)%&"4'%
&+'%GACH
How 7)0&'=%<#%5&')6(7' Report Abuse
• Provide a consistent affordance for reporting !""#$%%#&&
abuse.
• Attach to each piece of granular content. Why
• Immediately hide the offensive content in the Abuse and bad behavior can kill an online
interface, even before final decisions have been community in a short amount of time.
made. Providing tools to allow the community to
• Clearly articulate the rules around good and bad self-moderate helps keep things in check
behavior and what happens when someone or and empowers them to be self sufficient
their content is reported. within certain boundaries.
Peer-to-peer flagging is a very scalable
solution.
118. 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
123. Problem:
My company wants
to be more
collaborative across
distributed teams.
Can’t we just add
Facebook
or twitter
to our intranet?
124. Problem: Possible
My company wants Solution
to be more Patterns:
collaborative across
distributed teams. • Group Calendar
• The Wiki Way
Can’t we just add • Manage Project
Facebook • Group Conversation
or twitter • Corporate Identity
to our intranet?
125. Group Calendar Month Year
Sunday 30 Monday 01 Tuesday 02 Wednesday 03 Thursday 04 Friday 05 Satu
What
User wants to find or submit an event (public or private) 07 08 09 10 11 12
based on a date or between a date range.
Use When 14 15 16 17 18 19
• 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 21 22 23 24 25 26
Meeting.
How 28 29 30 31 01 02
• 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 Why
through selecting directly from the user’s network (i.e Building in a light calendar tool makes meetings and
the team they are a part of), through email, or through face-to-face gatherings easy to plan.
RSS on a team page. If the team is using a suite of tools integrate a light group
• Use the Calendar Picker pattern for picking dates. 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.
128. The Wiki Way
View Edit this page Discuss History
Wiki Page Name
Format Font Size B i u 1
2
3
What 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
A group of users want to collaborate on a document or group the coast of the Semantics, a large language ocean.
of documents. 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.
Use When Even the all-powerful Pointing has no control about the blind texts it is an almost
• Use this pattern when providing an interface for collaborative 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
editing. do so, because there were thousands of bad Commas.
How
• Encourage anonymous editing, use version control, enable This is a minor edit
refactoring of document content by contributors.
Preview Save Changes Save Cancel
• 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
• Precise - Pages will be titled with sufficient precision to
organized, any reader can edit it as they see fit.
• Incremental - Pages can cite other pages, including pages
avoid most name clashes, typically by forming noun phrases.
• Tolerant - Interpretable (even if undesirable) behavior is
that have not been written yet.
• Organic - The structure and text content of the site are open
preferred to error messages.
• Observable - Activity within the site can be watched and
to editing and evolution.
reviewed by any other visitor to the site.
• Mundane - A small number of (irregular) text conventions
• Convergent - Duplication can be discouraged or removed by
will provide access to the most useful page markup.
finding and citing similar or related content.
• Universal - The mechanisms of editing and organizing are
the same as those of writing, so that any writer is
Why
automatically an editor and organizer.
The wiki approach has unleashed a torrent of creativity on the
• Overt - The formatted (and printed) output will suggest the
web and seems to have captured in its principles the
input required to reproduce it.
fundamental grain of digital, electronic web-enabled
• Unified - Page names will be drawn from a flat space so that
collaboration.
no additional context is required to interpret them.
132. Manage Project Team Dashboard
Project Name
Create a new P
What To Do
Lorem ipsum dolor sit amet consectateur nonummy lorenzino.
Interdum volgus videt, est ubi peccat.
Completed by UserName
To Do List
When people get together and form groups they often discover To Do
Lorem ipsum dolor sit amet consectateur nonummy lorenzino.
Interdum volgus videt, est ubi peccat.
Completed by UserName
Item 1
a shared desire to accomplish something tangible or complex, To Do
Lorem ipsum dolor sit amet consectateur nonummy lorenzino.
Interdum volgus videt, est ubi peccat.
Completed by UserName Item 2
frequently something with a real word (offline) impact. Message
Lorem ipsum dolor sit amet consectateur nonummy lorenzino.
Interdum volgus videt, est ubi peccat. Completed by UserName Item 3
Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Item 4
Message Interdum volgus videt, est ubi peccat.
Completed by UserName
Use When Item 5
File Thiswouldbethefilename.doc Completed by UserName
• Use this pattern when you have enabled group formation and Item 5
wish to host and support group project activities. File Thiswouldbethefilename.pdf Completed by UserName
New To Do Item
File Thiswouldbethefilename.jpg Completed by UserName
How
Project Name
• Support your members' ability to orchestrate projects by Lorem ipsum dolor sit amet consectateur nonummy lorenzino.
To Do Completed by UserName
Interdum volgus videt, est ubi peccat.
coordinating goals, tasks and deadlines among multiple Lorem ipsum dolor sit amet consectateur nonummy lorenzino.
Message Completed by UserName
participants with varying degrees of commitment and Interdum volgus videt, est ubi peccat.
Lorem ipsum dolor sit amet consectateur nonummy lorenzino.
availability. Message Interdum volgus videt, est ubi peccat.
Completed by UserName
• Provide a workspace for connecting all the facets of the File Thiswouldbethefilename.doc Completed by UserName
project (people, tasks, dates, collateral) and if possible offer a File Thiswouldbethefilename.pdf Completed by UserName
summarized dashboard view linking to more detailed
inventories by facet. This enables asynchronous
communication across disconnected geographies. Why
• Enable the creator of the project or a participant to bring in
Enabling your community members to work together or co-
collaborators with invite to participate, and possibly to assign
manage their own efforts increases the utility of your service
varying rights by individual or group.
and the culture of the social environment.
• Support task management with the ability to assign tasks,
accept tasks, and distribute processes among multiple
However, your users can often do this effectively with email and
participants by breaking them down into individual tasks.
phone and perhaps a file sharing system. do you have anything
• Enable project participants to make and keep track of
more to offer? Do you need to?
decisions.
136. Group Conversation
UserName1
What Who's Here
Speaking about something having to do with the project at hand
Multiple people want to have a discussion together about a UserName
topic of interest. UserName2
UserName
Answering the question that was asked about this project and o
alternative to the idea that was presented by speaker 1.
Use When UserName
• Use to enable multiple users converse in real time. UserName
UserName3
• Use within communication tools to expand the opportunities I agree
UserName
for conversation.
UserName1
Speaking about something having to do with the project at hand
How
• Show the user a large enough window to keep up with the
UserName4 Entered the conversation
ongoing conversation.
UserName3
• Provide a field for the user to enter their participating
Gives a brief recap of the conversation so far to the new attende
thoughts.
• Fields should be flexible and be able to be resized.
• Provide tools for text shortcuts like emoticons to visually enter text
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. Why
• Group conversations can implemented as either public or Group chats or group conversations allow teams to “meet” in
private and each has it’s own implications. 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.
140. Corporate Identity
What
User identity and the ability to control its presentation is CorporateName
a core element of building a social web site. The ability Title
to create and manage an identity in relation to the Workgroup
context of the site is the foundation upon which the rest Reports to: CorporateName
– contributions, relationships, reputation – are built. It’s Location
about people and who they portray themselves to be.
Send Message Phone Number / Extension
Use When Online Presence Indication
• Use this pattern when adding social features inside the
corporate environment.
• Use to identify people who work together.
Why
How In most corporate environments, there is an intranet and
• Utilize existing intranet identification and login. an internal employee lookup system, which gives
• Be clear on reflecting back to the user what they see employees information about role, title, email address,
as an editor / owner versus how others see them. 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.
143. Problem: Possible
We also make apps Solution
for mobile Patterns:
phones.
• Geo
• Gatherings
• Statuscasting
• General mobile patterns
• Infinite Lists
• One-click
144. Geo
What
A person wants to let the gps on his phone inform other
people and his phone applications of his location. 17th St
17th St
Use When 18th St 18th St
• Use to enable users to plot themselves on a map or
19th St
announce their location. you
20th St
• Use to enable users to meet up with other people are St
20th
nearby. 21st St here!
• Use to empower features on social applications.
21st St
Guerrero St
Mission St
Sanchez St.
How
Church St
22nd St
Dolores St
22nd St
• Most mobile phones are now being equipped with geo-
location features, which means more and more 23rd St 23rd St
applications and tools can bring together location and
24th St 24th St
people in interesting ways.
• Utilize the built in features of geo-mapping to allow 25th St 25th St
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.
147. Gatherings
What
A group of users want to meet up spontaneously. 17th St
17th St
Use When 18th St 18th St
• Use this to enable groups of people to meet up in either
a planned way or spontaneously based on location. 19th St
20th St we are
20th St
How here!
• Allow users to easily see where their network is 21st St
located (with permission of course – see the Boyfriend
21st St
Guerrero St
Anti-Pattern) and send out a message or invite to meet
Mission St
Sanchez St.
Church St
up to those people. 22nd St
Dolores St
22nd St
• Allow users to send out one message to a pre-defined
23rd St 23rd St
group of people.
• Consider the option of allowing users to send out one
24th St 24th St
message to a group pulled together on the fly – based
on proximity. 25th St 25th St
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.
150. Statuscasting
What Stream
The social mobile person will utilize a variety of tools to
announce their current actions and activities for their network UserName Posted Status
and the world to see. Status message - latest message
from this user.
Use When
Posted XX minutes ago
• Use to enable users to share activity, photos and/or videos
(permalink | delete)
from their mobile devices.
UserName is at this restaurant
How Status message - checking in via a
• When considering a status tool for mobile allow users to plug geo-location feature - and telling
into their existing social networks, like Twitter or Facebook. everyone where they are.
• Consider pulling in the activity stream from their existing
network onto their mobile device. Posted XX minutes ago
(permalink | delete)
• 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
UserName Posted 6 Photos
and battery life.
• Allow users to indicate whether their outgoing message is
Photo Photo Photo
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.
Photo Photo Photo
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 Posted XX minutes ago
on the phone for those not equipped with a computer. (permalink | delete)
• Provide one-click ability to share items of interest to others.
More
153. Other mobile considerations
• Infinite lists that only load as • Take advantage of time and
needed to cut down on download location, (see Geo), to add extra
costs. dimensions to social experiences
not usually appropriate for the
• Auto-complete within forms as
more asynchronous web
much as possible to avoid typing.
experiences.
• Graceful interpolation of intent
• Leverage existing data, for
when typing on small keyboards.
example, utilize the common
• Making the ability to share information from the user’s
everything and anything from address book and location rather
anywhere as easy as possible. than duplicating or requiring new
data to be input.
• Larger clickable targets, especially
for smart phones that support
gestural interactions.
157. Wrap Up
Remember a few core things:
• Start small and learn from your community
158. 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.
159. 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
160. 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)
161. Contribute to this project
http://www.designingsocialinterfaces.com/patterns.wiki
• Give feedback
• Contribute patterns and principles
• Ask questions
• Challenge assumptions
162. Resources
Our 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
