SOCIAL INTERFACE DESIGN
Design Patterns & Best Practices
THE SOCIAL WEB
Past: Discussion Boards, Mailing Lists.

Present: Tagging, Ratings, Reviews, Sharing, Blogs,
Collaboration,...
SOCIAL NEEDS
Expressing Identity

Status & Self-Esteem

Giving & Getting Help

Affiliation & Belonging

Sense of Community
SOCIAL NEEDS
                                  Expressing   Status & Self-   Giving & Getting   Affiliation &    Sense of
 ...
SOCIAL NEEDS
                                  Expressing   Status & Self-   Giving & Getting   Affiliation &    Sense of
 ...
SOCIAL NEEDS
                                  Expressing   Status & Self-   Giving & Getting   Affiliation &    Sense of
 ...
SOCIAL NEEDS
                                  Expressing   Status & Self-   Giving & Getting   Affiliation &    Sense of
 ...
SOCIAL NEEDS
                                  Expressing   Status & Self-   Giving & Getting   Affiliation &    Sense of
 ...
SOCIAL NEEDS
                                  Expressing   Status & Self-   Giving & Getting   Affiliation &    Sense of
 ...
SOCIAL NEEDS
                                  Expressing   Status & Self-   Giving & Getting   Affiliation &    Sense of
 ...
DESIGN PATTERNS
What’s a Pattern?

A pattern describes an optimal solution to a common problem
within a specific context.

...
PEOPLE
IDENTITY
User identity and the ability to control its
presentation is a core element of building
a social web site....
PEOPLE
PROFILE

The user wants a central,
public location to display all
the relevant content and
information about themse...
PEOPLE
PRESENCE

Users need to know who else
is available or present in a
social context, or to
broadcast and share their
...
PEOPLE
                              The Competitive Spectrum

REPUTATION

A person participating in a
social structure ex...
ACTIVITIES
COLLECTING
People will share what they find or
have collected, and like a trophy
case in the home, they will dis...
ACTIVITIES
SHARING
Enable people to spontaneously
share content or objects they find by
sending them to a friend or posting...
ACTIVITIES
FEEDBACK
The user wants to leave an
opinion or evaluation about an
object, person, place or thing.
Quick opinio...
QUESTIONS?
rizkysyazuli@gmail.com or @rizkysyazuli
REFERENCE
The Web Now: Social. Luke Wroblewski.

Enam Kebutuhan Sosial Online. Nukman Luthfie. (http://is.gd/5kYBQ)

Yahoo!...
Upcoming SlideShare
Loading in …5
×

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

2,155 views

Published on

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,155
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
32
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • [BarCamp ID] Social Interface Design - Design Patterns & Best Practices

    1. 1. SOCIAL INTERFACE DESIGN Design Patterns & Best Practices
    2. 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. 3. SOCIAL NEEDS Expressing Identity Status & Self-Esteem Giving & Getting Help Affiliation & Belonging Sense of Community
    4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 13. PEOPLE PROFILE The user wants a central, public location to display all the relevant content and information about themselves to others.
    14. 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. 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. 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. 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. 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. 19. QUESTIONS? rizkysyazuli@gmail.com or @rizkysyazuli
    20. 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)

    ×