A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (6/10) Design Patterns for Social (Web/mobile) Interactions
1. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
design patterns for social interactions
Human-Computer Interaction
2. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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 – profs.info.uaic.ro/~busaco/
Interacting with software & hardware
www.lorenzpotthast.de/deceleratorhelmet/
4. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 1: Humans & devices
physical experience user/device
direct manipulation, gestures, surfaces, senses, emotions
5. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Microinteractions
“contained product moments that revolve
around a single use-case”
Dan Saffer, Microinteractions. Design with Details,
O’Reilly, 2014
www.slideshare.net/dansaffer/microinteractions-46322636
6. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Microinteractions
concern one main task
e.g., change a setting, cut & paste, drag & drop, sync data,
export, format, make a calendar event, favorite something
7. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
8. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
for details, consult the article
Will Fanguy, How microinteractions improve UX design (2018)
www.invisionapp.com/blog/use-microinteractions-improve-ux-design/
9. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Microinteractions
trigger rules feedback loops &
modes
⦿ → ✔ → ⚠️ → ⤽
trigger initiates a microinteraction
can be user-initiated or system-initiated
10. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Microinteractions
trigger rules feedback loops &
modes
⦿ → ✔ → ⚠️ → ⤽
rules determine what happens
once a microinteraction is triggered
12. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Microinteractions
trigger rules feedback loops &
modes
⦿ → ✔ → ⚠️ → ⤽
loops & modes determine the meta-rules
of the microinteraction (i.e. what happens to
a microinteraction when certain circumstances change)
13. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/littlebigdetails.com
discussion
14. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 1: Humans & devices
3 types of user goals (Cooper et al., 2014)
life goals
(reflective)
who the user
wants to be
end goals
(behavioral)
what the user
wants to do
experience goals
(visceral)
how the user
wants to feel
15. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 1: Humans & devices
beginnerintermediateexpert
Alan Cooper et al., 2014
16. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
The users’ necessities – e.g., questions about different
tasks to be accomplished – can vary considerably
depending on their experience (Cooper et al., 2014)
17. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Beginners
What does the application do?
What doesn’t it do?
How do I … (e.g., print, resize, share)?
Where do I start?
18. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
19. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Intermediates
I forget how to … – e.g., import, convert, etc.
How do I find facility X?
Remind me what this does.
What was the command for X?
Oops, can I undo what I just did?
What new features are in this upgrade/update?
20. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
21. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Experts
How do I automate this?
What are the shortcuts for this command?
Can this be changed?
How can I customize this?
Is there a keyboard equivalent?
What is dangerous?
22. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
23. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 1: Humans & devices
beginnerintermediateexpert
no one wants everlastingly to remain a beginner
optimize for intermediates
24. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 1: Humans & devices
beginnerintermediateexpert
we must persuade the user to become an intermediate
why?
25. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Patterns of human interaction
(Jenifer Tidwell, 2006)
describing human behaviors
26. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Safe exploration
“Let me explore without getting lost
or getting into trouble.”
27. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Instant gratification
“I want to accomplish
something now, not later.”
reward users right
when they arrive
telling users what to do first
28. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Satisficing
“This is good enough.
I don’t want to spend more time learning to do it better.”
29. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Changes in midstream
“I changed my mind about what I was doing.”
30. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Deferred choices
“I don’t want to answer that now; just let me finish.”
31. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
32. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Incremental construction
“Let me change this. That doesn’t look right;
let me change it again. That’s better!”
when a tool offers support for creative activities,
these could maintain the user’s flow
33. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
34. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Habituation
“That action/gesture works everywhere else;
why doesn’t it work here, too?”
35. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Spatial memory
“I swear that button was here a minute ago.
Where did it go?”
36. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
37. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Prospective memory
“I’m putting this here to remind myself
to deal with it later.”
38. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Streamlined repetition
“I have to repeat this how many times?”
39. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
40. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Keyboard only
“Please don’t make me use the mouse!”
41. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
42. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Other people’s advice
“What did everyone else say about this?”
43. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 2: Mental models + their representations
physical experiencedefining the interaction
between humans and objects (devices)
44. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 2: Mental models + their representations
digital experience – UX
interface – UI
mental model(s)
45. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
models focused on:
communication
versus
content
versus
task (functionality)
46. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 2: Mental models + their representations
different communication paradigms:
textual, graphical, natural (e.g., gestural), 3D, mixed etc.
context:
augmented/virtual reality
47. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 2: Mental models + their representations
e-commerce, news & wiki applications
are mainly based on a content-centric model
several examples:
BBC News, TED, Speaker Deck, Vimeo, Wikipedia
48. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 2: Mental models + their representations
traditional desktop or mobile applications are task-centric
typical examples:
operating systems, various utilities
49. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 2: Mental models + their representations
traditional desktop or mobile applications are task-centric
a possible design solution:
task-oriented menu
50. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
51. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 3: Context
interaction with(in) physical/virtual environment
“smart” objects
ubiquity
(pro)active software agents – for example, chat bots
simulations
52. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
case study
Mobile UI design patterns
discoveries (walkthroughs), glances, captures,
messaging, popovers, navigations, gestures,…
www.mobile-patterns.com
www.pttrns.com
53. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
case study
Mobile UI design patterns
hamburger menu anti-pattern
“Discoverability is cut almost in half by hiding a website’s
main navigation. Also, task time is longer and
perceived task difficulty increases.”
Kara Pernice & Raluca Budiu, Hamburger Menus and
Hidden Navigation Hurt UX Metrics (2016)
www.nngroup.com/articles/hamburger-menus/
54. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
case study
Smart Watches UI design patterns
specific: launch screens (+branded launch),
interactive watch faces (round devices, special screens,
display modes), always-on, hardware buttons
developer.apple.com/watchos/human-interface-guidelines/
designguidelines.withgoogle.com/wearos/
55. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 4: Communities
(a)synchronous communication environments
audio, text, multimedia, 3D
typical examples:
instant messaging, social networks, MMORPGs
56. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 4: Communities
social behaviors mediated by the technology
57. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 4: Communities
social behaviors mediated by the technology
intimate vs. tribal vs. viral
P2P chat vs. forum vs. addictive online games
58. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 4: Communities
humans as social animals
59. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 4: Communities
humans are social animals
people we need (Mart Murdvee, 2006):
teenagerfriend, entertainer
business-oriented personsecretary
in spare timetrainer/instructor
elder personnurse, helpmate
60. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 4: Communities
nowadays, we have the possibility to interact to
interface agents having the role of…
e-secretary – “digital butler” (Nicholas Negroponte, 1995)
+
e-entertainer, e-nanny, e-pal, e-trainer, e-librarian,
e-clerk, e-attendant(s), etc.
61. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
62. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 5: Content
world-wide public access to
data, information, knowledge
creating/publishing/mixing the content
63. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
64. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Sphere 5: Content
interactive experience at the level of ecosystem:
social, spatial, business, regarding the knowledge,…
(micro)blogging, wikis, (geo)tagging,
content management systems, Web mash-ups,
online gaming, virtual environments, etc.
65. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
social UX patterns
http://gamesinspiration.com/tags/social
66. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX Patterns
dealing with the interactivity
within a social (Web) application
Christian Crumlish & Erin Malone, 2015
67. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX Patterns
social computing
Thomas Erickson (2014)
www.interaction-design.org/encyclopedia/social_computing.html
68. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/adapted from Crumlish & Malone, 2009
goals
psychology
behavior
interaction
affordances
language
features
technology
algorithms
indexing
structure
meta-data
tools
process
incentives
users interface software content creators
70. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
social media ecosystem (Crumlish & Malone)
71. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
social aspects in the enterprise (Crumlish & Malone)
72. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
73. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Software as a human
communicating to users – and potential customers –
in a human voice
humane interfaces
Social UX
74. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Conversation
adopting a conversational tone
use the language of contemporary speech,
not that of textbooks, tax forms, or street signs
75. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Readability
scoring user’s
reading & grade levels
measured by specific
formulas such as:
Flesch–Kincaid grade
Dale–Chall
Gunning Fog
SMOG index
Coleman–Liau
discussion
www.readabilityformulas.com
76. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Conversation
used for including instructions, errors,
and other messages coming from the system and
addressed to the reader, visitor, or member
77. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
???
discussion
78. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Conversation
avoid obscure slang unless the (digital) product/service
have already established confidence
in the minds of the target users
being cute ≠ being real
79. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Ask questions
people naturally have questions and ask them
80. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
81. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
82. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Your versus My
use this pattern when labeling objects
belonging to or chosen by user
“your photostream”, “your contacts”, “your groups”,…
83. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
84. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
85. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
darkpatterns.org
86. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Dark pattern:
Bait and Switch
the user sets out to do one thing,
but a different – undesirable! – thing happens instead
87. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
the × button means “close”, but for this special case
was changed to mean “Yes, I do want to upgrade
my computer to Windows 10”
???
88. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Dark pattern:
Friend Spam
the product asks user for his/her email or social media
permissions under the pretense it will be used for
a desirable outcome (e.g., finding friends),
but then spams all user’s contacts in a message
that claims to be from that user
89. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Dan Schlosser, LinkedIn Dark Patterns or: Why Your Friends Keep
Spamming You to Sign Up for LinkedIn (2015)
medium.com/@danrschlosser/linkedin-dark-patterns-3ae726fe1462
???
90. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Dark pattern:
Sneak Into Basket
(negative option billing / inertia selling)
users attempt to purchase something, but somewhere in
the purchasing journey the site sneaks an additional item
into their basket, often through the use of an opt-out radio
button or checkbox on a prior page
91. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
darkpatterns.org/types-of-dark-pattern/sneak-into-basket
???
92. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Dark pattern:
Forced Continuity
when users free trial with a service comes to an end
and their credit card silently starts getting charged
without any warning
there is no an easy way to cancel the automatic renewal
93. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Dark pattern:
Trick Questions
users respond to a question, which, when glanced upon
quickly appears to ask one thing, but if read carefully,
asks another thing entirely
94. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
darkpatterns.org/types-of-dark-pattern/trick-questions
???
95. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Dark pattern:
Privacy Zuckering
users are tricked into publicly sharing more information
about themselves than they really intended to
96. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Dark pattern:
Misdirection
the design purposefully focuses users attention on
one thing in order to distract their attention from another
97. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Roman Cheplyaka, How Booking.com manipulates you (2017)
ro-che.info/articles/2017-09-17-booking-com-manipulation
???
98. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Dark pattern:
Disguised Ads
displaying adverts that are disguised
as other kinds of content or navigation,
in order to get the users to click on them
see also Therese Fessenden,
The Most Hated Online Advertising Techniques (2017)
www.nngroup.com/articles/most-hated-advertising-techniques/
99. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
100. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Dark pattern:
Roach Motel
the design makes it very easy for user to get into a certain
situation, but then makes it hard to get out of it
(for example, a subscription)
101. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Honesty of interaction
other case studies:
Yael Grauer, Dark Patterns are designed to trick you, 2016
arstechnica.com/information-technology/2016/07/dark-patterns-are-
designed-to-trick-you-and-theyre-all-over-the-web/
Dan Turner, Shady Patterns, 2014
medium.com/designer-hangout/shady-patterns-a55d0cc1bbc7
102. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
Society is being hijacked by technology
there are not neutral digital products
they are part of a system designed to addict us
the whole system is vulnerable to manipulation
103. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
Society is being hijacked by technology
examples:
Snapchat turns conversations into streaks
redefining how users measure friendship
Instagram glorifies the picture-perfect life
eroding our self worth
Facebook segregates users into echo chambers
fragmenting communities
YouTube autoplays the next video within seconds
diverting users from accomplishing their goals
104. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
Society is being hijacked by technology
solutions for taking control:
turn off all notifications except from people
try keeping phone home screen to tools only
launch other apps by typing
charge the device outside the bedroom
remove social media from phone/tablet
various useful apps/extensions to avoid distractions:
humanetech.com/take-control/
105. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Representing the Self
engagement
identity
presence
reputation
Social UX
107. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Aware-
ness
Sign-up
Return
Visits
Emotional
Attachment
😐 🙂 ☺ 😍
remember
user’s flow?
108. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
109. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Mobile design patterns to avoid cold-start:
Empty States
110. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Mobile design patterns to avoid cold-start:
Find/Invite Friends
111. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Mobile design patterns to avoid cold-start:
Discovery
112. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Mobile design patterns to avoid cold-start:
Launch Screen
113. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
User engagement
advice:
“keep the user’s experience focused on the application”
(Bert Appward, 2012)
www.html5rocks.com/webappfieldguide/
Social UX
114. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Drawnimal app
help kids start drawing & learn the alphabet
discussion
115. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Sign-up and registration
use the pattern when:
require leaving personal or private information,
and privacy and security are a concern
116. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Sign-up and registration
use the pattern when:
financial transactions require remembering billing,
shipping, and transaction information
117. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
118. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
119. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Sign-up and registration
offer explanations about what each piece of information
requested will provide in terms of user benefits
for example, geo-location is used for recommending
relevant items: stores, hospitals,…
120. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
121. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Sign-up and registration
after registration, deliver the users back to the task
they were in before they were sidetracked
122. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
123. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Sign-up and registration
clearly label what elements are required
for a username and password
124. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Sign-up and registration
provide (positive) feedback as the user fills out the form
125. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Sign-up and registration
include CAPTCHA-based verification
only if absolutely necessary
???
126. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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: OAuth, OpenID Connect
a pragmatic solution: Hello.js – adodson.com/hello.js/
127. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Sign-up and registration
read also:
Luke Wroblewski, “Sign Up Forms Must Die”,
A List Apart Magazine, 2008
www.alistapart.com/articles/signupforms/
128. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
discussion
good or bad design?
129. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
130. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Sign-in
we must provide a clearly labeled Sign In/Login button
131. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
132. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
133. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Sign-in
if appropriate, allow the user to stay signed in to the site
for an extended amount of time
134. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Sign-in
delay the sign-in requirement
until the last possible moment
135. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Authorize
this pattern could be used when:
features are enhanced or expanded by accessing data
and files from another site
136. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
137. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
???!
138. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
139. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Welcome area
provides the new user with a welcome message
it could present the most important or useful features
140. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
see also
Walkthroughs
mobile pattern
pttrns.com/patterns?scid=26
141. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Welcome area
do not use intrusive methods – i.e. pop-ups
do not force users to take welcome tours
assume the new users are not stupid
142. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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, 2015
Social UX
143. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
User identity
tripartite identity pattern
account unique identifier DB key
login identifier session authentication
public identifier(s) social identify
Social UX
144. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
145. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
146. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
User profile
don’t make the display name the same as the user login
147. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
User profile
don’t make the display name the same as the user login
an important aspect concerning security: phishing
148. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
User profile
allow users to control the
levels of access to information
private
versus
“friends”
versus
public
149. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
User profile
users must have the possibility to customize their profile
150. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
User profile
collect only the amount of information necessary
for meaningful relationships or community activities
151. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
example:
Google Takeout – takeout.google.com/settings/takeout
152. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
other features
(issues to be resolved):
profile decorating
profile claiming
faceted identity
153. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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.
154. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
155. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
for details, consult S. Few, Information Dashboard Design:
Displaying Data for At-a-Glance Monitoring, Analytics Press, 2013
Dynamic Buy (IBM, 2015)
156. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
157. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
158. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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)
159. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Avatars
illustrated representations allow for a degree of
anonymity, but do reduce the perceived credibility
of the poster in many cases
160. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
161. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
uiFaces
uifaces.com
162. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Mockaroo
www.mockaroo.com
163. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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,…
164. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Online presence
designing a presence UI is to maximize opportunities
for users to declare themselves present to one another
Social UX
165. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
166. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
167. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
168. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Online presence
common patterns:
Availability
Buddy List
Microblogging
Updates
Social UX
169. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
170. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
User reputation
reputation influences behavior
a reputation system involves tracking desirable behavior
and then recognizing it publicly
Social UX
171. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UXUser reputation
example: Open Badges – openbadges.org
Erik Knutson
172. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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…
173. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Labels
use “special identifiers” to gratify a person
allows non-linear reputation designations
174. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Labels
examples:
Top Contributor (Yahoo! Answers)
Troll (37 Signals)
175. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
176. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
177. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
User reputation
could be measured via rankings:
Points (Karma)
Leaderboard
Top N
Social UX
178. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
179. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
Social UX
180. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
181. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Disqus helps publishers increase engagement
and build loyal audiences
discussion
182. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social objects
“Social networks consist of people
who are connected by a shared object.”
Jyri Engeström
Social UX
183. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
184. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social objects
collecting social objects (photos, videos, URLs,…):
Saving, Favorites,
Displaying,
Add/Subscribe,
Tagging, Find with tags, Tag cloud
Social UX
185. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social objects
sharing and (re)using:
personal level – Bookmarklet, Send/Share widget
private (direct) level – Send this, Give Gift
public level – Share this, Embedding
Social UX
186. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
187. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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, 2015
Social UX
188. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Broadcasting
design patterns concerning blogs:
Blogs: presentation
Blogs: ownership
Microblogging
Social UX
189. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
190. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Terms of service
use this pattern in check-out flows and sign-up forms
191. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Terms of service
types of open licenses:
Public Domain
publicdomainmanifesto.org/
Creative Commons
creativecommons.org/licenses/
Copyleft
www.gnu.org/copyleft/
192. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Feedback
soliciting feedback from people, no matter the form,
is one of the easiest ways to engage a community
Social UX
193. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Feedback
important design (anti)patterns:
Vote to promote
Thumbs up/down ratings
Ratings (Stars or 1—5)
Comments
Reviews
Soliciting feedback
Social UX
194. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
195. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Collaboration
important design patterns:
Manage project
Voting (Polls, Surveys)
Collaborative editing
Edit this page
Wiki way
Crowdsourcing
Social UX
196. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
197. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social media tools
Social UX
ideally, should offer
support for sharing,
filtering and
recommending
resources of interest
198. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Filtering
used to offer methods for social filtering
in order to minimize information overload
199. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
pttrns.com/patterns?scid=38
200. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
201. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Recommendations
offering (in an “intelligent” manner) recommendations
when sufficient self-declared data about users is available
to be able to identify similarities and
make helpful guesses about likely interesting content
202. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
recommendations push objects toward people
rather than relying on them to be passively discovered
203. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social search
Real-time search
Conversational (Subjective) search
P. Morville & J. Callender, Search Patterns, O’Reilly, 2010
searchpatterns.org/library.php
Social UX
204. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
T. Russell-Rose & T. Tate, Designing the Search Experience,
Elsevier, 2013
discussion
aspects of interest:
user expertise
context
formulating the query
displaying search results
faceted search
social search
optimization
205. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
mobile devices – for other examples, consult:
www.mobile-patterns.com/search
pttrns.com/patterns?scid=22
206. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
automotive industry:
search facilities
exposed by the UI car
discussion
various design proposals:
www.pinterest.com/explore/car-ui/
207. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
208. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
209. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Relationships
important design patterns:
Find people
Adding friends
Circles of connections
Publicize Relationships
Un-friending
Groups
Social UX
210. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Community management
norms
expected behaviors when operating or working
with a system
Social UX
211. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Community management
norms
important aspect:
preventing anti-social behaviors
Social UX
212. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Community management
norms
important aspect:
preventing anti-social behaviors
common situations:
trolling, spamming, hate speech, harassment,…
Social UX
213. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Malicious user behavior on the Web
trolling is behavior that occurs outside community norms
defined by community guidelinesdon’t feed the trolls
Srijan Kumar, Justin Cheng, Jure Leskovec, “Malicious Behavior on
the Web: Characterization and Detection”, WWW2017 Tutorial
snap.stanford.edu/www2017tutorial/
discussion
What we thought What we now know
Trolls are a vocal minority Trolls can be ordinary people
Trolling is native Trolling can spiral
from a single bad post
Trolls must be identified
manually
Trolls and troll posts can be
automatically identified
214. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Malicious user behavior on the Web
sockpuppets – usage of multiple accounts,
both for benign and malicious intent
write worse than non-sockpuppets
can vary in how deceptive/supportive they are
can be detected from what & how they post,
but not efficiently from community feedback
sockpuppet accounts help each other
snap.stanford.edu/www2017tutorial/
discussion
215. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Malicious user behavior on the Web
vandalism is an action involving deliberate destruction of
or damage to public or private (digital) property
very common on collaborative sites such as wikis
edits that are non-value adding, offensive, or destructive in removal
example: Wikipedia
~7% edits are vandalism, ~3—4% editors are vandals
snap.stanford.edu/www2017tutorial/
discussion
216. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Malicious user behavior on the Web
vandalism is an action involving deliberate destruction of
or damage to public or private (digital) property
vandals are aggressive
vandals can be detected early by using temporal features
and relation between edited pages
combination of metadata, text and human feedback
is the best in detecting vandals
snap.stanford.edu/www2017tutorial/
discussion
217. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Carto-vandalism
an emergent form of deviant behavior in collaborative
production environments – like OpenStreetMap and
WikiMapia – focused on geographic information
impact on the credibility of crowdsourced cartography
Andrea Ballatore, “Defacing the Map: Cartographic Vandalism
in the Digital Commons”, Cartographic Journal, 2014
arxiv.org/pdf/1404.3341.pdf
case study
218. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Carto-vandalism
219. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Disinformation on the Web
from misinformation (honest mistake)
to disinformation (deliberate lie to mislead)
disinformation spreads wide and fast (i.e. rumors),
can persist, are viewed frequently and
cited from across the Web
humans get fooled into believing hoaxes are genuine
if it looks genuine
snap.stanford.edu/www2017tutorial/
discussion
220. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Disinformation on the Web
hoax – false information pretending to
masquerade as genuine information
example:
Wikipedia hoaxes are longer, but lack references,
and are created by newer editors
hoaxes can be detected efficiently
by using non-superficial features
snap.stanford.edu/www2017tutorial/
discussion
221. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Disinformation on the Web
fake reviewers – users who write non-truthful reviews
for products/services
fact: +1 increase in star rating increases revenue by 5—9%
fake reviews: shorter, more positive,
use more “I”s and more verbs & adverbs
for a better detection, we can use a combination of textual,
behavioral & network based algorithms
snap.stanford.edu/www2017tutorial/
discussion
222. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
www.ifla.org/publications/node/111
223. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Community management
norms
socially enforced
less restrictive than rules
Social UX
224. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Community management
norms
explicit – examples: FAQs, user agreements
versus
implicit – not formally available,
emerging through daily interactions of the group
Social UX
225. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Community management
necessity of publishing a clear and easy to find
set of guidelines
Social UX
226. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
developer.mozilla.org/MDN/Community/Working_in_community
227. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
www.drupal.org/dcoc
228. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Community management
collaborative governance + group moderation:
Collaborative filtering
Report abuse
Social UX
229. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
discussion
Moderation Panel
User Blocking
User Flagging
help.disqus.com/customer/en/portal/topics/215155-moderation/articles
230. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Participation to events
support for activities on user real location:
Being local
Social UX
231. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
discussion
other examples: pttrns.com/patterns?scid=35
232. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
case study
Passenger Care (IBM MobileFirst for iOS):
www.ibm.com/mobile/mobilefirst-for-ios/
233. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Face-to-face meeting
helps to facilitate face-to-face meetings between people
234. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
235. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
236. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Face-to-face meeting
pre-event creation
provide full address, contact possibilities
+ other relevant details: costs, restrictions, ambiance
237. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
238. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
239. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Face-to-face meeting
during a public event
allow users to make comments in real-time
e.g., by integrating social Web (mobile) applications
240. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Face-to-face meeting
post-event
offer tools to attach photos, presentations,
other resources to the event
241. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
242. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
Face-to-face meeting
post-event
for public events, allow users to tag/search/filter
the information of interest
243. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
244. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Social UX
245. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
246. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Participation to events
alerting others where an event is happening:
Reminding
encourage sending reminders to a mobile device
or email account
Social UX
247. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Participation to events
Geo-tagging
Geo-mapping
Geo-mashing: Neighborhood, Mobile & location
Best Practices and Guidelines for Location Based Services:
www.ctia.org/policy-initiatives/voluntary-guidelines
Social UX
248. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Openness
important aspects:
open source, open infrastructure,
open architecture, open standards,
open access, open content (data), open identity
Social UX
249. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Indie Web Principles – indieweb.org/principles
own your data
use visible data for humans first, machines second
make tools for yourself first, not for “everyone”
use what you make (eat your own dogfood)
document your stuff
open source your stuff
discussion
250. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Indie Web Principles – indieweb.org/principles
UX and design is more important
than protocols, formats, data models,…
build platform agnostic platforms
(modularity – small pieces loosely joined)
longevity (build for the long Web)
plurality (encouraging and embracing
a diversity of approaches & implementations)
have fun
discussion
251. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Openness
Badging
packaging up frequently personalized information
in a portable format for reusing in other context
Social UX
252. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Openness
also, to be considered:
Embedded semantics
(microformats, schema.org HTML5 microdata, RDFa)
Import, Hosted Modules, Open APIs
Social UX
253. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Problem:
converting a classical Website into a “social” one
case study
254. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Problem:
converting a classical Website into a “social” one
possible design 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
255. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Problem:
“people come and read my content,
but they’re invisible to each other…”
case study
256. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
257. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Problem:
“I have an active community on my Website,
but people are misbehaving!”
case study
258. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Problem:
“I have an active community on my Website,
but people are misbehaving!”
solutions:
norm + model citizen
community management – i.e. reporting abuse
reputation
ratings
case study
259. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Problem:
interacting via mobile devices
case study
260. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Problem:
interacting via mobile devices
case study
responsive
design
progressive
Web apps
261. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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
262. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
case study
mobile & location patterns
study C. Bank & W. Zuberi, “Mobile UI Design Patterns” (2014):
www.uxpin.com/studio/ebooks/mobile-design-patterns/
263. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
status broadcasting (statuscasting)
case study
264. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Problem:
interacting with wearable devices
case study
265. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~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 www.slideshare.net/marknb00/chi-2014-glass-class-lecture-notes
case study
266. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
for more details, study C. Crumlish & E. Malone,
Designing Social Interfaces (2nd Edition), O’Reilly, 2015
www.designingsocialinterfaces.com/patterns/
267. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
designing social applications
“Conclusion”
www.kiosks4business.com/blog.php
268. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
next lecture:
model-based user interaction
in the context of software engineering