[barcamp id] social interface design - design patterns & best practices
TRANSCRIPT
SOCIAL INTERFACE DESIGNDesign Patterns & Best Practices
THE SOCIAL WEBPast: Discussion Boards, Mailing Lists.
Present: Tagging, Ratings, Reviews, Sharing, Blogs, Collaboration, Profiles, Etc..
Always: People united by shared interests or goals.
SOCIAL NEEDSExpressing Identity
Status & Self-Esteem
Giving & Getting Help
Affiliation & Belonging
Sense of Community
SOCIAL NEEDSExpressing
IdentityStatus & Self-
EsteemGiving & Getting
HelpAffiliation & Belonging
Sense of 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)
SOCIAL NEEDSExpressing
IdentityStatus & Self-
EsteemGiving & Getting
HelpAffiliation & Belonging
Sense of 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)
SOCIAL NEEDSExpressing
IdentityStatus & Self-
EsteemGiving & Getting
HelpAffiliation & Belonging
Sense of 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)
SOCIAL NEEDSExpressing
IdentityStatus & Self-
EsteemGiving & Getting
HelpAffiliation & Belonging
Sense of 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)
SOCIAL NEEDSExpressing
IdentityStatus & Self-
EsteemGiving & Getting
HelpAffiliation & Belonging
Sense of 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)
SOCIAL NEEDSExpressing
IdentityStatus & Self-
EsteemGiving & Getting
HelpAffiliation & Belonging
Sense of 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)
SOCIAL NEEDSExpressing
IdentityStatus & Self-
EsteemGiving & Getting
HelpAffiliation & Belonging
Sense of 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)
DESIGN PATTERNSWhat’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.
PEOPLEIDENTITY
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.
PEOPLEPROFILE
The user wants a central, public location to display all the relevant content and information about themselves to others.
PEOPLEPRESENCE
Users need to know who else is available or present in a social context, or to broadcast and share their own presence status.
PEOPLEREPUTATION
A person participating in a social structure expects to develop a reputation and hopes for insight into the reputations of others.
The Competitive Spectrum
Named Levels
Numbered Levels
Identifying Labels
Points
Collectible Achievements
Ranking
ACTIVITIESCOLLECTING
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.
ACTIVITIESSHARING
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).
ACTIVITIESFEEDBACK
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.
REFERENCEThe 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)