Information Visualization

CS4HC3 / SE4HC3/ SE6DO3

Fall 2011

Instructor: Kevin Browne

[email protected]

Slide content is based heavily on Chapter 14 of the textbook:

Designing the User Interface: Strategies for Effective Human-Computer
Interaction / 5th edition, by Ben Schneiderman & Catherine Plaisant
 Information Visualization
● Information visualization: “the use of interactive
visual representations of abstract data to
amplify cognition” (Ware, 2008)
● Typical concerns: discovery of patterns, trends,
clusters, outliers and gaps in data
● Stock prices, social relationships, patient records
● Human visual ability is “high bandwidth”, “high
performance”
● Goal: be more than look slick, show
measurable usability benefits across different
platforms and users
 Information Visualization
● Data type by task taxonomy
● Taxonomy for describing and characterizing
problems, visualizations
● Seven data types and seven tasks
● Data types: 1D linear, 2D map, 3D world,
multidimensional, temporal, tree, network
– First four are dimensional, last three are structural
● Tasks: Overview, zoom, filter, details-on-demand,
relate, history, extract
 Seven Data Types
● 1D linear data
● Items which can be organized sequentially
● e.g. text document, list of names
● Design issues:
– Colours, sizes, layout
– Scrolling, selection methods
● Example user tasks: check which items have some
required attribute
 Seven Data Types
● 2D map data
● Items make up some part of the 2D area
– Not necessarily rectangular, e.g. Lake on Google Map
● e.g. Geographic map, floor plans
● Example user tasks: finding items, finding paths
between items
 Seven Data Types
● 3D world data
● Items with complex relationships with other items
– e.g. Volume, temperature, density
● e.g. Medical imaging, architectural drawing,
scientific simulations
● Design issues: position, orientation and navigation
for viewing 3D application
● Example user tasks: temperature, density
 Seven Data Types
● Multidimensional data
● Items with n attributes in n-dimensional space
● Relational database contents can be treated this
way
● Interface may allow user to view 2 dimensions at a
time
 Seven Data Types
● Temporal data
● Very close idea to 1D sequential data, but warrant a
distinct data type in the taxonomy as temporal data
is so common
● e.g. Stock market data, weather
● Items have a beginning and end time, may overlap
in time
● Example user tasks: finding events during a time
period, searching for periodical behaviour
 Seven Data Types
● Tree data
● Non-root items have a link to a parent item
● Items, links can have multiple attributes
● e.g. Windows file explorer
● Example user tasks: how many items are children
of a node, how deep or shallow is the graph
 Seven Data Types
● Network Data
● Items linked to arbitrary number of other items
● Example user task: shortest path, least costly path
● How to visualize, layout the network?
 Seven Basic Tasks
● Overview task
● Give user overview of entire set of items
● e.g. Zoom out
● e.g. Field-of-view box
● e.g. Fish eye strategy
● If complete overview is impossible, is there an
effective overview strategy?
 Seven Basic Tasks
● Zoom task
● Allow users to focus in on or enlarge items of
interest
● May allow users to control the “zoom factor”
● Extra importance if small display is a possibility
– e.g. Google maps on smartphone
 Seven Basic Tasks
● Filter task
● Allows users to remove items
● e.g. Dynamic queries applied to data
● Highlighting desired items
 Seven Basic Tasks
● Details-on-demand task
● Selecting item(s) and allowing users to get more
details
● e.g. Click on an item, new window
● e.g. Searching for a book on Amazon, can click on
different editions and get more details
 Seven Basic Tasks
● Relate task
● Relating items within a set
● How to show relationships?
– Proximity
– Containment
– Connected lines
– Colour-coding
 Seven Basic Tasks
● History task
● History of tasks which can be undone, replayed,
refined
● Much work is a “process”, allowing for refinement,
steps, important
● e.g. Retrieval of past searches
 Seven Basic Tasks
● Extract task
● Extraction of items
– Based on query parameters
● Allow user to “save”, publish, examine extracted
items
Information Visualization Challenges
● Importing and cleaning data
● Open Hamilton – data cleaning
● Combining visual representations with textual
labels
● How to put on text labels (e.g. on a map) without
covering what you wish to display?
● Finding related information
● Proper judgement often requires looking at data
derived from multiple sources
Information Visualization Challenges
● Viewing large volumes of data
● Thousands of items of data? What about millions?
User-controlled aggregation mechanisms?
● Integrating data mining
● Data mining also about finding patterns... but
through algorithms & machine learning
● Data mining is objective, but outliers, discontinuities
may be far less obvious
● Visualizing such that data miners can gone in on
interesting parts of data
Information Visualization Challenges
● Integrating with analytical reasoning techniques
● Use data to support or disclaim hypotheses
● Collaborating with others
● e.g. IBM - Many Eyes
● Achieving universal usability
● Text, tactile or sonic representations?
● e.g. National Cancer Institute's cancer atlas
● Evaluation
● How to evaluate information visualizations?
 Information Visualization
● Pre-attentive processing
● Unconscious accumulation of information from the
environment
● Information that “stands out” is selected for attentive
(conscious) processing
● Why does some information “stand out”?
– Not exactly sure!
– But it has something to do with the stimulus itself, and the
person's current intentions or goals
 Information Visualization
● Pure-capture model
● Focuses on stimulus salience
● “bottom-up”
● Do certain properties of the stimulus “stand out”
from the rest?

● Contingent-capture model
● Focuses on person's current intentions and goals
● “top-down”
● e.g. Brain directs thought towards red square if
shown red square before viewing field of shapes
 Gestalt Laws
● Gestalt psychology
● Berlin School, theory of mind
● Brain is holistic, parallel, analog, self-organizing
tendencies
● “the whole is greater than the sum of the parts”

● Fundamental Gestalt Law (law of prägnanz):

● We tend to order our experience in a manner that is
regular, orderly, symmetric and simple
 Gestalt Laws
● Law of Closure
● The mind may experience elements it does not
perceive through sensation, in order to complete a
regular figure (that is, to increase regularity).
● Law of Similarity
● The mind groups similar elements into collective
entities or totalities. This similarity might depend on
relationships of form, colour, size, or brightness.
● Law of Proximity
● Spatial or temporal proximity of elements may
induce the mind to perceive a collective or totality.
 Gestalt Laws
● Law of Symmetry (Figure ground relationships)
● Symmetrical images are perceived collectively,
even in spite of distance.
● Law of Continuity
● The mind continues visual, auditory, and kinetic
patterns.
● Law of Common Fate
● Elements with the same moving direction are
perceived as a collective or unit.
 Mackinlay's rankings of encodings
● Graphical perception
● “ability of viewers to interpret visual (graphical)
encodings of informationn andtherebyy decode
information in graphs” - Jeffrey Heer,Stanford
University
● Which visual variables best encode
quantitative, ordinal or nominal data?
● Position
● Length
● Angle
● etc.
 Weber's law
● Weber's law
● “just noticeable difference”

● I – original intensity of the stimulus

● Change in I is the minimum difference required for it
to be perceived (jnd)
● K constant
 Weber's law
● Practically, what this means...
● To be heard in a crowded room you may have to
shout, in a library you may have to whisper
● When lifting a 2 lb weight a 0.2 lb increase may be
felt, but when lifting a 5 lb weight a 0.5 lb difference
may be required
● For HCI:
● When are negative changes apparent?
– Don't want users to know...
● When are positive changes apparent?
– We want users to realize they exist...
 References
Designing the User Interface: Strategies for Effective Human-Computer Interaction / 5th edition, by Ben Schneiderman & Catherine
Plaisant (2010)

Folk, C.L., & Remington, R. Top-down modulation of preattentive processing: Testing the recovery account of contingent capture.
Visual Cognition, 14, 445-465.

Heer, Jeffery. Visualization Re-Design. CS4488 (http://hci.stanford.edu/courses/cs448b/f11/lectures/CS448B-20111004-Redesign.pdf )

Oct. 4 2011.

Keiman, Gabriel. Visual Object Recognition. Neurobiology 230 – Harvard / GSAS 78454
( http://klab.tch.harvard.edu/academia/classes/hms_neuro300_vision/slides/hms230_2011_Lecture6.pdf )

Montag, Ethan D., Weber's Law, ( http://www.cis.rit.edu/people/faculty/montag/vandplite/pages/chap_3/ch3p1.html ).

Ware, Clin, Visual Thinking for Design, Morgan Kaufmann, San Francisco, CA (2008).