Yahoo! Pattern Library & Social Design Patterns
-
Upload
christian-crumlish -
Category
Design
-
view
17.041 -
download
1
description
Transcript of Yahoo! Pattern Library & Social Design Patterns
01/31/10
Christian Crumlish, Curator, Yahoo! Design Pattern Library
January 19 (London) & 21 (Berlin), 2010
YDN & IxDA-Berlin present
Yahoo! Design Pattern Library & Social Design Patterns
01/31/10
I’m Really Glad to Be Here
01/31/10
I’m Really Glad to Be Here
01/31/10
I’m Really Glad to Be Here
01/31/10
I’m Really Glad to Be Here
01/31/10
I’m Really Glad to Be Here
01/31/10
A Brief History of Patterns
Architecture
01/31/10
A Brief History of Patterns
Software Engineering (invention of wiki)
01/31/10
A Brief History of Patterns
User Interface (HCI or Interaction Design)
01/31/10
Yahoo’s Pattern Library (so far)
Launched in 2005:
Erin MaloneMatt LeacockChanel Wheeler
01/31/10
Yahoo’s Pattern Library (so far)
Open Version of Library Launched in 2006:
Bill ScottsucceedsMatt as curator & adds many rich patterns
01/31/10
Yahoo’s Pattern Library (so far)
Library Redesign Completed 2009
I become thethird curator,focus on socialpatterns, openinglibrary, redesign
01/31/10
One Company, 100 Designs
01/31/10
Social media is always awkward when it’s new
“Hello?”
“Is that you, Mr. Gilbert?”
“Hello?”
01/31/10
New social media: always awkward
01/31/10
Five Principles
01/31/10
Pave the cowpaths
01/31/10
How to Pave the Cowpaths
01/31/10
Talk like a person
01/31/10
How to Talk Like a Person
• Conversational Voice• Self-Deprecating Error Messages• Ask Questions• Your vs. My• No Joking Around
01/31/10
Play well with others (Be open)
01/31/10
How to Play Well with Others
Embrace open standardsShare data outside of the bounds of your
applicationAccept external data within the sphere of your
applicationSupport two-way interoperability
01/31/10
How to Play Well with Others
Embrace open standardsShare data outside of the bounds of your
applicationAccept external data within the sphere of your
applicationSupport two-way interoperability
Embrace open standards
Share data outside of the bounds of your application
Accept external data within the sphere of your application
Support two-way interoperability
01/31/10
Learn from games
01/31/10
How to Learn from Games
01/31/10
Respect the ethical dimension
01/31/10
How not to Respect the Ethical Dimension
01/31/10
Five Principles
• Pave the Cowpaths• Talk Like a Person• Play Well with Others (Be Open)• Learn from Games• Respect the Ethical Dimension
23
01/31/10
96 Patterns
01/31/10
01/31/10
Give people a way to be identi!ed
01/31/10
Give people a way to be identi!ed
01/31/10
01/31/10
01/31/10
User CardsWhat
• A person needs more information about another person in an online community without interrupting his or her current task.
How• Open a small panel when the user hovers over a target's display name or
image.• Present a larger version of the user's display image, the user's full display
name, and other pertinent information about the target that they choose to share with the community.
• Present a Relationship Reflector. Allow the ability to subscribe to, follow, connect to, unsubscribe or block the user from this panel.
01/31/10
User Cards in the wildFriendFeed
01/31/10
User Cards in the wildFlickr
01/31/10
01/31/10
What’s your social object?
01/31/10
01/31/10
01/31/10
01/31/10
01/31/10
Give people something to do
01/31/10
01/31/10
Activities involving Objects• Collecting (passive)• Broadcasting & Publishing (one-to-many)• Sharing (more intimate)• Feedback (commenting on objects)• Communicating (two-way conversation)• Collaboration (making objects together)• Social Media (a full ecosystem)
01/31/10
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.
01/31/10
Tag an Object in the wildFlickr
01/31/10
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.
01/31/10
Ratings in the wildYelp
01/31/10
Ratings in the wildYahoo! Movies
01/31/10
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.
01/31/10
Share This in the wildThe Onion
01/31/10
Share This in the wildAdd to Any
01/31/10
Share This in the wildFacebook
01/31/10
Let the community elevate people & content they value
01/31/10
Let the community elevate people & content they value
Gently moderate
01/31/10
01/31/10
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.
01/31/10
Adding Friends in the wildFacebook
01/31/10
Adding Friends in the wildYahoo!
01/31/10
Adding Friends in the wildDopplr
01/31/10
Circles of ConnectionsWhat
• A user wants to indicate nuances in their relationships with other people to create contexts for communication and sharing.
Use When• Use to distinguish levels of participation in a
person’s network. • Use to set permissions for shared activity and
content.• Use to disambiguate real-life versus online, strong
versus weak ties.• Use this pattern to help users filter which content
to consume.
01/31/10
Circle of Connections in the wildPlaxo
01/31/10
Circle of Connections in the wildFlickr
01/31/10
Public ConversationUse When
• Use this pattern to differentiate from private conversations.
How• Allow users to create a dialog between
themselves. Provide a framework that is flexible enough to support two or more people in conversation. Provide a form field for text entry. Clearly indicate the character count for conversing.
• Allow users to block or ignore specific users that they don’t want to hear from, without disrupting the flow of conversation to other participants.
01/31/10
Public Conversation in the wildTwitter
01/31/10
Public Conversation in the wildFriendFeed
01/31/10
Enable a bridge to real life events
01/31/10
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.
01/31/10
Geo in the wildGeo on iPhone
01/31/10
Geo in the wildWhere for iPhone
01/31/10
Social Design Pattern Categories• Representations of the Self, self-expression,
identity• Activities involving social objects• Community dynamics growing out of
relationships, expressed through various contexts
01/31/10
Anti-Patterns!
01/31/10
Cargo Cult
01/31/10
Cargo Cult
01/31/10
Cargo Cult
01/31/10
Cargo Cult
01/31/10
Don’t break email
01/31/10
Don't Break Email
don’t:
do:
01/31/10
The Password Anti-Pattern
01/31/10
The Password Anti-Pattern
01/31/10
Password Anti-Pattern in the wildiLike
01/31/10
Password Anti-Pattern in the wildPlaxo
01/31/10
Ex-Boyfriend Bug
01/31/10
Potemkin Village
01/31/10
Five Anti-Patterns
• Cargo Cult Design• Don’t Break Email!• Password Anti-Pattern• Ex-Boyfriend Bug• Potemkin Village
74
01/31/10
thank you!
Christian Crumlish, CuratorYahoo! Design Pattern Librarydesign.yahoo.com@mediajunkie