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)