SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Downloaden Sie, um offline zu lesen
SOCIAL INTERFACE DESIGN
Design Patterns & Best Practices
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.
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
                                   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)
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)
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)
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)
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)
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)
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)
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.
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.
PEOPLE
PROFILE

The user wants a central,
public location to display all
the relevant content and
information about themselves
to others.
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.
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
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.
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).
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.
QUESTIONS?
rizkysyazuli@gmail.com or @rizkysyazuli
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)

Weitere ähnliche Inhalte

Andere mochten auch

Website Redesigns: Why they Fail and How to Ensure Success
Website Redesigns: Why they Fail and How to Ensure SuccessWebsite Redesigns: Why they Fail and How to Ensure Success
Website Redesigns: Why they Fail and How to Ensure SuccessOptimizely
 
GreenTomato Mobile Solutions Consultancy Jun2013
GreenTomato Mobile Solutions Consultancy Jun2013GreenTomato Mobile Solutions Consultancy Jun2013
GreenTomato Mobile Solutions Consultancy Jun2013Green Tomato Limited
 
How to design a Black Friday banner ad
How to design a Black Friday banner adHow to design a Black Friday banner ad
How to design a Black Friday banner adBannersnack
 
Ims2016 micro apps_robertbrennan_pll_frequencyplanning_v2
Ims2016 micro apps_robertbrennan_pll_frequencyplanning_v2Ims2016 micro apps_robertbrennan_pll_frequencyplanning_v2
Ims2016 micro apps_robertbrennan_pll_frequencyplanning_v2Analog Devices, Inc.
 
Mobile First & Digital Experience Strategy @ CeBIT 2015
Mobile First & Digital Experience Strategy @ CeBIT 2015Mobile First & Digital Experience Strategy @ CeBIT 2015
Mobile First & Digital Experience Strategy @ CeBIT 2015Christian Paul Stobbe
 
Building mobile applications with Meteor: Eat Local case study
Building mobile applications with Meteor: Eat Local case studyBuilding mobile applications with Meteor: Eat Local case study
Building mobile applications with Meteor: Eat Local case studyRizky Syazuli
 
PayPal Real Time Analytics
PayPal  Real Time AnalyticsPayPal  Real Time Analytics
PayPal Real Time AnalyticsAnil Madan
 
DDB Being Agile
DDB Being AgileDDB Being Agile
DDB Being AgileLeo Rayman
 
HSBC Hedge weekly2013 no05
HSBC Hedge weekly2013 no05HSBC Hedge weekly2013 no05
HSBC Hedge weekly2013 no05Brian Shapiro
 
HPE IDOL Technical Overview - july 2016
HPE IDOL Technical Overview - july 2016HPE IDOL Technical Overview - july 2016
HPE IDOL Technical Overview - july 2016Andrey Karpov
 
финансовый рынок в 2026 nigel vooght finopolis2016_13окт
финансовый рынок в 2026 nigel vooght finopolis2016_13октфинансовый рынок в 2026 nigel vooght finopolis2016_13окт
финансовый рынок в 2026 nigel vooght finopolis2016_13октfinopolis
 
UX STRAT USA: Dr Jeffrey Onken, "Experience Mapping UX Change Management In L...
UX STRAT USA: Dr Jeffrey Onken, "Experience Mapping UX Change Management In L...UX STRAT USA: Dr Jeffrey Onken, "Experience Mapping UX Change Management In L...
UX STRAT USA: Dr Jeffrey Onken, "Experience Mapping UX Change Management In L...UX STRAT
 
Microservices are the Future! (...and always will be) - Josh Holtzman, PayPal...
Microservices are the Future! (...and always will be) - Josh Holtzman, PayPal...Microservices are the Future! (...and always will be) - Josh Holtzman, PayPal...
Microservices are the Future! (...and always will be) - Josh Holtzman, PayPal...Ambassador Labs
 
Training Webinar: From a bad to an awesome user experience - Training Webinar
Training Webinar: From a bad to an awesome user experience - Training WebinarTraining Webinar: From a bad to an awesome user experience - Training Webinar
Training Webinar: From a bad to an awesome user experience - Training WebinarOutSystems
 
UX STRAT USA: Sean Rhodes, "UX Strategy For Increasingly Disruptive Futures S...
UX STRAT USA: Sean Rhodes, "UX Strategy For Increasingly Disruptive Futures S...UX STRAT USA: Sean Rhodes, "UX Strategy For Increasingly Disruptive Futures S...
UX STRAT USA: Sean Rhodes, "UX Strategy For Increasingly Disruptive Futures S...UX STRAT
 

Andere mochten auch (18)

Website Redesigns: Why they Fail and How to Ensure Success
Website Redesigns: Why they Fail and How to Ensure SuccessWebsite Redesigns: Why they Fail and How to Ensure Success
Website Redesigns: Why they Fail and How to Ensure Success
 
HSBC Chicago Investor Roadshow
HSBC Chicago Investor RoadshowHSBC Chicago Investor Roadshow
HSBC Chicago Investor Roadshow
 
GreenTomato Mobile Solutions Consultancy Jun2013
GreenTomato Mobile Solutions Consultancy Jun2013GreenTomato Mobile Solutions Consultancy Jun2013
GreenTomato Mobile Solutions Consultancy Jun2013
 
How to design a Black Friday banner ad
How to design a Black Friday banner adHow to design a Black Friday banner ad
How to design a Black Friday banner ad
 
Ims2016 micro apps_robertbrennan_pll_frequencyplanning_v2
Ims2016 micro apps_robertbrennan_pll_frequencyplanning_v2Ims2016 micro apps_robertbrennan_pll_frequencyplanning_v2
Ims2016 micro apps_robertbrennan_pll_frequencyplanning_v2
 
Mobile First & Digital Experience Strategy @ CeBIT 2015
Mobile First & Digital Experience Strategy @ CeBIT 2015Mobile First & Digital Experience Strategy @ CeBIT 2015
Mobile First & Digital Experience Strategy @ CeBIT 2015
 
ey-fso-barometredesbanques2016
ey-fso-barometredesbanques2016ey-fso-barometredesbanques2016
ey-fso-barometredesbanques2016
 
Citi DLF IPL 2010 - Campaign Strategy
Citi DLF IPL 2010 - Campaign StrategyCiti DLF IPL 2010 - Campaign Strategy
Citi DLF IPL 2010 - Campaign Strategy
 
Building mobile applications with Meteor: Eat Local case study
Building mobile applications with Meteor: Eat Local case studyBuilding mobile applications with Meteor: Eat Local case study
Building mobile applications with Meteor: Eat Local case study
 
PayPal Real Time Analytics
PayPal  Real Time AnalyticsPayPal  Real Time Analytics
PayPal Real Time Analytics
 
DDB Being Agile
DDB Being AgileDDB Being Agile
DDB Being Agile
 
HSBC Hedge weekly2013 no05
HSBC Hedge weekly2013 no05HSBC Hedge weekly2013 no05
HSBC Hedge weekly2013 no05
 
HPE IDOL Technical Overview - july 2016
HPE IDOL Technical Overview - july 2016HPE IDOL Technical Overview - july 2016
HPE IDOL Technical Overview - july 2016
 
финансовый рынок в 2026 nigel vooght finopolis2016_13окт
финансовый рынок в 2026 nigel vooght finopolis2016_13октфинансовый рынок в 2026 nigel vooght finopolis2016_13окт
финансовый рынок в 2026 nigel vooght finopolis2016_13окт
 
UX STRAT USA: Dr Jeffrey Onken, "Experience Mapping UX Change Management In L...
UX STRAT USA: Dr Jeffrey Onken, "Experience Mapping UX Change Management In L...UX STRAT USA: Dr Jeffrey Onken, "Experience Mapping UX Change Management In L...
UX STRAT USA: Dr Jeffrey Onken, "Experience Mapping UX Change Management In L...
 
Microservices are the Future! (...and always will be) - Josh Holtzman, PayPal...
Microservices are the Future! (...and always will be) - Josh Holtzman, PayPal...Microservices are the Future! (...and always will be) - Josh Holtzman, PayPal...
Microservices are the Future! (...and always will be) - Josh Holtzman, PayPal...
 
Training Webinar: From a bad to an awesome user experience - Training Webinar
Training Webinar: From a bad to an awesome user experience - Training WebinarTraining Webinar: From a bad to an awesome user experience - Training Webinar
Training Webinar: From a bad to an awesome user experience - Training Webinar
 
UX STRAT USA: Sean Rhodes, "UX Strategy For Increasingly Disruptive Futures S...
UX STRAT USA: Sean Rhodes, "UX Strategy For Increasingly Disruptive Futures S...UX STRAT USA: Sean Rhodes, "UX Strategy For Increasingly Disruptive Futures S...
UX STRAT USA: Sean Rhodes, "UX Strategy For Increasingly Disruptive Futures S...
 

Kürzlich hochgeladen

Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 

Kürzlich hochgeladen (19)

Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 

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

  • 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.
  • 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)