[BarCamp ID] Social Interface Design - Design Patterns & Best Practices

  • 1,860 views
Uploaded on

 

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,860
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
30
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. SOCIAL INTERFACE DESIGN Design Patterns & Best Practices
  • 2. THE SOCIAL WEB Past: Discussion Boards, Mailing Lists. Present: Tagging, Ratings, Reviews, Sharing, Blogs, Collaboration, Profiles, Etc.. Always: People united by shared interests or goals.
  • 3. SOCIAL NEEDS Expressing Identity Status & Self-Esteem Giving & Getting Help Affiliation & Belonging Sense of Community
  • 4. SOCIAL NEEDS Expressing Status & Self- Giving & Getting Affiliation & Sense of Identity Esteem Help Belonging Community Blogs Video, Content Sharing, Tagging Sites (Youtube, Delicious) Self-Forming Groups (Yahoo or Google Groups) Profile-Driven Social Networks (LinkedIn, Facebook) Rating, Review Sites (Yelp, TripAdvisor) Purpose-Driven Social Networks (Slashdot, Politikana)
  • 5. SOCIAL NEEDS Expressing Status & Self- Giving & Getting Affiliation & Sense of Identity Esteem Help Belonging Community Blogs Video, Content Sharing, Tagging Sites (Youtube, Delicious) Self-Forming Groups (Yahoo or Google Groups) Profile-Driven Social Networks (LinkedIn, Facebook) Rating, Review Sites (Yelp, TripAdvisor) Purpose-Driven Social Networks (Slashdot, Politikana)
  • 6. SOCIAL NEEDS Expressing Status & Self- Giving & Getting Affiliation & Sense of Identity Esteem Help Belonging Community Blogs Video, Content Sharing, Tagging Sites (Youtube, Delicious) Self-Forming Groups (Yahoo or Google Groups) Profile-Driven Social Networks (LinkedIn, Facebook) Rating, Review Sites (Yelp, TripAdvisor) Purpose-Driven Social Networks (Slashdot, Politikana)
  • 7. SOCIAL NEEDS Expressing Status & Self- Giving & Getting Affiliation & Sense of Identity Esteem Help Belonging Community Blogs Video, Content Sharing, Tagging Sites (Youtube, Delicious) Self-Forming Groups (Yahoo or Google Groups) Profile-Driven Social Networks (LinkedIn, Facebook) Rating, Review Sites (Yelp, TripAdvisor) Purpose-Driven Social Networks (Slashdot, Politikana)
  • 8. SOCIAL NEEDS Expressing Status & Self- Giving & Getting Affiliation & Sense of Identity Esteem Help Belonging Community Blogs Video, Content Sharing, Tagging Sites (Youtube, Delicious) Self-Forming Groups (Yahoo or Google Groups) Profile-Driven Social Networks (LinkedIn, Facebook) Rating, Review Sites (Yelp, TripAdvisor) Purpose-Driven Social Networks (Slashdot, Politikana)
  • 9. SOCIAL NEEDS Expressing Status & Self- Giving & Getting Affiliation & Sense of Identity Esteem Help Belonging Community Blogs Video, Content Sharing, Tagging Sites (Youtube, Delicious) Self-Forming Groups (Yahoo or Google Groups) Profile-Driven Social Networks (LinkedIn, Facebook) Rating, Review Sites (Yelp, TripAdvisor) Purpose-Driven Social Networks (Slashdot, Politikana)
  • 10. SOCIAL NEEDS Expressing Status & Self- Giving & Getting Affiliation & Sense of Identity Esteem Help Belonging Community Blogs Video, Content Sharing, Tagging Sites (Youtube, Delicious) Self-Forming Groups (Yahoo or Google Groups) Profile-Driven Social Networks (LinkedIn, Facebook) Rating, Review Sites (Yelp, TripAdvisor) Purpose-Driven Social Networks (Slashdot, Politikana)
  • 11. DESIGN PATTERNS What’s a Pattern? A pattern describes an optimal solution to a common problem within a specific context. A pattern is not a finished piece of code or design. Rather, it reflects the sum total of a community's knowledge and experience or expertise in a given domain. The patterns in this presentation are social design patterns. They are interaction pattern for people designing social interfaces.
  • 12. PEOPLE IDENTITY User identity and the ability to control its presentation is a core element of building a social web site. The ability to create and manage an identity in relation to the context of the site is the foundation upon which the rest – contributions, relationships, reputation – are built. It’s about people and who they portray themselves to be.
  • 13. PEOPLE PROFILE The user wants a central, public location to display all the relevant content and information about themselves to others.
  • 14. PEOPLE PRESENCE Users need to know who else is available or present in a social context, or to broadcast and share their own presence status.
  • 15. PEOPLE The Competitive Spectrum REPUTATION A person participating in a social structure expects to Identifying Labels Named Levels develop a reputation and hopes for insight into the reputations of others. Numbered Levels Collectible Achievements Points Ranking
  • 16. ACTIVITIES COLLECTING People will share what they find or have collected, and like a trophy case in the home, they will display those collections for others see, envy, and borrow. Eventually they have conversations around them.
  • 17. ACTIVITIES SHARING Enable people to spontaneously share content or objects they find by sending them to a friend or posting them to a shared, personal or public space. Provide a consistent sharing widget on each page or associated with each granular object (pointers, media, applications).
  • 18. ACTIVITIES FEEDBACK The user wants to leave an opinion or evaluation about an object, person, place or thing. Quick opinions can be captured using ratings or voting ("thumb's up," "I like this!"), and more in- depth evaluations can be captured as reviews.
  • 19. QUESTIONS? rizkysyazuli@gmail.com or @rizkysyazuli
  • 20. REFERENCE The Web Now: Social. Luke Wroblewski. Enam Kebutuhan Sosial Online. Nukman Luthfie. (http://is.gd/5kYBQ) Yahoo! Design Pattern Library. (http://is.gd/5kYEU) Designing Social Interfaces. Christian Crumlish and Erin Malone. (http://is.gd/5kYLC)