image interpretation theory.pdf

7/29/2019 Image interpretation theory.pdf

1/9

ITI 230ITI 230 -- HCIHCI04:547:230(01) (Index: 10636)

Lecture #11Lecture #11

Information DesignInformation Design

Dr. Jacek Gwizdkahttp://www.scils.rutgers.edu/~jacekg/teaching/

ITI 230 HCI Jacek Gwizdka 2

Iterative Design ProcessIterative Design Process

1. Identify user needs and establish requirements2. Develop alternative designs3. Build interactive prototypes each time more refined

to evaluate them to communicate them to other people (managers, users)

4. Evaluate the prototypes1. with Experts2. with Users3. involving no people

5. Repeat the process (go to 2)


Requirements

Future TrendsEnd!

Evaluation w.experts

Lo-Fi & Hi-FiPrototyping

ConceptualDesign

Week 5

Week 7

InfoDesign

Week 11Week 4

Week 8

User Needs & Requirements

Evaluationw. users

ColorDesign

Week 12

Info Architecture

Week 12

Week 3

Understanding users Human Cognition

Week 14 & 15

Evaluationw/o people

Design

EvaluatePrototype /Implement

Iterative Design ProcessIterative Design Process

Week 5

Week 6&7


TodayToday ss OverviewOverview

Information Design What is it? Information Design to support :

information perceptionBertins visual attributesGestalt Principles

information interpretation making sense of information in the current context


Information DesignInformation Design

Definition: During Information Design objects andactions possible in system are created and arrangedto facilitate perception and understanding

(Visual) Information Design includes: design of screens, web pages, menus, dialog boxes, icons, etc.


NormanNorman s Action Cycles Action Cycle

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

desired


2/9


NormanNorman s Action Cycles Action Cycle (review)(review)

Norman, 1986ITI 230 HCI Jacek Gwizdka 8

NormanNorman s Action Cycles Action Cycle

Evaluation has three stages:1. Perception

2. Interpretation3. Making sense of information (evaluation of interpretations)

Goals of Information Design, support:1. perception,2. interpretation,3. sense-making (understanding)


1.1. Perceiving InformationPerceiving Information

Pixels, colors or tones are designers palette

These elementary graphical elements are created andarranged to convey higher-level structures

Goal: to guide users to see structure in informationdisplay


PerceptionPerception -- exampleexample

Guiding users to see structure in information display

(Tufte1983, 49: Source: Ho, Powell, and liley. Journal of Physical and Chemicalreference Data 3 , Supplement, 1, 1974, American Institute of Physics and NIST )


Visual Design to Aid Perception Visual Design to Aid Perception

Elements of visual alphabet Visual variables & perception stylesBertin

Organization and visual structure Principles of perceptual organizationGestalt principles


BertinBertin s Taxonomys Taxonomy

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 f ield

Perception styles : associative, selective, ordered,& quantitative


3/9


BertinBertin s Visual Variabless Visual Variables

Illustration of

visual variables(position not shown)


BertinBertin s Perception Styless Perception Styles 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

referring to key or index


Visual Variables vs. Perception Styles Visual Variables vs. Perception Styles Visual variables vary in their aptness for the four

perception styles

X

X X

X X

X

XX

X

XX


Visual Variables vs. Perception Styles Visual Variables vs. Perception Styles-- ExamplesExamples

Only shape does not support selective perception

Only position and size are quantitative

Colour is neither ordered not quantitative

1x2x

31

2

3 445

6

6 6

68

987 7

12

0

02

0

331

2

3 44

5

6

66

68

987 7

12

0

02

0

3


CognitionCognition PerceptionPerception

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 computationallyefficient than textual representation


Offloading Cognition exampleOffloading Cognition exampleWebTaskMail email interface (Gwizdka 2004)

Graphical representation requires less effort Information equivalence Computational (mental effort) equivalence (Herb Simon)

UI- Visual UI- Text


4/9


Task vs. Visual RepresentationTask vs. Visual Representation Date information was found faster in UI-Visual

Use graphical representation it requires less effort Information equivalence Computational (mental effort) equivalence(Herb Simon)

2nd session: Effect of UI * Task on t ime

00:00

00:10

00:20

00:30

00:40

00:50

Head er Date M ixe d Ta s k

time sec

UI TextUI Visual


Which representation is best?Which representation is best?

It depends on the user task!

What is the precisevalue of sysperformance?

How does the current performancecompare to its peak? How has performance

changed over time?

Based on material prepared by RavinBalakrish nan for similarcourses at UofT. Used with the permission of the original author.

System performance: processor and file system


Gestalt PrinciplesGestalt Principles

German psychologists in 1920s introduced the concept of figure and ground in perception

Gestalt principles of perceptual organization describeconfigural 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


Gestalt PrinciplesGestalt Principles

A page of paragraphs, a grid of spreadsheet cells, a left-justified list of selections or parameters

Continuity: there is a tendency to groupelements into continuous contours orrepeating patterns

Window manipulation controls (e.g.,scroll bar, selection handles)

Symmetry: there is a tendency to seesymmetric elements as part of the samefigures

Icons on a workstation screen, pop-upmenu on top of a document display

Area: there is a tendency to groupelements in a way that creates thesmallest possible figure

Overlapping windows, menus, dialogboxes and other user interface controls

Closure: there is a tendency to organizeelements into complete, closed figures

Toolbar icons (proximity operates hereas well), data visualization

Similarity: elements that share visualcharacteristics (shape, color, etc.) tend tobe seen as a group

Words on a menu bar, columns in atabular display, text in a paragraph

Proximity: elements near each othertend to be seen as a group

User Interface ExamplesGestalt Principle

Rosson & Carroll, 2002


Gestalt PrinciplesGestalt Principles Examples 1Examples 1

Proximity

Similarity



Closure

Area (smallness)

Symmetry


5/9



Continuity


Principles @ Work Principles @ Work UIUI

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



User should perceive immediate sense of organization and seeindividual 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 informationFor example: Use tabs, Link dialogs (one dialog opens another)



Proximity and Similarity


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

TRADEOFF:Perceptual distinctions highlight and group user interface elements, BUT the moredistinctions 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)


Principles @ Work Principles @ Work UIUI (Area) White Space

(White space)


6/9


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

3

2

bad example from Jeff Johnson 2000, GUI Bloopers ITI 230 HCI Jacek Gwizdka 32

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

processing



Use grid-based design

Benefits : all elements are aligned and symmetrically balanced (vertical axis) regular and predictable information structure across all screens (pages)

Aaron Marcus and Associates for Kaiser Permanente


Fonts and FormattingFonts 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 thanfixed width fonts such as courier. STUDIES SHOW THAT TEXTIN ALL CAPS SLOWS READING BY 12% SO YOU SHOULD MIX CASE.

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)

The same goes for justified text, so that issomething of which to beaware. Al so short

justified lines are to beavoided, but that shouldbe common sense.

Based on material prepared by Elaine Toms for similar courses atUofT. Used with the permission of the original author.


2.2. Interpreting InformationInterpreting Information

Perception users see lines, rectangles, text strings Perceiving higher-level structure in information display (groups

of objects) enables interpretation Interpretation associate meaning with display elements


Facilitating InterpretationFacilitating Interpretation

Using familiar words and visual language Refining visual language

Abstract images vs. realistic images

Employing affordances


7/9


FamiliarityFamiliarity

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

TRADEOFF: A familiar vocabulary eases interpretation, BUT familiar terms are usually lessdistinctive and precise, and what is familiar for one person may not be familiar foranother.

SOLUTION: Carefully select words and imagery. Be aware of individual and culturaldifferences.


Abstract vs. Realistic Images Abstract vs. Realistic Images

Realistic images can be recognized accurately, but recognitionis more complex (and interpretation may be slower)

Recognizing abstract images requires (some) learning, butrecognition process is simpler and faster

TRADEOFF:People's recognition memory for realistic images is accurate and long-lasting, BUTrealistic 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 isenhanced when a set of icons is refined together.


Recognizing AffordancesRecognizing Affordances

Affordances must be visible to aid interpretation More competition for screen space and more complexity

TRADEOFF:Dynamic hiding of user interface controls that are not in use reduces complexityand simplifies the display, BUT also conceals the controls' affordances from usersand requires that users know that controls are available and how to activate them.

SOLUTION: Use dynamic affordances.


3.3. Making Sense of InformationMaking Sense of Information

Relating interpreted information to current task

If users cannot make sense of info they may trydifferent interpretations


Making SenseMaking Sense -- ExampleExample

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 mapsize of paths = size of marching army

Minard's visualization of Napoleon's Russian campaign


Information IntegrationInformation Integration

Making sense of information requires informationintegration

User connects new information to: previously displayed information

e.g. sequence of screens or web pages

current goals and task users domain expertise users knowledge about world


8/9


Facilitating Making SenseFacilitating Making Sense

Consistency Visual metaphors Information models Dynamic displays


Consistency Consistency

Consistent use of terminology and symbols e.g. use Move backward with Move forward, not Reverse

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

Scope of consistency internal (within this program) external consistency (other applications)

TRADEOFF:Consistent use of shapes, sizes, colors, and position sets up expectations that helpusers make sense of information, BUT in some cases consistency may actuallyimpair user performance or satisfaction.

SOLUTION: Dont be afraid to break consistency when needed


MetaphorsMetaphors

Consistency with external world Metaphors should balance

consistency and familiarity withinconsistency and innovation

Technology should enhancephysical world metaphorsshould not be taken too literally

TRADEOFF: Visual metaphors leverage real-world knowledge of objects, BUT metaphors thatare very literal may introduce information that is irrelevant or misleading to a task.

SOLUTION: Break metaphors when necessary


Information ModelInformation Model Set of concepts, relationships, representations developed to

help make sense of large data sets

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 criticalexamples of decomposition: Task-centric, Chronological, Spatial,Organizational, Alphabetical, Frequency of use

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

Information visualization visual features are used to code data attributes


Dynamic DisplaysDynamic Displays

Computer displays can dynamically change content Restructuring, resizing, dynamic filtering, or

animating can help to make sense of information

Dynamic displays allow for exploration


Dynamic DisplaysDynamic Displays FishFish -- eye Viewseye Views Fish-eye view (Furnas 1986)

overview with local detail (dynamic)

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

Inxight inc. table lens


9/9


Dynamic DisplaysDynamic Displays HierarchiesHierarchies

Cone Trees and Hyperbolic Lens

Robertson / Mackinlay / Card Cone Trees: Animated 3D Visualizations of HierarchicalInformation. ProcACM CHI'91

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


ReducingReducing Amount Of Info Amount Of Info

Infinite zoomZoomable UI (ZUI)

Semantic filtering(not shown)

Pad++: A Zoomable GraphicalSketchpad for Exploring AlternateInterface Physics Bedersonet alJournal of Visual Languages and Computing 7, 1996


SummarySummary Information Design is about creating and arranging

display objects to facilitate perception, interpretationand understanding

Norman's action cycle is a useful framework foranalysis of information design

Bertins taxonomy and Gestalt principles of perceptual organization offer useful guidance inselecting and arranging elements of visual display

The overall information model, how it maps to users'mental model of the task, and its consistencydetermine how well users will be able to integrate

and make sense of their actions as they progressthrough a task ITI 230 HCI Jacek Gwizdka 52

Next Week Next Week

Color in Design

image interpretation theory.pdf

Documents