Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Designing the Social Web, Web 2.0 expo Nyc version


Hier ansehen

1 von 124 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (20)


Ähnlich wie Designing the Social Web, Web 2.0 expo Nyc version (20)

Weitere von Christina Wodtke (20)


Aktuellste (20)

Designing the Social Web, Web 2.0 expo Nyc version

  1. 1. Designing <br />Social Websites <br />Christina Wodtke<br />
  2. 2. Page about Christina<br />
  3. 3. 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?<br />You<br />What do you want?<br />
  4. 4. Twitter<br />Facebook<br />LinkedIn<br />MySpace<br />Flickr<br />Social Media<br />Social Software<br />Social Network<br />The Social Web<br />The Social Graph<br />Communities<br />Web 2.0<br />UGC<br />Jargon Check<br />
  5. 5. What<br />is social, really?<br />
  6. 6. 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. <br />Social XXX<br />Usenet<br />Forums<br />Email<br />Mailing lists<br />Groupware<br />Social Networks Services<br />Social Software<br />Social Media<br />Nothing New<br />
  7. 7. The Social Web<br />is a digital space where data about human interactions is as important as other data types for providing value<br />Community<br />is when those humans care about each other. <br />
  8. 8. What kind of social do you need?<br />Social Marketing<br />Social Support<br />Social Sites<br />When you want to leverage your customers to promote your product<br />Customers help each other to reduce support costs<br />Your site is social at the core: blogs, networks, photosharing.<br />
  9. 9. How<br />do you design social?<br />
  10. 10. B=f(P+E)<br />Behavior is a function of a Person and his Environment<br />- Lewin’s Equation<br />
  11. 11. Understand the Person<br />
  12. 12. Maslow’s Hierarchy of Needs<br />Morality,<br />Creativity.<br />Spontaneity,<br />Problem solving,<br />Lack of prejudice<br />5. Self-Actualization<br />4. Esteem<br />3. Love/Belonging<br />2. Safety<br />1. Physiological<br />Self-esteem,<br />Confidence, Achievement,<br />Respect by others<br />Friendship, Family, Sexual intimacy<br />Security of body, or employment, of resources,<br />Of morality, or the family, of health , of property<br />Breathing, Food, Water, Sex, Sleep, Homeostasis, Excretion<br />
  13. 13. Maslow’s Hierarchy of Needs<br />Self-Actualization<br />Esteem<br />Love/Belonging<br />Safety<br />Physiological<br />The Social Web is built here, from love and esteem<br />
  14. 14. O’Reilly Report on Facebook<br />The Facebook Application Platform<br />
  15. 15. Motivation for hours<br />(and hours and hours)<br />of work<br />
  16. 16. Kollock’s 4 Motivationsfor Contributing<br />Reciprocity<br />Reputation<br />Increased sense of efficacy<br />Attachment to and need of a group<br />- Peter Kollock, UCLA<br />
  17. 17. Reciprocity<br />
  18. 18. Reputation<br />What&apos;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.<br />
  19. 19. Increased sense of efficacy<br />
  20. 20. Attachment to and need of a group<br />
  21. 21. The New Third Place?<br />“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&apos;t followed the middle class out to the suburbs...” -- Ray Oldenburg <br />
  22. 22. Design the Environment<br />
  23. 23. 205 Structure Follows Social Spaces<br />Conflict<br />No 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).<br />Resolution<br />A first principle of construction; on no account allow the engineering to dictate the building&apos;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. <br />
  24. 24. 36. Degrees of publicness<br />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.<br />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.<br />
  25. 25. Create space by building around it<br />
  26. 26. Identity<br />Sign-up<br />Invitations<br />Social<br />Space<br />Activity<br />Relationships<br />Distribution (Viral)<br />Distribution (Viral)<br />
  27. 27.
  28. 28. Share<br />Contacts<br />Profile<br />Identity<br />Sign-up<br />Sign-up<br />Invitations<br />Invitations<br />presence<br />Collab<br />Comm<br />Groups<br />Attention<br />Presence<br />Reputation<br />Social<br />Space<br />Relationships<br />Activity<br />Distribution (Viral)<br />Distribution (Viral)<br />
  29. 29. Strategize<br />Exercise 1: brainstorm a new feature or site area that brings a appropriate community to your website. <br />Things to think about: <br /><ul><li>Business goals: how does this community further the needs of the company?
  30. 30. 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?
  31. 31. What if no one shows up, can it still have value?
  32. 32. Community nature: will this be a true community, or will this be a collective wisdom tool? Think about the spectrum.
  33. 33. Approach to Creation: can you partner. rather than build?</li></li></ul><li>Profile<br />Presence<br />Reputa-tion<br />Identity<br />
  34. 34. 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. <br />Profile<br />Clay Shirky, A Group Is Its Own Worst Enemy<br />http://shirky.com/writings/group_enemy.html<br />
  35. 35. Profile <br />Avatar<br />Biography<br />Collections<br />History<br />
  36. 36. Identity is Context Based<br />Facebook- Personal<br />LinkedIN - Professional<br />
  37. 37. Avatar <br />
  38. 38. Collections<br />
  39. 39. Presence<br />
  40. 40. Presence <br />Signs of life<br />Status<br />History<br />Company<br />
  41. 41. 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 &quot;member since.&quot; <br />Reputation<br />
  42. 42. Reputation is…<br />Information used to make avalue judgment about an object or person…<br />
  43. 43. Reputations<br />Named levels<br />Badging<br />Rating<br />Points<br />
  44. 44.
  45. 45. Strategize<br />Exercise 2: what elements do you need for identity?<br />Profile<br />Presence<br />Reputation<br />
  46. 46. Site Optimization: Sign-up<br />Tiny changes that yield big wins<br />Identity<br />Sign-up<br />Invitations<br />Social<br />Space<br />Activity<br />Relationships<br />Distribution (Viral)<br />Distribution (Viral)<br />
  47. 47.
  48. 48.
  49. 49. Placement<br />
  50. 50. Flow – Quiz <br />2<br />3<br />1<br />
  51. 51. Flow<br />3<br />2<br />4<br />1<br />
  52. 52. Organization<br />Entrees<br />
  53. 53. Finishing Touches<br />A. $12.99<br />B. 12<br />C. twelve<br />Increases the bill by and average of $5.55<br />
  54. 54. Avoid Embarassment<br />Market Price<br />
  55. 55. Increasing Conversion<br />Users Entering Flow<br />Users Completing Flow<br /><ul><li> Increase Entry Points
  56. 56. Increase social outreach
  57. 57. Make it dead simple
  58. 58. Hold their hand
  59. 59. Reward them</li></ul>Introduce social learning throughout these flows to teach the user how to user the site<br />
  60. 60. Registration<br />Registered users is a key metric for success<br />Once a user is registered:<br />You have a way to reach out to them<br />You have some key demographics to advertise against<br />
  61. 61. First Impressions<br />
  62. 62. Subject Line Checklist<br />
  63. 63. Email Content<br />
  64. 64. Email Content<br />
  65. 65. Email Content<br />
  66. 66. Email Content<br />
  67. 67. Registration<br />
  68. 68. Registration<br />
  69. 69.
  70. 70. People you know are already here<br />
  71. 71. Contacts<br />Groups<br />Attention<br />Relationships<br />
  72. 72. you have to find a way to spare the group from scale. Scale alone kills conversations, because conversations require dense two-way conversations. <br />[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&apos;t mean that people don&apos;t have 150 people in their social network, but that they only keep tabs on 150 people max at any given point. <br />
  73. 73. Contacts<br />Groups<br />Attention<br />Types of relationships<br />
  74. 74. Groups<br />• 1.8% of all users write more<br />than 70% of all Wikipedia<br />articles<br />• .003% of digg’s users are<br />responsible for 56% of the<br />stories on the site’s home page<br />• .o64% creator to consumer<br />ration on YouTube<br />Source: http://www.lukew.com/ff/entry.asp?448<br />
  75. 75. Attention<br />Twitter Users<br />• 10% of users account for 90%<br />of production<br />• 50% have not updated status in<br />past 7 days<br />• 55% are not following anyone<br />• 52% have no followers<br />Source: Inside Twitter study, Sysomos June 2009<br />State of the Twittersphere, Hubspot, June 2009<br />
  76. 76. Connections<br />• 10% of users account for<br />30% of production<br />• 12% of Facebook users<br />update their status daily<br />• 40% of Facebook users have<br />updated status in past 7 days<br />• 1.89% of page views are<br />contribution (photos,<br />content, videos, events)<br />Source: Facebook statistics: http://www.facebook.com/press/info.php?statistics<br />Facebook app data for friend updates (300+ users)<br />
  77. 77. Invite Optimization<br />Jennifer Ruffner<br />Identity<br />Sign-up<br />Invitations<br />Social<br />Space<br />Activity<br />Relationships<br />Distribution (Viral)<br />Distribution (Viral)<br />
  78. 78. Invitations<br />Viral distribution increases the number of unique users on the site<br />People that are connected are more active<br />When they enter that flow you can present them with more interactions that they are more wiling to take<br />
  79. 79. Sending Invitations<br />
  80. 80. Sending Invitations<br />
  81. 81. Sending Invitations<br />
  82. 82. Receiving Invitations<br />
  83. 83. Receiving Invitations<br />
  84. 84. Strategize<br />Exercise 3: what kinds of relationships will you support? <br />Contacts<br />Groups<br />Attention<br />
  85. 85. Share<br />Collaborate<br />Communicate<br />Activity<br />
  86. 86. The AOF Method<br />Defining your Activity<br />Identifying your Social Objects<br />Choosing your Features<br />Courtesy of Joshua Porter. Check out bokardo.com!<br />
  87. 87.
  88. 88. Classic Question <br />Who are your users?<br />Better Question<br />What are your users doing?<br />What do people have to do to make you successful?<br />What are you making people better at?<br />What are your users passionate about?<br />
  89. 89.
  90. 90. 2. Identifying yourSocial Objects<br />
  91. 91. 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.<br />JyriEngeström<br />
  92. 92.
  93. 93.
  94. 94. What are Social Objects?<br />Social objects can be ideas, people, or physical objects.<br />Social objects influence social interaction...they change the way people interact with each other.<br />By interacting through/with social objects, people meet others they might not otherwise know.<br />Social objects can be the reason why people have an interaction or form a relationship.<br />Joshua Porter (bokardo.com)<br />
  95. 95. 3. Choosing your Features<br />
  96. 96.
  97. 97. Verb! That’s what’s happening…<br />
  98. 98. Conversations<br />Comment<br />Initiate<br />Rate and Report<br />Reply<br />
  99. 99. Talking about talking<br />
  100. 100. Sharing<br />
  101. 101. Collaborate<br />
  102. 102. Strategize<br />i.e. What are your nouns and verbs?<br />Exercise 4: what are the social objects and what do people do?<br />Share<br />Activity<br />Collab<br />Comm<br />
  103. 103. Share<br />Contacts<br />Profile<br />Identity<br />Sign-up<br />Sign-up<br />Invitations<br />Invitations<br />presence<br />Collab<br />Comm<br />Groups<br />Attention<br />Presence<br />Reputation<br />Social<br />Space<br />Relationships<br />Activity<br />Distribution (Viral)<br />
  104. 104. Viral Distribution<br />
  105. 105. Gladwell<br />Duncan watts<br />
  106. 106. “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.”<br />- Malcom Gladwell<br />
  107. 107. Nobody knows anything. – William Goldman<br />
  108. 108.
  109. 109. B=f(P,E)<br />Behavior is a function of a Person and his Environment<br />
  110. 110. Some Patterns<br />
  111. 111. Frictionless<br />I think, I blink<br />
  112. 112.
  113. 113.
  114. 114. At Hand<br />See it, use it<br />
  115. 115. Table setting?<br />
  116. 116.
  117. 117. Impactful<br />Maximize reach<br />
  118. 118. Email this<br />
  119. 119. Newsfeed, Network Updates<br />
  120. 120. Groups, Asymmetric Follow<br />
  121. 121.
  122. 122. Relationship antipatterns<br />High-level antipatterns<br />Explicit “Will you be my friend” requests<br />Teach a man to be phished (adactio)<br />Don’t break email (do-not-reply)<br />Auto-faux-pas (notification of rejection / unsub / delinking / re-follow)<br />Having to spam my friends…<br />
  123. 123. Targeted<br />Features for the most useful users<br />
  124. 124.
  125. 125.
  126. 126. Outreach<br />Social seo<br />
  127. 127. &lt;meta name=&quot;description&quot; content=&quot;Find cheap airline tickets, hotels, great cruise and vacation packages, honeymoon travel guides, flight information and more, with Yahoo! Travel.&quot; /&gt; &lt;meta name=&quot;verify-v1&quot; content=&quot;hfk2kPTdsyPJIULFv58St5zM/BKR4WjvWpVSbgr23vA=&quot; /&gt;&lt;meta name=&quot;y_key&quot; content=&quot;17f2f671d47e7697&quot; /&gt;&lt;title&gt;Yahoo! Travel - Airline tickets, cheap hotels, cruises, vacations & honeymoon travel&lt;/title&gt; <br />
  128. 128.
  129. 129. Whateevershare<br />Adaptive Path, using “Share this” widget<br />
  130. 130. Pick your channels<br />New York Times<br />Slideshare<br />
  131. 131.
  132. 132. Checklist<br /><ul><li>Frictionless
  133. 133. Impactful
  134. 134. Targeted
  135. 135. Outreach</li></li></ul><li>Distribution Exercise<br />Think about how you will pull people in…<br />How do people share?<br />With whom do they share?<br />Where and how many of those tools do you place?<br />
  136. 136. Questions?<br />Christina Wodtke<br />http://www.blueprintsfortheweb.com<br />http://www.eleganthack.com<br />http://www.boxesandarrows.com<br />@cwodtke<br />Jennifer Ruffner<br />JenniferRuffner@gmail.com<br />@jeng24<br />http://www.linkedin.com/in/jengranito<br />

Hinweis der Redaktion

  • Named Levels: Define a family of reputation levels on a progressive continuum. Each level is higher than the one before it.Unique names give the levels a fun and approachable quality. Quick comparisons between levels, however, become slightly more difficult.http://developer.yahoo.com/ypatterns/social/people/reputation/namedlevels.htmlNumbered Levels:Establish a family of reputations on a progressive continuum. Each level achieved is higher than the one before it.Refer to each level by its number, which makes comparisons between levels very straightforward and easy to do.http://developer.yahoo.com/ypatterns/social/people/reputation/numberedlevels.htmlIdentifying Labels:Define a family of reputation labels that are not sequential in nature. Craft each one to identify and reward particular behaviors or qualities within a community. These labels are helpful for consumers in identifying more-experienced contributors who possess these qualities.http://developer.yahoo.com/ypatterns/social/people/reputation/identifyinglabels.htmlPoints:Maintain and display a cumulative count of the number of points user has earned within a community.The points generally come from performing specific activities on the site.Points are best-awarded to congratulate performance rather than merely to acknowledge activity.http://developer.yahoo.com/ypatterns/social/people/reputation/points.htmlCollectible Achievements may seem silly or trivial, but they can have an addictive quality that may compel your users to explore parts of your offering that otherwise might not appeal to them.http://developer.yahoo.com/ypatterns/social/people/reputation/achievements.html
  • Hi My name is Jen Ruffner. As Christina mentioned I’m going to talk about Site Flow OptimizationBefore before I jump into a website --- I want to visit an experience that we are all familiar with – eating out. I’ll talk about some of the industry secrets that restaurants use to improve the check’s bottom line. What’s interesting is that some of them translate very nicely to what you can do on a website, and some just seem to go against what we would believe to be common sense.
  • High margin items in the upper right hand corner of the menu
  • “1978 issue of The Cornell Hotel and Restaurant Administration Quarterly” High margin items in the upper right hand corner of the menu
  • And then counter clockwise to the right bottom ---- Which is why you see appetizers in the top left“People tend to remember the top two items on a list and the bottom item” Steve Miller This lesson here is that every site is different. Some things work everywhere and other sites have communities that go against the norm. You should always be iterating by learning from your users and testing new approaches.
  • Much like search results
  • Reduce any hurdle that you can see between the user and what you want them to do. In this case, not only does the user have to remember to ask the waiter what the market price is before ordering, but they also risk embarassment
  • On a website -- your goals are probably include growth, engagement, and revenue. No matter what your goal is: - getting a user registered- getting them to submit content or share something- or getting them to buy something….The process of getting should follow these rules …..  
  • The first flow that I’m going to walk through is registration. Registration is obviously an important flow for just about any web site.As I walk through the flow, I’m going to pointing out very small details that can make a big difference to the bottom line. While we’re walking through these slides, I’d encourage you to think of a few flows on your site where some optimization would be beneficial. Looking at the same site day in and day out, it’s sometimes easy to overlook some obvious changes. Hopefully this presentation will help you get in the mindset for optimization and look at things with a fresh eye.
  • One of the most popular ways to hear about a social site is through a friend Objective is to get people to open the email. How do you do that?Who is it sent from?Should use the inviter’s name – not the siteTwitter doesn’t Users are more likely to open an email when it’s from a friend instead of a website. Twitter doesn’t even mention my name in the subject line. People won’t recognize JenG24Is the subject line short, but compellingDoes it make you feel wanted and special?Twitter doesn’t even use my name in the subjectFacebook – first off when I sent this email it wasn’t to share photos. It was just to invite my friend to join the site. Second, it doesn’t make me feel special.Tagged makes me feel good because something is waiting there and it’s specifically for meSuggestions1. Make the reader feel like they need to respond, while still keeping it light.2. Wildcards – try jazzing up the subject line to see if it does anything [SMILEY FACE]
  • Subject lines are easy to test for a lot of reasons
  • GoodPicture is great for conversation AND it clicks to registerThe stats about me tell the story of what you can do on Facebook (social learning)
  • BadToo many links (make one clear call to action and lock down the flow)Note that one link is in case you already have an account. Normally I’d say to remove it, but I’d imagine that FB gets a lot of CS requests to merge duplicate accounts. If that is costing a lot of money it may be worth keeping that link here).Too much text – don’t make the user read a story here – get them to join the site and let them learn from their friends.Call to action is to sign up for facebook – not look at Jen’s photosSuggestions – Images can be scary to put in the email because the user may not download it. In that event add text about where I live or where I went to school etc.
  • Good Buttons instead of a link is a very clear call to action.Both buttons click to reg – if you click no you register without becoming friends with the inviter.Posed a question which envokes the user to respond.Bad- The messaging is a little harsh
  • Empty if the user selects not to download images.
  • You’ve got to get it to one page. Why? Because once you have the user’s email, you can reach out to them and try to get them to come back. If you bog them down with excess requested information, you’re going to lose them. Nav – you’ve worked so hard to get them here, don’t advertise distractions that will let them get out.Submit button – they need to see the light at the end of the tunnel or they might bail.Email addressGoodHolding the users hand by keeping the inviter at the top of the page w/ good messaging like “Join your friends on MS”Mentions the word “Free”Absolute minimal requirements. - Prepopulated the email addressOrder!Submit button is above the fold and it’s a good clear call to askingIT’s a good idea that any page in this flow, the submit button needs to be above the fold. That doesn’t mean that you should take what was 3 really long pages and turn them into 6 short pages, because there is a drop off rate of about 20% per page. Make sure you get as much as you can and need before you’ve lost the opportunity to land them on the home page and let them do what they came there to do.Got rid of the checkbox that they agree to the TOSKept the captcha until later
  • Got rid of the checkbox that they agree to the TOSKept the captcha until laterBadGet rid of the navCirsor not defaultedShould have default selected one of the gendersFull looks like first
  • GoodNo navProgress barGood header - it’s inviting and rewardingHeld the users hand with info on the inviter and allows you to get more information inlineHandholding text as to why you should do certain things (rewarding the user)Country is prepopulatedThe button is a good color and has a good message. Buttons are important not only because they are the main call to action, but it’s the last thing that a user looks at before they decide whether or not to continue.BadGet rid of the marketing textAllow the user to skip things that aren’t optional
  • Schoolhouse rock?