The document discusses various design patterns for human-computer interaction and user interfaces. It describes patterns for layout, like visual frameworks that ensure consistent use of layout, color and style. It also discusses patterns for user controls and interactions, such as button groups, progress indicators, and previews that show users what will happen before they take actions. The document is a lecture on these different design patterns and their applications in interface design.
HCI 2015 (5/10) Information Architecture. Design Patterns. Layout, Actions, Data Editing
1. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Human-Computer Interaction
from design patterns to flow
2. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“It is not the answer that enlightens,
but the question.”
Eugene Ionesco
3. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
How to present the content to convey
meaning, sequence, and points of interaction?
4. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Design Patterns
layout
5. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual framework
Jenifer Tidwell, 2005
assure the use of layout, color and visual style
in a consistent manner
6. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual framework
must be flexible regarding the visual design,
depending on the presented content
7. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual framework
example:
visual consistency of the traditional applications
and Web sites
8. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Center stage
Jenifer Tidwell, 2005
most important part of the UI is located in a center zone,
grouping additional tools in small-size areas
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
Center stage
designed by using:
size
color
headlines
context
11. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
12. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Center stage
it could be used in conjunction to
other design patterns – e.g., for Web navigation
13. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Card stack
Jenifer Tidwell, 2005
content sections are placed on different panels (cards)
that can be stacked
only one card is visible at a given moment
14. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Card stack
usually, labeled – horizontal/vertical – tabs are used
the meaning of each label is important
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
17. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Closable panels
Jenifer Tidwell, 2005
placing the content in separate labeled containers
that could be expanded
18. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Movable panels
Jenifer Tidwell, 2005
put different tools or sections of content onto
separate panels, and let the user move them around
to form a custom layout
19. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Movable panels
users have liberty to rearrange their workspace
20. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Movable panels
there are situations when it could be inconvenient
why?
21. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Right/left alignment
Jenifer Tidwell, 2005
permits alignment of the content within a form/table
labels must be right aligned
fields must be left aligned
22. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
23. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
…good or bad design?
24. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Right/left alignment
in certain cases,
it could be substituted by other design patterns
25. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
26. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
27. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
28. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
29. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
30. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Diagonal balance
Jenifer Tidwell, 2005
arrange page elements in an asymmetric fashion,
but balance it by putting visual weight into both
the upper-left and lower-right corners
31. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
32. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Diagonal balance
“Asymmetrical layouts can achieve equilibrium as well,
but their tenser, more dramatic form of balance
depends on careful manipulation to compensate visually
for differences in the size, position,
and value of major elements.”
Kevin Mullet & Darrell Sano
33. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Property sheet
Jenifer Tidwell, 2005
presenting specific properties of an object
usually, a two-column layout or a form are used
34. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
35. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Liquid layout
Jenifer Tidwell, 2005
permits content regrouping
when the presentation area is resized
36. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Liquid layout
in the case of traditional applications,
it could be facilitated by the layout managers
37. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Liquid layout
multi-device context
responsive Web design
38. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
responsive Web design
adapting the design to a certain interaction context
(e.g., screen orientation, resolution, pixel density,…)
by using different Web techniques
Ethan Marcotte, 2010
www.alistapart.com/articles/responsive-web-design/
discussion
39. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
media queries
flexible image (+media)
flexible or fluid grid
Jacob Surber, The Page Is Dead, SXSWi 2012
http://www.slideshare.net/jacobsurber/page-death
40. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
various screen resolutions
using different CSS properties via @media rules
41. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
<link rel="stylesheet" media="only screen and (color)"
href="styles-for-color-screens.css" />
@media screen and (max-width: 768px) and (orientation: portrait) {
/* for tablets */
}
/* 2 columns for big screen resolutions */
@media (min-width:1140px) and (min-resolution: 300dpi) {
.content { column-count: 2; column-gap: 1em; font-size: 1.5em; }
}
@media screen and (device-aspect-ratio: 16/9),
screen and (device-aspect-ratio: 16/10) { /* wide display */ }
for other details, visit
http://developer.mozilla.org/docs/Web/Guide/CSS/Media_queries
42. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
flexible images & other media – e.g., videos
adaptive sizing and/or vectorial fonts & graphics (SVG)
examples: http://mediaqueri.es/
discussion
43. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
flexible layouts use relative width columns
to organize the content
grid templates: 960.gs, cssgrid.net, goldengridsystem.com
discussion
44. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
responsive Web design
other strategies
use relative CSS measure units (% em rem)
linearize the content in a mobile context
hide (remove) non-essential data
set the viewport to the real size of the device’s screen
<meta name="viewport" content="width=device-width, initial-scale=1" />
see also http://zite.to/13Dd5DU
45. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
graceful
degradation
progressive
enhancement
responsive
Web design
mobile first
Aaron Gustafson – http://www.slideshare.net/AaronGustafson
discussion
46. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
http://bradfrost.github.com/this-is-responsive/patterns.html
responsive Web patterns
(layout, navigation, content, forms,…)
47. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Design Patterns
user actions & commands
48. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI offers to its users certain controls
each action that could be performed by user
must be consequently indicated
49. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI offers to its users certain controls
each action that could be performed by user
must be consequently indicated
(perceived) affordance
Donald Norman, 1998
50. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“Affordances provide strong clues
to the operations of things.
Knobs are for turning. Slots are for inserting things into.
Balls are for throwing or bouncing.”
Donald Norman
see also Victor Kaptelinin (2014):
www.interaction-design.org/encyclopedia/affordances_and_design.html
51. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
There must be a logical reason
for using an interaction control
52. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Interaction controls
inspired by reality
Dan Saffer
switch, dial, button, latch, slider, handle
53. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Interaction controls
physical only
joystick, trackball, Wiimote,
data glove, current wearable devices,…
54. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Interaction controls
digital only
scroll bar, checkbox, radio button, text box,
listview, spinner etc.
55. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Interaction controls
“invisible”
e.g., Kinect, LeapMotion
56. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Button groups
Jenifer Tidwell, 2005
to present related actions as a small cluster of buttons,
aligned either horizontally or vertically
see Gestalt
principles
57. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Button groups
we must create several of them
if there are more than 3—4 actions
remember
Hick’s Law
58. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Button groups
must be consistently placed within the UI
59. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
60. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
61. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Prominent “done” button
Jenifer Tidwell, 2005
place the button that finishes a transaction
at the end of the visual flow
62. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Prominent “done” button
this button must focus the user’s attention
e.g., make it big and well-labeled
usually, the button label is a textual one,
easy to be noticed
63. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Preview
Jenifer Tidwell, 2005
shows users a preview or summary of what will happen
when they perform an action
e.g., printing, committing an on-line purchase etc.
64. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Preview
previews help prevent various errors
it could facilitate to explain users some actions
65. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
66. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Progress indicator
Jenifer Tidwell, 2005
indicating how much progress was made
on a time-consuming operation
67. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Progress indicator
Jenifer Tidwell, 2005
indicating how much progress was made
on a time-consuming operation
providing feedback to the user
68. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Progress indicator
user must be informed
regarding the system’s current status
e.g., changing mouse cursor, highlighting, progress bar,…
69. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Progress indicator
< 0.1 sec (almost) instantaneous
0.1 – 1 sec no feedback is necessary;
the user will notice that must wait
1 – 5 sec waiting – e.g., busy cursor
>1 – 5 sec showing a progress indicator
70. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Progress indicator
“Display a progress bar that accurately reflects
the time remaining. If you cannot predict how much time
an operation will take, say so!
Do not lie to or misinform users.”
Jef Raskin, 2000
71. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
indeterminate-progress indicator
time-remaining progress indicator
72. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
73. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Cancelability
Jenifer Tidwell, 2005
provides a way to instantly cancel
a time-consuming operation, with no side effects
74. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Cancelability
if there are simultaneous operations,
we must indicate what it could be canceled
75. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
a hard-to-find Cancel operation (Tidwell, 2005)
76. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Multi-level undo
Jenifer Tidwell, 2005
it offers a way to easily reverse
a series of actions performed by the user
77. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Multi-level undo
undoable operations:
entered text, database transactions, layout changes,
cut & paste, actions regarding certain resources:
images, e-mail messages, etc.
78. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
79. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Command history
Jenifer Tidwell, 2005
keeping a visible record of what was done,
to what, and when
80. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Macros
Jenifer Tidwell, 2005
defining & executing a sequence (group) of small actions
a macro is denoted by a mnemonic
81. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Macros
we must provide a recording mechanism of user actions
to be automatically executed another time
82. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Macros
related patterns:
Multi-Level Undo
Command History
83. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Design Patterns
data editing
84. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
A frequent activity performed by users is to edit data
textual, graphical, multimedia (video, sound), etc.
85. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
WYSIWYG (What You See Is What You Get)
desktop publishing
raster/vector image editing
animation scenes
video content
…
86. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
WYSIWYG (What You See Is What You Get)
users have some powerful expectations
for how a text editor should work
87. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
OmmWriter Dāna
(reported by @alecsandru)
88. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Direct manipulation
permits users to “directly” interact with interface objects
– by performing operations like grab, push, drag, drop,
stack, paint, transform etc. – via some pointing device
89. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
90. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Direct manipulation
direct manipulation is immediate
actions take place with no apparent wait time
91. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Direct manipulation
direct manipulation is precise
users need to have fine control over the location of
that pointer and the objects attached to it
92. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Selection
users have certain expectations
regarding the selection of different types of entities:
(non)formatted text, elements of vector graphics,
abstract components, lists, tables, trees, etc.
93. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Text editors
Vector graphics
editors, GUI builders
Lists, tables, trees
Single click
Move text insertion
cursor here
Select just this item Select just this item
Double click Select this word Open or edit this item Open or edit this item
Triple click
Select this line,
or select this paragraph
N/A N/A
Click, drag,
release
Start selection here,
end it there;
select all text between them
Select everything inside
the bounding box
(“rubberband”, “marquee”
or “marching ants”
selection)
Drag this item
from here to there
Shift-click
Start selection at the text
insertion cursor, end it at the
click point, and select all text
between them
Add this item to the
selection set
Add this item to the
selection set, plus all
intervening items
(“contiguous
selection”)
Control-
click
Varies from application to
application
Varies from application to
application
Add this item to the
selection set (“dis-
contiguous selection”)
Tidwell (2005)
94. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Selection
regularly, selection of discrete elements is done
by using handles
95. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Edit-in-place
Jenifer Tidwell, 2005
offers a minimalist editor directly in the place
where the user could modify a textual data
96. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Edit-in-place
used to edit files/objects names,
labels, values of properties,…
97. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Smart selection
Jenifer Tidwell, 2005
making the software smart enough to automatically select
a coherent group of items,
rather than making the user do it
examples: text elements, pixels, file names,…
98. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Smart selection
when done thoughtlessly,
smart selections can be irritating
anti-pattern
99. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Composite selection
Jenifer Tidwell, 2005
permits a global selection for a group of entities
100. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Composite selection
Jenifer Tidwell, 2005
use different gestures or mouse clicks in different screen
areas, such as the composite’s edges versus its insides
to determine whether you should select a composite itself
or allow its contained objects to be selected
101. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
102. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Spring-loaded mode
Jenifer Tidwell, 2005
permitting users to change the mode of interaction
by pressing a key or a certain mouse button
103. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Spring-loaded mode
typical keys:
Shift
Alt
Ctrl
104. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Constrained resize
Jenifer Tidwell, 2005
supply resize modes with different behavior,
such as preserving aspect ratio,
for use under special circumstances
105. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
106. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Magnetism
Jenifer Tidwell, 2005
making the objects “magnetic” to the things
a user positions them against
when the user drags an object very near one of
these things, it should stick
107. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Magnetism
it helps compensate for users’ lack of perfect dexterity
with a pointing device – typically, the mouse
108. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Magnetism
example:
Snap to grid – Adobe Photoshop
109. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Guides
Jenifer Tidwell, 2005
it provides horizontal and/or vertical reference lines
in order to facilitate the alignment of certain entities
110. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Guides
guides make it easier for a user to see
that alignment is pixel-perfect
111. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Paste variations
Jenifer Tidwell, 2005
offers special functionalities – e.g., format conversions –
for the paste operation
112. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Paste variations
typical example:
Paste Special – Microsoft Office
113. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Interacting with software & hardware
http://www.lorenzpotthast.de/deceleratorhelmet/
114. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 1: Humans & devices
physical experience user/device
direct manipulation, gestures, surfaces, senses, emotions
115. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 1: Humans & devices
3 types of user goals (Cooper et al., 2014)
116. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 1: Humans & devices
example:
mobile devices are handheld and the relationship
with the hands is a fundamental character
of the interaction
Marco Susani, 2008
117. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 1: Humans & devices
beginnerintermediateexpert
Alan Cooper et al., 2014
118. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
The users’ necessities – e.g., questions about different
tasks to be accomplished – can vary considerably
depending on their experience (Cooper et al., 2014)
119. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 1: Humans & devices
beginnerintermediateexpert
no one wants everlastingly to remain a beginner
optimize for intermediates
120. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 1: Humans & devices
beginnerintermediateexpert
we must persuade the user to become an intermediate
why?
121. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 2: Mental models + their representations
physical experiencedefining the interaction
between humans and objects (devices)
122. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 2: Mental models + their representations
digital experience, interface, mental model(s)
models focused on:
communication versus content versus task (functionality)
123. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 2: Mental models + their representations
different communication paradigms:
textual, graphical, natural (e.g., gestural), 3D, mixed etc.
typical example:
augmented/mixed/virtual reality
124. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/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
125. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 2: Mental models + their representations
traditional desktop or mobile applications are task-centric
typical examples:
operating systems, various utilities
126. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 2: Mental models + their representations
traditional desktop or mobile applications are task-centric
a possible design solution:
task-oriented menu
127. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
129. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 4: Communities
(a)synchronous communication environments
audio, text, multimedia, 3D
typical examples:
instant messaging, social networks, MMORPGs
130. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 4: Communities
social behaviors mediated by the technology
131. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 4: Communities
social behaviors mediated by the technology
intimate vs. tribal vs. viral
P2P chat vs. forum vs. addictive online games
132. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 4: Communities
humans are social animals
133. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/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
134. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/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.
135. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
136. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Sphere 5: Content
world-wide public access to
the data, information, knowledge
creating/publishing/mixing the content
137. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/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, mash-ups,
online gaming, virtual environments etc.
138. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Necessity:
focusing – manipulating – the user’s attention
the average attention span in 2013 – 8 seconds
the average attention span in 2000 – 12 seconds
http://www.statisticbrain.com/attention-span-statistics/
139. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Remark:
keeping a user happy may, therefore,
not only affect satisfaction,
but may also lead to efficiency and creativity
140. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
user interaction (Desmet, 2002; van Gorp, 2006)
value – pleasant vs. unpleasant
arousal – anxiety vs. boredom
141. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Within interaction, related emotional states
must be connectedflow
142. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Flow
the mental state of operation in which a person in
an activity is fully immersed in a feeling of
energized focus, full involvement, and success
in the process of the activity
143. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Flow
the global sentiment experienced by a person
when (s)he is totally involved into a certain activity
optimal
experience
144. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Flow
the global sentiment experienced by a person
when (s)he is totally involved into a certain activity
excitement (arousal)flowcontrolrelaxation
boredomapathyapprehensionanxiety
optimal
experience
145. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Anxiety, Boredom and Flow
(Csikszentmihalyi, 1990; van Gorp, 2006)
146. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Flow
autotelic work
Csikszentmihalyi, 1990
refers to “work” that is experienced as enjoyable and
is associated with flow or optimal experience
characterized by a sense of well being and harmony
with one’s surroundings
147. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Flow
autotelic work
Csikszentmihalyi, 1990, 2008
identifying and designing the motivational affordances
in the task and work environment
www.ted.com/talks/mihaly_csikszentmihalyi_on_flow.html
148. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
149. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Negative example:
providing feedback that is perceived as controlling rather
than informative tends to reduce intrinsic motivation
Deci, Ryan & Koestner, 1999; Szalma & Hancock, 2008
discussion
150. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
151. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“Conclusion”
layout, actions & editing patterns and flow
152. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
next lecture:
design patterns for social interactions