Designing Social
Interfaces
IxDA LA July 10, 2013
Christian Crumlish
Director of Product, CloudOn
Five principles
Pave the cowpaths
Dogster started as a photosharing service.
Shifted focus to pets once company saw people
were primarily uploading pics and...
Talk like a person
Do you want to talk to
your customers like thi
Or like this?
How to talk like a person
Conversational Voice
Self-Deprecating Error Messages
Ask Questions
Your vs. My
No Joking Around
Be open: Play well with others
Embrace open standards
Share data outside of the bounds of your application
Accept external data within the sphere of your...
Learn from games
Learn from games
What are Game
Mechanics?
The systems and
features that make
games fun,
compelling and
addictive.
~Amy Jo ...
Respect the ethical dimension
Respect the ethical dimension
Some of the forces that must be
balanced, to apply many of
these patterns, involve ethical
d...
Five Principles
Pave the Cowpaths
Talk Like a Person
Leverage Openness Where Possible
Learn from Games
Respect the Ethical...
Social patterns
The Ecosystem
Give people a way to be identified
Aspects of the Self
Pattern example: User Cards
Identity doesn’t alway have to manifest itself
in a complicated or robust profile.
Make sure there is a “there” there.
s your social object?
Give people something to do
Activities involving objects
Activities involving objects
Collecting, Ratings,
Reviews
Tagging
Sharing
Labels, ratings, reviews,
levels
Activities lead to Relationships
...not the other way
around!
Connections & Community
Enable a bridge to real life
Bridging Real Life
Taking it offline
Geo-Mobile
Face-to-face
meeting
Let the community elevate people & content they value
Gently moderate
Five Practices
Enable People to Control Their Own Identity
Social Networks Need Social Objects
Give People Something to Do...
Anti-patterns
Cargo Cult
Cargo Cult
Cargo Cult
Don’t break email
Don’t break email
Facebook breaks email since you can’t reply to
messages that arrive in the inbox.
Basecamp allows people...
The Password Anti-Pattern
iLike
Plaxo
The Password Anti-Pattern
yelp
The Ex-boyfriend bug
Potemkin Village
Five Anti-Patterns
Cargo Cult Design
Breaking the Email Tubes
The Password Anti-Pattern
Ex-Boyfriend Bug
Potemkin Village ...
Questions?
43|
Thanks!
christian crumlish
director of product, cloudon
xian@cloudon.com
@mediajunkie mediajunkie.com
designingsociali...
Upcoming SlideShare
Loading in...5
×

Designing Social Interfaces - IxDA LA meetup, July 10, 2013

1,775

Published on

As we use social tools on the web, design patterns are emerging. Social design must be organic, not static, emotional, not data-driven. A social experience builds on relationships, not transactions.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,775
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Pave the Cowpaths Dogster 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
  • 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 ?
  • Give people something to do Activities - participation ladder building blocks
  • 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 Erin
  • Don ’t Break Email Twitter DMs to email versus Basecamp replies to posts announced via email
  • More about the password anti-pattern: http://www.designingsocialinterfaces.com/patterns.wiki/index.php?title=The_Password_Anti-Pattern
  • Ex-Boyfriend Bug Dodgeball - group connections
  • Potemkin Village
  • Transcript of "Designing Social Interfaces - IxDA LA meetup, July 10, 2013"

    1. 1. Designing Social Interfaces IxDA LA July 10, 2013 Christian Crumlish Director of Product, CloudOn
    2. 2. Five principles
    3. 3. Pave the cowpaths
    4. 4. Dogster started as a photosharing service. Shifted focus to pets once company saw people were primarily uploading pics and talking about their dogs.
    5. 5. Talk like a person
    6. 6. Do you want to talk to your customers like thi Or like this?
    7. 7. How to talk like a person Conversational Voice Self-Deprecating Error Messages Ask Questions Your vs. My No Joking Around
    8. 8. Be open: Play well with others
    9. 9. 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. 10. Learn from games
    11. 11. Learn from games What are Game Mechanics? The systems and features that make games fun, compelling and addictive. ~Amy Jo Kim
    12. 12. Respect the ethical dimension
    13. 13. Respect the ethical dimension Some of the forces that must be balanced, to apply many of these patterns, involve ethical dilemmas
    14. 14. Five Principles Pave the Cowpaths Talk Like a Person Leverage Openness Where Possible Learn from Games Respect the Ethical Dimension
    15. 15. Social patterns
    16. 16. The Ecosystem
    17. 17. Give people a way to be identified
    18. 18. Aspects of the Self
    19. 19. Pattern example: User Cards Identity doesn’t alway have to manifest itself in a complicated or robust profile.
    20. 20. Make sure there is a “there” there. s your social object?
    21. 21. Give people something to do
    22. 22. Activities involving objects
    23. 23. Activities involving objects Collecting, Ratings, Reviews Tagging Sharing Labels, ratings, reviews, levels
    24. 24. Activities lead to Relationships ...not the other way around!
    25. 25. Connections & Community
    26. 26. Enable a bridge to real life
    27. 27. Bridging Real Life
    28. 28. Taking it offline Geo-Mobile Face-to-face meeting
    29. 29. Let the community elevate people & content they value Gently moderate
    30. 30. Five Practices Enable People to Control Their Own Identity Social Networks Need Social Objects Give People Something to Do Bridge to Real Life (and Back) Community Self-Governance, Gentle Moderation
    31. 31. Anti-patterns
    32. 32. Cargo Cult
    33. 33. Cargo Cult
    34. 34. Cargo Cult
    35. 35. Don’t break email
    36. 36. 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.
    37. 37. The Password Anti-Pattern iLike Plaxo
    38. 38. The Password Anti-Pattern yelp
    39. 39. The Ex-boyfriend bug
    40. 40. Potemkin Village
    41. 41. Five Anti-Patterns Cargo Cult Design Breaking the Email Tubes The Password Anti-Pattern Ex-Boyfriend Bug Potemkin Village Anti-Pattern
    42. 42. Questions?
    43. 43. 43| Thanks! christian crumlish director of product, cloudon xian@cloudon.com @mediajunkie mediajunkie.com designingsocialinterfaces.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×