Yahoo! Pattern Library & Social Design Patterns

88
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

description

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

Transcript of Yahoo! Pattern Library & Social Design Patterns

Page 1: 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

Page 2: Yahoo! Pattern Library & Social Design Patterns

01/31/10

I’m Really Glad to Be Here

Page 3: Yahoo! Pattern Library & Social Design Patterns

01/31/10

I’m Really Glad to Be Here

Page 4: Yahoo! Pattern Library & Social Design Patterns

01/31/10

I’m Really Glad to Be Here

Page 5: Yahoo! Pattern Library & Social Design Patterns

01/31/10

I’m Really Glad to Be Here

Page 6: Yahoo! Pattern Library & Social Design Patterns

01/31/10

I’m Really Glad to Be Here

Page 7: Yahoo! Pattern Library & Social Design Patterns

01/31/10

A Brief History of Patterns

Architecture

Page 8: Yahoo! Pattern Library & Social Design Patterns

01/31/10

A Brief History of Patterns

Software Engineering (invention of wiki)

Page 9: Yahoo! Pattern Library & Social Design Patterns

01/31/10

A Brief History of Patterns

User Interface (HCI or Interaction Design)

Page 10: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Yahoo’s Pattern Library (so far)

Launched in 2005:

Erin MaloneMatt LeacockChanel Wheeler

Page 11: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Yahoo’s Pattern Library (so far)

Open Version of Library Launched in 2006:

Bill ScottsucceedsMatt as curator & adds many rich patterns

Page 12: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Yahoo’s Pattern Library (so far)

Library Redesign Completed 2009

I become thethird curator,focus on socialpatterns, openinglibrary, redesign

Page 13: Yahoo! Pattern Library & Social Design Patterns

01/31/10

One Company, 100 Designs

Page 14: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Social media is always awkward when it’s new

“Hello?”

“Is that you, Mr. Gilbert?”

“Hello?”

Page 15: Yahoo! Pattern Library & Social Design Patterns

01/31/10

New social media: always awkward

Page 16: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Five Principles

Page 17: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Pave the cowpaths

Page 18: Yahoo! Pattern Library & Social Design Patterns

01/31/10

How to Pave the Cowpaths

Page 19: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Talk like a person

Page 20: Yahoo! Pattern Library & Social Design Patterns

01/31/10

How to Talk Like a Person

• Conversational Voice• Self-Deprecating Error Messages• Ask Questions• Your vs. My• No Joking Around

Page 21: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Play well with others (Be open)

Page 22: Yahoo! Pattern Library & Social Design Patterns

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

Page 23: Yahoo! Pattern Library & Social Design Patterns

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

Page 24: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Learn from games

Page 25: Yahoo! Pattern Library & Social Design Patterns

01/31/10

How to Learn from Games

Page 26: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Respect the ethical dimension

Page 27: Yahoo! Pattern Library & Social Design Patterns

01/31/10

How not to Respect the Ethical Dimension

Page 28: Yahoo! Pattern Library & Social Design Patterns

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

Page 29: Yahoo! Pattern Library & Social Design Patterns

01/31/10

96 Patterns

Page 30: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Page 31: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Give people a way to be identi!ed

Page 32: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Give people a way to be identi!ed

Page 33: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Page 34: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Page 35: Yahoo! Pattern Library & Social Design Patterns

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.

Page 36: Yahoo! Pattern Library & Social Design Patterns

01/31/10

User Cards in the wildFriendFeed

Page 37: Yahoo! Pattern Library & Social Design Patterns

01/31/10

User Cards in the wildFlickr

Page 38: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Page 39: Yahoo! Pattern Library & Social Design Patterns

01/31/10

What’s your social object?

Page 40: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Page 41: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Page 42: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Page 43: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Page 44: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Give people something to do

Page 45: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Page 46: Yahoo! Pattern Library & Social Design Patterns

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)

Page 47: Yahoo! Pattern Library & Social Design Patterns

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.

Page 48: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Tag an Object in the wildFlickr

Page 49: Yahoo! Pattern Library & Social Design Patterns

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.

Page 50: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Ratings in the wildYelp

Page 51: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Ratings in the wildYahoo! Movies

Page 52: Yahoo! Pattern Library & Social Design Patterns

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.

Page 53: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Share This in the wildThe Onion

Page 54: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Share This in the wildAdd to Any

Page 55: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Share This in the wildFacebook

Page 56: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Let the community elevate people & content they value

Page 57: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Let the community elevate people & content they value

Gently moderate

Page 58: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Page 59: Yahoo! Pattern Library & Social Design Patterns

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.

Page 60: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Adding Friends in the wildFacebook

Page 61: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Adding Friends in the wildYahoo!

Page 62: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Adding Friends in the wildDopplr

Page 63: Yahoo! Pattern Library & Social Design Patterns

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.

Page 64: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Circle of Connections in the wildPlaxo

Page 65: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Circle of Connections in the wildFlickr

Page 66: Yahoo! Pattern Library & Social Design Patterns

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.

Page 67: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Public Conversation in the wildTwitter

Page 68: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Public Conversation in the wildFriendFeed

Page 69: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Enable a bridge to real life events

Page 70: Yahoo! Pattern Library & Social Design Patterns

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.

Page 71: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Geo in the wildGeo on iPhone

Page 72: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Geo in the wildWhere for iPhone

Page 73: Yahoo! Pattern Library & Social Design Patterns

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

Page 74: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Anti-Patterns!

Page 75: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Cargo Cult

Page 76: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Cargo Cult

Page 77: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Cargo Cult

Page 78: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Cargo Cult

Page 79: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Don’t break email

Page 80: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Don't Break Email

don’t:

do:

Page 81: Yahoo! Pattern Library & Social Design Patterns

01/31/10

The Password Anti-Pattern

Page 82: Yahoo! Pattern Library & Social Design Patterns

01/31/10

The Password Anti-Pattern

Page 83: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Password Anti-Pattern in the wildiLike

Page 84: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Password Anti-Pattern in the wildPlaxo

Page 85: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Ex-Boyfriend Bug

Page 86: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Potemkin Village

Page 87: Yahoo! Pattern Library & Social Design Patterns

01/31/10

Five Anti-Patterns

• Cargo Cult Design• Don’t Break Email!• Password Anti-Pattern• Ex-Boyfriend Bug• Potemkin Village

74

Page 88: Yahoo! Pattern Library & Social Design Patterns

01/31/10

thank you!

Christian Crumlish, CuratorYahoo! Design Pattern Librarydesign.yahoo.com@mediajunkie