hci: design patterns for social web interaction

Post on 26-Jan-2015

156 Views

Category:

Design

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

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

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

BronzeSilverGold Hated HostileUnfriendlyNeutralFriendly…

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

top related