HCI 2014 (5 of 10): UI Design. From Design Patterns to Flow

Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/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

Visual framework
Jenifer Tidwell, 2005
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

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

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

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
labels must be right aligned
fields must be left aligned

discussion
…good or bad design?

Right/left alignment
in certain cases,
it could be substituted by other design patterns

discussion

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

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
multi-device context

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

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

discussion
various screen resolutions
using different CSS properties via @media rules
@media screen and (max-width: 768px) and (orientation:portrait) {
/* styles for tablets*/
}

flexible images & other media – e.g., videos
adaptive sizing and/or vectorial fonts & graphics (SVG)
examples: http://mediaqueri.es/
discussion

flexible layouts use relative width columns
to organize the content
grid templates: 960.gs, cssgrid.net, goldengridsystem.com
discussion

discussion
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

graceful
degradation
progressive
enhancement
responsive
Web design
mobile first
Aaron Gustafson – http://www.slideshare.net/AaronGustafson
discussion

http://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, 1998

“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
www.interaction-design.org/encyclopedia/affordances.html

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

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

“invisible”
e.g., Kinect, LeapMotion

Button groups
to present related actions as a small cluster of buttons,
aligned either horizontally or vertically
see 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

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

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

desktop

Web

mobile

Progress indicator
indicating how much progress was made
on a time-consuming operation

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

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

indeterminate-progress indicator
time-remaining progress indicator

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
we must 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 editor should work

OmmWriter Dāna
(reported by @alecsandru)

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

Direct manipulation
direct manipulation is immediate
actions take place with no apparent wait time

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

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
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
selection set, plus all
intervening items
(“contiguous
selection”)
Control-
click
Varies from application to
application
Varies from application to
application
selection set (“dis-
contiguous selection”)
Tidwell (2005)

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

Spring-loaded mode
permitting users to change the mode of interaction
by pressing a key or a certain mouse button

Spring-loaded mode
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

Magnetism
example:
Snap to grid – Adobe Photoshop

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

Paste variations
typical example:
Paste Special – Microsoft Office

Interacting with software & hardware

Sphere 1: Humans & devices
physical experience user/device
direct manipulation, gestures, surfaces, senses, emotions

example:
mobile devices are handheld and the relationship
with the hands is a fundamental character
of the interaction
Marco Susani, 2008

beginnerintermediateexpert
Alan Cooper, 1995

no one wants everlastingly to remain a beginner

we must persuade the user to become an intermediate

we must persuade the user to become an intermediate
why?

Sphere 2: Mental models + their representations
physical experiencedefining the interaction
between humans and objects (devices)

digital experience, interface, mental model(s)
models focused on:
communication versus content versus task (functionality)

different communication paradigms:
textual, graphical, natural (e.g., gestural), 3D, mixed etc.
typical example:
augmented/mixed/virtual reality

e-commerce, news & wiki applications
are mainly based on a content-centric model
several examples:
BBC News, TED, Speaker Deck, Vimeo, Wikipedia

traditional desktop or mobile applications are task-centric
typical examples:
operating systems, various utilities

traditional desktop or mobile applications are task-centric
a possible design solution:
task-oriented menu

Sphere 3: Context
interaction with(in) physical/virtual environment
“smart” objects, ubiquity, (pro)active agents, simulations

Sphere 4: Communities
(a)synchronous communication environments
audio, text, multimedia, 3D
typical examples:
instant messaging, social networks, MMORPGs

social behaviors mediated by the technology

social behaviors mediated by the technology
intimate vs. tribal vs. viral
P2P chat vs. forum vs. addictive online games

humans are social animals

humans are social animals
people we need (Mart Murdvee, 2006):
teenagerfriend, entertainer
business-oriented personsecretary
in spare timetrainer/instructor
elder personnurse, helpmate

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.

Sphere 5: Content
world-wide public access to
the data, information, knowledge
creating/publishing/mixing the content

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.

Necessity
focusing – manipulating – the user’s attention

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
optimal
experience

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

Anxiety, Boredom and Flow
(Csikszentmihalyi, 1990; van Gorp, 2006)

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

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

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

“Conclusion”
layout, actions & editing patterns and flow

next lecture:
design patterns for social interactions

HCI 2014 (5 of 10): UI Design. From Design Patterns to Flow

More Related Content

What's hot (17)

Similar to HCI 2014 (5 of 10): UI Design. From Design Patterns to Flow (20)

More from Sabin Buraga (20)

Recently uploaded (20)

HCI 2014 (5 of 10): UI Design. From Design Patterns to Flow