Designing Social Websites

Christina Wodtke

Page about Christina

Whatis social, really?

humans

emotions

BUT THIS IS THE INTERNET

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

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.

What kind of social functionality do you need?

Social Features

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.

Howdo you design social?

B=f(P+E)

- Lewin’s Equation

Behavior is a function of a Person and his Environment

Understand the Person

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

Maslow’s Hierarchy of Needs

Self-Actualization

Esteem

Love/Belonging

Safety

Physiological

The Social Web is built here, from love and esteem

Motivation for hours(and hours and hours)of work

Kollock’s 4 Motivations for Contributing

1. Reciprocity2. Reputation3. Increased sense of

efficacy4. Attachment to and

need of a group

- Peter Kollock, UCLA

1. Reciprocity

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.

2. Reputation

3. Increased sense of efficacy

4. Attachment to and need of a group

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

Design the Environment

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.

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.

Create space by building around it

Identity

Activity Relationships

SocialSpace

Sign-

upInvitations

Distribution (Viral)

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:

SocialSpace

presenceSign-

upInvitations

Distribution (Viral)

Collab Comm

Share

Relationships

Groups Attention

Contacts

Identity

Presence

Reputation

Profile

Activity

Sign-

upInvitations

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?

Identity

Presence Reputa-tion

Profile

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

Profile Avatar

Biography

Collections

History

Identity is Context Based

Facebook- Personal LinkedIN - Professional

Avatar

Collections

PRESENCE

Presence

Status

History

Signs of life

Company

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

Reputation is…

Information used to make a value judgment about an

object or person…

Why do you need reputation?

• Key Decision #1: What are the key business objectives of your reputation system?– Build Trust– Promote Quality– Facilitate Member Matching– Sustain Loyalty

What makes reputation?

• Key decision #2: What information should be included in your user’s reputation profile?– Which actions are most relevant to the reputation

system’s users?– Which user behaviors are desirable?– For which behaviors is it possible to obtain reliable

information?

How do you present reputation?

• Key Decision #3:– Raw activity statistics. Examples: number of reviews

posted, number of transactions completed.– Scores and distinctions. Examples: star ratings (such as

Amazon reviews), numerical scores (eBay’s feedback score), numbered levels or named member tiers (Slashdot’s “moderator” and “meta-moderator” tiers) or achievement badges (eBay power seller, Amazon Top Reviewer).

– Leaderboards and other methods of displaying relative user rankings. Examples: the list of top Amazon reviewers; Epinions’ author popularity ranking.

Reputations

Badging

Rating

Named levels

Points

STRATEGIZEExercise 2: what elements do you need for identity?

PresenceReputat

ion

Profile

SITE OPTIMIZATION: SIGN-UP

Tiny changes that yield big wins

Identity

Activity Relationships

SocialSpace

Sign-

up

Invitations

Distribution (Viral)

Page about Christina

Quiz

1

23

4

Placement

Flow

1

2

3

4

Organization

Entrees

Pricing

1. $11.99

2. 12

3. twelve Increases the spending by 8.15%

per person

Increases the spending by 8.15%

per person

Avoid Embarassment

Market Price

Vino

http://online.wsj.com/article/SB123638925101858707.html

2nd cheapest bottle of wine has a high margin.

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

Get to & complete 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 target advertising

First Impressions

Goal 1: Get people to open the email- Optimize the sender- Optimize the subject

Subject Line Test Checklist

Theme Tests

Statement Type Declarative, Imperative, Interrogative

Sentence Tense Present, Past, Future

Persuasiveness Light vs. Heavy

Wildcards !! … ;)

Email ContentGoal 2: Get people to click on the email- Optimize the body (language, layout, images)- Optimize the call to action

Email Content

Email Content

Email Content

RegistrationGoal 3: Get the user to complete registration- Minimize user effort- Reduce Distraction

Registration

Relationships

Groups Attention

Contacts

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.

Contacts

Groups

Attention

Types of relationships

Groups

Attention

Connections

INVITE OPTIMIZATIONJennifer Ruffner

Identity

Activity Relationships

SocialSpace

Sign-

up

Invitations

Distribution (Viral)

Invitations

• Distribution of invitations increases the number of registrations

• Invitations often activate inactive users. Take advantage of this opportunity.

• People that are connected are more active

Goal 1: Get users sending invitations to get viral. Viral = 1 registration generates > 1 registration

Sending Invitations

Sending Invitations

Sending Invitations

Receiving InvitationsGoal 2: Use invitations to existing members to reactivate them.

Receiving Invitations

STRATEGIZEExercise 3: what kinds of relationships will you support?

Groups Attention

Contacts

Activity

Collaborate

Communicate

Share

The AOF Method

1. Defining your Activity2. Identifying your Social Objects3. Choosing your Features

Courtesy of Joshua Porter. Check out bokardo.com!

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?

2. IDENTIFYING YOURSOCIAL OBJECTS

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

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)

3. CHOOSING YOUR FEATURES

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

ConversationsInitiate

Comment

Rate and Report

Reply

Talking about talking

Sharing

In the spirit of sharing

#socialarchitecture@Cwodtke@JenG24

#ias10

Sharing is key

“How do you know which social sites are most popular? Aside from looking at the raw traffic numbers, a good indicator is data about which sites are seeing the most content shared on them.”

http://mashable.com/2009/07/20/facebook-sharing-data/

DM – JenG24 to Brent

DM – JenG24 to Google Guy

The fight for pie

User EmotionsDESIRES• I want to look smart or cool in

front of my network• I need to know who will hear

me• I want to know what to expect• It needs to be easy, easier than

email• I want to see immediate

gratification for taking action• I want to stay in touch with

people

FEARS• I don’t want to look stupid• I don’t want to make a

mistake• I don’t want to seem spammy• I feel like I’m speaking into

radio silence• I don’t know what to say• I don’t want to embarrass

myself or be 2nd to market

DM – JenG24 to Rachel

Ideals

• Reduce barriers to entry: widen the funnel of shared content

• Make the flow dead simple - everywhere• Hold the users hand throughout the process• Reward the sharer

Look Smart, not stupid• Preview the post• Awesome object

display• Never 2nd to market

• See your own update• Character count• Easy delete

I don’t want to spam my network

• Visible Visibility• Lots of contexts (topic pages, groups)

| found via Nate Johnson

I have nothing to say

• Share links• Reshare• Like• Structured forms• Comments can

be a gateway drug

People retweet links

What do they retweet?

Social is the new primary source

Rewards and Feedback• Stats• Mechanisms for

discovery• Immediate feedback• Lightweight

commenting

Metrics

ConsumersConsumersContributorsContributors

DM – JenG24 to Google Guy

Metrics

• Basic– Shares– Reshares– Likes/Recommendations– Comments– Uniques viewing– Uniques contributing– Time Spent– Page Views

• Tipping– Viewers Readers– Readers Likers– Likers Commenters– Commenters Resharers– Resharers Contributors

Collaborate

i.e. What are your nouns and verbs?

STRATEGIZE

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

Collab Comm

Share

Activity

SocialSpace

presenceSign-

upInvitations

Collab Comm

Share

Relationships

Groups Attention

Contacts

Identity

Presence

Reputation

Profile

Activity

Distribution (Viral)

Sign-

upInvitations

Viral Distribution

• Gladwell• Duncan watts

“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

Nobody knows anything. – William Goldman

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

Environment

Some Patterns

FRICTIONLESSI think, I blink

Are you sure?Really sure?Absolutely

sure?

Argh... Maybe

not

CLEARDon’t make me choose

Jam jar

A grocery store alternated allowing customers to sample 24

different flavors of jam & 6 different flavors of jam. With 24, more people came to the table

but 1/10th as many people bought jam.

A grocery store alternated allowing customers to sample 24

different flavors of jam & 6 different flavors of jam. With 24, more people came to the table

but 1/10th as many people bought jam.

Barry Schwartz, Paradox of Choice

Whateevershare

Adaptive Path, using

“Share this”

widget

Pick your channels

Slideshare

New York Times

New youtube

MEASURABLE & OPTIMIZED

Viral Coefficient

Invite-based Viral Coef. =InputX # of InvitationsX Delivery RateX Open RateX Click RateX Sign UpsX New Invitations

AT HANDSee it, use it

• Table setting?

IMPACTFULMaximize reach

Email this

Consumer

Broadcaster

Newsfeed, Network Updates

Consumer

Consumer Consumer

Consumer

Consumer

Broadcaster

Groups, Asymmetric Follow

spark

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…

TARGETEDFeatures for the most useful users

OUTREACHSocial seo

<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>

Checklist

FrictionlessImpactfulTargetedOutreach

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?

ALIGNING METRICS & DESIGN

Basic Outline

• Determine which activities your business will support.

• Choose which metrics are most important to the health of your business.

• Determine which screens support 1) and 2)• Focus like hell on those screens, testing them

to make sure they work as well as you need them to.

Ev Williams - Founder of Blogger and Twitter

At Blogger, we determined that our most critical metric was number of posts. An

increase in posts meant that people were not just creating blogs, but updating them,

and more posts would drive more readership, which would drive more users,

which would drive more posts.

Time on siteTime on siteUnique usersUnique users

DonationsDonations

# visitors + # signups+ # converstion + shared links = Donations# visitors + # signups+ # converstion + shared links = Donations

EMBRACE METRICS DRIVEN DESIGN

Loving the alien

Original

Highrise A/B testing

http://www.37signals.com/svn/posts/1525-writing-decisions-headline-tests-on-the-highrise-signup-page

Can you guess which one worked best?

1st place

4th place

3rd place15% improvement

7% improvement

30% improvement

2nd place27% improvement

YOU CAN’T OPTIMIZE YOUR WAY TO INNOVATION

but

Questions?

Christina Wodtkehttp://www.blueprintsfortheweb.com

http://www.eleganthack.comhttp://www.boxesandarrows.com

@cwodtke

Jennifer RuffnerJenniferRuffner@gmail.com

@jeng24http://www.linkedin.com/in/jengranito

A SHORT HISTORY OF ARCHITECTURE

Cave

Hut

Stone Age City

VITRUVIUS

firmitas, utilitas, venustas : : durability, convenience, beauty 

Durability

“Durability will be assured when foundations are carried down to the solid ground and materials wisely and liberally selected” Vitruvius

Frank Lloyd Wright’s Imperial Hotel, Japan, survived an earthquakeThe reflecting pool provided a source of water for fire-fighting;Cantilevered floors and balconies provided extra support for the floors;A copper roof, cannot fall on people below the way a tile roof can;Seismic separation joints, located about every 20 m along the building;Tapered walls, thicker on lower floors, increasing their strength;Suspended piping and wiring, instead of being encased in concrete, smooth curves, making them more resistant to fracture.

Technical EarthquakesSlow loading javascript fails on low bandwidth, and can cause users to accidently search for the label inside your search box. Is your site designed to be robust when things break (for example, filter out the label from the query. Or don’t place labels in fields; it reduces usage anyhow.)

I’m searching for “my architect, not

“movies, directors, actors”

Social Earthquakes

If people post jobs in discussion areas, any user can

move them to job board

If people use connection invites to spam/market, they

can be reported.

Prepare for

Technical Tremors Execution Maintenance Scale Bandwidth

Social Faultlines Innocents/Idiots Trolls Spammers Criminals

Convenience

“When the arrangement of the apartments is faultless and presents no hindrance to use, and when each class of building is assigned to its suitable and appropriate exposure” Vitruvius

Sound familiar? We’re talking

usability!

“Early in life I had to choose between honest arrogance and hypocritical humility. I chose honest arrogance and have seen no occasion to change.” Frank Lloyd Wright

Usonian houses were beautiful, human scaled.. And didn’t have closet space. Should we choose beauty over usability sometimes?

Human

Human

The Facebook Inbox is chock full of annoying non-human mails, despite the fact they know who is human and who I am connected to. Not convenient.

Bilbao did not leak. I was so proud.

I call it the "Then What?" Okay, you solved all the problems, you did all the stuff, you made nice, you loved your clients, you loved the materials, you loved the city, you're a good guy, you're a good person... and then what? What do you bring to it?

See his great TED talk http://www.ted.com/talks/frank_gehry_asks_then_what.html

Beauty (delight)

“when the appearance of the work is pleasing and in good taste, and when its members are in due proportion according to correct principles of symmetry.” Vitrvius

“Less is more.” ~ Mies

SEAGRAM BUILDING (Philip Johnson did interiors, 1957)

This logical and elegant 38-story skyscraper (525' H) has alternating horizontal bands of bronze plating and bronze-tinted glass and decorative bronze I-beams which emphasize its verticality. Placed to the rear of its site and set back from Park Avenue, it incorporates a large plaza in the front as part of the design--thus avoiding the need for set-backs. It uses granite pillars at the base and has a two-story glass-enclosed lobby.

Seagram Building

New York City

1957

Is this Beautiful?

“Less is a bore.” ~ Venturi

Is this Beautiful?

Do we dictate what is beautiful by constraining

user choice?

Or support passionate use that may not meet our

aesthetic standards?

Beautiful

ConvenientDurable

Site

Site

Julia Morgan

First Bay Tradition• Natural material

from site• Traditional Craft• Integrate in

surrounds• Each building a

unique work of art

Site=Context

Facebook- Personal LinkedIN - Professional

Humans don’t like empty spaces. Create starter objects – newsfeeds can be good.

‘I do not like ducts; I do not like pipes. I hate them really thoroughly, but because I hate them so thoroughly, I feel they have to be given their place. If I just hated them and took no care, I think they would invade the building and completely destroy it.’

The Notebooks and Drawings of Louis I. Kahn, 1962

Servant and Served Spaces

Services (settings, in this case) are

separated from served)

Services intergraded with served is easier to comprehend and

use

Centre Pompidou was designed with services revealed rather than hidden

Revealing things usually only available to employees, such as statistics can provide interest and beauty inherit to the product.

Views

Hey, it’s the Arc de

Triomphe!

Corbu’s surrealist apartment obscured views, rather than framed them to create interest

Views into people’s lives

Views into the service before

you sign up

Proportion

The Key Word is: Proportion. … Relative size, not over-all size, is the factor in determining guidelines which will satisfactorily influence attractive appearance.

Ad out of proportion to content

Ads reflect same sizes and shapes

used in design

Speed

25mph5 mph 60mph

Medieval architecture designed to be walked by, prairie houses to drive by slowly at suburban speeds, and the strip for freeway speeds

Speed

25mph 5 mph60mph

Consider speed of use in design; do not slow interface with details upon sign up, richer interface for where people linger and socialize

Movement

Gehry designed a static building to feel like it’s moving, inspired by dance

Why are our compositions so static? How should the eye move through this?

Games provide hints to new compositions, metaphors for information spaces

Gehry has been inspired recently by fish. What would a website be if it was a fish?

Twistori’s live stream of data reveals and intrigues. Do you need actual movement to engage?

“Modern Systems! Yes indeed! To approach everything in a strictly methodical manner and not to waver a hair’s breath from preconceived patterns, until genius has been strangled to death and joie de vivre stifled by the system– that is the sign of our time.” Camillo Sitte

BREAK

Reward/Healthy ecosystem

• Unique data• Instantaneous data• Healthy ecosystem

Other ideas

• Mechanical Turk• Core, Venture, Risk• AB testing• Default status

Overview

• Share what: ideas, events, breaking news, job opportunities, gossip, entertainment, pictures, videos, music, games

• Why: reputation building, knowledge proliferation, fodder for discussion & communication, way to reach out, stay in touch, acknowledgment, help each other

• With whom: friends & family, followers, current and former colleagues, work team, like minded- people, people in your field

• Where: email, in person, bookmarklets & badges, group distribution lists, blogs, twitter, social networks, aggregators (friendfeed), im, text, wiki/ intranet