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
HCI 2014 (4 of 10): From Information Architecture to Design Patterns
1. 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
2. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“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
3. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI designvisual design
4. 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
5. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Main elements (Dan Saffer, 2006):
layout
grid
visual flow
typography
color, shape, texture
6. 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
7. 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
8. 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 interacting
with presented data
9. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
discussion
10. 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 fonts
conforming to certain presentation rules
http://webtypography.net/toc/
11. 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 dimensions
used for a proper perception of information
12. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
case study
color semantics
syntax highlighting
color-pick control
13. 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?
14. 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
complexity
excessive details
lack of adaptability
16. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Strategies
visual focus
consistency
modularity
adaptability
responsive (Web) design
Visual design
next lecture
17. 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
18. 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
19. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Different perceptions
regarding a certain visual dimension
20. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Different perceptions
regarding a certain visual dimension
insignificant differences must be eliminated
simplicity
21. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Visual dimensions are distinguished via
visual variables (Jacques Bertin, 1989)
22. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Visual dimensions are distinguished via
visual variables (Jacques Bertin, 1989)
do not require additional cognitive processing
23. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Visual dimensions are distinguished via
visual variables (Jacques Bertin, 1989)
communication
data codification
indicating differences between UI elements
24. 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),…
25. 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
26. 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
27. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all letters placed in the right
28. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all letters placed in the right
we must perceive only the position
29. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all green letters
30. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all green letters
we are using hue as a visual variable
31. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all N letters
32. 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
33. 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
34. 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
35. 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
36. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
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
37. 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
38. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
39. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Necessity
A certain structure and presentation manner
for the information in order to be easily
perceived and consumed by users
40. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Solution
IA – Information Architecture
41. 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 objects
sequences of actions
lists of categories (topics) of interest
lists of software tools/components
42. 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,…
43. 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
44. 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,…
45. 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 selected
by the users, conforming to their profiles
46. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
47. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Substantive–verb versus verb–substantive
object–action versus action–object
48. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Substantive–verb versus verb–substantive
object–action versus action–object
it is recommended to use
the substantive-verb style of interaction
Raskin, 2000
49. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Substantive–verb versus verb–substantive
object–action versus action–object
verb-substantive style could be useful for toolboxes
why?
50. 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.
51. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
52. 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,…
53. 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
54. 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
55. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Aspects:
context of interaction
56. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
How information could be organized?
57. 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,…
58. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
59. 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
60. 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
61. 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.
62. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
63. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Context-based presentation
space
time
user profile
64. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Context-based presentation
space
time
user profile
examples:
maps, charts, timelines, recommended information,…
65. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
66. 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
67. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
3D visualization of the DOM – Mozilla Firefox
contributor: Victor Porof, Tilt project (2011—2012)
68. 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
69. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
organizing information
70. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Design patterns
recurring solutions that solve common design problems
71. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
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/
72. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Two-panel selector
Jenifer Tidwell, 2005
used to show selectable interactive elements
for each selected element,
certain details or its content could be presented
73. 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 HTML5
http://larsjung.de/h5ai/
74. 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:
resources
categories
actions
…
75. 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
76. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
77. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Canvas + palette
Jenifer Tidwell, 2005
offers a palette (toolbox) containing objects/actions
used in conjunction to a workplace (canvas)
78. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
MacPaint (1984)
versus
Photoshop (now)
79. 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 objects
and to arrange them within a virtual space
80. 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
81. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
One-window drilldown
Jenifer Tidwell, 2005
presenting information by using a single window only
82. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
83. 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)
84. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Alternative views
Jenifer Tidwell, 2005
user has the possibility to choose alternative views
these presentations are structurally different,
not just visually
85. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
86. 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 goals
regarding a given context of interaction
87. 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”
88. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
89. 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
90. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Extras on demand
Jenifer Tidwell, 2005
presenting main information only, “hiding” the details
91. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
92. 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 from
the “extras” window/page are obvious
93. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Multi-level help
Jenifer Tidwell, 2005
using multiple help methods,
directly located in the user interface
94. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
95. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
design patterns: exploration
96. 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 title
logo
selection signage
…
97. 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 signage
environmental clues
maps
98. 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?
99. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Important aspect
minimizing distanceincreasing interface ergonomics
100. 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 able
to find the information or access the site features
within 3 mouse clicks
101. 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)
102. 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 performed
by users in order to accomplish their goal,
conforming to their abilities
http://web.eecs.umich.edu/~kieras/goms.html
103. 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
104. 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 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
105. 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 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
106. 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 interface
for converting Celsius Fahrenheit temperature
107. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
~5.4 sec.
~20.8
sec.
108. 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
109. 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
110. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Global navigation
Jenifer Tidwell, 2005
assures the existence of navigational elements –
consistently positioned – to help users to access
the most important sections of the application/site
111. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Hub and spoke
Jenifer Tidwell, 2005
isolating application sections into independent
mini-applications/mini-sites,
that can be directly accessed via main window/page
112. 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
113. 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 used
to structure typical “paths” of the user thru the interface
also, assure scalability
114. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Pyramid
Jenifer Tidwell, 2005
a solution for hierarchical + sequential exploration
115. 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
116. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Modal panel
Jenifer Tidwell, 2005
showing only one page, with no other navigation options,
until the user solves the immediate problem
117. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
118. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
119. 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
120. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
error messages
discussion
Brazil (1985) – director: Terry Gilliam
www.imdb.com/title/tt0088846/
121. 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
122. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
123. 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
124. 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
125. 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!
versus
This file is protected and cannot be
deleted without specific permission.
discussion
126. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
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
127. 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
128. 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/
129. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Breadcrumbs
Jenifer Tidwell, 2005
give users an alternative method of navigation
types:
path
location
attribute
130. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
131. 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 information
regarding the next possible – if any – step
132. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Sequence map
Jenifer Tidwell, 2005
indicates a sequence of actions
+
the current step
133. 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
134. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Color-coded sections
Jenifer Tidwell, 2005
facilitates the recognition of a certain place
within a site/application
135. 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
136. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Escape hatch
Jenifer Tidwell, 2005
provides means for “escaping”
from a place having limited navigational options
137. 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 explore
an application
when navigation assumes the execution of an action,
an alternative is the undo design pattern
138. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
139. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“Conclusion”
visual design, IA, HCI design patterns
140. Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
next lecture:
from design patterns to flow