ENV Envisioning Information Lecture 7 – Interaction Ken Brodlie

ENV Interaction Major difference between paper and computer-based visualization is ability to interact with picture and alter the presentation of the data Nice simple example is Dancing with Histograms –Dix and Ellis This lecture looks at two concepts: –Focus and context –Brushing

ENV Focus and Context A recurring problem in Information Visualization is lack of screen real estate Challenge has been addressed in some innovative ways Want to achieve: –Focus: to see detail of immediate interest –Context: to see the overall picture Want to do this interactively… Six approaches: –Distortion –Rapid zooming –Elision –Multiple windows –Use 3D (more space) –Use animation (more time)

ENV Distortion: Bifocal Display As name suggests, distortion achieves aim by magnifying focus area and demagnifying surrounding context Probably the first suggestion was the bifocal display of Spence and Apperley (1982) –Play Spence bifocal_lens movie ( bifocal_lens movie

ENV Bifocal Display Implemented as an image browser that scales different areas of image in different ways –Chris North, Univ of Maryland Available at:

ENV Bifocal Display A possible application is in map reading This London underground application was developed by Marcelo Cohen in Leeds Zoom / pan Focus /context

ENV What is the Bifocal Display Doing? Transforming the information space to the display space –Visual transfer functions Information space Display Space Normal display Information space Display Space Bifocal display context focus

ENV Developing the Idea Card, Robinson and McKinlay developed the idea into the Perspective Wall Perspective Wall

ENV The Perspective Wall 2D layout wrapped around a 3D structure Space utilisation: -detail on centre panel 3x size of equivalent flat wall fitting field of view

ENV Perspective Wall Advantages: –User can adjust ratio of detail to context –Smooth animation helps user perceive object constancy –Relationship between detail and context is consistent: objects bend around the corner

ENV Perspective Wall In terms of transfer function, the situation is closer to the early Spence movie –Perspective gives smoother transition from focus to context Information space Display Space Perspective Wall context focus

ENV FishEye Menus Here is the same idea applied to menus –Ben Bederson, University of Maryland See also: – eyemenu/FisheyeMenuDemo.htmlhttp:// eyemenu/FisheyeMenuDemo.html

ENV Comparison of Menu Styles Research pages at University of Maryland include a nice applet that allows you to compare different menu styles –Arrow bar –Scroll Bar –Hierarchical –FishEye Screenshots on next slide created from: – hcil/fisheyemenu/ fisheyemenu- demo.shtmlhttp:// hcil/fisheyemenu/ fisheyemenu- demo.shtml

ENV Menus arrow scroll hierarchical fisheye

ENV Question What are the disadvantages of the magnifying glass paradigm for providing focus and context?

ENV Table Lens This is a focus and context idea specifically aimed at tables Try applet at:

ENV Table Lens

ENV Rapid Zooming Techniques Idea is to allow rapid zooming between focus and context –Zoom in to focus, then out to context Recent idea is SDAZ – Speed Dependent Automatic Zooming –Linked to scroll bar –Moving scroll bar fast will zoom out –Slowing scroll bar will zoom in again –See:

ENV Rapid Zooming Interfaces There is often a blurred distinction between zooming interfaces and distortion techniques Look at: New buzzword: ZUIs

ENV Elision Techniques Hide parts of a structure until they are needed Widely used in graph drawing software for very large graphs Have you seen this in xmdvtool?

ENV Multiple Views Multiple views can also be used to provide focus and context Powerpoint uses this to good effect!

ENV Move into 3D: Cone Trees Using a third dimension allows us to prioritise the focus (foreground) without losing the context (background) For large tree structures it is impossible to find sufficient screen space Cone trees in 3D provide a solution Here is a moviemovie

ENV Adding a time dimension: RSVP We can gain more space by adding time! Recent Spence work addresses problem of browsing information spaces –Rapid Serial Visual Processing –To gain a quick view of what is available –Distinction between browsing and searching –Here is the movie (

ENV Browsing the Web Spence has also turned his attention to browsing the web –On mobile devices! –Here is the movie (

ENV Linking: Brushing Brushing has become a fundamental concept in visualizing information –Already encountered in xmdvtool

ENV Linking: Coordinated Views Selection from one view can be linked to a corresponding selection in another view –Coordinated multiple views

ENV Linking: Multiple Views Many of the concepts we have talked about are brought together in the Snap-Together system of Shneiderman and North How many visualizations can you recognise here?

ENV Snap Together for Directories

ENV Linking: Spence Attribute Explorer Spence has also developed a tool called Attribute Explorer –Compare it with xmdvtool –Look for brushing concept –Here is the movie (