HCI 2018 (4/10) Information Architecture. From Design Patterns to Visual Design

Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/
Human-Computer Interaction
from information architecture
to visual design
http://designforuse.net/work/

“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

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
“Information architecture is the practice of
deciding how to arrange the parts of something
to be understandable.”
Information Architecture Institute
www.iainstitute.org/what-is-ia

IA is the creation of a (conceptual) structure – by using
hierarchies, categorizations, navigation, and metadata –
for a (digital) product such as an application or Web site
Louis Rosenfeld, Peter Morville, Jorge Arango,
Information Architecture: For the Web and Beyond
(4th Edition), O’Reilly, 2015

Sheila Pontis, Information Architecture Model (2011)
sheilapontis.wordpress.com/2011/07/22/information-architecture-model/

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

Dr. Sabin-Corneliu Buraga – profs.info.uaic.ro/~busaco/www.html5rocks.com/webappfieldguide/

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

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

discussion
developer.amazon.com/public/solutions/devices/fire-tv/docs/design-and-user-experience-guidelines

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

clairebarco.com/projects/information-architecture/

case study
a traditional hierarchical index:
rigid taxonomy to access information

case study
integrating faceted
search with IA
Spagnolo et al. (2010)
journalofia.org/volume2/issue1/03-spagnolo/

Context-based presentation
space
time
user profile

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

space
& time
user profile

Complex presentation
could use a combination of previous solutions

discussion

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
Adele (a repository of publicly available design systems
and pattern libraries) – adele.uxpin.com
Ecaterina Moraru, Interaction Design Patterns, 2011
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
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

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.

(mobile) Web context:
SPA – Single Page Applications
examples: onepagelove.com

(mobile) Web context:
PWA – Progressive Web Apps
pwa.rocks

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”

additional examples: ui-patterns.com/patterns/Wizard/

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
design advice:
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
(embedded help – local and/or remote)
user assistance and/or user guidance
www.uxmatters.com/topics/design/user-assistance-design/

aspects of interest:
online help vs. offline help
generic help + search facilities
context-based help
community help
natural interaction
user manual/guide
discussion

Multi-level help
design rules:
only what users need
action-oriented
support error recovery
www.slideshare.net/JangGraat/from-user-assistance-to-user-guidance-information-apps

design patterns:
exploration

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

Helping 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
web.eecs.umich.edu/~kieras/goms.html

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

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

Keying: time it takes to tap a key on the keyboard
K = 0.2 seconds
Pointing: time it takes to point to a position on display
P = 1.1 seconds
Homing: time it takes to move hand
from the keyboard to the interface or vice-versa
H = 0.4 seconds
Mentally preparing: time to prepare for the next step
M = 1.35 seconds
Responding: wait for a computer to respond to input
R = depends on computational task to be executed
the values could vary
(we should consider the real user abilities)

UI evaluation for a software tool able to convert
CelsiusFahrenheit temperature (Raskin, 2000)
case study
~5.4 sec.
~20.8 sec.

GOMS
extensions:
NGOMSL – Natural GOMS Language
CMP-GOMS – Cognitive-Motor-Perceptual GOMS (1988)
human-factors.arc.nasa.gov/publications/20051025121038_chi02.pdf

GOMS
for details, read:
B. John, D. Kieras, “The GOMS Family of User Interface
Analysis Techniques: Comparison and Contrast”, ACM
Transactions on Computer-Human Interaction, 3 (4), 1996
www.di.ubi.pt/~agomes/ihc/artigos/john2.pdf

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
Dennis Kardys, Wayfinding for the Mobile Web (2014)
www.smashingmagazine.com/2014/10/wayfinding-for-the-mobile-web/

Hub and spoke
like global navigation pattern, it could be used
to structure typical “paths” of the user thru the interface
also, can provide support for 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 user’s 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
an error message is really helpful?
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
better substitutions of certain terms
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, consult fab404.com

Breadcrumbs
give users an alternative method of navigation

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
facilitating the recognition of a certain place
within a site/application
www.dgottwald.org/above-and-below/

alternatively, other visual variables – e.g., 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

Visual Design
Several details about visual design?
1stwebdesigner.com/mobile-apps-designs/

UI designvisual design
in most cases, for traditional interactions

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
alistapart.com/topic/layout-grids

Visual design

experiment
Advice: avoid multi-column layouts
context: presenting (Web) form to be filled in
issue: users are likely to interpret the fields inconsistently
5 different ways
to interpret how
form fields relate
for 2-column layout
baymard.com/blog/avoid-multi-column-forms

Visual design
layout
facilitated by templates

Web template systems

w3layouts.com/free-responsive-html5-css3-website-templates/

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

strategies:
golden ratio, 3-column grid, simplicity, balance, unity

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

experiment
eyetracking visualizations show that users
often read Web pages in an F-shaped pattern:
2 horizontal stripes followed by a vertical stripe
Jakob Nielsen, 2006
www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

Visual design
icons presented by Control Panel (i.e. in Windows 7/8/10)
are organized in columns; they are sorted alphabetically
and laid out in left-to-right reading order
this layout violates our natural visual scanning pattern
www.antradar.com/blog-bad-ui-design-in-windows-control-panel
experiment

Visual design
typography
presents the textual content via fonts
conforming to certain presentation rules
useful resources: ilovetypography.com

for Web design, study webtypography.net

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

discussion
using human perception
to recognize shapes
context: CAPTCHA
remarks:
image recognition
is useless if user is blind
metaphorical association
is useless if user is autistic
Q & A: CAPTCHA on mobile: what are the alternatives?
ux.stackexchange.com/questions/51864/captcha-on-mobile-what-are-the-alternatives

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

responsive (Web) design
Visual design

Visual design
To properly present information,
visual dimensions are used

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

Visual design
Visual dimensions are differentiated via
visual variables
Jacques Bertin, Sémiologie graphique,
Mouton/Gauthier-Villars, Paris, 1967

Visual design
www.infovis-wiki.net/index.php?title=Visual_Variables
value
changes from light to dark
hue (color)
changes in hue at a given value
texture
variation in “grain”
shape
infinite number of shapes
position
changes in the spatial location
orientation
changes in alignment
size
changes in length, area or
repetition

Visual design
visual variables
do not require additional cognitive processing

Visual design
visual variables
common usages:
communication
data codification
indicating differences between UI elements

Visual design
Example: displaying 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 & value
~10 levels – size
~4 levels – orientation

Simone Garlandini & Sara Irina Fabrikant, “Evaluating the Effectiveness and
Efficiency of Visual Variables for Geographic Information Visualization”,
Spatial Information Theory, LNCS 5756, Springer, 2009
experiment
percentages of correct change detection, localization &
description of visual variables used to convey 2D maps

Visual design
Remark:
some users have trouble in recognizing
certain visual variables

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
visual variables and their properties:
orderable, associative, selective, comparable, cardinality
Carrie Demmans Epp & Susan Bull, “Uncertainty Representation in Visualizations
of Learning Analytics for Learners: Current Approaches and Opportunities”,
IEEE Transactions on Learning Technologies, 2015
www.computer.org/csdl/trans/lt/2015/03/07058341.html

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

www.interaction-design.org/encyclopedia/data_visualization_for_human_perception.html
also, read D. Todorovic, “Gestalt principles” (2008):
www.scholarpedia.org/article/Gestalt_principles

Several real life examples:
C. Bonner, “Using Gestalt Principles
for Natural Interactions” (2016)
robots.thoughtbot.com/gestalt-principles
L. Martins, “The impact of Cultural Context
on the Perception of Sound and Musical Language” (2013)
tinyurl.com/jdafsny
T. Werner et al., “Saliency-Guided Object Candidates
Based on Gestalt Principles” (2015)
www.researchgate.net/publication/279538230_Saliency-
Guided_Object_Candidates_Based_on_Gestalt_Principles

“Conclusion”
IA  HCI design patterns  visual design

next lecture:
from design patterns to flow state

HCI 2018 (4/10) Information Architecture. From Design Patterns to Visual Design

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à HCI 2018 (4/10) Information Architecture. From Design Patterns to Visual Design

Similaire à HCI 2018 (4/10) Information Architecture. From Design Patterns to Visual Design (13)

Plus de Sabin Buraga

Plus de Sabin Buraga (20)

Dernier

Dernier (20)

HCI 2018 (4/10) Information Architecture. From Design Patterns to Visual Design