HCI 2014 (4 of 10): From Information Architecture to Design Patterns
-
Upload
sabin-buraga -
Category
Design
-
view
245 -
download
0
description
Transcript of HCI 2014 (4 of 10): From Information Architecture to Design Patterns
![Page 1: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/1.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Human-Computer Interactionfrom information architecture
to design patterns
![Page 2: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/2.jpg)
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
![Page 3: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/3.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI designvisual design
![Page 4: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/4.jpg)
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
![Page 5: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/5.jpg)
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
![Page 6: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/6.jpg)
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
![Page 7: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/7.jpg)
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
![Page 8: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/8.jpg)
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
![Page 9: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/9.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
discussion
![Page 10: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/10.jpg)
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/
![Page 11: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/11.jpg)
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
![Page 12: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/12.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
case study
color semanticssyntax highlightingcolor-pick control
![Page 13: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/13.jpg)
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?
![Page 14: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/14.jpg)
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
![Page 15: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/15.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Strategies
visual focusconsistencymodularityadaptability
Visual design
![Page 16: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/16.jpg)
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
![Page 17: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/17.jpg)
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
![Page 18: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/18.jpg)
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
![Page 19: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/19.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Visual design
Different perceptionsregarding a certain visual dimension
![Page 20: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/20.jpg)
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
![Page 21: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/21.jpg)
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)
![Page 22: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/22.jpg)
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
![Page 23: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/23.jpg)
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
![Page 24: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/24.jpg)
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),…
![Page 25: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/25.jpg)
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
![Page 26: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/26.jpg)
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
![Page 27: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/27.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all letters placed in the right
![Page 28: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/28.jpg)
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
![Page 29: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/29.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all green letters
![Page 30: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/30.jpg)
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
![Page 31: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/31.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
detect all N letters
![Page 32: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/32.jpg)
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
![Page 33: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/33.jpg)
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
![Page 34: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/34.jpg)
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
![Page 35: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/35.jpg)
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
![Page 36: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/36.jpg)
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
![Page 37: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/37.jpg)
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
![Page 38: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/38.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
![Page 39: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/39.jpg)
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
![Page 40: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/40.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Solution
IA – Information Architecture
![Page 41: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/41.jpg)
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
![Page 42: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/42.jpg)
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,…
![Page 43: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/43.jpg)
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
![Page 44: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/44.jpg)
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,…
![Page 45: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/45.jpg)
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
![Page 46: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/46.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
![Page 47: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/47.jpg)
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
![Page 48: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/48.jpg)
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
![Page 49: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/49.jpg)
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?
![Page 50: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/50.jpg)
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.
![Page 51: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/51.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
![Page 52: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/52.jpg)
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,…
![Page 53: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/53.jpg)
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
![Page 54: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/54.jpg)
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
![Page 55: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/55.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Aspects:
context of interaction
![Page 56: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/56.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
How information could be organized?
![Page 57: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/57.jpg)
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,…
![Page 58: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/58.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
![Page 59: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/59.jpg)
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
![Page 60: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/60.jpg)
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
![Page 61: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/61.jpg)
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.
![Page 62: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/62.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
![Page 63: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/63.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Context-based presentation
spacetime
user profile
![Page 64: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/64.jpg)
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,…
![Page 65: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/65.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
![Page 66: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/66.jpg)
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
![Page 67: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/67.jpg)
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)
![Page 68: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/68.jpg)
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
![Page 69: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/69.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
organizing information
![Page 70: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/70.jpg)
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
![Page 71: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/71.jpg)
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/
![Page 72: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/72.jpg)
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
![Page 73: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/73.jpg)
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/
![Page 74: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/74.jpg)
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…
![Page 75: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/75.jpg)
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
![Page 76: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/76.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
![Page 77: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/77.jpg)
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)
![Page 78: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/78.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
MacPaint (1984)versus
Photoshop (now)
![Page 79: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/79.jpg)
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
![Page 80: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/80.jpg)
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
![Page 81: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/81.jpg)
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
![Page 82: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/82.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
![Page 83: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/83.jpg)
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)
![Page 84: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/84.jpg)
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
![Page 85: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/85.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
![Page 86: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/86.jpg)
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
![Page 87: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/87.jpg)
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”
![Page 88: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/88.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
![Page 89: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/89.jpg)
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
![Page 90: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/90.jpg)
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
![Page 91: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/91.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
![Page 92: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/92.jpg)
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
![Page 93: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/93.jpg)
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
![Page 94: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/94.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
![Page 95: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/95.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
design patterns: exploration
![Page 96: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/96.jpg)
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…
![Page 97: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/97.jpg)
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
![Page 98: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/98.jpg)
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?
![Page 99: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/99.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Information Architecture
Important aspect
minimizing distanceincreasing interface ergonomics
![Page 100: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/100.jpg)
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
![Page 101: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/101.jpg)
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)
![Page 102: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/102.jpg)
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
![Page 103: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/103.jpg)
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
![Page 104: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/104.jpg)
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
![Page 105: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/105.jpg)
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
![Page 106: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/106.jpg)
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
![Page 107: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/107.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
~5.4 sec.
~20.8 sec.
![Page 108: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/108.jpg)
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
![Page 109: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/109.jpg)
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
![Page 110: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/110.jpg)
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
![Page 111: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/111.jpg)
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
![Page 112: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/112.jpg)
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
![Page 113: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/113.jpg)
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
![Page 114: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/114.jpg)
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
![Page 115: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/115.jpg)
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
![Page 116: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/116.jpg)
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
![Page 117: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/117.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
![Page 118: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/118.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
![Page 119: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/119.jpg)
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
![Page 120: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/120.jpg)
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/
![Page 121: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/121.jpg)
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
![Page 122: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/122.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
![Page 123: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/123.jpg)
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
![Page 124: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/124.jpg)
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
![Page 125: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/125.jpg)
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
![Page 126: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/126.jpg)
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
![Page 127: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/127.jpg)
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
![Page 128: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/128.jpg)
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/
![Page 129: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/129.jpg)
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
![Page 130: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/130.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
![Page 131: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/131.jpg)
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
![Page 132: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/132.jpg)
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
![Page 133: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/133.jpg)
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
![Page 134: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/134.jpg)
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
![Page 135: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/135.jpg)
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
![Page 136: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/136.jpg)
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
![Page 137: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/137.jpg)
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
![Page 138: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/138.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
![Page 139: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/139.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“Conclusion”
visual design, IA, HCI design patterns
![Page 140: HCI 2014 (4 of 10): From Information Architecture to Design Patterns](https://reader033.fdocuments.in/reader033/viewer/2022052823/5552c0b4b4c90581158b473d/html5/thumbnails/140.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
next lecture:from design patterns to flow