Search

Designing Social Interfaces at Web Directions South 2009

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    16 Favorites & 1 Event

    Designing Social Interfaces at Web Directions South 2009 - Presentation Transcript

    1. designing social interfaces web directions south christian crumlish design.yahoo.com @mediajunkie
    2. “Hello?” “Is that you, Mr. Gilbert?” “Hello?” Social media is always awkward when it’s new 10/12/09
    3. New social media: always awkward 10/12/09
    4. http://flickr.com/photos/dhbress/87105370/
    5. Five Principles 10/12/09
    6. Pave the cowpaths 10/12/09
    7. How to Pave the Cowpaths 10/12/09
    8. Talk like a person 10/12/09
    9. How to Talk Like a Person • Conversational Voice • Self-Deprecating Error Messages • Ask Questions • Your vs. My • No Joking Around 10/12/09
    10. Play well with others 10/12/09
    11. How to Play Well with Others (Be Open) 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 10/12/09
    12. How to Play Well with Others (Be Open) Embrace open standards Share data outside of the bounds of your application Accept open standards Embrace external data within the sphere of your application Share data outside of the bounds of your application Support two-way interoperability Accept external data within the sphere of your application Support two-way interoperability 10/12/09
    13. Learn from games 10/12/09
    14. How to Learn from Games 10/12/09
    15. Respect the ethical dimension 10/12/09
    16. How not to Respect the Ethical Dimension 10/12/09
    17. Five Principles • Pave the Cowpaths • Talk Like a Person • Play Well with Others (Be Open) • Learn from Games • Respect the Ethical Dimension 16 10/12/09
    18. 96 Patterns 10/12/09
    19. 10/12/09
    20. Give people a way to be identi ed 10/12/09
    21. Give people a way to be identi ed 10/12/09
    22. 10/12/09
    23. 10/12/09
    24. User Cards What • A person needs more information about another person in an online community without interrupting his or her current task. How • Open a small panel when the user hovers over a target's display name or image. • Present a larger version of the user's display image, the user's full display name, and other pertinent information about the target that they choose to share with the community. • Present a Relationship Reflector. Allow the ability to subscribe to, follow, connect to, unsubscribe or block the user from this panel. 10/12/09
    25. User Cards in the wild FriendFeed 10/12/09
    26. User Cards in the wild Flickr 10/12/09
    27. 10/12/09
    28. What’s your social object? 10/12/09
    29. 10/12/09
    30. 10/12/09
    31. 10/12/09
    32. Give people something to do 10/12/09
    33. 10/12/09
    34. Activities involving Objects • Collecting (passive) • Broadcasting & Publishing (one-to-many) • Sharing (more intimate) • Feedback (commenting on objects) • Communicating (two-way conversation) • Collaboration (making objects together) • Social Media (a full ecosystem) 10/12/09
    35. Tag an Object What • A user wants to attach their own keywords to an object for organization and later retrieval. Use When • Use when a person is collecting a large amount of unstructured data, like photos. • Use this pattern when a person wants to manage a large collection of items, like books. • Use this pattern to blend user generated labels and keywords with structured metadata. 10/12/09
    36. Tag an Object in the wild Flickr 10/12/09
    37. Ratings What • A user wants to quickly leave their opinion on an object, with minimal interruption to any other task flow 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. 10/12/09
    38. Ratings in the wild Yelp 10/12/09
    39. Ratings in the wild Yahoo! Movies 10/12/09
    40. Share This What • User wants to share an object with one or more people. How • Enable people to spontaneously share content or objects they find. • 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 field for adding a personal note. • Offer the user a checkbox option for receiving a copy of the message. 10/12/09
    41. Share This in the wild The Onion 10/12/09
    42. Share This in the wild Add to Any 10/12/09
    43. Share This in the wild Facebook 10/12/09
    44. Let the community elevate people & content they value 10/12/09
    45. Let the community elevate people & content they value Gently moderate 10/12/09
    46. 10/12/09
    47. 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 a person’s connections are a core part of the site’s experience. • Use when relationships will be confirmed providing a two-way reciprocal relationship. • Use when allowing one user to follow another participant without reciprocity. 10/12/09
    48. Adding Friends in the wild Facebook 10/12/09
    49. Adding Friends in the wild Yahoo! 10/12/09
    50. Adding Friends in the wild Dopplr 10/12/09
    51. Circles of Connections What • A user wants to indicate nuances in their relationships with other people to create contexts for communication and sharing. Use When • Use to distinguish levels of participation in a person’s 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 filter which content to consume. 10/12/09
    52. Circle of Connections in the wild Plaxo 10/12/09
    53. Circle of Connections in the wild Flickr 10/12/09
    54. Public Conversation Use When • Use this pattern to differentiate from private conversations. How • Allow users to create a dialog between themselves. Provide a framework that is flexible enough to support two or more people in conversation. Provide a form field for text entry. Clearly indicate the character count for conversing. • Allow users to block or ignore specific users that they don’t want to hear from, without disrupting the flow of conversation to other participants. 10/12/09
    55. Public Conversation in the wild Twitter 10/12/09
    56. Public Conversation in the wild FriendFeed 10/12/09
    57. Enable a bridge to real life events 10/12/09
    58. Geo What • A person wants to let the gps on his phone inform other people and his phone applications of his location. Use When • Use to enable users to plot themselves on a map or announce their location. • Use to enable users to meet up with other people nearby. • Use to empower features on social applications. 10/12/09
    59. Geo in the wild Geo on iPhone 10/12/09
    60. Geo in the wild Where for iPhone 10/12/09
    61. Social Design Pattern Categories • Representations of the Self, self-expression, identity • Activities involving social objects • Community dynamics growing out of relationships, expressed through various contexts 10/12/09
    62. Anti-Patterns! 10/12/09
    63. Cargo Cult 10/12/09
    64. Cargo Cult 10/12/09
    65. Cargo Cult 10/12/09
    66. Cargo Cult 10/12/09
    67. Don’t break email 10/12/09
    68. Don't Break Email don’t: do: 10/12/09
    69. The Password Anti-Pattern 10/12/09
    70. The Password Anti-Pattern 10/12/09
    71. Password Anti-Pattern in the wild iLike 10/12/09
    72. Password Anti-Pattern in the wild Plaxo 10/12/09
    73. Ex-Boyfriend Bug 10/12/09
    74. Potemkin Village 10/12/09
    75. Five Anti-Patterns • Cargo Cult Design • Don’t Break Email! • Password Anti-Pattern • Ex-Boyfriend Bug • Potemkin Village 67 10/12/09
    76. thank you! Christian Crumlish, Curator Yahoo! Design Pattern Library design.yahoo.com @mediajunkie 10/12/09

    + Christian CrumlishChristian Crumlish, 1 month ago

    custom

    1360 views, 16 favs, 3 embeds more stats

    Slides from my talk at WDS09, on the topic of socia more

    More info about this document

    CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

    Go to text version

    • Total Views 1360
      • 992 on SlideShare
      • 368 from embeds
    • Comments 0
    • Favorites 16
    • Downloads 38
    Most viewed embeds
    • 215 views on http://www.webdirections.org
    • 85 views on http://jyesmith.com
    • 68 views on http://mediajunkie.com

    more

    All embeds
    • 215 views on http://www.webdirections.org
    • 85 views on http://jyesmith.com
    • 68 views on http://mediajunkie.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    more

    Groups / Events

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved