Upload
sabin-buraga
View
245
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Several details regarding visual design, Information Architecture (IA), and HCI design patterns. Addition resources at http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
Citation preview
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Human-Computer Interactionfrom information architecture
to design patterns
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“I’ve been amazed at how often those outsidethe discipline of design assume that
what designers do is decoration.Good design is problem solving.”
Jeff Veen
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI designvisual design
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI designvisual design
visualization = graphical representation of data/concepts
Ware, 2004
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Main elements (Dan Saffer, 2006):
layoutgrid
visual flowtypography
color, shape, texture
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Main elements (Dan Saffer, 2006):
layout
where & how content and interaction controls are placed
http://alistapart.com/topic/layout-grids
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Main elements (Dan Saffer, 2006):
grid
gives a coherent structure of information
www.thegridsystem.org
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Main elements (Dan Saffer, 2006):
visual flow
refers to methods of understanding and/or interactingwith presented data
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Main elements (Dan Saffer, 2006):
typography
presents the textual content via fontsconforming to certain presentation rules
http://webtypography.net/toc/
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Main elements (Dan Saffer, 2006):
color, shape, texture
most important visual dimensionsused for a proper perception of information
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
case study
color semanticssyntax highlightingcolor-pick control
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Form versus function
for the majority of users,the look & feel is more important than functionality
remember UX?
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Common mistakes
lack of organization (structure)visual interference
complexityexcessive details
lack of adaptability
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Strategies
visual focusconsistencymodularityadaptability
Visual design
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Strategies
visual focusconsistencymodularityadaptability
responsive (Web) design
Visual design
next lecture
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
To properly present information,visual dimensions are used
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
To properly present information,visual dimensions are used
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Different perceptionsregarding a certain visual dimension
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Different perceptionsregarding a certain visual dimension
insignificant differences must be eliminated
simplicity
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Visual dimensions are distinguished viavisual variables (Jacques Bertin, 1989)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Visual dimensions are distinguished viavisual variables (Jacques Bertin, 1989)
do not require additional cognitive processing
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Visual dimensions are distinguished viavisual variables (Jacques Bertin, 1989)
communicationdata codification
indicating differences between UI elements
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
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),…
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Visual variables have different levels of perception
>100 levels – hue and value~10 levels – size
~4 levels – orientation
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Some visual variables could not be easily recognized
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all letters placed in the right
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all letters placed in the rightwe must perceive only the position
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all green letters
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all green letterswe are using hue as a visual variable
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all N letters
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all N letters (shape)interferences: multiple visual variables
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Perception could be associative
associative visual variables:position, hue, texture, shape, orientation
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Perception could be associative
non-associative visual variables:size, value
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Perception could be associative
non-associative visual variables:size, value
example:the color of small objects is difficult to be perceived
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Modularity (grouping) could be achieved by consideringthe Gelstalt principles of perception
using visual perception, the mind createsthe entire picture (Gelstalt) from existing fragments
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
www.interaction-design.org/encyclopedia/data_visualization_for_human_perception.html
various examples: http://tinyurl.com/y6ao7k
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Necessity
A certain structure and presentation mannerfor the information in order to be easily
perceived and consumed by users
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Solution
IA – Information Architecture
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Software applications are organized by using
lists of objectssequences of actions
lists of categories (topics) of interestlists of software tools/components
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Lists of objects
denoted by substantives
examples:operating system updates, e-mails,
shared pictures, locations of interest,…
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Lists of objects
denoted by substantives
ideally, the application could recommend interesting items
for each user
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Sequences of actions
specified by verbs
e.g., browse, buy, register, sell, subscribe,…
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Sequences of actions
specified by verbs
e.g., browse, buy, register, sell, subscribe,…
software could suggest certain actions to be selectedby the users, conforming to their profiles
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Substantive–verb versus verb–substantiveobject–action versus action–object
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Substantive–verb versus verb–substantiveobject–action versus action–object
it is recommended to usethe substantive-verb style of interaction
Raskin, 2000
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Substantive–verb versus verb–substantiveobject–action versus action–object
verb-substantive style could be useful for toolboxes
why?
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Lists of categories (topics) of interest
context: information-centric applications
examples:science, technologies, entertainment, etc.
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Lists of software tools/components
useful for task-oriented applications
e.g., calendar, text editor, resource manager,…
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Aspects:
nature and domain of the software application
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Aspects:
background knowledge of the target users
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Aspects:
context of interaction
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
How information could be organized?
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Linear presentation
usually, different sorting criteria are applied:alphabetical, spatial, temporal, significance,…
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Bidimensional presentation
2 criteria/dimensions of interest are considered
examples:geographical location + time
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Bidimensional presentation
a common use:grid-based visualization of data
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Hierarchical presentation
tree-like structures having one or more levels
used to show certain relations between things:parent–child, grouping, etc.
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Context-based presentation
spacetime
user profile
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Context-based presentation
spacetime
user profile
examples:maps, charts, timelines, recommended information,…
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Complex presentation
could use a combination of previous solutions
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
3D visualization of the DOM – Mozilla Firefoxcontributor: Victor Porof, Tilt project (2011—2012)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Traditionally, the presentation of data will employ
regions: windows, pages+
interaction elements: UI controls
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
organizing information
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Design patternsrecurring solutions that solve common design problems
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Design patternsrecurring solutions that solve common design problems
J. Tidwell, Designing Interfaces, O’Reilly, 2005
Ecaterina Moraru, Interaction Design Patterns, 2011http://profs.info.uaic.ro/~evalica/patterns/
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Two-panel selectorJenifer Tidwell, 2005
used to show selectable interactive elements
for each selected element,certain details or its content could be presented
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
h5ai – a beautified Apache index based on HTML5http://larsjung.de/h5ai/
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Two-panel selector
useful for presentation of lists:resourcescategories
actions…
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Two-panel selector
decreases the interaction effort: e.g., mouse manipulation
reduces the cognitive load
facilitates exploration
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Canvas + paletteJenifer Tidwell, 2005
offers a palette (toolbox) containing objects/actionsused in conjunction to a workplace (canvas)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
MacPaint (1984)versus
Photoshop (now)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Canvas + palette
used by visual editing applications to create objectsand to arrange them within a virtual space
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Canvas + palette
the palette facilitates visual recognition via icons(sometimes, grouped by categories)
for interaction,selections or drag & drop could be adopted
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
One-window drilldownJenifer Tidwell, 2005
presenting information by using a single window only
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
One-window drilldown
useful for depicting the content on reduced-size screens:mobile device, TV, appliance, etc.
RT @IATV "The Science Behind a Single Page Website": http://goo.gl/aO0j (sixrevisions.com)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Alternative viewsJenifer Tidwell, 2005
user has the possibility to choose alternative views
these presentations are structurally different,not just visually
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Alternative views
accommodate certain user preferences or goalsregarding a given context of interaction
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
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”
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Wizard
must provide:
an accurate (logical) sequence of tasks+
a suitable structure of presented information
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Extras on demandJenifer Tidwell, 2005
presenting main information only, “hiding” the details
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Extras on demand
make sure the entrance to and exit fromthe “extras” window/page are obvious
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Multi-level helpJenifer Tidwell, 2005
using multiple help methods,directly located in the user interface
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
design patterns: exploration
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Locating objects in the user proximity
signposts
window/page titlelogo
selection signage…
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Help users to find the way towards their goal
wayfinding
good signageenvironmental clues
maps
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
What signposts are used? There are wayfinding clues?
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Important aspect
minimizing distanceincreasing interface ergonomics
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Important aspect
minimizing distanceincreasing interface ergonomics
3-Click-Rule: users stop using the site if they aren’t ableto find the information or access the site features
within 3 mouse clicks
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Using UML diagrams – Tidwell (2005)
4 pages + 7 “jumps” (clicks)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
GOMS(Goals, Operators, Methods, and Selection rules)
Card et al., 1983; John & Kieras, 1996
to study the sequence of actions that must be performedby users in order to accomplish their goal,
conforming to their abilities
http://web.eecs.umich.edu/~kieras/goms.html
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
GOMS
K = 0.2 sec – Keying: time it takes to tap a key on the keyboardP = 1.1 sec – Pointing: time it takes to point to a position on displayH = 0.4 sec – Homing: time it takes to move hand from
the keyboard to the interface or vice-versaM = 1.35 sec – Mentally preparing: time to prepare for the next stepR – Responding: wait for a computer to respond to input
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
GOMS
K = 0.2 sec – Keying: time it takes to tap a key on the keyboardP = 1.1 sec – Pointing: time it takes to point to a position on displayH = 0.4 sec – Homing: time it takes to move hand from
the keyboard to the interface or vice-versaM = 1.35 sec – Mentally preparing: time to prepare for the next stepR – Responding: wait for a computer to respond to input
the values could vary depending on the user abilities
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
GOMS
case study (Raskin, 2000):
evaluating an interfacefor converting Celsius Fahrenheit temperature
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
~5.4 sec.
~20.8 sec.
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
GOMS
extensions:NGOMSL – Natural GOMS Language
CMP-GOMS – Cognitive-Motor-Perceptual GOMS
http://cogtool.hcii.cs.cmu.edu/use-today/examples
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Global navigationJenifer Tidwell, 2005
assures the existence of navigational elements –consistently positioned – to help users to access
the most important sections of the application/site
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Hub and spokeJenifer Tidwell, 2005
isolating application sections into independentmini-applications/mini-sites,
that can be directly accessed via main window/page
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
hub & spoke: used mainly in mobile computing context
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Hub and spoke
like global navigation pattern, it could be usedto structure typical “paths” of the user thru the interface
also, assure scalability
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
PyramidJenifer Tidwell, 2005
a solution for hierarchical + sequential exploration
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Pyramid
could be used in conjunction to the one-window drilldown
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Modal panelJenifer Tidwell, 2005
showing only one page, with no other navigation options,until the user solves the immediate problem
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Modal panel
interrupts the current task – it could break the state flow
anti-pattern
apply this design pattern sparingly
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
error messages
discussion
Brazil (1985) – director: Terry Gilliamwww.imdb.com/title/tt0088846/
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
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
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
error messages
error messages must not confuse users
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
error messages
the tone of an error message must inspire confidence
an unknown error occurred
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
error messages
avoid patronizing and arrogant attitudes
Cannot delete Document: Access is denied!
versusThis file is protected and cannot be
deleted without specific permission.
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
error messages
abort end, cancel, stopavailable readyboot start, run
errorexecute completehit press, depress
invalid not correct/good/validkill end, cancel
output report, list, displayterminate end, exit
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
error messages
don’t make user to feel guilty(users are more important than code)
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
error message positive feedback message
discussion
for creative examples, visit http://fab404.com/
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
BreadcrumbsJenifer Tidwell, 2005
give users an alternative method of navigation
types:path
locationattribute
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Breadcrumbs
revealing useful clues about the site/application’s information architecture
this pattern does not provide informationregarding the next possible – if any – step
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Sequence mapJenifer Tidwell, 2005
indicates a sequence of actions+
the current step
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Sequence map
it can be used in conjunction to wizard
if the navigational topology is large & hierarchical,it could be substituted by breadcrumbs
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Color-coded sectionsJenifer Tidwell, 2005
facilitates the recognition of a certain placewithin a site/application
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Color-coded sections
alternatively, other visual variables – e.g., shapes, textures,… – could be used to convey
the differences/meanings between various UI regions
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Escape hatchJenifer Tidwell, 2005
provides means for “escaping”from a place having limited navigational options
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Escape hatch
helps people feel like they can safely explorean application
when navigation assumes the execution of an action,an alternative is the undo design pattern
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“Conclusion”
visual design, IA, HCI design patterns
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
next lecture:from design patterns to flow