A series of talks I gave sponsored by the Yahoo! Developer Network, in London and Berlin, reviewing the history of UX design patterns and delving into the social design patterns project, isolating 5 principles, 96 patterns, and 5 anti-patterns
Report
Share
Report
Share
1 of 88
Download to read offline
More Related Content
Yahoo! Pattern Library & Social Design Patterns
1. YDN & IxDA-Berlin present
Yahoo! Design Pattern Library & Social Design Patterns
Christian Crumlish, Curator, Yahoo! Design Pattern Library
January 19 (London) & 21 (Berlin), 2010
01/31/10
8. A Brief History of Patterns
Software Engineering (invention of wiki)
01/31/10
9. A Brief History of Patterns
User Interface (HCI or Interaction Design)
01/31/10
10. Yahoo’s Pattern Library (so far)
Launched in 2005:
Erin Malone
Matt Leacock
Chanel Wheeler
01/31/10
11. Yahoo’s Pattern Library (so far)
Open Version of Library Launched in 2006:
Bill Scott
succeeds
Matt as curator
& adds many
rich patterns
01/31/10
12. Yahoo’s Pattern Library (so far)
Library Redesign Completed 2009
I become the
third curator,
focus on social
patterns, opening
library, redesign
01/31/10
22. How to Play Well with Others
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
23. How to Play Well with Others
Embrace open standards
Share data outside of the bounds of your
application
Accept open standards
Embrace
external data within the sphere of your
application
Share data outside of the bounds of your application
Support two-way interoperability
Accept external data within the sphere of your application
Support two-way interoperability
01/31/10
27. How not to Respect the Ethical Dimension
01/31/10
28. 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
35. User Cards
What
• 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
46. 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
47. Tag an Object
What
• 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
49. Ratings
What
• 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
52. Share This
What
• 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
59. Adding Friends
What
• 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
63. 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.
01/31/10
66. Public Conversation
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.
01/31/10
70. Geo
What
• 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
73. 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
I almost didn’t make it to Europe in January after a scary car accident just before the holidays in December that sprained my ankle rather badly and dislocated my pinkie finger, but I brought my crutch onstage for sympathy and carried on.
Pave the Cowpaths is an expression that means to put the road where they’re already naturally being established instead of trying to fight (human) nature
Dogster - Started a photo sharing product, noticed customers putting pics of pets up - niche not being served, so ended up building social network for pets
Talk Like a Person – to encourage users to act like people and relate to other people through your site, make sure they know the makers of the site are people too, and not lawyers or robots
Use established open standards so that you can build on what’s come before and so that other people can build on your work
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
Games are social: they have rules but people play together and create the final result themselves. Social spaces can learn from this. The picture shows Lombard Street in San Francisco, “the crookedest street in the world,” turned into the child’s game Candyland.
Ludicorp was a company (ludi- is a Latin root meaning “play” or “playful”) that made a game called Game Neverending. Then they made a site called Flickr.
This shows an old-fashioned US patent medicine making medical claims that re probably not true. Social design involves literally playing with people’s lives and you have to be careful or at least aware of the ethical aspects of every design choice you make.
Tagged tricks new users into spamming their friends.
Visualizing the pattern language as a cycle
Give people a way to identify themselves and be identified.
the Internet doesn’t know which John Smith you are (this is Personas from MIT)
Patterns related to People
Erin sometimes called ID cards or identity cards - short, mini, lead in to profile
Social Objects give people something to talk about and something to do. The slides show a wide range of social objects. Give users a reason to rally. Why would someone come to your site? What’s your social object ? Friendster and the fakesters Christian
This is a picture of a “barn raising” – a community of farmers comes together to build a barn for a member of the community. Give people something to do together, so they can start small and build up their level of engagement over time
Patterns related to Activities involving Social Objects
Erin
Erin
Xian
Gently Moderate Let the Community elevate people and content they value - of the people, by the people with some gentle oversight Reputation, recommendations gentle moderation Flickr - interestingness - views, comments, favorites plus some gentle algorythm to elevate the objects the community values Erin
Patterns related to connecting, community, and relationships
Erin
Erin
Erin
Enable a bridge to real life – acitvities, events, geolocation The picture is from a movie in which the main characters decide to “put on a show” with all their firends. Let’s put on a show = spontaneous gatherings, broadcasting of gatherings - enable, embrace location and mobile tools - and the crossover
Cargo Cult – people on an island who meet more technologically advanced people and think the consumer good (the “cargo”) can be brought back by imitating the shape of an airplane, a landing strip, a military installation. Patterns - used blindly without understanding context and need
Zoomr copied flickr: leaving the e out of name, tagline, source code AOL homepage - copy Yahoo including source code iPhone - Pre, Etc - other phones
Don’t Break Email – if you use email to notify users, let them use their reply function The picture shows a door that goes nowhere in the Winchester Mystery House in California
With Facebook a reply will bounce but with Basecamp it will create a followup comment.
The Password Anti-Pattern – don’t trick people into giving away their passwords to anyone who asks
Jeremy Keith was an early identifier of this pattern, in his journal on his website Adactio
Ex-Boyfriend Bug Dodgeball discovered this because it would sometimes notify ex-lovers that they were nearby, causing problems. Just because people seem related in your social graph it doesn’t mean they want to be connected.
A Potemkin Village is a fake village designed to impress someone or make them think there are more people living there than really are. In social design it means creating too many empty discussion boards before a site has even launched