Information Visualisation - Lecture 4

@wassxILV Informationsvisualisierungen

Information Visualisation

#viz_lnz

Information Visualisation

Lecture 4 - Interaction

ILV Informationsvisualisierungen #viz_lnz @wassx 2

"The first and main goal of any graphic and visualization is to be a tool for your eyes and brain to perceive what lies beyond their natural reach".

Alberto Cairo in "the functional art"

Remember?


„Overview first, zoom and filter, then details on demand.“


See detail, zoom out to get on overview, find some related information, zoom in again to find details of

original object of interest.


3 Interlocking Feedback Loops

Data manipulation loop Objects are selected and moved using basic skills of eye-hand coordination.




Exploration and navigation loopAnalyst finds her way in visual data space (cognitive spatial model)





Problem-solving loop Analyst forms hypotheses


Data Manipulation Loop



Choice Reaction Time

Hick-Hyman’s Law

Jay Hyman

T = a + b.log2(n)

n = Amount of choicesT = Reaction timea,b = Empirically determined constants



Choice Reaction Time

Factors: • Distinctness of signal • Amount of visual noise • Stimulus-response compatibility • Degree of accuracy • ~160ms / bit of information

e.g.: 8 choiceslog(8) / log(2) = 3 3 * 160 = 480ms

Hick-Hyman’s Law applied



Two-Dimensional Positioning and Selection

from Information Visualization, Perception for Design, Colin Ware

T = a + b.log2(D/W + 1.0)D = Distance W = Width T = Selection time a,b = Empirically determined constants

Fitt’s Law

Paul Fitts



Two-Dimensional Positioning and Selection



Exploration and Navigation Loop



Navigation Control Loop




Wayfinding, Cognitive Maps, and Real Maps

Seigel, A. W., & White, S. H. (1975). The development of spatial representations of large-scale environments.

1. Key landmarks are learned

2. Procedural Knowledge from one location to other 3. Cognitive spatial map is formed

3 stages by Seigel and White



Key landmarks are learned

Seigel and White 1975

Initially no spatial understanding of the relationships between them. Declarative knowledge

Think of recognising a e.g. crossing, radio tower, church,… in a town.



Procedural Knowledge about Routes between Landmarks


Development of knowledge how to get from one point to another. Landmarks serve as decision points.

Think of recognising a e.g. crossing, radio tower, church,… in a town.



Cognitive spatial map is formed


Representation of space (2D) and has quantitative information about distances. Cognitive spatial map allows estimations of distances.


Cognitive spatial map is formedOverview Map



The camper


Focus, Context and Scale




• Spatial Scale Common for mapping applications. E.g. Spatial behaviour of users in a certain city, country, continent.





• Structural Scale E.g. software has structural components on different level of detail. Code -> Method -> Class -> … -> System





• Structural Scale E.g. software has structural components on different level of detail. Code -> Method -> Class -> … -> System

• Temporal ScaleTiming of events in different scales. E.g. Network traffic pattern of overall infrastructure, pattern during a day, pattern of single transaction (microseconds)




Focus-context problem has been spatially solved by human visual system (moderate changes in scale). The brain continuously integrates information from successive fixations of the fovea with less-detailed information from periphery.



http://www.visualcinnamon.com/occupations





http://bost.ocks.org/mike/fisheye/

http://bost.ocks.org/mike/fisheye/



http://mbtaviz.github.io





http://bl.ocks.org/mbostock/1667367

http://bl.ocks.org/mbostock/1667367



Resources

Interview with designer of Ironman HUD

http://thenextweb.com/media/2012/06/02/jayse-hansen-on-creating-tools-the-avengers-use-to-fight-evil-touch-interfaces-and-project-glass/

http://thenextweb.com/media/2012/06/02/jayse-hansen-on-creating-tools-the-avengers-use-to-fight-evil-touch-interfaces-and-project-glass/

Information Visualisation - Lecture 4

Design

Transcript of Information Visualisation - Lecture 4