UX Week Workshop- Designing Social Interfaces

  • Published on

  • View

  • Download




1. DesigningSocial In using principles, patterns and anti-patterns to create meaningful social user experiences a workshop erin malone & christian crumlish:: 08.26.10 2. A little about us: erin malone@emalone 3. A little about us: christian crumlish @mediajunkie 4. Just what is social? 5. What does social really mean? Community, Living Web, Live Web, Read-Write Web, Two-Way Web Human, Humane, HumanizedSocial NetworkSocial GraphSocial MediaSocial Object 6. You already do social Sign Up, Sign In, Send Invitation, Pro le, Avatar, Presence, Availability, Activity Streams, Numbered Levels, Peer-to-peer Awards, Ranking, Points, Leaderboard, Collecting, Favorites, Subscribe, Find with Tags, Content Lifecycle, Share This, Send This, One-Time Sharing, Social Bookmarking, Embedding, Feedback, Comments, Reviews, Ratings, Favorites, Forum, Public Conversation, Private Conversation, Voting, Edit This Page, Crowdsourcing, Following, Filtering, Recommendations, Contacts, Find People, Unfriending, Stalking, User-Created Groups, Community Guidelines, Report Abuse, Check In, Face-to-Face Meeting, Calendaring, Reminding, ...and many more 7. Designing social requires different thinking photo erin malone 8. New social media : still awkward 9. User = singular, Social = pluralSolitary activities: user interfaces reading headlines displayed on a website relatively easy to measureSocial activities:social interactionsengaging with other people through a web applicationmost effectively mediated by social objects 10. Defining the foundation 11. The EcosystemSocial Objects 12. The Social Object, in a nutshell, is the reason two people are talking to each other, as opposed to talking to somebody else. 13. Social Networks form around Social Objects, not the other way around.~ Hugh MacLeodGapingVoid.com 14. Make sure there is a there there. Whats your social object? photos erin malone 15. ContextThe end delivery of your product changes the types of interactions to develop and speci c features to take advantage of 16. For the people, by the people photo from ickr by Shermeee photo from ickr by sandesigns one of a kind Who you target can and will affectthe features you choose to develop photo from ickr by ssebastien.b 17. The FoundationSocial Networks Need Social ObjectsContext MattersMake Decisions for a Core Audience 18. FundamentalPrinciples 19. Pave the cowpaths 20. Dogster started as a photosharing service. Shifted focus to pets once company saw people were primarily uploading pics and talking about their dogs. 21. Talk like a person 22. Do you want to talk to your customers like this? Or like this? 23. Talk like a person Conversational Voice Self-Deprecating Error Messages Ask Questions Your vs. My No Joking Around 24. Enter textPlay well with others. Be open. here 25. 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 26. Learn from games photo by kurtxio 27. Learn from gamesWhat are GameMechanics? The systems andfeatures that makegames fun, compellingand addictive.~Amy Jo Kim 28. Learn from games Game MechanicsCollectinggives bragging rights,encourages completion Pointsgame points by systems,social points by others,drives loyalty, drives behaviorunlock new powers or access Feedbacksocial feedback drives engagementaccelerates mastery and adds fun Exchangesstructured social interactionsexplicit or implicit Customizationcharacter or interface 29. Respect the ethical dimension Respect the ethical dimension 30. Respect the ethical dimensionSome of the forces that must bebalanced, to apply many of thesepatterns, involve ethical dilemmas 31. Five principles Pave the Cowpaths Talk Like a Person Leverage Openness Where Possible Learn from Games Respect the Ethical Dimension 32. Exercise 1 Define your social object, target audience and delivery method. Which principles are relevant? Do all five principles apply? Decide on your social object. Sketch ideas with your team. Think about the principles we have discussed so far. How might they play out?What type of community do you want to foster? Discuss with your neighbors, make suggestions to each otherList potential features on sticky notes. 33. Break 34. Just what are patterns? 35. rief BHistoryChristopher Alexander: architect 36. rief B History 1977 / 1978 publishes Identified patterns in architecture Approaches building in a human/e way Considers context of use for every solution Its a design vocabulary, hence pattern language 37. rief B History Patterns In Software ComputingWard Cunningham & Kent Beck use Christopher Alexander 1987 as a model to develop a small pattern language for SmallTalk1995 Gang of Four publish Design Patterns BookPatterns In User Experience DesignJenifer Tidwell presents an interaction pattern library, called 1997 Common Ground, at CHIMartin Van Welie, releases the his pattern library, one of the first to 2000 bring it onlineDesign of Sites is published by Douglas Van Duyne, 2002 James A Landay and Jason Hong 2004 Internal Yahoo! Pattern Library started 38. rief BHistoryPatterns In User Experience Design Jenifer Tidwell publishes Designing Interfaces2005 Yahoo! brings their interaction pattern library open2006 along with the YUI component libraryDesigning Web Interfaces, by Theresa Neil and Bill2008 Scott and Designing Gestural Interfaces, by Dan SafferDesigning Social Interfaces, by Erin Malone and2009 Christian CrumlishExplosion of pattern libraries on the web for web2010 and mobile (list in appendix slides) 39. Pace Layers 40. The fast parts learn, propose, and absorb shocks; the slow parts remember, integrate, and constrain. The fast parts get all the attention. The slow parts have all the power. Steward Brand, The Long Now Foundation 41. Content Front End Code Interaction Specs Interaction Patterns Visual Design Infrastructure / PlatformsThe fast parts learn, propose, and absorb shocks; the slow parts remember, integrate, and constrain. The fast parts get all the attention. The slow parts have all the power. Steward Brand, The Long Now Foundation 42. Dont embed services in structure, otherwise you have to tear the house down to fix them when they break. A design welcomes change or fights it. ~ pixelcharmer 43. Pattern Definition for Interaction DesignPatterns are optimal solutions to common problems in a context. Interaction Design Example: Problem Large amounts of data. User needs to see details but wants context of overview dataSolution Overview panel Detail pane 44. The Structureof Patterns 45. 5 parts of a design patternProblem What does the user want? 46. 5 parts of a design patternWHAT What does the user want? 47. 5 parts of a design patternWHAT What does the user want? Examples An archetypal example of the solution 48. 5 parts of a design patternWHAT What does the user want? Examples An archetypal example of the solution Context When to use it 49. 5 parts of a design patternWHAT What does the user want? Examples An archetypal example of the solution USE WHEN When to use it 50. 5 parts of a design patternWHAT What does the user want? Examples An archetypal example of the solution USE WHEN When to use it Solution How to meet the users needs 51. 5 parts of a design patternWHAT What does the user want? Examples An archetypal example of the solution USE WHEN When to use it HOW How to meet the users needs 52. 5 parts of a design patternWHAT What does the user want? Examples An archetypal example of the solution USE WHEN When to use it HOW How to meet the users needs Rationale Why is this a good solution? 53. 5 parts of a design patternWHAT What does the user want? Examples An archetypal example of the solution USE WHEN When to use it HOW How to meet the users needs WHY Why is this a good solution? 54. 5 parts of a design patternWHAT Examples USE WHEN HOW WHY 55. Patterns vs. Specs PatternsSpecs a generalized set of considerations detailed instructions that de ne thesolution can be interpreted multiple ways have a slow rate of change the ONE way you are going toimplement technology agnostic may change frequently depending onchange in technology generally taking advantage of atechnology (i.e. ash or ajax or java) 56. Not the last word but a great place to start 57. Practices or the social patterns in contextor a brief tour through 96 patterns 58. High level buckets 59. High level bucketsRepresentations of the Selfself-expression, identity, presenceSelf Activities involving social objects Activitiesone to one, one to many, many to many CommunityCommunity as expressed by relationships, location and model citizenship 60. Self 61. Welcome people to the party Registration Sign In Welcome Area Invitations Private Beta Reengagement Authorize http://www. ickr.com/photos/pasotraspaso/1408057351/ 62. The Usage LifecycleSupport activity your usersare already doing around diagram Joshua Porteryour social object Designing the Social Web bokardo.com 63. Sign InWhatUser wants to access their personalized information or anapplication that is stored on the host site. Use When Use when personal data needs to be stored or whenthere is customization or personalization unique to theparticular user. Use when the site is a repository for user generatedcontent and the submissions or les need to beidenti ed and/or managed by the author. Use when there are security or privacy concerns andthe user's data needs to be protected. 64. Welcome AreaWhatA user registers for a new serviceand needs to have a sense of whatcan be done at the site and how toget started. Use When Use this pattern when a new userrst accesses the site. Use this pattern to acquaint theuser with important or usefulfeatures. 65. AuthorizeWhatThe user wants to participate on a site bybringing their data and les over fromanother site. Use When Use this pattern when features on yoursite are enhanced by accessing dataand les from another site (Site A). Use this pattern when user generatedcontent or data on your site has thepotential to enhance or enable othersites that your users may beparticipating in (Site B). 66. Give people a way to be identified 67. Give people a way to be identified & to identify themselves 68. Give people a way to be identified & to identify themselves Attribution User Cards Avatar Re ectors Pro le Pro le Decorating Personal Dashboard Testimonials 69. AttributionWhatA content consumer needs to understandthe source of a contribution and thesource of a contribution needs to receiveproper credit for his post. A user needs toassign her public identity whencontributing content or joining an onlinecommunity.Use When Use when contributing content, joininga community, or editing a publicpro le.Identity doesnt alway have to manifest itselfin a complicated or robust pro le.Be appropriate for your context. 70. User CardsWhatA person needs more informationabout another person in an onlinecommunity without interrupting his orher current task.Use When Use an identity card wherever auser's display image or display nameis shown. Use when additional informationabout the participants is desired (incontext) without adding clutter tothe screen.Identity doesnt alway have to manifest itselfin a complicated or robust pro le.Be appropriate for your context. 71. AvatarsWhatA user wants to have a visualrepresentation of themselves as part oftheir online identity.Use When Use this pattern when the user wants tohave a visual associated with theiridentity.Identity doesnt alway have to manifest itselfin a complicated or robust pro le.Be appropriate for your context. 72. ProfileWhatThe user wants a central, public location to display allthe relevant content and information about themselvesto others both those they know and those they dont. Use When Use this pattern when your site encourages a lot ofuser-generated content and you want one place toshow a speci c users contribution. Use this pattern when you want to allow users to lookup another user to learn more about them. Use this pattern when you want to allow users toexpress their personality. Use this pattern to allow users to share informationabout themselves to others. 73. Personal DashboardWhatThe user wants to check in and see statusupdates from her friends, see current activityfrom her network, comments from friend onrecent posts and other happenings fromacross her network. Use When Use this pattern when the experience of thesite revolves around the activities of peopleand their networks whether the activitytakes place on the network or not. Use this pattern as a companion to thepublic pro le. You want to encourage repeat usage. 74. Is there anybody out there? Availability Mood Environment Buddy List Statuscasting Microblogging Updates Opt-in Signs of Life User Gallery Whos Here Now Ambient Intimacy 75. MicroBloggingWhatMicroblogging allows users to create shortposts. These are often aggregated into astream (a.k.a. Activity Streams) and canconsist of text, pictures or video. Use When Use as a light alternative to blogging. Use when you want to allow conversationsand real time updates but dont needsynchronous conversations like InstantMessaging. 76. Signs of LifeWhatA person wants to have some indication ofwho else frequents the site she is visiting andthe she isnt alone.Use When Use this pattern to signal the transientpresence of other visitors. Use this pattern to give the current visitor asense that she has company while readingthe blog, especially if she recognizes someof the faces or names. 77. Buddy ListWhatThe user wants a distinct list of people sheknows (friends, coworkers, family) tocommunicate with in real time. Use WhenUse this pattern when offering just-in-timecommunications, suchas instant messaging.Buddy list utilizes concepts like Whos HereNow and Ambient Intimacy 78. Your reputation is equal to the sum of your past actions within a community. ~ Bryce Glass, co-author Building Web Reputation Systems 79. Levels What Participants in a community need some way to gauge their own personal development within that community. Additionally, these same measures can be used to compare members, to understand who has more or less experience in the community.Use When You want to enable consumers to discover and identify high-quality contributors. The community is competitive, but not highly competitive. You want to enable your users to track their individual growth in the community, and suggest ways that they may attain the next level in the hierarchy. 80. Collectible AchievementsWhatSome participants in communities respond toopportunities to earn or win awards that can becollected and displayed to other communitymembers. Use When You want to leverage users' compulsive natures.They may seem silly or trivial, but CollectibleAchievements can have an addictive quality whendone right, and may compel your users toexplore parts of your offering that otherwisemight not appeal to them. You want to encourage the community to try outall aspects of your offering. 81. Points What Participants want a tangible measurement of their accomplishments for personal satisfaction and to make comparisons with other competitors.Use When Use this pattern when the community is highly competitive, and the activities that users engage in are competitive in nature, such as fantasy sports or games. Speci cally, don't use this pattern when The activities that users engage in are notcompetitive in nature (e.g., writing recipes, orsharing photos). The awarding of points might demean or devaluethe activity that they're meant to reward. Bypinning an arbitrary incentive value to an activity,you may unintentionally replace a user'ssatisfying intrinsic motivation with a pettyextrinsic one. 82. Leaderboard What In highly competitive communities using a ranking system, users may want to know who are the very best performers in a category or overall.Use When The community is highly competitive, and the activities that users engage in are competitive in nature (e.g., player-vs-player contests, or coaching a fantasy football team.) You want to enable player-to-player comparisons, or permit users to de nitively settle "Who is better?" arguments. Don't use this pattern when the activitiesthat users engage in are not competitivein nature (e.g., writing recipes, or sharingphotos). 83. Give people something to do 84. Activities involving objects 85. Its a continuum 86. Its a continuumCollecting One Sharing One to one Broadcasting & One to manyPublishing Feedback One to one, One to an object Communicating One to one, One to many, Many to many Collaboration Many to many Social Media Ecosystem 87. Collecting: Saving What A user wants to save an item for later viewing, sharing, or discussion. Use When Use this pattern to enable people to save web sites, pages, clippings, photos, videos or other items in an online environment.Use this pattern to allow people to showoff, share or collaborate around acollection of online items. 88. Collecting: Tag an ObjectWhatA user wants to attach their own keyword or setof keywords to an object for organization andlater retrieval. Use When Use this pattern when a user is collecting alarge amount of unstructured data, like photos. Use this pattern when a user wants to manage alarge collection of items, like books. Use this pattern to blend user generated labelsand keywords with structured metadata. 89. Broadcasting: Blogs What A user wants to consume commentary, events, images and videos on a regular basis by a speci c person.Use When Use this pattern to bring a more casual level of commentary to readers as a complement to more formal editorial content. Combine this pattern with Comments, Sharing and Tags to encourage reader participation and conversations. 90. Publishing: Licensing Licensing can have a profound effect on the sorts of collaborations that can ensue. If people are unsure about their legal rights Public Domain - the most liberal, some content or worried about losing their rights orwill eventually enter the public domain even (worse yet) being charged with infringing on the rights of others, ordinary risk-aversionwhen originally given a tighter license will tend to decrease the amount of participation. Creative Commons - a nuanced range of choices There are ethical implications for any designed to give options encouraging reuse system of licenses but the considerations are many. Copyleft - an un-copyright regime invented byhackers Copyright - traditional government-enforcedcopyright 91. Broadcasting: LifecycleWhatA person wants to know when somethinghappened. Use When Use to give users an indication of when anitem, a thought or a conversation wasadded to the site. Use to distinguish a ow between twopeople. Use to indicate the freshness of an item,especially if highlighted. 92. Sharing: Share This What User wants to share an object with one or more people.Use When Enable people to spontaneously share content or objects. 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 eld for adding a personal note. Offer the user a checkbox option for receiving a copy of the message. 93. Feedback: Reviews What User wants to share her opinion with others about an object (place, person, thing) in greater detail than a simple rating or comment.Use When User wants to write a review of an object. You want to supplement the content of a product/website with user generated reviews. You are also using Rating an Object. Combined they will help to obtain better review feedback. You are also using reputation rankings (for encouraging quality user generated content.) 94. Feedback: Ratings What A user wants to quickly leave their opinion on an object, with minimal interruption to any other task ow 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. 95. Communicating: Public Conversation What People want to have a conversation in a public environment.Use When Use this pattern to create a framework for public conversations. Use this pattern to differentiate from private conversations. 96. Collaboration: Collaborative EditingWhatPeople like to be able to work together ondocuments, encyclopedias, and softwarecodebases.Use When Use this pattern when you wish to enable yoursite members to work together to curate theircollective wisdom or document their sharedknowledge. 97. Social Media: Recommendations What In the search for relevancy and quality, people have a dif cult time zeroing in on satisfactory content. Use When Offer recommendations when you have a suf cient body of data about your user's self- declared and implied interests as well as a rich enough social graph to be able to identify similarities and make helpful guesses about likely interesting content. 98. Social Media: Social SearchWhatPeople sometimes want information or advicethat can't be found in a neutral, objectivereference guide and would ask another humanbeing directly if they could nd someoneinterested in or knowledgeable about the topicof their question.Use WhenUse this pattern when you wish to fostercommunication and cooperation among thepeople using your social application. 99. Combine activities for richer experiences Books: ratings, reviews, search Band: Public conversation, microblogging 100. Combine activities for richer experiencesPhotos: collecting, sharing, comments,favoriting, groups, broadcasting 101. Combine activities for richer experiencesRestaurants: Labels, ratings, reviews, levels Shopping: Collecting, Ratings, Reviews Photos: TaggingNews Articles: Sharing 102. Exercise 2 Consider your social object and your target audience What activities make sense for your product? Revisit the site you imagined in activity 1. Consider starting light and adding features over time. What social elements would you add first? Why? Whats your growth path? What social interactions need to take place regularly? How would you entice people to become involved? What features should you NOT spend time on at the beginning of the project.Sketch multiple ideas and iterations for one (or at the most two flows) logged in homepage, a profile page, an activity stream 103. Lunch 104. Enable a bridge to real life 105. User and activity flow 106. Bridging Real Life 107. Location: Face-to-face meeting What The user wants to meet of ine with people from their network, in a nearby location. Use When Use this pattern to help facilitate face-to-face meetings between people. 108. Location: Neighborhood What A user wants to know whats going on around their neighborhood.Use When Use this pattern when pulling together geographic or place speci c content. 109. Location: Mobile: Gatherings What A group of users want to meet up spontaneously.Use When Use this to enable groups of people to meet up in either a planned way or spontaneously based on location. 110. Taking it offline Mobile - Geo Mobile - Gatherings Party, Calendaring, Reminding, Geo, Face-to-face meeting 111. And then back again After the Party Face-to-face meeting Calendaring 112. Let the community elevate people & content they value Gently moderate 113. Connections and Community 114. Connections: Find People What The user wants to nd people she knows to connect and interact with on a site or social web service.Use When Use when you want to help users nd people they care about who may already be using this site. Use this pattern to expand users circles of connections beyond friends and family. Use this pattern to encourage connections throughout the lifecycle of a persons engagement. 115. Connections: Adding Friends What 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 user connections are a core part of the sites experience. Use when relationships will be con rmed providing a two-way reciprocal relationship. Use when allowing following, where one user to follow another participant without reciprocity. Use when ignoring a connection request is allowed. 116. Connections: Circles of Connections What A user wants to indicate nuances in their relationships with other people.Use When Use to distinguish levels of participation in a persons 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 lter which content to consume. 117. Community: Collaborative Filtering What People need help nding the best contributions to online community.Use When Use when you've got a large base of contributors and a wide range of quality across the content. 118. Community: Norms A principle of community management is to establish and communicate social norms to the participants in your communityWhile this may be done with interface copy, help text, support forums, newbie tutorials and so forth, its best communicated directly from member to member.Founders and community managers can play the role of Model Citizen to demonstrate desirable behavior. 119. Community: Report Abuse What People need a way to report abuse in a way that isn't too inconvenient and doesn't require them to type in or restate information that can be gleaned from context.Use When Use this pattern to allow your users the ability to self-moderate content that is contributed by the community. 120. PracticesEnable People to Control Their Own IdentitySocial Networks Need Social ObjectsGive People Something to DoBridge to Real Life (and Back)Community Self-Governance, Gentle Moderation 121. Whats an Anti-Pattern? 122. Anti-Patterns Two Variants as de ned by Andrew Koenig (Gang of 4):Those that describe a bad solution to a problem which resulted in a badsituationThose that describe how to get out of a bad situation and how to proceedfrom there to a good solution. For our purposes,anti-patterns are common mistakes or a badsolution to a common problem. 123. 5 Anti-Patterns 124. Cargo Cult 125. Cargo Cult 126. Cargo Cult 127. Dont Break Email 128. Dont Break Email Facebook breaks email since you cant 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. 129. The Password Anti-Pattern 130. The Password Anti-Pattern iLike Plaxo 131. The Password Anti-pattern yelp 132. Ex-Boyfriend Bug 133. Potemkin Village 134. 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. 135. Five Anti-Patterns Cargo Cult Design Breaking the Email Tubes The Password Anti-Pattern Ex-Boyfriend Bug Potemkin Village Anti-Pattern 136. Exercise 3 Consider your social object and your target audience What anti-patterns would you be tempted to use to get the product out the door? Why? Revisit the site youve been imagining Which one(s) might be implemented despite the less than desirable consequences?What are the ethical considerations to balance in making this decision?What could you do to avoid the anti-pattern?What features might you implement instead? Sketch multiple ideas and iterations for one (or at most two) wireframes showinga home page, pro le, activity stream or any other page, canvas, module or view ofyour choice. 137. The Ecosystem - its balance with tradeoffs 138. Its about creating the spaces for people to make things happen 139. Break 140. Lets Play the Game a brief tutorial 141. Game Goals Build a social digital product Work as a team to collaborate around an object for a speci cand build the best products audience delivered in a speci c way Play against another team Deliver a well rounded product (with features across Identity, Activities and Relationships) Build products in a de ned time frame 142. Game Play 143. Thanks erin @emalone erin@tangible-ux.comxian @mediajunkie available now! xian@mediajunkie.com http://www.designingsocialinterfaces.com 144. References BooksA Pattern Language, Christopher Alexander, et al, Oxford University PressA Timeless Way of Building, Christopher Alexander, Oxford University PressDesigning Interfaces, Jenifer Tidwell, OReilly MediaDesigning Web Interfaces, Theresa Neil and Bill W. Scott, OReilly MediaDesigning Gestural Interfaces, Dan Saffer, OReilly MediaDesigning Social Interfaces, Erin Malone and Christian Crumlish, OReillyMediaDesign Patterns, Elements of Reusable Object-Oriented Software, ErichGamma, Richard Helm, Ralph Johnson and John Vlissides, Addison-WesleyProfessional Computing SeriesThe Design of Sites, Douglas K. Van Duyne, James A. Landay and Jason I.Hong, Prentice HallHow Buildings Learn: What Happens After Theyre Built, Stewart Brand,Penguin DIAGRAMS - REFERENCED IN TALKEcosystem- http://www.emdezine.com/deziningInteractions/images/SocialEcosystemDiagram.pdfPoster - http://www.emdezine.com/deziningInteractions/images/Poster-4x8-masterNoOutlines.pdf 145. References Some Pattern Libraries Martin Van Welie http://www.welie.com/ UI Patternshttp://ui-patterns.com/http://design.yahoo.com (for now) Yahoo! Pattern Library(coming soon at http://uipatterns.org) ID Patterns for Gameshttp://www.helpyouplay.com/wiki/index.php5?title=Main_Page Social Design Patterns http://www.designingsocialinterfaces.com/patternswikiMobile Design Patterns http://patterns.design4mobile.com/index.php/Main_Page AJAX Patternshttp://ajaxpatterns.org/ Search Patternshttp://www.findability.org/archives/000194.php RIA Patterns http://designingwebinterfaces.com/ Behavior Patternshttp://www.danlockton.com/dwi/Main_Page Endeca Pattern Library http://patterns.endeca.com/content/library/en/home.html Quince http://quince.infragistics.com/UX-Design-Patterns.aspx