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
20
Embed
Presentation Outline Information HCI: Definition HCI ...An HCI Approach Presentation Outline HCI: Definition HCI: Interaction ... Human-Computer Interaction What is it? •A discipline
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
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
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
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.
18
Haptics Interaction: Example
Touch on Android Phone as a Mouse and a Keyboard For Windows PC
19
Multi touch interaction
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
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
Human cognitive process
How Many 3’s?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
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.
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.
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
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
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?
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
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
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.
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.
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
Solution Banner Blindness
Notice the ad? Eyetracking device: Desktop version
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