Iterative Design Process

04:547:230(01)

ITI 230 - HCI

(Index: 10636)

1. Identify user needs and establish requirements 2. Develop alternative designs 3. Build interactive prototypes each time more refined

Lecture #11

Information Design

to evaluate them to communicate them to other people (managers, users) with Experts with Users involving no people

4. Evaluate the prototypes

1. 2.

Dr. Jacek Gwizdka

http://www.scils.rutgers.edu/~jacekg/teaching/

3.

5. Repeat the process (go to 2)

ITI 230 HCI Jacek Gwizdka

Week 3

Understanding users Human Cognition

Iterative Design Process

Todays Overview
Information Design What is it?

Requirements
Week 4

User Needs & Requirements

Design
Week 5

Week 11

Conceptual Design
Week 8

Info Design

Week 12

Evaluation w/o people

Color Design
Week 12

Information Design to support : information perception

Bertins visual attributes Gestalt Principles

Info Architecture

Week 7

Evaluation w. users

information interpretation making sense of information in the current context

Week 5

Evaluate

Week 6&7

Evaluation w. experts

Lo-Fi & Hi-Fi Prototyping

Prototype / Implement
Week 14 & 15

Future Trends End!

ITI 230 HCI Jacek Gwizdka 3 ITI 230 HCI Jacek Gwizdka 4

Information Design
Definition: During Information Design objects and

Normans Action Cycle Norman

Human action has two primary aspects Execution: doing something Evaluation: comparison of what happened to what was desired

actions possible in system are created and arranged to facilitate perception and understanding

(Visual) Information Design includes: design of

screens, web pages, menus, dialog boxes, icons, etc.

ITI 230 HCI Jacek Gwizdka

ITI 230 HCI Jacek Gwizdka

Normans Action Cycle (review) Norman

Normans Action Cycle Norman

Evaluation has three stages:
1. Perception 2. Interpretation 3. Making sense of information (evaluation of interpretations)

Goals of Information Design, support:

1. perception, 2. interpretation, 3. sense-making (understanding)

Norman, 1986

ITI 230 HCI Jacek Gwizdka

ITI 230 HCI Jacek Gwizdka

1. Perceiving Information
Pixels, colors or tones are designers palette These elementary graphical elements are created and

Perception - example
Guiding users to see structure in information display

arranged to convey higher-level structures

Goal: to guide users to see structure in information

display

ITI 230 HCI Jacek Gwizdka

(Tufte 1983, 49: Source: Ho, Powell, and liley. Journal of Physical and Chemical reference Data 3, Supplement, 1, 1974, American Institute of Physics and NIST)
9 ITI 230 HCI Jacek Gwizdka 10

Visual Design to Aid Perception

Elements of visual alphabet Visual variables & perception stylesBertin Organization and visual structure Principles of perceptual organizationGestalt principles

Bertins Taxonomy Bertin

Bertins taxonomy includes (Bertin 1981; 1983) seven visual (retinal) variables four perception styles Visual variables : shape, orientation, colour,

texture, value, size & position

All are perceived quickly and effortlessly across visual field

Perception styles : associative, selective, ordered,

& quantitative

ITI 230 HCI Jacek Gwizdka

11

ITI 230 HCI Jacek Gwizdka

12

Bertins Visual Variables Bertin

Illustration of visual variables
(position not shown)

Bertins Perception Styles Bertin

Associative
element can be immediately isolated as belonging to the same category visual variable is associative if it does not affect visibility of other

dimensions of visual objects (it can be ignored with no effort)

e.g. color is visible regardless of objects orientation

Selective
element can be grouped into a category differenced by this variable variable is selective if grouping is immediate and effortless

Ordered
allows each element to be grouped into an order of scale variable is ordered if ranking can be read without referring to key

Quantitative
each visual element can be compared to be greater or smaller than

another element

variable is quantitative if relative magnitude can be judged without

ITI 230 HCI Jacek Gwizdka 13

referring to key or index

ITI 230 HCI Jacek Gwizdka

14

Visual Variables vs. Perception Styles

Visual variables vary in their aptness for the four

Visual Variables vs. Perception Styles - Examples

Only shape does not support selective perception
23 1 2 6 1 6 8 0 3 34 4 9 6 2 0 6 7 58 70

perception styles

23 1 2 6 1 6 3 3 4 4 8 0 9 2 0 6 76 58 70

X X X

X X X X X

Only position and size are quantitative

1x 2x

X X

Colour is neither ordered not quantitative

ITI 230 HCI Jacek Gwizdka

15

ITI 230 HCI Jacek Gwizdka

16

Cognition

Perception

Offloading Cognition example

WebTaskMail email interface (Gwizdka 2004)

A picture is worth a thousand words Make information perceptually explicit information processing load is shifted from the users cognitive system to the perceptual system (Larkin & Simon, 1987) graphical representation can be more computationally efficient than textual representation

Graphical representation requires less effort

Information equivalence Computational (mental effort) equivalence
(Herb Simon)

UI-Visual

UI-Text

ITI 230 HCI Jacek Gwizdka

17

ITI 230 HCI Jacek Gwizdka

18

Task vs. Visual Representation

Date information was found faster in UI-Visual
time sec
00:50

Which representation is best?

System performance: processor and file system

2nd session: Effect of UI * T ask on time

00:40

00:30

00:20

00:10

UI Text UI Visual
00:00

Header

Date

M ixed

T ask

What is the precise value of sys performance? How does the current performance compare to its peak? How has performance changed over time?

Use graphical representation

Information equivalence

it requires less effort

Computational (mental effort) equivalence

(Herb Simon)
ITI 230 HCI Jacek Gwizdka 19

It depends on the user task!

Based on material prepared by Ravin Balakrishnan for similar courses at UofT. Used with the permission of the original author.

ITI 230 HCI Jacek Gwizdka

20

Gestalt Principles
German psychologists in 1920s introduced the concept of

Gestalt Principles
Gestalt Principle
Proximity: elements near each other tend to be seen as a group Similarity: elements that share visual characteristics (shape, color, etc.) tend to be seen as a group Closure: there is a tendency to organize elements into complete, closed figures Area: there is a tendency to group elements in a way that creates the smallest possible figure Symmetry: there is a tendency to see symmetric elements as part of the same figures Continuity: there is a tendency to group elements into continuous contours or repeating patterns

User Interface Examples

Words on a menu bar, columns in a tabular display, text in a paragraph Toolbar icons (proximity operates here as well), data visualization Overlapping windows, menus, dialog boxes and other user interface controls Icons on a workstation screen, pop-up menu on top of a document display Window manipulation controls (e.g., scroll bar, selection handles) A page of paragraphs, a grid of spreadsheet cells, a left-justified list of selections or parameters
22

figure and ground in perception Gestalt principles of perceptual organization describe configural properties of visual information
how individual bits of information are grouped together what elements will be seen as a coherent figure, and what elements will appear as background

ITI 230 HCI Jacek Gwizdka

21

Rosson & Carroll, 2002

ITI 230 HCI Jacek Gwizdka

Gestalt Principles Examples 1

Proximity

Gestalt Principles Examples 2

Closure

Area (smallness)

Similarity Symmetry

ITI 230 HCI Jacek Gwizdka

23

ITI 230 HCI Jacek Gwizdka

24

Gestalt Principles Examples 3

Continuity

Principles @ Work UI

ITI 230 HCI Jacek Gwizdka

25

ITI 230 HCI Dialog box used to set and preview page borders in Microsoft Word Jacek Gwizdka Rosson & Carroll, 2002) (example from

26

Principles @ Work UI
User should perceive immediate sense of organization and see

Principles @ Work UI
Proximity and Similarity

individual control elements

(Rosson & Carroll, 2002)

TRADEOFF: Displaying all active task entities enhances understanding and feelings of control, BUT each display element adds to the complexity of the user interface design.

SOLUTION: Decompose and link related information For example: Use tabs, Link dialogs (one dialog opens another)
ITI 230 HCI Jacek Gwizdka 27 ITI 230 HCI Jacek Gwizdka 28

Principles @ Work UI
Use contrasting visual features to create different groups

Principles @ Work UI
(Area) White Space

TRADEOFF: Perceptual distinctions highlight and group user interface elements, BUT the more distinctions a display uses, the less noticeable and useful any individual cue will be. SOLUTION: Limit the number of perceptual distinctions used at any one time. (also related to the previous solutiondecompose)
ITI 230 HCI Jacek Gwizdka 29

(White space)
ITI 230 HCI Jacek Gwizdka 30

Principles @ Work UI
Borders and bounding boxes provide further structural cues

Principles @ Work UI
Redundant coding - use of multiple perceptual cues Redundancy increases the speed and accuracy of perceptual

processing

bad example from Jeff Johnson 2000, GUI Bloopers

ITI 230 HCI Jacek Gwizdka 31 ITI 230 HCI Jacek Gwizdka 32

Principles @ Work UI
Use grid-based design

Fonts and Formatting

Dont use too many fonts, in terms of typeface and in size.

The general practice: limit to 3 different type settings. Variable width fonts such as Times New Roman are easier to read than fixed width fonts such as courier. STUDIES SHOW THAT TEXT IN ALL CAPS SLOWS READING BY 12% SO YOU SHOULD MIX CASE.
The same goes for justified text, so that is something of which to be aware. Also short justified lines are to be avoided, but that should be common sense.
Aaron Marcus and Associates for Kaiser Permanente

Benefits:
all elements are aligned and symmetrically balanced (vertical axis) regular and predictable information structure across all screens (pages)
ITI 230 HCI Jacek Gwizdka 33

Reading on-screen: sans-serif fonts are easier to read (e.g. Verdana, Tahoma course slides, Arial) Specially design serif fonts are good too (e.g. Georgia course website)
Based on material prepared by Elaine Toms for similar courses at UofT. Used with the permission of the original author. ITI 230 HCI Jacek Gwizdka 34

2. Interpreting Information
Perception

Facilitating Interpretation
Using familiar words and visual language Refining visual language Abstract images vs. realistic images Employing affordances

users see lines, rectangles, text strings

Perceiving higher-level structure in information display (groups

of objects) enables interpretation Interpretation associate meaning with display elements

ITI 230 HCI Jacek Gwizdka

35

ITI 230 HCI Jacek Gwizdka

36

Familiarity
Familiar words and visual language aids interpretation
familiar terms are usually less distinctive and precise e.g. enter submit this data or come into this space

Abstract vs. Realistic Images

Realistic images can be recognized accurately, but recognition

is more complex (and interpretation may be slower) recognition process is simpler and faster

Recognizing abstract images requires (some) learning, but

TRADEOFF: A familiar vocabulary eases interpretation, BUT familiar terms are usually less distinctive and precise, and what is familiar for one person may not be familiar for another. SOLUTION: Carefully select words and imagery. Be aware of individual and cultural differences.

TRADEOFF: People's recognition memory for realistic images is accurate and long-lasting, BUT realistic images are often complex, and suggest instances rather than concepts.

SOLUTION: (User task and technology dependent.) In most cases, abstract images (e.g. icons) will improve visual design. Interpretation of abstract images is enhanced when a set of icons is refined together.
ITI 230 HCI Jacek Gwizdka 37 ITI 230 HCI Jacek Gwizdka 38

Recognizing Affordances
Affordances must be visible to aid interpretation More competition for screen space and more complexity
SOLUTION: Use dynamic affordances. TRADEOFF: Dynamic hiding of user interface controls that are not in use reduces complexity and simplifies the display, BUT also conceals the controls' affordances from users and requires that users know that controls are available and how to activate them.

3. Making Sense of Information

Relating interpreted information to current task If users cannot make sense of info they may try

different interpretations

ITI 230 HCI Jacek Gwizdka

39

ITI 230 HCI Jacek Gwizdka

40

Making Sense - Example

Information Integration
Making sense of information requires information

integration

User connects new information to: previously displayed information

e.g. sequence of screens or web pages

current goals and task

Minard's visualization of Napoleon's Russian campaign

Requirements to make sense of Minards visualization

knowledge of maps in general (Eastern Europe and rivers in particular) knowledge of the Russian campaign (e.g., that many men were lost) only then appropriate understanding is possible: bands = travel paths plotted on abstracted map size of paths = size of marching army
ITI 230 HCI Jacek Gwizdka

users domain expertise users knowledge about world

41

ITI 230 HCI Jacek Gwizdka

42

Facilitating Making Sense

Consistent use of terminology and symbols

Consistency
e.g. use Move backward with Move forward, not Reverse

Consistency Visual metaphors Information models Dynamic displays

Consistent use of visual vocabulary

shapes, fonts, colors, character of icons

Consistent layout
e.g. OK/Cancel buttons are typically in bottom-right corner but some dialog boxes use other buttons TRADEOFF: Consistent use of shapes, sizes, colors, and position sets up expectations that help users make sense of information, BUT in some cases consistency may actually impair user performance or satisfaction. SOLUTION: Dont be afraid to break consistency when needed

Scope of consistency
internal (within this program) external consistency (other applications)
ITI 230 HCI Jacek Gwizdka 43 ITI 230 HCI Jacek Gwizdka 44

Metaphors
Consistency with external world Metaphors should balance

Information Model
Set of concepts, relationships, representations developed to

help make sense of large data sets

consistency and familiarity with inconsistency and innovation Technology should enhance physical world metaphors should not be taken too literally

Common Info Model - Hierarchy

used to organize navigation through complex info spaces common use of hierarchies: library classification, menus, web sites appropriate decomposition (categorization) and use of familiar concepts

at each level of hierarchy are critical

examples of decomposition: Task-centric, Chronological, Spatial, Organizational, Alphabetical, Frequency of use TRADEOFF: Visual metaphors leverage real-world knowledge of objects, BUT metaphors that are very literal may introduce information that is irrelevant or misleading to a task. SOLUTION: Break metaphors when necessary
ITI 230 HCI Jacek Gwizdka 45

breadth & depth: number of choices at each level and number of levels

information architecture

Information visualization
visual features are used to code data attributes
ITI 230 HCI Jacek Gwizdka 46

Dynamic Displays
Computer displays can dynamically change content Restructuring, resizing, dynamic filtering, or Dynamic displays allow for exploration

Dynamic Displays Fish-eye Views Fish Fish-eye view (Furnas 1986)

overview with local detail (dynamic)

animating can help to make sense of information

Inxight inc. table lens

ITI 230 HCI Jacek Gwizdka 47 ITI 230 HCI Jacek Gwizdka

Bederson, B.B. (May 2000) University of Maryland

48

Dynamic Displays Hierarchies

Cone Trees

Reducing Amount Of Info

Infinite zoom Zoomable UI (ZUI) Semantic filtering
(not shown)

and

Hyperbolic Lens

Robertson / Mackinlay / Card

Cone Trees: Animated 3D Visualizations of Hierarchical Information. Proc ACM CHI'91

ITI 230 HCI Jacek Gwizdka

A hyperbolic browser (Inxight Tree Studio) used to visualize Web pages from Barnes & Noble

49

Journal of Visual Languages and Computing 7, 1996

Pad++: A Zoomable Graphical Sketchpad for Exploring Alternate Interface Physics Bederson et al
ITI 230 HCI Jacek Gwizdka 50

Summary
Information Design is about creating and arranging

Next Week
Color in Design

display objects to facilitate perception, interpretation and understanding Norman's action cycle is a useful framework for analysis of information design Bertins taxonomy and Gestalt principles of perceptual organization offer useful guidance in selecting and arranging elements of visual display The overall information model, how it maps to users' mental model of the task, and its consistency determine how well users will be able to integrate and make sense of their actions as they progress through a task
ITI 230 HCI Jacek Gwizdka 51

ITI 230 HCI Jacek Gwizdka

52