UX Week Workshop- Designing Social Interfaces

Embed Size (px)

DESCRIPTION

 

Text of UX Week Workshop- Designing Social Interfaces

  • 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