Information Models• An “information space” that users navigate

– Information integration, a key aspect of mental model

• Want a structure that is simple and coherent, but at the same time comprehensive and flexible

• Key tradeoffs are usually flexibility and complexity– Again, key is a good understanding of task needs

• Many techniques for designing information models– Hierarchy: menu systems, folders, index pages– Directed graph: hypertext, associative links– Spatial structures: tables, maps, 3D structures

Data Types• 1-D Linear (Document Lens, SeeSoft,

IM)• 2-D Map (GIS, ThemeScape)• 3-D World (CAD, Visible Human)• Temporal (Perspective Wall, LifeLines)• Multi-dimensional (SpotFire,

HomeFinder)• Tree (Treemaps, Sunburst)• Network (Netmap, SemNet)• Documents (Digital Library)

Showing 1-D Lists: Scrollbars

• View relative size and position of visible portion

• Control visible contents in several ways

• Can we increase available information related to content of non-visible space?

Information Murals

• Information mural provides graphical description of contents of information space

• Indentation and length of line reflected in mural

• Highlights indicate key elements in information

Mural Bar Example

• Useful for identifying features in code

The Pile Metaphor

• Use pile metaphor (Rose et al 93) to show objects in the information space

• Properties of information reflected in block size

• Stacking order provides additional organization method

The Pile Metaphor in a Scrollbar

• Make use of familiar scrollbar feaures

• Use trough area to graphically describe information space

Zooming and Loss of Overview with Maps and

Multi-D Data• Zooming allows users to start with

overview then zoom in on portions of interest

• Difficult to maintain sense of context

• Multiple view confluent zoom reduces this, but consumes space

Solution: Fisheye Views

• Attempts to provide overview (context) and detail (focus) at the same time

• Also known as focus+context views, non-linear magnification, distortion-oriented presentations

• Focus area magnified to show detail while preserving context

Fisheye Camera Lenses• Provide distorted

view of large amount of information

Fisheye Views in IV• Area of interest is

magnified• All information shown• Continuity preserved

to edges• Distortion can be

disorienting• Information in

transition area lost• Zoom factor minimal

Another Use of Fisheye

Hyperbolic Geometric Transformations

• Goal: Keep information space within the confines of a circular area

• In a hyperbolic plane, the circumference of a circle grows exponentially with its radius

• Hierarchies (which expand exponentially with depth) can be laid out uniformly so that distances between parents, siblings, and children are similar

Hyperbolic Browser

• Layout on hyperbolic plane mapped to unit disk

• Smooth transitions lessen disorientation

• Available from Inxight as Star Trees

• Won the CHI 97 Great Browse-Off

Creating Visual Displays

• How do basic properties of visualizations affect their ability to communicate information?

• What tasks can be performed using visualizations?

• When are visual displays inappropriate or intrusive?

Visual Properties

Position, color, angle, length, area, volume

Attribute Encoding

Position Color AreaAll three images encode the same data(A=1, B=5, C=2, D=6…)

Cleveland’s Ordering

Decoding accuracy (from best to worst):

• Position• Length• Angle (slope/direction)• Area• Volume• Color (hue, saturation, density)

Pie Charts and Dot Charts

Example: Pie Charts

• Relies on low accuracy decoding skills (angles, irregular areas)

• Use higher accuracy decoding skills when possible (position, length)

Multiple Pie Charts

• Tufte: "... the only worse design than a pie chart is several of them.... Given their low data-density and failure to order numbers along a visual dimension, pie charts should never be used."

Task Type

• Mackinlay claims that ranking of perceptual properties depends on task:

– Quantitative: position, length, angle– Ordinal: position, density, color– Nominal: position, color hue, texture

Notification Systems

Unified Notification Systems

Case Study: Irwin• Monitors Internet

resources (email, Usenet news, Web pages, weather)

• Uses graphical, textual, and audio communication mechanisms

• Effective use of limited screen space

Case Study: What’s Happening

• Goal: promote community awareness and expand social capital with glance-ables

• WH communication-bar unobtrusively and calmly sits in a corner cycling through news and chats

• Content from:– Users– Calendars– Web pages

Case Study: Scope

• Leverages radar metaphor with urgent items in center

• Can show wide range of information types

• New items pulse when they arrive

• Multiple sizes depending on info needs

Case Study: Sideshow

• Included are:– Meeting timers– Mailbox updates– Buddy lists– Video chat lists– Stock quotes– Bug reports– Weather

forecast– Traffic pics/maps– Ticket button

• Mouseovers show “tooltip grandes” (large interactive tooltips)

• Tickets on Web pages allow content to be added

• Internal study: Sideshow distracting but worth it (?)

Revisiting Attribute Encoding

• Do secondary display attributes follow design guidelines established for focal displays? (Cleveland)

• Which encoding minimizes distraction to the primary task?

• Which encoding best enables detection, estimation-ratioing & estimation-compare information extraction tasks?

Position Color AreaAll three images encode the same data(A=1, B=5, C=2, D=6…)

Results SummaryDesign

Objective

RecommendedGraphical Attribute

Not Recommended

Comments

Minimizing Primary Task Distraction

Position, then color Area

Area better than color if distraction is allowed

Awareness supporting information detection tasks

Color, then position Area

No ordering apparent if distraction is allowed

supporting estimation-ratioing tasks

Position, then color Area

Area better than color if distraction is allowed

supporting estimation-compare tasks

Position, then area Color

Ordering not dependant on distraction levels

p < 0.05 for all resultsCleveland’s ordering: position, area, color

Understanding Secondary Understanding Secondary DisplaysDisplays

• Goal: understand the balance between benefits and costs of secondary displays

• Establish guidelines for the design and use of secondary displays (often differ from those for primary displays)

• Results need to be extended to specific tasks and application areas

Summary