IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces


Published on

Patterns, Principles, Practices for Designing Social interfaces. Slight changes to previous talks and a new design template.

Published in: Design
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

  • interaction designer
  • interaction designer
  • interaction designer
  • interaction designer
  • Designing social is hard - It’s different - It’s new -It’s everywhere
    Old - computer - person
    New - computer - person - another person
    Humans are complicated
    Interfaces can’t predict and shouldn’t predict their behavior
    Designing frameworks and generative environments

    Agenda - 5 steps, 5 principles and 5 anti-patterns

  • Pave the Cowpaths
    Started a photo sharing product, noticed customers putting pics of pets up - niche not being served, so ended up building SN for pets

  • Talk Like a Person
    Conversational Voice - Self-Deprecating Error Messages - Ask Questions
    Your vs. My - No Joking Around

  • We’re actively looking for more, inviting feedback, skepticism, nuance

  • Be Open
    Play Well With Others

  • Learn from Games

  • Respect the Ethical Dimension

  • Tagged.com is a social networking site founded in 2004. Tagged is the subject of numerous customer complaints for sending deceptive bulk mail and is regarded as a phishing and spamming site and an 'E-mail scam' by consumer anti-fraud advocates.

    A TIME magazine article called Tagged 'The World's Most Annoying Website'. Tagged asks users for their email username and password, checks their email address books for contacts and repeatedly sends email invitations to people who are not yet on Tagged, stating that they have been 'added as a friend' or that the inviter had sent them photos on Tagged. These emails were discussed as possible spam by Black Web 2.0. The resemblance to a virus has often been mentioned, including by urban legend site Snopes.com. The New York Times referred to the practice as 'contact scraping'

  • Give people a way to identify themselves and be identified.
    Personas - erin malone - sports star, writer, singer, IA/UX person

  • Personas - erin malone - sports star, writer, singer, IA/UX person
    TRACK STARHigh Hurdles
    First in District
    Second in State

    Edited by Random House Editor
    Reader at Open Books Seatle


  • Friendster and the fakesters
    Make sure there is a “there” there. Give users a reason to rally.
    Why would someone come to your site? What’s your social object?

  • Term Social Objects coined by Jyri Engstrom

    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.
  • Give people something to do
    Activities - participation ladder
    building blocks

  • Collecting - passive
    Sharing - one to one
    Broadcasting - one to many
    Feedback - commenting on objects
    Communicating - conversations
    Collaboration - making together
    Social Media - the full ecosystem

  • Enable a bridge to real life

    Let’s put on a show = spontaneous gatherings, broadcasting of gatherings - enable, embrace location and mobile tools - and the crossover
    Hey Kids - Let’s put on a show. The classic Andy Rooney / Judy Garland movies from 1939 involved gathering their group of friends together for a spontaneous show to raise money for something or other and then they would announce the show to everyone in town. The social tools that create a bridge to real life allow you to gather friends together, broadcast to friends, broadcast to others (public forum), plan real life meetups, and then capture the event and archive it for later viewing back online.

  • Gently Moderate
    Let the Community elevate people and content they value - of the people, by the people with some gentle oversight

    Reputation, recommendations
    gentle moderation
    Flickr - interestingness - views, comments, favorites plus some gentle algorythm to elevate the objects the community values
    * Views, internal and external to Flickr, of the photo
    * Number of comments on the photo, and also who comments on the photo
    * Tags applied to the photo
    * Flickr discussion groups in which the photo appears
    * Favorites, a.k.a Flickr bookmarking, of the photo
    * Time varying behavior of the above factors

  • Cargo Cult
    Wikipedia definition: any group of people who imitate the superficial exterior of a process or system without having any understanding of the underlying substance. The error of logic made by the islanders consisted of mistaking a necessary condition (i.e., building airstrips, control towers, etc.) for cargo to come flying in, for a sufficient condition for cargo to come flying in, thereby reversing the causation. On a lower level, they repeated the same error by e.g. mistaking the necessary condition (i.e. build something that looks like a control tower) for building a control tower, for a sufficient condition for building a control tower.

    Zoomr, flickr
    e out of name, tagline, source code
    AOL homepage - copy Yahoo including source code

    iPhone - Pre, Etc - other phones

    Patterns - used blindly without understanding context and need


  • Don’t Break Email
    Twitter DMs to email versus Basecamp replies to posts announced via email

  • The Password Anti-Pattern
    Teach a man to be phished

  • More about the password anti-pattern:

  • Ex-Boyfriend Bug
    Dodgeball - group connections

  • Potemkin Village

  • IAI Workshop for IA SUmmit 2010 - Designing Social Interfaces

    1. 5 principles 5 practices 5 anti-patterns Designing Social Interfaces christian crumlish & erin malone
    2. A little about us: erin malone @emalone
    3. A little about us: erin malone @emalone
    4. A little about us: christian crumlish @mediajunkie
    5. A little about us: christian crumlish @mediajunkie
    6. People are unpredictable
    7. new social media : always awkward
    8. Designing social requires different thinking Organic vs Static Emotional vs Data Relationships vs Transactions Continuum vs One Grand Gesture ~ Deb Shultz, Altimeter Group photo © erin malone
    9. 5 Principles
    10. Pave the cowpaths
    11. Dogster started as a photosharing service. Shifted focus to pets once company saw people were primarily uploading pics and talking about their dogs.
    12. Talk like a person
    13. Do you want to talk to your customers like this? Or like this?
    14. How to talk like a person Conversational Voice Self-Deprecating Error Messages Ask Questions Your vs. My No Joking Around
    15. Be open. Play well with others
    16. 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
    17. Learn from games
    18. Learn from games What are Game Mechanics? The systems and features that make games fun, compelling and addictive. ~Amy Jo Kim
    19. How to learn from games Game Mechanics Collecting gives bragging rights, encourages completion Points game points by systems, social points by others, drives loyalty, drives behavior unlock new powers or access Feedback social feedback drives engagement accelerates mastery and adds fun Exchanges structured social interactions explicit or implicit Customization character or interface
    20. Respect the ethical dimension
    21. Respect the ethical dimension Some of the forces that must be balanced, to apply many of these patterns, involve ethical dilemmas
    22. 5a brief tour of 96 patterns or Practices
    23. The Ecosystem
    24. Give people a way to be identified
    25. And to identify themselves
    26. Self
    27. Attribution and Avatars Identity doesn’t alway have to manifest itself in a complicated or robust pro le.
    28. User Cards Identity doesn’t alway have to manifest itself in a complicated or robust pro le.
    29. Make sure there is a “there” there. What’s your social object?
    30. The Social Object, in a nutshell, is the reason two people are talking to each other, as opposed to talking to somebody else.
    31. Social Networks form around Social Objects, not the other way around. ~ Hugh MacLeod GapingVoid.com
    32. Give people something to do
    33. It’s a continuum
    34. Activities involving objects
    35. It’s a continuum Collecting One Sharing One to one Broadcasting & One to many Publishing 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
    36. Activities involving objects Books: ratings, reviews, search Public conversation
    37. Activities involving objects Photos: collecting, sharing, comments, favoriting, groups, broadcasting
    38. Activities involving objects Labels, ratings, reviews, levels Collecting, Ratings, Reviews Tagging Sharing
    39. Enable a bridge to real life
    40. Bridging Real Life
    41. Taking it offline Geo-Mobile Face-to-face meeting
    42. And then back online After the Party Face-to-face meeting
    43. Let the community elevate people & content they value Gently moderate
    44. Connections & Community
    45. Enabling people to make connections Circles of Connections Find People Adding Friends Fans & Fame
    46. Enter text here Norms Report Abuse Model Citizen
    47. 5 Anti-Patterns
    48. Cargo Cult
    49. Cargo Cult
    50. Cargo Cult
    51. Don’t break email
    52. Don’t break email Facebook breaks email since you can’t 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.
    53. The Password Anti-Pattern
    54. The Password Anti-Pattern iLike Plaxo
    55. The Password Anti-Pattern yelp
    56. The Ex-boyfriend bug
    57. Potemkin Village
    58. 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.
    59. The Ecosystem - it’s balance with tradeoffs
    60. Thanks Erin @emalone erin@tangible-ux.com Christian @mediajunkie xian@pobox.com buy the book http://www.designingsocialinterfaces.com
    61. How to Play the Game
    62. Game Goals • Build a social digital product • Work as a team to collaborate around an object for a speci c and 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
    63. Game Play