HCI 2015 (6/10) Design Patterns: Social Interaction

Master on Software Engineering :: Human-Computer Interaction

Dr. Sabin-Corneliu Buraga – www.purl.org/net/busacodesign patterns for social interactions

Human-Computer Interaction

www.slideshare.net/Boltzmann/wearable-sensors-and-ux-development


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



Patterns of human interaction(Jenifer Tidwell, 2006)

describing human behaviors



Safe exploration

“Let me explore without getting lostor 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 myselfto 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/busacosocial UX patterns



Social UX Patterns

dealing with the interactivitywithin a social (Web) application

Christian Crumlish & Erin Malone, 2009



Social UX Patterns

social computing

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





Self

ActivitiesCom-

munity

Crumlish & Malone, 2009

reputation

sharing

presence



social media ecosystem (Crumlish & Malone, 2009)



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



Design for EveryoneTalk Like a Person

Be OpenBe a Game

Check Your EthicsDon’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 viewMy Yahoo!, My feed, My watchlist

versus“Your”-like labels reinforce the dialogue

CiteULike, YouTube



Social UX

Your versus My

use this pattern when labeling objects belonging toor 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



Social UX

Honesty of interaction

dark pattern = a type of user interface that appears to have been carefully crafted to trick users

into doing unwanted things



http://darkpatterns.org/



Representing the Self

engagementidentity

presencereputation

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.comhelp kids start drawing & learn the alphabet

discussion



User engagement

advice:“keep the user’s experience focused on the application”

(Bert Appward, 2012)

www.html5rocks.com/webappfieldguide/

Social UX



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 neededthat still allows your user to participate in the site

consider whether or not registration is even needed





Social UX


offer explanations about what each piece of information requested will provide in terms of user benefits

e.g., geo-location is used for recommending relevant items: stores, hospitals,…



Social UX


the application will require registrationat the last possible moment

in the users’ process of exploring the site



Social UX


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



Social UX


allow the creation of a unique identifier by allowingthe use of an e-mail address,

which is a unique piece of data and can be verified



Social UX


clearly label what elements are requiredfor a username and password



Social UX


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



Social UX


include CAPTCHA-based verificationonly if absolutely necessary

???



Social UX


consider skipping the entire registration formand allow users to sign up by using other methods

open standards: OpenID, OAuth, WebIDinitiative: Mozilla Persona – www.mozilla.org/persona/

a pragmatic solution: Hello.js – http://adodson.com/hello.js/



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 fieldsfor the username & password

+a clear way to retrieve the username/password

if it is forgotten



Social UX



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 requirementuntil 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

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 keylogin identifier session authenticationpublic 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 necessaryfor 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., Data Liberation, OpenSocial API, Portable Contacts, Yahoo! Social Platform



Social UX

other features (issues to be resolved):

profile decoratingprofile claimingfaceted identity



Social UX

Personal dashboard

users want to check in and see status updates fromtheir “friends”, current activity from their social graph,

comments from “friends” on recent posts, etc.



Social UX

Personal dashboard

the personal dashboard is the companion to the profile

should contain information and access to activitiesthat the user wants to participate in on an ongoing basis

to encourage repeat usage



for details, consult S. Few, Information Dashboard Design: Displaying Data for At-a-Glance Monitoring, Analytics Press, 2013

Dynamic Buy (IBM, 2015)



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 uploadedand stored for later selection





Social UX

Avatars

mood expressions

allow users to attach a special status message or emoticonto supplement their avatars by indicating

a particular mood – e.g., delighted, bored,…



Online presence

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

Social UX



Online presence


online presence management:publish, display, maintain (update), subscribe to, filter,…

Social UX



Social UX



Online presence


facets of presence:status, current task, mood, environment, location,

platform/device status, others

Social UX



Online presence

common patterns:AvailabilityBuddy List

MicrobloggingUpdates

Social UX



User reputation

a person participating in a social structure expectsto 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 continuumto enable consumers to discover and identify

high-quality contributors

BronzeSilverGoldHatedHostileUnfriendlyNeutralFriendly…



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)



Social UX



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

LeaderboardTop N

Social UX





User reputation

many leaderboards make the mistake of basing standingsonly 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 peoplewho 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 (photos, videos, URLs,…):Saving, Favorites,

Displaying,Add/Subscribe,

Tagging, Find with tags, Tag cloud

Social UX



Social objects

sharing & (re)using:

personal level – Bookmarklet, Send/Share widgetprivate (direct) level – Send this, Give Gift

public level – Share this, Embedding

Social UX



Social UX



Broadcasting

from tribal gossip to viral actions

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


Social UX



Broadcasting

design patterns concerning blogs:Blogs: presentation

Blogs: ownershipMicroblogging

Social UX



Social UX

Terms of service

the “Terms of Service Agreement” document deliversa legal framework for the use and dissemination

of “information services” and intellectual property assetsprovided on a Web site or application



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 ratingsRatings (Stars or 1—5)

CommentsReviews

Soliciting feedback

Social UX



Social UX



Collaboration

important design patterns:Manage project

Voting (Polls, Surveys)Collaborative editing

Edit this pageWiki way

Crowdsourcing

Social UX



Social media tools

Social UX

ideally, should offer support for sharing,

filtering and recommending

resources of interest



Social UX

Filtering

used to offer methods for social filteringin order to minimize information overload



Social UX

Filtering

we must provide affordances for restoring(or, if necessary, imposing) contextual filterson 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 guessesabout likely interesting content



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



Social search

Real-time searchConversational (Subjective) search

for details, read P. Morville & J. Callender, Search Patterns, O’Reilly, 2010

http://searchpatterns.org/library.php

Social UX



discussion

Facebook Graph Search

http://search.fb.com/

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



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 friendsCircles of connections

Publicize RelationshipsUn-friending

Groups

Social UX



Community management

norms

expected behaviors when operating or workingwith a system

Social UX




norms

socially enforced

less restrictive than rules

Social UX




norms

explicit – e.g., FAQs, user agreementsversus

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

Social UX




necessity of publishing a clear and easy to findset of guidelines

Social UX



https://developer.mozilla.org/docs/MDN/Contribute/Community




collaborative governance + group moderation:

Collaborative filteringReport abuse

Social UX



Participation to events

support for activities on user real location:Being local

Social UX



Social UX

discussion



Social UX

case study

Passenger Care (IBM MobileFirst for iOS, 2015): www.ibm.com/mobilefirst



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 sharable 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 invitetheir (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/filterthe 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 deviceor email account

Social UX




Geo-taggingGeo-mapping

Geo-mashing: Neighborhood, Mobile & location

Best Practices and Guidelines for Location Based Services:http://www.ctia.org/policy-initiatives/voluntary-guidelines

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 informationin 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 personsign in/sign up

object-related activities: tagging, rating, sharinguser 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 abusereputation

ratings

case study



Problem:

interacting via mobile devices

case study



Problem:

interacting via mobile devices

solutions:geo-locationgatherings

current status broadcastinggeneral mobile patterns: infinite lists, one-click,…

gesture-based interaction

case study

responsive design



case study

mobile & location patternsread C. Bank & W. Zuberi, “Mobile UI Design Patterns” (2014):

www.uxpin.com/mobile-design-patterns.html


Dr. Sabin-Corneliu Buraga – www.purl.org/net/busacostatus broadcasting (statuscasting)

case study



Problem:

interacting with wearable devices

main principles (Kevin Kitagawa, 2014):augment, don’t replicate

design, don’t reuseone size does not fit all

think always on, think low powersecurity above all

build a viable ecosystem

see also http://www.slideshare.net/marknb00/chi-2014-glass-class-lecture-notes

case study



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

www.designingsocialinterfaces.com/patterns.wiki


Dr. Sabin-Corneliu Buraga – www.purl.org/net/busacodesigning social applications

“Conclusion”



next episode: project assessment (D)