![Page 1: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/1.jpg)
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
![Page 2: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/2.jpg)
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)
![Page 3: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/3.jpg)
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?
![Page 4: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/4.jpg)
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
![Page 5: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/5.jpg)
Mural Bar Example
• Useful for identifying features in code
![Page 6: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/6.jpg)
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
![Page 7: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/7.jpg)
The Pile Metaphor in a Scrollbar
• Make use of familiar scrollbar feaures
• Use trough area to graphically describe information space
![Page 8: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/8.jpg)
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
![Page 9: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/9.jpg)
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
![Page 10: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/10.jpg)
Fisheye Camera Lenses• Provide distorted
view of large amount of information
![Page 11: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/11.jpg)
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
![Page 12: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/12.jpg)
Another Use of Fisheye
![Page 13: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/13.jpg)
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
![Page 14: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/14.jpg)
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
![Page 15: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/15.jpg)
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?
![Page 16: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/16.jpg)
Visual Properties
Position, color, angle, length, area, volume
![Page 17: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/17.jpg)
Attribute Encoding
Position Color AreaAll three images encode the same data(A=1, B=5, C=2, D=6…)
![Page 18: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/18.jpg)
Cleveland’s Ordering
Decoding accuracy (from best to worst):
• Position• Length• Angle (slope/direction)• Area• Volume• Color (hue, saturation, density)
![Page 19: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/19.jpg)
Pie Charts and Dot Charts
![Page 20: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/20.jpg)
Example: Pie Charts
• Relies on low accuracy decoding skills (angles, irregular areas)
• Use higher accuracy decoding skills when possible (position, length)
![Page 21: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/21.jpg)
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."
![Page 22: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/22.jpg)
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
![Page 23: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/23.jpg)
Notification Systems
![Page 24: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/24.jpg)
Unified Notification Systems
![Page 25: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/25.jpg)
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
![Page 26: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/26.jpg)
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
![Page 27: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/27.jpg)
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
![Page 28: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/28.jpg)
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 (?)
![Page 29: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/29.jpg)
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…)
![Page 30: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/30.jpg)
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
![Page 31: Information Models An “information space” that users navigate –Information integration, a key aspect of mental model Want a structure that is simple and](https://reader036.vdocument.in/reader036/viewer/2022070413/5697bfc81a28abf838ca8725/html5/thumbnails/31.jpg)
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