HCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns

Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Human-Computer Interaction
from information architecture
to design patterns

“I’ve been amazed at how often those outside
the discipline of design assume that
what designers do is decoration.
Good design is problem solving.”
Jeff Veen

UI designvisual design

UI designvisual design
visualization = graphical representation of data/concepts
Ware, 2004

Visual design
Main elements (Dan Saffer, 2006):
layout
grid
visual flow
typography
color, shape, texture

Visual design
layout
where & how content and interaction controls are placed
http://alistapart.com/topic/layout-grids

Visual design
grid
gives a coherent structure of information
www.thegridsystem.org

Visual design
visual flow
refers to methods of understanding and/or interacting
with presented data

Visual design
discussion

Visual design
typography
presents the textual content via fonts
conforming to certain presentation rules
http://webtypography.net/toc/

Visual design
color, shape, texture
most important visual dimensions
used for a proper perception of information

case study
color semantics
syntax highlighting
color-pick control

Visual design
Form versus function
for the majority of users,
the look & feel is more important than functionality
remember UX?

Visual design
Common mistakes
lack of organization (structure)
visual interference
complexity
excessive details
lack of adaptability

Strategies
visual focus
consistency
modularity
adaptability
Visual design

Strategies
visual focus
consistency
modularity
adaptability

responsive (Web) design
Visual design
next lecture

Visual design
To properly present information,
visual dimensions are used

Visual design
Different perceptions
regarding a certain visual dimension

Visual design
Different perceptions
regarding a certain visual dimension
insignificant differences must be eliminated

simplicity

Visual design
Visual dimensions are distinguished via
visual variables (Jacques Bertin, 1989)

Visual design
do not require additional cognitive processing

Visual design
communication
data codification
indicating differences between UI elements

Visual design
Example: showing the temperature
any visual variable could be used
color (hue), position relative to a scale,
length of thermometer, using an icon (shape),…

Visual design
Visual variables have different levels of perception
>100 levels – hue and value
~10 levels – size
~4 levels – orientation

Visual design
Some visual variables could not be easily recognized

detect all letters placed in the right

detect all letters placed in the right
we must perceive only the position

detect all green letters

detect all green letters
we are using hue as a visual variable

detect all N letters

detect all N letters (shape)
interferences: multiple visual variables

Visual design
Perception could be associative
associative visual variables:
position, hue, texture, shape, orientation

Visual design
non-associative visual variables:
size, value

Visual design
non-associative visual variables:
size, value
example:
the color of small objects is difficult to be perceived

Visual design
Modularity (grouping) could be achieved by considering
the Gelstalt principles of perception
using visual perception, the mind creates
the entire picture (Gelstalt) from existing fragments

www.interaction-design.org/encyclopedia/data_visualization_for_human_perception.html
various examples: http://tinyurl.com/y6ao7k

discussion

Necessity
A certain structure and presentation manner
for the information in order to be easily
perceived and consumed by users

Solution
IA – Information Architecture

Information Architecture
Software applications are organized by using
lists of objects
sequences of actions
lists of categories (topics) of interest
lists of software tools/components

Lists of objects
denoted by substantives
examples:
operating system updates, e-mails,
shared pictures, locations of interest,…

Lists of objects
denoted by substantives
ideally, the application could
recommend interesting items
for each user

Sequences of actions
specified by verbs
e.g., browse, buy, register, sell, subscribe,…

Sequences of actions
specified by verbs
e.g., browse, buy, register, sell, subscribe,…
software could suggest certain actions to be selected
by the users, conforming to their profiles

Substantive–verb versus verb–substantive
object–action versus action–object

it is recommended to use
the substantive-verb style of interaction
Raskin, 2000

verb-substantive style could be useful for toolboxes
why?

Lists of categories (topics) of interest
context: information-centric applications
examples:
science, technologies, entertainment, etc.

Lists of software tools/components
useful for task-oriented applications
e.g., calendar, text editor, resource manager,…

Aspects:
nature and domain of the software application

Aspects:
background knowledge of the target users

Aspects:
context of interaction

How information could be organized?

Linear presentation
usually, different sorting criteria are applied:
alphabetical, spatial, temporal, significance,…

Bidimensional presentation
2 criteria/dimensions of interest are considered
examples:
geographical location + time

Bidimensional presentation
a common use:
grid-based visualization of data

Hierarchical presentation
tree-like structures having one or more levels
used to show certain relations between things:
parent–child, grouping, etc.

Context-based presentation
space
time
user profile

Context-based presentation
space
time
user profile
examples:
maps, charts, timelines, recommended information,…

Complex presentation
could use a combination of previous solutions

3D visualization of the DOM – Mozilla Firefox
contributor: Victor Porof, Tilt project (2011—2012)

Traditionally, the presentation of data will employ
regions: windows, pages
+
interaction elements: UI controls

organizing information

Design patterns
recurring solutions that solve common design problems

Design patterns
recurring solutions that solve common design problems
J. Tidwell, Designing Interfaces, O’Reilly, 2005
Ecaterina Moraru, Interaction Design Patterns, 2011
http://profs.info.uaic.ro/~evalica/patterns/

Two-panel selector
Jenifer Tidwell, 2005
used to show selectable interactive elements
for each selected element,
certain details or its content could be presented

h5ai – a beautified Apache index based on HTML5
http://larsjung.de/h5ai/

Two-panel selector
useful for presentation of lists:
resources
categories
actions
…

Two-panel selector
decreases the interaction effort: e.g., mouse manipulation
reduces the cognitive load
facilitates exploration

Canvas + palette
offers a palette (toolbox) containing objects/actions
used in conjunction to a workplace (canvas)

MacPaint (1984)
versus
Photoshop (now)

Canvas + palette
used by visual editing applications to create objects
and to arrange them within a virtual space

Canvas + palette
the palette facilitates visual recognition via icons
(sometimes, grouped by categories)
for interaction,
selections or drag & drop could be adopted

One-window drilldown
presenting information by using a single window only

One-window drilldown
useful for depicting the content on reduced-size screens:
mobile device, TV, appliance, etc.
see also A. Dawson, “The Science Behind a Single Page Website”
http://sixrevisions.com/web_design/the-science-behind-a-single-page-website/

Alternative views
user has the possibility to choose alternative views
these presentations are structurally different,
not just visually

Alternative views
accommodate certain user preferences or goals
regarding a given context of interaction

Wizard
instructs user to execute step-by-step actions,
conforming to a predefined scenario
“don’t make me think, just tell me what to do next”

Wizard
must provide:
an accurate (logical) sequence of tasks
+
a suitable structure of presented information

Extras on demand
presenting main information only, “hiding” the details

Extras on demand
make sure the entrance to and exit from
the “extras” window/page are obvious

Multi-level help
using multiple help methods,
directly located in the user interface

design patterns: exploration

Locating objects in the user proximity
signposts
window/page title
logo
selection signage
…

Help users to find the way towards their goal
wayfinding
good signage
environmental clues
maps

discussion
What signposts are used? There are wayfinding clues?

Important aspect
minimizing distanceincreasing interface ergonomics

Important aspect
minimizing distanceincreasing interface ergonomics
3-Click-Rule: users stop using the site if they aren’t able
to find the information or access the site features
within 3 mouse clicks

Using UML diagrams – Tidwell (2005)
4 pages + 7 “jumps” (clicks)

the user makes 9 actions – being “lost in space”,
but the optimal number of steps (clicks) is 3
T. Tullis, B. Albert, Measuring the User Experience
(2nd Edition), Morgan Kaufmann, 2013

GOMS
(Goals, Operators, Methods, and Selection rules)
Card et al., 1983; John & Kieras, 1996
to study the sequence of actions that must be performed
by users in order to accomplish their goal,
conforming to their abilities
http://web.eecs.umich.edu/~kieras/goms.html

GOMS
offers a quantitative analysis
initially, keyboard-based interaction was considered
(keystroke-level model)
www.it.bton.ac.uk/staff/rng/teaching/notes/goms.html

GOMS
K = 0.2 sec – Keying: time it takes to tap a key on the keyboard
P = 1.1 sec – Pointing: time it takes to point to a position on display
H = 0.4 sec – Homing: time it takes to move hand from
the keyboard to the interface or vice-versa
M = 1.35 sec – Mentally preparing: time to prepare for the next step
R – Responding: wait for a computer to respond to input

GOMS
K = 0.2 sec – Keying: time it takes to tap a key on the keyboard
P = 1.1 sec – Pointing: time it takes to point to a position on display
H = 0.4 sec – Homing: time it takes to move hand from
the keyboard to the interface or vice-versa
M = 1.35 sec – Mentally preparing: time to prepare for the next step
R – Responding: wait for a computer to respond to input
the values could vary depending on the user abilities

GOMS
case study (Raskin, 2000):
evaluating an interface
for converting Celsius  Fahrenheit temperature

~5.4 sec.
~20.8 sec.

GOMS
extensions:
NGOMSL – Natural GOMS Language
CMP-GOMS – Cognitive-Motor-Perceptual GOMS
http://cogtool.hcii.cs.cmu.edu/use-today/examples

GOMS
without a quantitative guide,
we are only guessing at how well we are doing
and at how much room there is for improvement
Jef Raskin

Global navigation
assures the existence of navigational elements –
consistently positioned – to help users to access
the most important sections of the application/site

Hub and spoke
isolating application sections into independent
mini-applications/mini-sites,
that can be directly accessed via main window/page

hub & spoke: used mainly in mobile computing context

Hub and spoke
like global navigation pattern, it could be used
to structure typical “paths” of the user thru the interface
also, assure scalability

Pyramid
a solution for hierarchical + sequential exploration

Pyramid
could be used in conjunction to the one-window drilldown

Modal panel
showing only one page, with no other navigation options,
until the user solves the immediate problem

Modal panel
interrupts the current task – it could break the state flow

anti-pattern
apply this design pattern sparingly

error messages
discussion
Brazil (1985) – director: Terry Gilliam
www.imdb.com/title/tt0088846/

error messages
an error message is really helpful?
bad file number
segmentation fault: core dumped
broken pipe
404 not found
fatal error 312: aborting
literal 13 could not be allocated
internal error: object container empty
error exit delayed from previous errors
discussion

error messages
error messages must not confuse users
discussion

error messages
the tone of an error message must inspire confidence
an unknown error occurred
discussion

error messages
avoid patronizing and arrogant attitudes
Cannot delete Document: Access is denied!
versus
This file is protected and cannot be
deleted without specific permission.
discussion

error messages
abort  end, cancel, stop
available  ready
boot  start, run
error
execute  complete
hit  press, depress
invalid  not correct/good/valid
kill  end, cancel
output  report, list, display
terminate  end, exit
discussion

error messages
don’t make user to feel guilty
(users are more important than code)
discussion

error message positive feedback message
discussion
for creative examples,
visit http://fab404.com/

Breadcrumbs
give users an alternative method of navigation
types:
path
location
attribute

Breadcrumbs
revealing useful clues about the site/application’s
information architecture
this pattern does not provide information
regarding the next possible – if any – step

Sequence map
indicates a sequence of actions
+
the current step

Sequence map
it can be used in conjunction to wizard
if the navigational topology is large & hierarchical,
it could be substituted by breadcrumbs

Color-coded sections
facilitates the recognition of a certain place
within a site/application

Color-coded sections
alternatively, other visual variables – e.g., shapes,
textures,… – could be used to convey
the differences/meanings between various UI regions

Escape hatch
provides means for “escaping”
from a place having limited navigational options

Escape hatch
helps people feel like they can safely explore
an application
when navigation assumes the execution of an action,
an alternative is the undo design pattern

“Conclusion”
visual design, IA, HCI design patterns

next lecture:
from design patterns to flow

HCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns

Recommended

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to HCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns (20)

More from Sabin Buraga (20)

Recently uploaded (20)

HCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns