20
Information Visualization: An HCI Approach Presentation Outline HCI: Definition HCI: Interaction Information visualization: Definition Information visualization: Exploration Information visualization: Assessment HCI: DEFINITION Human-Computer Interaction What is it? A discipline concerned with the design, the evaluation and the implementation of computer systems for human use, and

Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

  • Upload
    others

  • View
    47

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

Information Visualization:

An HCI Approach

Presentation Outline HCI: Definition HCI: Interaction Information visualization: Definition Information visualization: Exploration Information visualization: Assessment

HCI: DEFINITION

Human-Computer Interaction

What is it?• A discipline concerned with the design, the

evaluation and the implementation of computer systems for human use, and

Page 2: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

Motivation behind the field• Life-critical software applications• Industrial and commercial uses• Collaborative systems

The importance of HCI design would be noticed once things get wrong.

Challenge of HCI

• To keep up with technological change• To ensure users can use a system productively

and enjoyably• To accomdate human diversity: Physical

abilities and workplaces, Cultural and international issues, or Elderly users

HCI as Interdisciplinary Practice• Computer science and computer engineering• Psychology: cognitive, social psychology• Ergonomics• Linguistics and Sociology

HCI: INTERACTION

Page 3: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

9

HCI: Interaction Styles

Ways in which users interact with computer systems

Coverage:1. Menu-driven2. Form-filling3. Direct manipulation: Haptics

10

1. Menu-drivenA set of options on a screen where selection and

execution of one (or more) of the options results in change of an information system

Advantages• no need to remember any command• usable with other types of interface

Disadvantages• users must recognize where options are• take up a fair amount of screen space

Menu-driven: Example Menu-driven: Example

Page 4: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

13

2. Form-fillingForm-filling is suitable for data entry.

14

Form

-filli

ng: O

nlin

e Q

N

15 16

3. Haptics Interaction• It is an interaction style through body

sensations and movements. • Haptics refers to a type of human-

computer interaction technology that encompasses tactile feedback or other body sensations to perform actions or processes on a computing device.

Page 5: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

18

Haptics Interaction: Example

Touch on Android Phone as a Mouse and a Keyboard For Windows PC

19

Multi touch interaction

Page 6: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

INFORMATION VISUALIZATION: DEFINITION

Definition• Visualization It is a human cognitive activity and has

nothing to do with a computer The activity may not need to involve a visual

experience since sound or other sensory could represent data

• Information visualization The use of computer-supported,

interactive visual representation of data to amplify cognition Used in exploratory tasks

Information visualization: Definition Information visualization: Definition

Representation

Analysis & Presentation

Interaction

Page 7: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

Scientific visualizationInformation visualization

Commercial (or editorial) visualization How information visualization amplifies cognition

Increasing memory and processing resources available Enhancing the recognition of patterns Encoding information in a manipulable

medium

Page 8: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

Human cognitive process

How Many 3’s?1281768756138976546984506985604982826762980985845822450985645894509845098094358590910302099059595957725646750506789045678845789809821677654876364908560912949686

1281768756138976546984506985604982826762980985845822450985645894509845098094358590910302099059595957725646750506789045678845789809821677654876364908560912949686

Computational support• Why computers could advance this field: Inexpensive access memory allows a large

storage of massive data Powerful algorithm and quick computation

allow interactive selection of subsets of data for flexible exploration High resolution graphic displays ensure the

presentation matches the human visual and cognitive systems

Page 9: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

Human’s visualization: Key limitations

Inattentional blindnessChange blindness

Inattentional blindness• It is the phenomenon of not being able to

perceive things that are in plain sight. • This can be a result of having no internal frame

of reference to perceive the unseen objects, or it can be the result of the mental focus or attention which cause mental distractions

• The phenomenon is due to how our minds see and process information.

• We have clip!!

Change blindness• It is a phenomenon occurring when a person

viewing a visual scene fails to detect large changes in the scene.

• For change blindness to occur, the change in the scene typically has to coincide with some visual disruption such as a saccade (eye movement)

• With the blank screen in place, large changes could be made to the scene without the observer reliably noticing them.

Page 10: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

INFORMATION VISUALIZATION: EXPLORATION

Stem-and-leaf display

• A basic stem-and-leaf display contains two columns separated by a vertical line. The left column contains the stems and the right column contains the leaves.

• A stem-and-leaf display is a tool to present quantitative data in a graphical format in order to inspect the shape of its distribution.

• Unlike histograms, stem-and-leaf displays retain the original data to at least two significant digits, and put the data in order.

Waterfall Chart • A typical

waterfall chart is used to show how an initial value is increased (or decreased) by a series of intermediate values, leading to a final value.

Page 11: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

Waterfall Chart Scatterplot Matrix• A scatterplot

matrix contains all the pairwise scatter plots in a matrix format.

INFORMATION VISUALIZATION: ASSESSMENT

How good is your visual?• Visualization is of good quality when it fully

satisfies (1) the communication and (2) the analytic requirements of those for whom it was created

• Yet, there is no magic formula since the quality depends on several factors includingWhat the encoded data is about, How well a visual represents the data,Who the targeted viewers are, and How competent the visual maker is

Page 12: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

Is this visual of good quality? How good is your visual?

• Visual makers intend to display a visual as a proper representation of data to target viewers

• The visual will be a successful attempt if the viewers have looked at the visual and subsequently comprehend the encoded data

• It will be failure if (1) the viewers fail to look at it or (2) they are unable to comprehend the encoded message

Assessing the quality• To evaluate the extent to which viewers

look at a visual, an assessor uses an eye tracker

• To evaluate the extent to which viewers comprehend a visual, an assessor needs to measure the scores the viewers earn from correctly responding to questions about the visual

Eye Tracking andInformation Visualization

Page 13: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

Rationale• Observing a visual, a viewer must look at

it. • Yet, the attention may not given equally

to all visual’s components• As a result, to evaluate if the viewer has

seen what the visual maker intends to display, we need an eye tracker

Eye tracking on visuals

What is eye tracking?

Eye tracking• Examine people’s viewing patterns and

behaviors• Investigate how customers or visitors see

websites

Why do viewer makers need to examine the viewing pattern or what viewers see?

Page 14: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

Where on the graphic do viewers look?

Why eye tracking examination?• Viewers’ responses to a questionnaire about a

visual viewed raise two problems• First, viewers may not accurately recall what

they saw• Second, they may not admit what they saw. • However, advances in eye-tracking technology

are able to provide valid insights.

Viewing pattern Viewing pattern

Page 15: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

How does an eye tracker look like?

Eyetracking device: Desktop version

Eyetracking device: Glass Version Output from an eye tracker

• Using an eye tracker, an evaluator will have two sets of outputQualitative outputQuantitative output

Page 16: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

Qualitative output from an eye tracker An eye tracker will

record the locationwhich a person views and track the movement of his or her eyes.

On the left, the eye tracker is recording one subject’s eye movement during the visit at Wikipedia.

How an eye tracker records data• Prior to having the path of the movement,

all measurements from the eye tracker are quantitative.

• An eye tracker adopts the mapping screen coordination approach. That is, what a person fixates on a screen is observed and recorded as an (x, y) coordinate.

Mapping screen coordination approach Area Of Interest (AOI)• With the

mapping style, researchers are allowed to define an area of interest (AOI).

• The AOI is a certain area on a computer screen on which the researchers attempt to explore if there is a fixation on the area.

Page 17: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

Data from a subject viewing YouTube Recorded data

Data ready for the analysis

Findings: Example• Usually, users’ fixation are blue spots in the gaze

plot of their viewing behavior on a given area of visual. The thin blue lines connecting these plots represent a user’s saccades between fixations.

Page 18: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

Rationale behind an eye tracking examination

Evaluator’s interest in a viewing behavior

• In eye-tracking studies, evaluators are interested in what viewers look at and what viewers do not look at

• What people are looking at is generally the same as what they are thinking about

• It is difficult to consider if what viewers look at is good or bad.

Fixation: One subject Fixation: Samples

Page 19: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

Solution Banner Blindness

Notice the ad? Eyetracking device: Desktop version

Page 20: Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline

Eyetracking device: Glass Version

Implications For practitioners• Online business and Marketing• Accounting and financial fields• Landscape architecture and environmental

engineering

For researchers• Information visualization• Data science