A presentation regarding the Human-Computer Interaction (2015): Design Patterns: Social Interaction.
For details, visit the HCI discipline Website available at http://profs.info.uaic.ro/~busaco/teach/courses/hci/
HCI 2015 (6/10) Design Patterns: Social Interaction
1. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
design patterns for social interactions
Human-Computer Interaction
www.slideshare.net/Boltzmann/wearable-sensors-and-ux-development
2. 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
3. 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
4. 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
5. 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
6. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Instant gratification
Human behavior
7. 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
8. 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
9. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
10. 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
11. 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
12. 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
13. 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
14. 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
15. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
16. 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
17. 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
18. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
19. 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
20. 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
21. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
social UX patterns
22. 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
23. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Social UX Patterns
social computing
Thomas Erickson (2014)
www.interaction-design.org/encyclopedia/social_computing.html
24. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
26. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
social media ecosystem (Crumlish & Malone, 2009)
27. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
social aspects in the enterprise (Crumlish & Malone, 2009)
28. 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
29. 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
30. 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
31. 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
32. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
???
33. 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
34. 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
35. 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
36. 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 Yahoo!, My feed, My watchlist
versus
“Your”-like labels reinforce the dialogue
CiteULike, YouTube
37. 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,…
38. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
39. 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)
40. 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
41. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
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
42. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
http://darkpatterns.org/
43. 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
44. 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
45. 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
46. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User engagement
advice:
“keep the user’s experience focused on the application”
(Bert Appward, 2012)
www.html5rocks.com/webappfieldguide/
Social UX
47. 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
48. 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
49. 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
50. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
51. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Social UX
Sign-up and registration
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,…
52. 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
53. 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
54. 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
55. 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
56. 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
57. 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
???
58. 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/
a pragmatic solution: Hello.js – http://adodson.com/hello.js/
59. 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/
60. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
good or bad design?
61. 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
62. 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
63. 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
64. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Social UX
65. 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
66. 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
67. 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
68. 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
69. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
???!
70. 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
71. 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
72. 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
73. 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
74. 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
75. 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
76. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
77. 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
78. 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
79. 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
80. 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
81. 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., Data Liberation, OpenSocial API,
Portable Contacts, Yahoo! Social Platform
82. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Social UX
other features
(issues to be resolved):
profile decorating
profile claiming
faceted identity
83. 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.
84. 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
85. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
for details, consult S. Few, Information Dashboard Design:
Displaying Data for At-a-Glance Monitoring, Analytics Press, 2013
Dynamic Buy (IBM, 2015)
86. 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
87. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
88. 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)
89. 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
90. 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
91. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
92. 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,…
93. 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
94. 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
95. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Social UX
96. 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
97. 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
98. 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
99. 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
100. 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
101. 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
HatedHostileUnfriendlyNeutralFriendly…
102. 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
103. 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)
104. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Social UX
105. 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
106. 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
107. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
108. 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
109. 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
110. 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
111. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Social objects
collecting social objects (photos, videos, URLs,…):
Saving, Favorites,
Displaying,
Add/Subscribe,
Tagging, Find with tags, Tag cloud
Social UX
112. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Social objects
sharing & (re)using:
personal level – Bookmarklet, Send/Share widget
private (direct) level – Send this, Give Gift
public level – Share this, Embedding
Social UX
113. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Social UX
114. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Broadcasting
from tribal gossip 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
115. 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
116. 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 delivers
a legal framework for the use and dissemination
of “information services” and intellectual property assets
provided on a Web site or application
117. 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
118. 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/
119. 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
120. 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 (Stars or 1—5)
Comments
Reviews
Soliciting feedback
Social UX
121. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Social UX
122. 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
123. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Social media tools
Social UX
ideally, should offer
support for sharing,
filtering and
recommending
resources of interest
124. 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
125. 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
126. 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
127. 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
128. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Social search
Real-time search
Conversational (Subjective) search
for details, read P. Morville & J. Callender,
Search Patterns, O’Reilly, 2010
http://searchpatterns.org/library.php
Social UX
129. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
Facebook Graph Search
http://search.fb.com/
critics concerning the user privacy:
http://actualfacebookgraphsearches.tumblr.com/
130. 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
131. 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
132. 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
Un-friending
Groups
Social UX
133. 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
134. 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
135. 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
136. 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
137. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
https://developer.mozilla.org/docs/MDN/Contribute/Community
138. 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
139. 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
140. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Social UX
discussion
141. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Social UX
case study
Passenger Care (IBM MobileFirst for iOS, 2015):
www.ibm.com/mobilefirst
142. 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
143. 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 sharable calendar must be integrated
144. 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
145. 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
146. 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
147. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Social UX
148. 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
149. 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
150. 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
151. 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
152. 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
153. 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
154. 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
155. 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/policy-initiatives/voluntary-guidelines
Social UX
156. 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
157. 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
158. 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
159. 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
160. 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
161. 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
162. 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
163. 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
164. 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
165. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Problem:
interacting via mobile devices
case study
166. 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
responsive
design
167. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
case study
mobile & location patterns
read C. Bank & W. Zuberi, “Mobile UI Design Patterns” (2014):
www.uxpin.com/mobile-design-patterns.html
168. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
status broadcasting (statuscasting)
case study
169. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Problem:
interacting with wearable devices
main principles (Kevin Kitagawa, 2014):
augment, don’t replicate
design, don’t reuse
one size does not fit all
think always on, think low power
security above all
build a viable ecosystem
see also http://www.slideshare.net/marknb00/chi-2014-glass-class-lecture-notes
case study
170. 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
171. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
designing social applications
“Conclusion”
172. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
next episode: project assessment (D)