designing the social web, web 2.0 expo nyc version

124
esigning ocial Websites Christina Wodtke

Post on 19-Sep-2014

14 views

Category:

Technology


3 download

DESCRIPTION

3 hour workshop on how to select, design and optimize social web functionality. Covers everything from what goes on a profile, to optimizing invitation flows to viral distribution.

TRANSCRIPT

Page 1: Designing the Social Web,  Web 2.0 expo Nyc version

Designing Social Websites

Christina Wodtke

Page 2: Designing the Social Web,  Web 2.0 expo Nyc version

Page about Christina

Page 3: Designing the Social Web,  Web 2.0 expo Nyc version

Audience question: “what do you want?” I don’t want to ask everyone to say what they want, but here I like to ask a few folks to offer “if you don’t’ get X, will you leave mad?

YouWhat do you want?

Page 4: Designing the Social Web,  Web 2.0 expo Nyc version

Jargon Check

Social MediaSocial SoftwareSocial NetworkThe Social WebThe Social GraphCommunitiesWeb 2.0UGC

TwitterFacebookLinkedInMySpaceFlickr

Page 5: Designing the Social Web,  Web 2.0 expo Nyc version

Whatis social, really?

Page 6: Designing the Social Web,  Web 2.0 expo Nyc version

Social Software can be loosely defined as software which supports, extends, or derives added value from, human social behavior - message-boards, musical taste-sharing, photo-sharing, instant messaging, mailing lists, social networking.

Social XXX• Usenet• Forums• Email• Mailing lists• Groupware• Social Networks Services• Social Software• Social Media

Nothing New

Page 7: Designing the Social Web,  Web 2.0 expo Nyc version

The Social Webis a digital space where data about human interactions is as important as other data types for providing value

Communityis when those humans care about each other.

Page 8: Designing the Social Web,  Web 2.0 expo Nyc version

What kind of social do you need?

Social Sites

Social Marketing

Social Support

When you want to leverage

your customers to promote

your product

Customers help each other to reduce support

costsYour site is social at the core: blogs,

networks, photosharing.

Page 9: Designing the Social Web,  Web 2.0 expo Nyc version

Howdo you design social?

Page 10: Designing the Social Web,  Web 2.0 expo Nyc version

B=f(P+E)

- Lewin’s Equation

Behavior is a function of a Person and his Environment

Page 11: Designing the Social Web,  Web 2.0 expo Nyc version

Understand the Person

Page 12: Designing the Social Web,  Web 2.0 expo Nyc version

Maslow’s Hierarchy of Needs

5. Self-Actualization

4. Esteem

3. Love/Belonging

2. Safety

1. Physiological

Morality,Creativity.

Spontaneity,Problem solving,Lack of prejudice

Self-esteem,Confidence, Achievement,

Respect by others

Friendship, Family, Sexual intimacy

Security of body, or employment, of resources,Of morality, or the family, of health , of property

Breathing, Food, Water, Sex, Sleep, Homeostasis, Excretion

Page 13: Designing the Social Web,  Web 2.0 expo Nyc version

Maslow’s Hierarchy of Needs

Self-Actualization

Esteem

Love/Belonging

Safety

Physiological

The Social Web is built here, from love and esteem

Page 15: Designing the Social Web,  Web 2.0 expo Nyc version

Motivation for hours(and hours and hours)of work

Page 16: Designing the Social Web,  Web 2.0 expo Nyc version

Kollock’s 4 Motivations for Contributing

1. Reciprocity2. Reputation3. Increased sense of

efficacy4. Attachment to and

need of a group

- Peter Kollock, UCLA

Page 17: Designing the Social Web,  Web 2.0 expo Nyc version

Reciprocity

Page 18: Designing the Social Web,  Web 2.0 expo Nyc version

What's the motivation of behind these people actually interacting and

participating? … people want to share with the community what they believe to be important …. and they want to see their name in lights. They want to see their little icon on the front page, their username on the front page, so other people can see it.

Reputation

Page 19: Designing the Social Web,  Web 2.0 expo Nyc version

Increased sense of efficacy

Page 20: Designing the Social Web,  Web 2.0 expo Nyc version

Attachment to and need of a group

Page 21: Designing the Social Web,  Web 2.0 expo Nyc version

The New Third Place?

“All great societies provide informal meeting places, like the Forum in ancient Rome or a contemporary English pub. But since World War II, America has ceased doing so. The neighborhood tavern hasn't followed the middle class out to the suburbs...” -- Ray Oldenburg

Page 22: Designing the Social Web,  Web 2.0 expo Nyc version

Design the Environment

Page 23: Designing the Social Web,  Web 2.0 expo Nyc version

205 Structure Follows Social Spaces

ConflictNo building ever feels right to the people in it unless the physical spaces (defined by columns, walls, and ceilings) are congruent with the social spaces (defined by activities and human groups).

ResolutionA first principle of construction; on no account allow the engineering to dictate the building's form. Place the load bearing elements- the columns and the walls and floors- according to the social spaces of the building; never modify the social spaces to conform to the engineering structure of the building.

Page 24: Designing the Social Web,  Web 2.0 expo Nyc version

36. Degrees of publicness

Conflict: People are different, and the way they want to place their houses in a neighborhood is one of the most basic kinds of difference.

Resolution: Make a clear distinction between three kinds of homes―those on quiet backwaters, those on busy streets, and those that are more or less in-between. Make sure that those on quiet backwaters are on twisting paths, and that these houses are themselves physically secluded; make sure that the more public houses are on busy streets with many people passing by all day long and that the houses themselves are exposed to the passers-by. The in-between houses may then be located on the paths halfway between the other two. Give every neighborhood about an equal number of these three kinds of homes.

Page 25: Designing the Social Web,  Web 2.0 expo Nyc version

Create space by building around it

Page 26: Designing the Social Web,  Web 2.0 expo Nyc version

Identity

Activity Relationships

SocialSpace

Sign-

upInvitations

Distribution (Viral)Distribution (Viral)

Page 27: Designing the Social Web,  Web 2.0 expo Nyc version

TOWNS

The language begins with patterns that define towns and communities. These patterns can never be designed or built in one fell swoop - but patient piecemeal growth, designed in such a way that every individual act is always helping to create or generate these larger global patterns, will, slowly and surely, over the years, make a community that has these global patterns in it.

BUILDINGS

We now, start that part of the language which gives shape to individual buildings. These are the patterns which can be "designed)' or "built”- the patterns which define the individual buildings and the space between buildings; where we are dealing for the first time with Patterns that are under the control of individuals or small groups of individuals, who are able to build the patterns all at once:

Page 28: Designing the Social Web,  Web 2.0 expo Nyc version

SocialSpace

presenceSign-

upInvitations

Distribution (Viral)

Collab Comm

Share

Relationships

Groups Attention

Contacts

Identity

Presence

Reputation

Profile

Activity

Sign-

upInvitations

Distribution (Viral)

Page 29: Designing the Social Web,  Web 2.0 expo Nyc version

StrategizeExercise 1: brainstorm a

new feature or site area that brings a appropriate community to your website.

Things to think about:

• Business goals: how does this community further the needs of the company?

• User goals: what makes this community attractive in a time when they have a hundred other places vying for their attention. What is the personal worth of the tools?

• What if no one shows up, can it still have value?• Community nature: will this be a true community, or will this

be a collective wisdom tool? Think about the spectrum.• Approach to Creation: can you partner. rather than build?

Page 30: Designing the Social Web,  Web 2.0 expo Nyc version

Identity

Presence Reputa-tion

Profile

Page 31: Designing the Social Web,  Web 2.0 expo Nyc version

If you were going to build a piece of social software to support large and long-lived

groups, what would you design for? The first thing you would design for is handles the user can invest in.

Clay Shirky, A Group Is Its Own Worst Enemy

http://shirky.com/writings/group_enemy.html

PROFILE

Page 32: Designing the Social Web,  Web 2.0 expo Nyc version

Profile Avatar

Biography

Collections

History

Page 33: Designing the Social Web,  Web 2.0 expo Nyc version

Identity is Context Based

Facebook- Personal LinkedIN - Professional

Page 34: Designing the Social Web,  Web 2.0 expo Nyc version

Avatar

Page 35: Designing the Social Web,  Web 2.0 expo Nyc version

Collections

Page 36: Designing the Social Web,  Web 2.0 expo Nyc version

PRESENCE

Page 37: Designing the Social Web,  Web 2.0 expo Nyc version

Presence Status

History

Signs of life

Company

Page 38: Designing the Social Web,  Web 2.0 expo Nyc version

Second, you have to design a way for there to

be members in good standing. Have to design some way in which good

works get recognized. The minimal way is, posts

appear with identity. You can do more sophisticated things like having formal

karma or "member since."

REPUTATION

Page 39: Designing the Social Web,  Web 2.0 expo Nyc version

Reputation is…

Information used to make a value judgment about an

object or person…

Page 40: Designing the Social Web,  Web 2.0 expo Nyc version

Reputations

Badging

Rating

Named levels

Points

Page 41: Designing the Social Web,  Web 2.0 expo Nyc version

STRATEGIZEExercise 2: what elements do you need for identity?

Presence Reputation

Profile

Page 42: Designing the Social Web,  Web 2.0 expo Nyc version

SITE OPTIMIZATION: SIGN-UP

Tiny changes that yield big wins

Identity

Activity Relationships

SocialSpace

Sign-

up

Invitations

Distribution (Viral)Distribution (Viral)

Page 43: Designing the Social Web,  Web 2.0 expo Nyc version
Page 44: Designing the Social Web,  Web 2.0 expo Nyc version
Page 45: Designing the Social Web,  Web 2.0 expo Nyc version

Placement

Page 46: Designing the Social Web,  Web 2.0 expo Nyc version

Flow – Quiz

1

23

Page 47: Designing the Social Web,  Web 2.0 expo Nyc version

Flow

1

2

3

4

Page 48: Designing the Social Web,  Web 2.0 expo Nyc version

Organization

Entrees

Page 49: Designing the Social Web,  Web 2.0 expo Nyc version

Finishing Touches

A. $12.99

B. 12

C. twelve Increases the bill by and average of $5.55

Page 50: Designing the Social Web,  Web 2.0 expo Nyc version

Avoid Embarassment

Market Price

Page 51: Designing the Social Web,  Web 2.0 expo Nyc version

Increasing Conversion

Users Entering

Flow

- Increase Entry Points- Increase social

outreach

- Make it dead simple- Hold their hand- Reward them

Users Completing

Flow

Introduce social learning throughout these flows to teach the user how to user the site

Page 52: Designing the Social Web,  Web 2.0 expo Nyc version

Registration• Registered users is a key metric for success• Once a user is registered:

– You have a way to reach out to them– You have some key demographics to advertise

against

Page 53: Designing the Social Web,  Web 2.0 expo Nyc version

First Impressions

Page 54: Designing the Social Web,  Web 2.0 expo Nyc version

Subject Line Checklist

Theme Tests

Statement Type Declarative, Imperative, Interrogative

Sentence Tense Present, Past, Future

Persuasiveness Light vs. Heavy

Wildcards !! … ;)

Page 55: Designing the Social Web,  Web 2.0 expo Nyc version

Email Content

Page 56: Designing the Social Web,  Web 2.0 expo Nyc version

Email Content

Page 57: Designing the Social Web,  Web 2.0 expo Nyc version

Email Content

Page 58: Designing the Social Web,  Web 2.0 expo Nyc version

Email Content

Page 59: Designing the Social Web,  Web 2.0 expo Nyc version

Registration

Page 60: Designing the Social Web,  Web 2.0 expo Nyc version

Registration

Page 61: Designing the Social Web,  Web 2.0 expo Nyc version
Page 62: Designing the Social Web,  Web 2.0 expo Nyc version

People you know are already here

Page 63: Designing the Social Web,  Web 2.0 expo Nyc version

Relationships

Groups Attention

Contacts

Page 64: Designing the Social Web,  Web 2.0 expo Nyc version

you have to find a way to spare the group from scale.

Scale alone kills conversations,

because conversations require dense two-way conversations.

[Dunbar] found that the MAXIMUM number of people that a person could keep up with socially at any given time, gossip maintenance, was 150. This doesn't mean that people don't have 150 people in

their social network, but that they only keep tabs on 150 people max at

any given point.

Page 65: Designing the Social Web,  Web 2.0 expo Nyc version

Contacts

Groups

Attention

Types of relationships

Page 66: Designing the Social Web,  Web 2.0 expo Nyc version

Groups

• 1.8% of all users write morethan 70% of all Wikipediaarticles• .003% of digg’s users areresponsible for 56% of thestories on the site’s home page• .o64% creator to consumerration on YouTubeSource: http://www.lukew.com/ff/entry.asp?448

Page 67: Designing the Social Web,  Web 2.0 expo Nyc version

Attention

Twitter Users• 10% of users account for 90%of production• 50% have not updated status inpast 7 days• 55% are not following anyone• 52% have no followersSource: Inside Twitter study, Sysomos June 2009State of the Twittersphere, Hubspot, June 2009

Page 68: Designing the Social Web,  Web 2.0 expo Nyc version

Connections

• 10% of users account for30% of production• 12% of Facebook usersupdate their status daily• 40% of Facebook users haveupdated status in past 7 days• 1.89% of page views arecontribution (photos,content, videos, events)Source: Facebook statistics: http://www.facebook.com/press/info.php?statisticsFacebook app data for friend updates (300+ users)

Page 69: Designing the Social Web,  Web 2.0 expo Nyc version

INVITE OPTIMIZATIONJennifer Ruffner

Identity

Activity Relationships

SocialSpace

Sign-

up

Invitations

Distribution (Viral)Distribution (Viral)

Page 70: Designing the Social Web,  Web 2.0 expo Nyc version

Invitations• Viral distribution increases the number of

unique users on the site• People that are connected are more active• When they enter that flow you can present

them with more interactions that they are more wiling to take

Page 71: Designing the Social Web,  Web 2.0 expo Nyc version

Sending Invitations

Page 72: Designing the Social Web,  Web 2.0 expo Nyc version

Sending Invitations

Page 73: Designing the Social Web,  Web 2.0 expo Nyc version

Sending Invitations

Page 74: Designing the Social Web,  Web 2.0 expo Nyc version

Receiving Invitations

Page 75: Designing the Social Web,  Web 2.0 expo Nyc version

Receiving Invitations

Page 76: Designing the Social Web,  Web 2.0 expo Nyc version

STRATEGIZEExercise 3: what kinds of relationships will you support?

Groups Attention

Contacts

Page 77: Designing the Social Web,  Web 2.0 expo Nyc version

Activity

Collaborate

Communicate

Share

Page 78: Designing the Social Web,  Web 2.0 expo Nyc version

The AOF Method1. Defining your Activity2. Identifying your Social Objects3. Choosing your Features

Courtesy of Joshua Porter. Check out bokardo.com!

Page 79: Designing the Social Web,  Web 2.0 expo Nyc version
Page 80: Designing the Social Web,  Web 2.0 expo Nyc version

Classic Question • Who are your users?

Better Question• What are your users doing?

• What do people have to do to make you successful?• What are you making people better at?• What are your users passionate about?

Page 81: Designing the Social Web,  Web 2.0 expo Nyc version

2. IDENTIFYING YOURSOCIAL OBJECTS

Page 82: Designing the Social Web,  Web 2.0 expo Nyc version

The term “social networking” makes little sense if we leave out the objects that mediate the ties between people. Think about the object as the reason why people affiliate with each specific other and not just anyone.

Jyri Engeström

Page 83: Designing the Social Web,  Web 2.0 expo Nyc version
Page 84: Designing the Social Web,  Web 2.0 expo Nyc version
Page 85: Designing the Social Web,  Web 2.0 expo Nyc version

What are Social Objects?

• Social objects can be ideas, people, or physical objects.

• Social objects influence social interaction...they change the way people interact with each other.

• By interacting through/with social objects, people meet others they might not otherwise know.

• Social objects can be the reason why people have an interaction or form a relationship.

Joshua Porter (bokardo.com)

Page 86: Designing the Social Web,  Web 2.0 expo Nyc version

3. CHOOSING YOUR FEATURES

Page 87: Designing the Social Web,  Web 2.0 expo Nyc version
Page 88: Designing the Social Web,  Web 2.0 expo Nyc version

Verb! That’s what’s happening…

Nouns (objects) Verbs (actions) Social Verbs (viral actions)

Videos Play, stop, edit, store upload

Share, comment on, embed in blog, rate, reply to

Articles Read, archive, quote, print

Share, comment on, annotate, link to

Photos Store, view, add to favorites, digitally edit, make prints

Share, comment on, embed in blog, link to, tag

Products Read, add to cart, purchase, add to wishlist

Share, add to wedding registry, comment on rate tag, discuss, review

Page 89: Designing the Social Web,  Web 2.0 expo Nyc version

ConversationsInitiate

Comment

Rate and Report

Reply

Page 90: Designing the Social Web,  Web 2.0 expo Nyc version

Talking about talking

Page 91: Designing the Social Web,  Web 2.0 expo Nyc version

Sharing

Page 92: Designing the Social Web,  Web 2.0 expo Nyc version

Collaborate

Page 93: Designing the Social Web,  Web 2.0 expo Nyc version

i.e. What are your nouns and verbs?

STRATEGIZEExercise 4: what are the social objects and what do people do?

Collab Comm

Share

Activity

Page 94: Designing the Social Web,  Web 2.0 expo Nyc version

SocialSpace

presenceSign-

upInvitations

Collab Comm

Share

Relationships

Groups Attention

Contacts

Identity

Presence

Reputation

Profile

Activity

Distribution (Viral)

Sign-

upInvitations

Page 95: Designing the Social Web,  Web 2.0 expo Nyc version

Viral Distribution

Page 96: Designing the Social Web,  Web 2.0 expo Nyc version

• Gladwell• Duncan watts

Page 97: Designing the Social Web,  Web 2.0 expo Nyc version

“There was the president of the Hush Puppies company, of Rockford, Michigan, population thirty-eight hundred, sharing a stage with Calvin Klein and Donna Karan and Isaac Mizrahi-and all because some kids in the East Village began combing through thrift shops for old Dukes. Fashion was at the mercy of those kids, whoever they were, and it was a wonderful thing if the kids picked you, but a scary thing, too, because it meant

that cool was something you could not control. You needed someone to find cool and tell you what it was.”

- Malcom Gladwell

Page 98: Designing the Social Web,  Web 2.0 expo Nyc version

Nobody knows anything. – William Goldman

Page 99: Designing the Social Web,  Web 2.0 expo Nyc version

B=f(P,E)Behavior is a function of a Person and his

Environment

Page 100: Designing the Social Web,  Web 2.0 expo Nyc version

Some Patterns

Page 101: Designing the Social Web,  Web 2.0 expo Nyc version

FRICTIONLESSI think, I blink

Page 102: Designing the Social Web,  Web 2.0 expo Nyc version
Page 103: Designing the Social Web,  Web 2.0 expo Nyc version
Page 104: Designing the Social Web,  Web 2.0 expo Nyc version

AT HANDSee it, use it

Page 105: Designing the Social Web,  Web 2.0 expo Nyc version

• Table setting?

Page 106: Designing the Social Web,  Web 2.0 expo Nyc version
Page 107: Designing the Social Web,  Web 2.0 expo Nyc version

IMPACTFULMaximize reach

Page 108: Designing the Social Web,  Web 2.0 expo Nyc version

Email this

Page 109: Designing the Social Web,  Web 2.0 expo Nyc version

Newsfeed, Network Updates

Page 110: Designing the Social Web,  Web 2.0 expo Nyc version

Groups, Asymmetric Follow

Page 111: Designing the Social Web,  Web 2.0 expo Nyc version
Page 112: Designing the Social Web,  Web 2.0 expo Nyc version

Relationship antipatternsHigh-level antipatterns

• Explicit “Will you be my friend” requests• Teach a man to be phished (adactio)• Don’t break email (do-not-reply)• Auto-faux-pas (notification of rejection / unsub /

delinking / re-follow)• Having to spam my friends…

Page 113: Designing the Social Web,  Web 2.0 expo Nyc version

TARGETEDFeatures for the most useful users

Page 114: Designing the Social Web,  Web 2.0 expo Nyc version
Page 115: Designing the Social Web,  Web 2.0 expo Nyc version
Page 116: Designing the Social Web,  Web 2.0 expo Nyc version

OUTREACHSocial seo

Page 117: Designing the Social Web,  Web 2.0 expo Nyc version

<meta name="description" content="Find cheap airline tickets, hotels, great cruise and vacation packages, honeymoon travel guides, flight information and more, with Yahoo! Travel." /> <meta name="verify-v1" content="hfk2kPTdsyPJIULFv58St5zM/BKR4WjvWpVSbgr23vA=" /><meta name="y_key" content="17f2f671d47e7697" /><title>Yahoo! Travel - Airline tickets, cheap hotels, cruises, vacations & honeymoon travel</title>

Page 118: Designing the Social Web,  Web 2.0 expo Nyc version
Page 119: Designing the Social Web,  Web 2.0 expo Nyc version

Whateevershare

Adaptive Path, using

“Share this”

widget

Page 120: Designing the Social Web,  Web 2.0 expo Nyc version

Pick your channels

Slideshare

New York Times

Page 121: Designing the Social Web,  Web 2.0 expo Nyc version
Page 122: Designing the Social Web,  Web 2.0 expo Nyc version

Checklist

FrictionlessImpactfulTargetedOutreach

Page 123: Designing the Social Web,  Web 2.0 expo Nyc version

DISTRIBUTION EXERCISE

Think about how you will pull people in…How do people share?With whom do they share?Where and how many of those tools do you place?