HCI: Design Patterns for Social Web Interaction

Master on Software Engineering :: Human-Computer Interaction

Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco

design patterns for social interactions

Human-Computer Interaction



“Be civil to all; sociable to many; familiar with few; friend to one; enemy to none.”

Benjamin Franklin



Patterns of human interaction (Jenifer Tidwell, 2006)

describing human behaviors



Safe exploration

“Let me explore without getting lost or getting into trouble.”

Human behavior



Instant gratification

“I want to accomplish something now, not later.”

Human behavior



Instant gratification

Human behavior



Satisfying

“This is good enough. I don’t want to spend more time learning to do it better.”

Human behavior



Changes in midstream

“I changed my mind about what I was doing.”

Human behavior





Deferred choices

“I don’t want to answer that now; just let me finish.”

Human behavior



Incremental construction

“Let me change this. That doesn’t look right; let me change it again. That’s better!”

Human behavior



Incremental construction

when a tool offers support for creative activities, these could maintain the user’s flow

Human behavior



Habituation

“That gesture works everywhere else; why doesn’t it work here, too?”

Human behavior



Spatial memory

“I swear that button was here a minute ago. Where did it go?”

Human behavior





Prospective memory

“I’m putting this here to remind myself to deal with it later.”

Human behavior



Streamlined repetition

“I have to repeat this how many times?”

Human behavior





Keyboard only

“Please don’t make me use the mouse!”

Human behavior





Other people’s advice

“What did everyone else say about this?”

Human behavior


Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco social UX patterns



Social UX Patterns

dealing with the interactivity within a social (Web) application

Christian Crumlish & Erin Malone, 2009



Social UX Patterns

social computing

Thomas Erickson (2013) www.interaction-design.org/encyclopedia/social_computing.html





Self

Activities Com-

munity

Crumlish & Malone, 2009

reputation

sharing

presence



social media ecosystem (Crumlish & Malone, 2009)



social aspects in the enterprise (Crumlish & Malone, 2009)



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



Software as a human

communicating to users – and potential customers – in a human voice

humane interfaces

Social UX



Social UX

Conversation

adopting a conversational tone

use the language of contemporary speech, not that of textbooks, tax forms, or street signs



Social UX

Conversation

used for including instructions, errors, and other messages coming from the system and

addressed to the reader, visitor, or member



???



Social UX

Conversation

avoid obscure slang unless you have already established confidence in the minds of your users

being cute ≠ being real



Social UX

Ask questions

people naturally have questions and ask them



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



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



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,…





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)



Social UX

No joking around

software is not joking

let your users tell each other their own jokes



Representing the Self

engagement identity

presence reputation

Social UX



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



www.drawnimal.com help kids start drawing & learn the alphabet

discussion



Social UX

Sign-up and registration

use the pattern when: require leaving personal or private information,

and privacy and security are a concern



Social UX


use the pattern when: financial transactions require remembering billing,

shipping, and transaction information



Social UX


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





Social UX


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,…



Social UX


the application will require registration at the last possible moment

in the users’ process of exploring the site



Social UX


after registration, deliver the users back to the task they were in before they were sidetracked



Social UX


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



Social UX


clearly label what elements are required for a username and password



Social UX


provide (positive) feedback as the user fills out the form



Social UX


include CAPTCHA-based verification only if absolutely necessary

???



Social UX


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/



Social UX


see also:

Luke Wroblewski, “Sign Up Forms Must Die”, A List Apart Magazine, 2008

http://www.alistapart.com/articles/signupforms/



discussion

good or bad design?



Social UX


remark: the Web form should easily navigable via the keyboard,

with the Submit button triggered by the Enter key



Social UX

Sign-in

we must provide a clearly labeled Sign In/Login button



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



Social UX

Sign-in

if appropriate, allow the user to stay signed in to the site for an extended amount of time



Social UX

Sign-in

delay the sign-in requirement until the last possible moment



Social UX

Authorize

this pattern could be used when: features are enhanced or expanded by accessing data

and files from another site



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



Social UX



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



Social UX

Welcome area

provides the new user with a welcome message

it could present the most important or useful features





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



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.”


Social UX



User identity

tripartite identity pattern

account unique identifier DB key login identifier session authentication public identifier(s) social identify

Social UX



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





Social UX

User profile

don’t make the display name the same as the user login

an important aspect concerning security: phishers



Social UX

User profile

allow users to control the levels of access to information

private versus “friends” versus public



Social UX

User profile

users must have the possibility to customize their profile



Social UX

User profile

collect only the amount of information necessary for meaningful relationships or community activities



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



Social UX

User profile

other features/problems: profile decorating profile claiming faceted identity



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.



discussion

Facebook Graph Search

www.facebook.com/about/graphsearch

critics concerning the user privacy: http://actualfacebookgraphsearches.tumblr.com/



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





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





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)



Social UX

Avatars

illustrated representations allow for a degree of anonymity, but do reduce the perceived credibility

of the poster in many cases



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



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,…



Online presence

designing a presence UI is to maximize opportunities for users to declare themselves present to one another

Social UX



Online presence


online presence management:

publish, display, maintain (update), subscribe to, filter,…

Social UX



Online presence


facets of presence:

status, current task, mood, environment, location, platform/device status, others

Social UX



Online presence

common patterns: Availability Buddy List

Microblogging Updates

Social UX



Social UX



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



User reputation

reputation influences behavior

a reputation system involves tracking desirable behavior and then recognizing it publicly

Social UX



User reputation

reputation influences behavior

a reputation system involves tracking desirable behavior and then recognizing it publicly

examples: Klout, Mozilla OpenBadges

Social UX



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…



Social UX



Social UX

Labels

use “special identifiers” to gratify a person

allows non-linear reputation designations



Social UX

Labels

examples: Top Contributor (Yahoo! Answers)

Troll (37 Signals)

see also Art of Trolling: http://artoftrolling.memebase.com/



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





User reputation

could be measured via rankings: Points

Leaderboard Top N

Social UX





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



Social objects

“Social networks consist of people who are connected by a shared object.”

Jyri Engeström

Social UX



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



Social objects

collecting social objects: Saving, Favorites,

Displaying, Add/Subscribe,

Tagging, Find with tags, Tag cloud

Social UX



Social UX



Social objects

sharing social objects:

personal level Bookmarklet

Send/Share widget

Social UX



Social objects


private (direct) level Send this

Share application Give Gift

Social UX



Social objects


public level Share this

Embedding

Social UX



Social UX



Broadcasting

from tribe to viral actions

“The key is to design flexible frameworks and spaces for people to define their own sense of place.”


Social UX



Broadcasting

design patterns concerning blogs: Blogs: presentation

Blogs: ownership Microblogging

Social UX



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



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



Social UX

Terms of service

use this pattern in check-out flows and sign-up forms



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/



Feedback

soliciting feedback from people, no matter the form, is one of the easiest ways to engage a community

Social UX



Feedback

important design (anti)patterns: Vote to promote

Thumbs up/down ratings Ratings (Starts or 1—5)

Comments Reviews

Soliciting feedback

Social UX



Social UX



Collaboration

important design patterns: Manage project

Voting (Polls, Surveys) Collaborative editing

Edit this page Wiki way

Crowdsourcing

Social UX



Social media tools

must offer support for filtering & recommending resources of interest

Social UX



Social UX

Filtering

used to offer methods for social filtering in order to minimize information overload



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





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



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



recommendations push objects toward people rather than relying on them to be passively discovered



Recommendations anti-pattern (reported by @victorporof)



Social search

Real-time search

Conversational (Subjective) search

examples: Google+, LinkedIn, Reddit, Quora, Stack Overflow, Twitter,…

Social UX



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



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



Relationships

important design patterns: Find people

Adding friends Circles of connections

Publicize Relationships Unfriending

Groups

Social UX



Community management

norms

expected behaviors when operating or working with a system

Social UX




norms

socially enforced

less restrictive than rules

Social UX




norms

explicit – e.g., FAQs, user agreements versus

implicit – not formally available, emerging through daily interactions of the group

Social UX




necessity of publishing a clear and easy to find set of guidelines

Social UX



example: SoundCloud community guidelines

http://soundcloud.com/

community-guidelines




collaborative governance + group moderation:

Collaborative filtering Report abuse

Social UX



Participation to events

support for activities on user real location: Being local

Social UX



Social UX

Face-to-face meeting

helps to facilitate face-to-face meetings between people



Social UX


pre-event creation

users could enter full details of a (private/public) event: location, time, description, special considerations,…

a calendar must be integrated



Social UX


pre-event creation

locations could be selected from an existing list

consider indicating nearby establishments (parking, restaurants, ATMs,…),

which allows for comprehensive planning



Social UX


pre-event creation

provide full address, contact possibilities + other relevant details: costs, restrictions, ambiance



Social UX


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



Social UX



Social UX


during a public event

allow users to make comments in real-time

e.g., integrating social Web (mobile) applications



Social UX


post-event

offer tools to attach photos, presentations, other resources to the event



Social UX


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



Social UX


post-event

for public events, allow users to tag/search/filter the information of interest




planning an event and inviting friends to join the party: Party

allow users to create customized and personal invitations

Social UX




finding or submitting an event (public or private) based on a date or within a certain date range:

Calendaring

Social UX




alerting others where an event is happening: Reminding

encourage sending reminders to a mobile device or email account

Social UX




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



Openness

important aspects: open source, open infrastructure,

open architecture, open standards, open access, open content (data), open identity

Social UX



Openness

Badging

packaging up frequently personalized information in a portable format for reusing in other context

Social UX



Openness

also, to be considered:

Embedded semantics (microformats, schema.org HTML5 microdata, RDFa)

Import, Hosted Modules, Open APIs

Social UX



Problem:

converting a classical Website into a “social” one

case study



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



Problem:

“people come and read my content, but they’re invisible to each other…”

case study



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



Problem:

“I have an active community on my Website, but people are misbehaving!”

case study



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



Problem:

interacting via mobile devices

case study



Problem:

interacting via mobile devices

solutions: geo-location gatherings

current status broadcasting general mobile patterns: infinite lists, one-click

gesture-based interaction

case study



case study

mobile & location patterns



case study

gatherings



case study

status broadcasting (statuscasting)



For more details, consult C. Crumlish & E. Malone, Designing Social Interfaces, O’Reilly, 2009

www.designingsocialinterfaces.com/patterns.wiki



“Conclusion”

designing social applications



Date post:	26-Jan-2015
Category:	Design
Upload:	sabin-buraga
View:	159 times
Download:	0 times