• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HCI: Design Patterns for Social Web Interaction
 

HCI: Design Patterns for Social Web Interaction

on

  • 6,405 views

A presentation about social (Web) interaction in the context of HCI (Human-Computer Interaction), with a focus on specific design patterns & several case studies. ...

A presentation about social (Web) interaction in the context of HCI (Human-Computer Interaction), with a focus on specific design patterns & several case studies.

For more details, visit http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html

Statistics

Views

Total Views
6,405
Views on SlideShare
3,314
Embed Views
3,091

Actions

Likes
7
Downloads
35
Comments
0

8 Embeds 3,091

http://www.scoop.it 3025
http://twinblr.tumblr.com 31
https://twitter.com 16
http://sprmario.tumblr.com 11
https://hootsuite.scoop.it 4
http://www.podidoo.com 2
http://www.twylah.com 1
http://www.pinterest.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HCI: Design Patterns for Social Web Interaction HCI: Design Patterns for Social Web Interaction Presentation Transcript

    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco design patterns for social interactions Human-Computer Interaction
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco “Be civil to all; sociable to many; familiar with few; friend to one; enemy to none.” Benjamin Franklin
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Patterns of human interaction (Jenifer Tidwell, 2006) describing human behaviors
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Safe exploration “Let me explore without getting lost or getting into trouble.” Human behavior
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Instant gratification “I want to accomplish something now, not later.” Human behavior
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Instant gratification Human behavior
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Satisfying “This is good enough. I don’t want to spend more time learning to do it better.” Human behavior
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Changes in midstream “I changed my mind about what I was doing.” Human behavior
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Deferred choices “I don’t want to answer that now; just let me finish.” Human behavior
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Incremental construction “Let me change this. That doesn’t look right; let me change it again. That’s better!” Human behavior
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Incremental construction when a tool offers support for creative activities, these could maintain the user’s flow Human behavior
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Habituation “That gesture works everywhere else; why doesn’t it work here, too?” Human behavior
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Spatial memory “I swear that button was here a minute ago. Where did it go?” Human behavior
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Prospective memory “I’m putting this here to remind myself to deal with it later.” Human behavior
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Streamlined repetition “I have to repeat this how many times?” Human behavior
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Keyboard only “Please don’t make me use the mouse!” Human behavior
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Other people’s advice “What did everyone else say about this?” Human behavior
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco social UX patterns
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Patterns dealing with the interactivity within a social (Web) application Christian Crumlish & Erin Malone, 2009
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Patterns social computing Thomas Erickson (2013) www.interaction-design.org/encyclopedia/social_computing.html
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Self Activities Com- munity Crumlish & Malone, 2009 reputation sharing presence
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco social media ecosystem (Crumlish & Malone, 2009)
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco social aspects in the enterprise (Crumlish & Malone, 2009)
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design for Everyone Talk Like a Person Be Open Be a Game Check Your Ethics Don’t Break E-mail! Cargo Cult – antipattern Social UX: Core Principles
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Software as a human communicating to users – and potential customers – in a human voice  humane interfaces Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Conversation adopting a conversational tone use the language of contemporary speech, not that of textbooks, tax forms, or street signs
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Conversation used for including instructions, errors, and other messages coming from the system and addressed to the reader, visitor, or member
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco ???
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Conversation avoid obscure slang unless you have already established confidence in the minds of your users being cute ≠ being real
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Ask questions people naturally have questions and ask them
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Ask questions could be used for explanatory messages, help text, and labels on potential but currently unpopulated features in the user’s interface
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Your versus My labeling items with “My” imitates the user’s point of view My Computer, My Yahoo!, My watchlist versus “Your”-like labels reinforce the dialogue YouTube
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Your versus My use this pattern when labeling objects belonging to or chosen by the individual user your photostream, your contacts, your groups,…
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX No joking around people appreciate humor and ice-breaking witticisms, but unserious text in an UI could be confusing (the sense of humor is a unique thing in each person)
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX No joking around software is not joking let your users tell each other their own jokes
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Representing the Self engagement identity presence reputation Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco User engagement questions: how to avoid the cold-start? how to encourage people to come in and participate? how to avoid privacy problems? how to encourage early adopters? … Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco www.drawnimal.com help kids start drawing & learn the alphabet discussion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-up and registration use the pattern when: require leaving personal or private information, and privacy and security are a concern
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-up and registration use the pattern when: financial transactions require remembering billing, shipping, and transaction information
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-up and registration collect the bare minimum of information needed that still allows your user to participate in the site consider whether or not registration is even needed
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-up and registration provide explanations about what each piece of information requested will provide in terms of user benefits e.g., geo-location provides recommendations of relevant items: stores, hospitals,…
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-up and registration the application will require registration at the last possible moment in the users’ process of exploring the site
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-up and registration after registration, deliver the users back to the task they were in before they were sidetracked
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-up and registration allow the creation of a unique identifier by allowing the use of an e-mail address, which is a unique piece of data and can be verified
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-up and registration clearly label what elements are required for a username and password
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-up and registration provide (positive) feedback as the user fills out the form
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-up and registration include CAPTCHA-based verification only if absolutely necessary ???
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-up and registration consider skipping the entire registration form and allow users to sign up by using other methods open standards: OpenID, OAuth, WebID initiative: Mozilla Persona – www.mozilla.org/persona/
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-up and registration see also: Luke Wroblewski, “Sign Up Forms Must Die”, A List Apart Magazine, 2008 http://www.alistapart.com/articles/signupforms/
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion good or bad design?
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-up and registration remark: the Web form should easily navigable via the keyboard, with the Submit button triggered by the Enter key
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-in we must provide a clearly labeled Sign In/Login button
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-in we must present input fields for the username & password + a clear way to retrieve the username/password if it is forgotten
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-in if appropriate, allow the user to stay signed in to the site for an extended amount of time
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Sign-in delay the sign-in requirement until the last possible moment
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Authorize this pattern could be used when: features are enhanced or expanded by accessing data and files from another site
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Authorize this pattern could be used when: user-generated content or data on a given site has the potential to enhance/enable other sites
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Authorize using an authorization flow and protocol (e.g., OAuth) allows users to give access among sites without exposing their usernames and passwords
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Welcome area provides the new user with a welcome message it could present the most important or useful features
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Welcome area do not use intrusive methods – e.g., pop-ups do not force users to take welcome tours assume the new users are not stupid
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco User identity “The ability to create and manage an identity within the context of the site is the foundation upon which the rest – contributions, relationships, reputations – is built. It’s about people and who they portray themselves to be.” Crumlish & Malone, 2009 Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco User identity tripartite identity pattern account unique identifier DB key login identifier session authentication public identifier(s) social identify Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX User profile profile = the “face” of the user in the system conveying a central, public location to display all the relevant content and information about a user to be exposed to others
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX User profile don’t make the display name the same as the user login an important aspect concerning security: phishers
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX User profile allow users to control the levels of access to information private versus “friends” versus public
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX User profile users must have the possibility to customize their profile
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX User profile collect only the amount of information necessary for meaningful relationships or community activities
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX User profile if possible, allow the user to migrate profile content, a profile image, nickname, and core personal information from other services using certain methods e.g., OpenSocial API, Portable Contacts, Yahoo! Social Platform
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX User profile other features/problems: profile decorating profile claiming faceted identity
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Personal dashboard users want to check in and see status updates from their friends, current activity from their social graph, comments from friends on recent posts, etc.
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion Facebook Graph Search www.facebook.com/about/graphsearch critics concerning the user privacy: http://actualfacebookgraphsearches.tumblr.com/
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Personal dashboard the personal dashboard is the companion to the profile should contain information and access to activities that the user wants to participate in on an ongoing basis to encourage repeat usage
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Identity/Contact cards used to offer additional information about a user, allowing the possibility to subscribe to, follow, connect to, unsubscribe, block the user
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Avatars giving a visual representation for an online identify “Profile pictures – or avatars, in online parlance – show people at our thinnest, handsomest, most fun.” (Gillian Reagan, 2008)
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Avatars illustrated representations allow for a degree of anonymity, but do reduce the perceived credibility of the poster in many cases
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Avatars the users must have the possibility to use multiple avatars consider allowing multiple images to be uploaded and stored for later selection
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Avatars mood expressions allow users to attach a special status message or emoticon to supplement their avatars by indicating a particular mood – e.g., delighted, bored,…
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Online presence designing a presence UI is to maximize opportunities for users to declare themselves present to one another Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Online presence designing a presence UI is to maximize opportunities for users to declare themselves present to one another online presence management: publish, display, maintain (update), subscribe to, filter,… Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Online presence designing a presence UI is to maximize opportunities for users to declare themselves present to one another facets of presence: status, current task, mood, environment, location, platform/device status, others Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Online presence common patterns: Availability Buddy List Microblogging Updates Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco User reputation a person participating in a social structure expects to develop a reputation and hopes for insight into the reputations of others Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco User reputation reputation influences behavior a reputation system involves tracking desirable behavior and then recognizing it publicly Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco User reputation reputation influences behavior a reputation system involves tracking desirable behavior and then recognizing it publicly examples: Klout, Mozilla OpenBadges Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Named levels define a family of reputations on a progressive continuum to enable consumers to discover and identify high-quality contributors BronzeSilverGold Hated HostileUnfriendlyNeutralFriendly…
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Labels use “special identifiers” to gratify a person allows non-linear reputation designations
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Labels examples: Top Contributor (Yahoo! Answers) Troll (37 Signals) see also Art of Trolling: http://artoftrolling.memebase.com/
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco User reputation could be measured via awards: Collectible achievements, Peer-to-peer achievements, Nudging, Testimonials (Personal recommendations) examples: LinkedIn, P2PU, Xbox LIVE, Yelp, etc. Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco User reputation could be measured via rankings: Points Leaderboard Top N Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco User reputation many leaderboards make the mistake of basing standings only on what is easy to measure it is difficult to measure qualitative aspects Leaderboard could be also considered as an anti-pattern Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social objects “Social networks consist of people who are connected by a shared object.” Jyri Engeström Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social objects “You can have a conversation without a social object. You cannot have a social object without a conversation. It is the conversation that makes the object ‘social’.” JP Rangaswami Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social objects collecting social objects: Saving, Favorites, Displaying, Add/Subscribe, Tagging, Find with tags, Tag cloud Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social objects sharing social objects: personal level Bookmarklet Send/Share widget Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social objects sharing social objects: private (direct) level Send this Share application Give Gift Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social objects sharing social objects: public level Share this Embedding Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Broadcasting from tribe to viral actions “The key is to design flexible frameworks and spaces for people to define their own sense of place.” Crumlish & Malone, 2009 Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Broadcasting design patterns concerning blogs: Blogs: presentation Blogs: ownership Microblogging Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Lifecycle gives users an indication of when an action was performed (item added, conversation started,…) distinguishes a social flow between two people indicates the freshness of an item, especially if it’s highlighted
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Terms of service the “Terms of Service Agreement” document provides a legal framework for the use and dissemination of “information services” and intellectual property assets provided on a Website
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Terms of service use this pattern in check-out flows and sign-up forms
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Terms of service types of open licenses: Public Domain http://publicdomainmanifesto.org/ Creative Commons http://creativecommons.org/licenses/ Copyleft http://www.gnu.org/copyleft/
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Feedback soliciting feedback from people, no matter the form, is one of the easiest ways to engage a community Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Feedback important design (anti)patterns: Vote to promote Thumbs up/down ratings Ratings (Starts or 1—5) Comments Reviews Soliciting feedback Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Collaboration important design patterns: Manage project Voting (Polls, Surveys) Collaborative editing Edit this page Wiki way Crowdsourcing Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social media tools must offer support for filtering & recommending resources of interest Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Filtering used to offer methods for social filtering in order to minimize information overload
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Filtering we must provide affordances for restoring (or, if necessary, imposing) contextual filters on data streams so that they can be parsed in more manageable groupings
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Recommendations offering (“intelligent”) recommendations when sufficient self-declared data about users is available to be able to identify similarities and make helpful guesses about likely interesting content
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Recommendations several public APIs focused on (social) recommendations: Apache Mahout – http://mahout.apache.org/ Amazon Mechanical Turk – http://www.mturk.com/ Hunch – http://hunch.com/developers/ Zemanta – http://developer.zemanta.com/ www.programmableweb.com/apis/directory/1?apicat=Recommendations
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco recommendations push objects toward people rather than relying on them to be passively discovered
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Recommendations anti-pattern (reported by @victorporof)
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social search Real-time search Conversational (Subjective) search examples: Google+, LinkedIn, Reddit, Quora, Stack Overflow, Twitter,… Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Relationships the ability to find friends and make them a part of user circle for participation is one of the key interactions to design when building a social application Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Relationships the ability to find friends and make them a part of user circle for participation is one of the key interactions to design when building a social application terminology: cohort, colleague, contact, family, fan, follow, follower, friend Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Relationships important design patterns: Find people Adding friends Circles of connections Publicize Relationships Unfriending Groups Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Community management norms expected behaviors when operating or working with a system Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Community management norms socially enforced less restrictive than rules Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Community management norms explicit – e.g., FAQs, user agreements versus implicit – not formally available, emerging through daily interactions of the group Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Community management necessity of publishing a clear and easy to find set of guidelines Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco example: SoundCloud community guidelines http://soundcloud.com/ community-guidelines
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Community management collaborative governance + group moderation: Collaborative filtering Report abuse Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Participation to events support for activities on user real location: Being local Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Face-to-face meeting helps to facilitate face-to-face meetings between people
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Face-to-face meeting pre-event creation users could enter full details of a (private/public) event: location, time, description, special considerations,… a calendar must be integrated
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Face-to-face meeting pre-event creation locations could be selected from an existing list consider indicating nearby establishments (parking, restaurants, ATMs,…), which allows for comprehensive planning
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Face-to-face meeting pre-event creation provide full address, contact possibilities + other relevant details: costs, restrictions, ambiance
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Face-to-face meeting pre-event creation users could RSVP to events + consider showing RVSPs to other users allow users to easily invite their (subset of) network of friends
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Face-to-face meeting during a public event allow users to make comments in real-time e.g., integrating social Web (mobile) applications
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Face-to-face meeting post-event offer tools to attach photos, presentations, other resources to the event
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Face-to-face meeting post-event if the user attended (or RSVP’d “yes”), show the event in his/her calendar of past events consider asking the attendees to rate the event afterward
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Social UX Face-to-face meeting post-event for public events, allow users to tag/search/filter the information of interest
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Participation to events planning an event and inviting friends to join the party: Party allow users to create customized and personal invitations Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Participation to events finding or submitting an event (public or private) based on a date or within a certain date range: Calendaring Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Participation to events alerting others where an event is happening: Reminding encourage sending reminders to a mobile device or email account Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Participation to events Geo-tagging Geo-mapping Geo-mashing: Neighborhood, Mobile & location Best Practices and Guidelines for Location Based Services: http://www.ctia.org/content/index.cfm/AID/11300 Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Openness important aspects: open source, open infrastructure, open architecture, open standards, open access, open content (data), open identity Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Openness Badging packaging up frequently personalized information in a portable format for reusing in other context Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Openness also, to be considered: Embedded semantics (microformats, schema.org HTML5 microdata, RDFa) Import, Hosted Modules, Open APIs Social UX
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Problem: converting a classical Website into a “social” one case study
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Problem: converting a classical Website into a “social” one possible solutions: talk like a person sign in/sign up object-related activities: tagging, rating, sharing user identity: contact cards, attribution relationships: friends, followers, social graphs case study
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Problem: “people come and read my content, but they’re invisible to each other…” case study
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Problem: “people come and read my content, but they’re invisible to each other…” solution: providing layers of participation presence indicators, peer-to-peer awards, nudging, public conversation, followers badge case study
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Problem: “I have an active community on my Website, but people are misbehaving!” case study
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Problem: “I have an active community on my Website, but people are misbehaving!” solutions: norm + model citizen community management – e.g., reporting abuse reputation ratings case study
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Problem: interacting via mobile devices case study
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Problem: interacting via mobile devices solutions: geo-location gatherings current status broadcasting general mobile patterns: infinite lists, one-click gesture-based interaction case study
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco case study mobile & location patterns
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco case study gatherings
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco case study status broadcasting (statuscasting)
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco For more details, consult C. Crumlish & E. Malone, Designing Social Interfaces, O’Reilly, 2009 www.designingsocialinterfaces.com/patterns.wiki
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco “Conclusion” designing social applications
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco