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
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
20. How to Talk Like a Person
โข Conversational Voice
โข Self-Deprecating Error Messages
โข Ask Questions
โข Your vs. My
โข No Joking Around
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