iai workshop for ia summit 2010 - designing social interfaces

63
Designing Social Interfaces christian crumlish & erin malone 5 practices 5 principles 5 anti-patterns

Upload: erin-malone

Post on 17-Aug-2014

6.311 views

Category:

Design


1 download

DESCRIPTION

Patterns, Principles, Practices for Designing Social interfaces. Slight changes to previous talks and a new design template.

TRANSCRIPT

Page 1: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Designing Social Interfaceschristian crumlish & erin malone

5 practices5 principles

5 anti-patterns

Page 2: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

A little about us: erin malone

@emalone

Page 3: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

A little about us: erin malone

@emalone

Page 4: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

A little about us: christian crumlish

@mediajunkie

Page 5: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

A little about us: christian crumlish

@mediajunkie

Page 6: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

People are unpredictable

Page 7: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

new social media : always awkward

Page 8: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Designing social requires different thinking

Organicvs Static

Emotional vs Data

Relationships vs Transactions

Continuumvs One Grand Gesture

~ Deb Shultz, Altimeter Group photo © erin malone

Page 9: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

5 Principles

Page 10: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Pave the cowpaths

Page 11: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Dogster started as a photosharing service. Shifted focus to pets once company saw people were

primarily uploading pics and talking about their dogs.

Page 12: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Talk like a person

Page 13: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Do you want to talk to your customers like this?

Or like this?

Page 14: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

How to talk like a person

Conversational VoiceSelf-Deprecating Error MessagesAsk QuestionsYour vs. MyNo Joking Around

Page 15: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Be open. Play well with others

Page 16: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Embrace open standardsShare data outside of the bounds of your applicationAccept external data within the sphere of your applicationSupport two-way interoperability

Page 17: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Learn from games

Page 18: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Learn from games

What are Game Mechanics?

The systems and features that make games fun, compelling and addictive.

~Amy Jo Kim

Page 19: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

How to learn from games

Game MechanicsCollectinggives bragging rights, encourages completion

Pointsgame points by systems, social points by others, drives loyalty, drives behavior unlock new powers or access

Feedbacksocial feedback drives engagementaccelerates mastery and adds fun

Exchangesstructured social interactionsexplicit or implicit

Customizationcharacter or interface

Page 20: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Respect the ethical dimension

Page 21: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Respect the ethical dimension

Some of the forces that must be balanced, to apply many of these patterns, involve ethical dilemmas

Page 22: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

5 Practicesor a brief tour of 96 patterns

Page 23: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

The Ecosystem

Page 24: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Give people a way to be identified

Page 25: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

And to identify themselves

Page 26: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Self

Page 27: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Attribution and Avatars

Identity doesn’t alway have to manifest itself in a complicated or robust pro!le.

Page 28: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

User Cards

Identity doesn’t alway have to manifest itself in a complicated or robust pro!le.

Page 29: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Make sure there is a “there” there. What’s your social object?

Page 30: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

The Social Object, in a nutshell, is the reason two people are talking to each other, as opposed to talking to somebody else.

Page 31: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Social Networks form around Social Objects, not the other way around.

~ Hugh MacLeod GapingVoid.com

Page 32: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Give people something to do

Page 33: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

It’s a continuum

Page 34: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Activities involving objects

Page 35: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

It’s a continuum

CollectingSharing

Broadcasting & PublishingFeedback

CommunicatingCollaborationSocial Media

OneOne to oneOne to many

One to one, One to an objectOne to one, One to many, Many to manyMany to manyEcosystem

Page 36: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Activities involving objects

Books: ratings, reviews, search

Public conversation

Page 37: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Activities involving objects

Photos: collecting, sharing, comments, favoriting, groups, broadcasting

Page 38: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Activities involving objects

Collecting, Ratings, Reviews

Tagging

Sharing

Labels, ratings, reviews, levels

Page 39: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Enable a bridge to real life

Page 40: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Bridging Real Life

Page 41: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Taking it offline

Geo-Mobile

Face-to-face meeting

Page 42: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

And then back online

After the PartyFace-to-face meeting

Page 43: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Let the community elevate people & content they value

Gently moderate

Page 44: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Connections & Community

Page 45: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Find People

Enabling people to make connections

Adding Friends

Fans & Fame

Circles of Connections

Page 46: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Enter text here

Norms

Model Citizen

Report Abuse

Page 47: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

5 Anti-Patterns

Page 48: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Cargo Cult

Page 49: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Cargo Cult

Page 50: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Cargo Cult

Page 51: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Don’t break email

Page 52: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Don’t break email

Facebook breaks email since you can’t reply to messages that arrive in the inbox.Basecamp allows people to reply as they are accustomed to and the message goes back into the stream on the site.

Page 53: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

The Password Anti-Pattern

Page 54: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

The Password Anti-Pattern

iLike

Plaxo

Page 55: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

The Password Anti-Pattern

yelp

Page 56: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

The Ex-boyfriend bug

Page 57: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Potemkin Village

Page 58: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Instead of building a Potemkin Village, the architects of the relaunched dead.net site started with a judicious few groups and then let the community spawn the rest.

Page 59: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

The Ecosystem - it’s balance with tradeoffs

Page 61: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

How toPlay the Game

Page 62: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Game Goals

• Build a social digital product around an object for a speci!c audience delivered in a speci!c way

• Deliver a well rounded product (with features across Identity, Activities and Relationships)

• Build products in a de!ned time frame

• Work as a team to collaborate and build the best products

• Play against another team

Page 63: IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

Game Play