HCI Design Patterns and Responsive Layouts

Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Human-Computer Interaction
from design patterns to flow

“It is not the answer that enlightens,
but the question.”
Eugene Ionesco

How to present the content to convey
meaning, sequence, and points of interaction?

Design Patterns
layout (Jenifer Tidwell)

Visual framework
assure the use of layout, color and visual style
in a consistent manner

Visual framework
must be flexible regarding the visual design,
depending on the presented content

Visual framework
example:
visual consistency of the traditional applications
and Web sites

discussion
…good or bad layout?

Center stage
most important part of the UI is located in a center zone,
grouping additional tools in small-size areas

Center stage
designed by using:
size
color
headlines
context

Center stage
it could be used in conjunction to
other design patterns – e.g., for Web navigation

Card stack
content sections are placed on different panels (cards)
that can be stacked
only one card is visible at a given moment

Card stack
usually, labeled – horizontal/vertical – tabs are used
the meaning of each label is important

discussion

Closable panels
placing the content in separate labeled containers
that could be expanded

variations:
accordion
disclosure triangles
slide drawer

Movable panels
put different tools or sections of content onto
separate panels, and let the user move them around
to form a custom layout

Movable panels
users have liberty to rearrange their workspace

Movable panels
there are situations when it could be inconvenient
why?

Right/left alignment
permits alignment of the content within a form/table

for additional considerations, read the article
Andrew Coyle, “Design Better Forms”, UX Design, 2016
uxdesign.cc/design-better-forms-96fadca0f49c

in certain cases,
it could be substituted by other design patterns

discussion
…good or bad design?

Diagonal balance
arrange page elements in an asymmetric fashion,
but balance it by putting visual weight into both
the upper-left and lower-right corners

example
Science
science.sciencemag.org

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

Property sheet
presenting specific properties of an object
usually, a two-column layout or a form are used

Liquid layout
permits content regrouping
when the presentation area is resized

Liquid layout
in the case of traditional applications,
it could be facilitated by the layout managers

Liquid layout
in the case of traditional applications,
it could be facilitated by the layout managers
examples for Universal Windows Platform (UWP) apps:
RelativePanel – an adaptive UI control
PointerPoint – unifies raw touch, mouse, and pen data

Liquid layout
multi-device context

responsive design (plasticity)

responsive (Web) design
adapting the design to a certain interaction context
(e.g., screen orientation, resolution, pixel density,…)
by using different (Web) design techniques
Ethan Marcotte, 2010
www.alistapart.com/articles/responsive-web-design/
resources of interest:
https://responsivedesign.is/
discussion

discussion
reality: different manners of interaction
Aaron Gustafson, “Exploring Adaptive Interfaces”, Generate 2017
www.slideshare.net/AaronGustafson/exploring-adaptive-interfaces-generate-2017

discussion
reality: various contexts + changing conditions

discussion
reality: user variety & needs

discussion
CSS media queries
flexible content
(fonts, tables, images, multimedia)
flexible/fluid grid
in the Web context, we should consider:

discussion
responsive images
responsiveimages.org
responsive data tables
css-tricks.com/responsive-data-tables/
responsive e-mail patterns
responsiveemailpatterns.com
other useful resources:
bradfrost.github.io/this-is-responsive/resources.html

graceful
degradation
progressive
enhancement
responsive
(Web)
design
mobile first
discussion

bradfrost.github.com/this-is-responsive/patterns.html
responsive Web patterns
(layout, navigation, content, forms,…)

Design Patterns
user actions & commands

UI offers to its users certain controls
each action that could be performed by user
must be consequently indicated

UI offers to its users certain controls
each action that could be performed by user
must be consequently indicated
(perceived) affordance
Donald Norman

“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.
When affordances are taken advantage of,
the user knows what to do just by looking:
no picture, label, or instruction needed.”
Donald Norman (1988)

“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.
When affordances are taken advantage of,
the user knows what to do just by looking:
no picture, label, or instruction needed.”
Donald Norman (1988)
see also Victor Kaptelinin, “Affordances”, The Encyclopedia of
Human-Computer Interaction (2nd Edition), 2015:
www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-
interaction-2nd-ed/affordances

user perception of selection controls’ states
hover, focused, pressed, disabled, disabled focused
example: Material Design (Google)
material.io/guidelines/components/selection-controls.html
discussion

There must be a logical reason
for using an interaction control

Interaction controls
inspired by reality
Dan Saffer
switch, dial, button, latch, slider, handle

physical only
joystick, trackball, Wiimote,
data glove, current wearable devices,…

case study
A. Gharibans et al., “Artifact Rejection Methodology Enables Con-
tinuous, Noninvasive Measurement of Gastric Myoelectric Activity
in Ambulatory Subjects”, Scientific Reports, Vol. 8, March 2018
www.nature.com/articles/s41598-018-23302-9

digital only
scroll bar, checkbox, radio button, text box,
listview, spinner, etc.

digital + physical
examples: mixed reality, interactive tables,
multi-user interfaces,…

physical + digital retail marketing: PERCH
www.perchinteractive.com/showcase/
case study

“invisible”
especially for natural UIs
examples: gesture-/voice-/motion-based interactions

“Be the bird” – a Kinect-based installation allowing users
to retrieve information through full body motion
gagarin.is/work/norwegian_seabird_centre
case study

Button groups
to present related actions as a small cluster of buttons,
aligned either horizontally or vertically
revisit
Gestalt
principles

Button groups
we must create several of them
if there are more than 3—4 actions
remember
Hick’s Law

Button groups
must be consistently placed within the UI

Prominent “done” button
place the button that finishes a transaction
at the end of the visual flow

must focus user’s attention
should be big & well-labeled
usually, the button label
is a textual one,
easy to be noticed
Prominent “done” button

Preview
shows users a preview or summary of what will happen
when they perform an action
e.g., printing, committing an on-line purchase, etc.

Preview
previews help prevent various errors
it could facilitate to explain users some actions

Progress indicator
indicating how much progress was made
on a time-consuming operation

feedback to the user should be provided

Progress indicator
user must be informed
regarding the system’s current status
e.g., changing mouse cursor, highlighting, progress bar,…

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

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

time-remaining (result-based) progress indicator

indeterminate-progress indicator

Progress indicator
for practical aspects, see also
Progress Bars vs. Spinners: When to Use Which (2016)
uxmovement.com/navigation/progress-bars-vs-spinners-when-to-use-which/

Cancelability
provides a way to instantly cancel
a time-consuming operation, with no side effects

Cancelability
if there are simultaneous operations,
we must indicate what it could be canceled

a hard-to-find Cancel operation (Tidwell, 2005)

Multi-level undo
it offers a way to easily reverse
a series of actions performed by the user

Multi-level undo
undoable operations:
entered text, database transactions, layout changes,
cut & paste, actions regarding certain resources:
images, e-mail messages, etc.

Command history
keeping a visible record of what was done,
to what, and when

Macros
defining & executing a sequence (group) of small actions
a macro is denoted by a mnemonic

Macros
provide a recording mechanism of user actions
to be automatically executed another time

Macros
related patterns:
Multi-Level Undo
Command History

Design Patterns
data editing

A frequent activity performed by users is to edit data
textual, graphical, multimedia (video, sound), etc.

WYSIWYG (What You See Is What You Get)
desktop publishing
raster/vector image editing
animation scenes
video content
…

WYSIWYG (What You See Is What You Get)
users have some powerful expectations
for how a text/content editor should work

discussion
Boxy SVG – a SVG editor for non-technical users

Operation: 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

immediate
actions take place with no apparent wait time

precise
users need to have fine control over the location of
that pointer and the objects attached to it

Operation: 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.

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
Tidwell (2005)

Text
editors
Vector graphics
editors, GUI
builders
Lists, tables,
trees
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
(“discontiguous
selection”)
Tidwell (2005)

Operation: Selection
regularly, selection of discrete elements is done
by using handles

Edit-in-place
offers a minimalist editor directly in the place
where the user could modify a textual data

Edit-in-place
used to edit files/objects names,
labels, values of properties,…

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

Smart selection
when done thoughtlessly,
smart selections can be irritating

anti-pattern

Composite selection
permits a global selection for a group of entities

Composite selection
use different gestures or clicks/taps 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

Spring-loaded mode
permitting users to change the mode of interaction
by pressing a key or a certain mouse button
typical keys: Shift Alt Ctrl

Constrained resize
supply resize modes with different behavior,
such as preserving aspect ratio,
for use under special circumstances

Magnetism
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

Magnetism
it helps compensate for
users’ lack of perfect dexterity
with a pointing device
(typically, the mouse)

Guides
it provides horizontal and/or vertical reference lines
in order to facilitate the alignment of certain entities

Guides
guides make it easier for a user to see
that alignment is pixel-perfect

Paste variations
offers special functionalities – e.g., format conversions –
for the paste operation
a classic example:
Paste Special – Microsoft Office

How about maintaining the user’s flow?

Remark:
keeping a user happy may, therefore,
not only affect satisfaction,
but may also lead to efficiency and creativity

user interaction (Desmet, 2002; van Gorp, 2006)
value – pleasant vs. unpleasant
arousal – anxiety vs. boredom

Within interaction, related emotional states
must be connectedflow

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

Flow
the global sentiment experienced by a person
when (s)he is totally involved into a certain activity
excitement (arousal)flowcontrolrelaxation
boredomapathyapprehensionanxiety
optimal
experience

the first model of the flow state
(Csikszentmihalyi, 1990; van Gorp, 2006; Moneta, 2012)

autotelic work
Csikszentmihalyi, 1990, 2008
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

Flow
autotelic work
identifying and designing the motivational affordances
in the task and work environment
www.ted.com/talks/mihaly_csikszentmihalyi_on_flow.html

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

Group flow
when a group (team) cooperates to agree on goals,
tasks + behavioral patterns, then the social flow
(group cohesion) is much more likely to occur
Charles Walker (2010)
larger context: crowd psychology

“Conclusion”
layout, actions & editing patterns + flow
inspired-ui.com

next lecture:
design patterns for social interactions

HCI Design Patterns and Responsive Layouts

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to HCI Design Patterns and Responsive Layouts

Similar to HCI Design Patterns and Responsive Layouts (13)

More from Sabin Buraga

More from Sabin Buraga (20)

Recently uploaded

Recently uploaded (20)

HCI Design Patterns and Responsive Layouts