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 PositionColorArea All 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 ( , 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 ColorArea All three images encode the same data (A=1, B=5, C=2, D=6…)

Results Summary Design Objective Recommended Graphical Attribute Not Recommended Comments Minimizing Primary Task Distraction Position, then colorArea Area better than color if distraction is allowed Awareness supporting information detection tasks Color, then positionArea No ordering apparent if distraction is allowed supporting estimation- ratioing tasks Position, then colorArea Area better than color if distraction is allowed supporting estimation- compare tasks Position, then areaColor Ordering not dependant on distraction levels p < 0.05 for all results Cleveland’s ordering: position, area, color

Understanding Secondary Displays 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