Zooming, Focus Context, and Distortion

1
Zooming, Focus Context, and Distortion

• Presenters
• Stephanie Hornung and
• Leah Zagreus

2
Zooming, Focus Context, and Distortion

• Large amount of data in small space
• Maximize use of screen real estate
• These techniques allow users to examine a local
  area in detail within context of the whole data
  set
• Todays tools use one, two or all three of these
  techniques

3
Zooming

• Zoom in ability to see a portion in detail while
  seeing less of the overall picture
• Zoom out see more of overall picture, but in
  less detail
• Animation (also provides FC)

4
Focus Context

• Can go hand-in-hand with distortion like
  fisheye
• Works with zooming if animated Photomesa
• Allows dynamic interactive positioning of the
  local detail without severely compromising
  spatial relationships.
• Leung Apperley
• One challenge in navigating through any large
  dataspace is maintaining a sense of relationship
  between what you are looking at and where it is
  with respect to the rest of the data.
• Bederson Hollan

5
Distortion

• With Focus Context
• Data not in focus is suppressed and distorted
• Data of interest is larger and clearer (may still
  be distorted polyfocal view)

6
Readings

• A Review and Taxonomy of Distortion-Oriented
  Presentation Techniques, Leung Apperley, 1994
• Information Visualization Using 3D Interactive
  Animation, Robertson, Card, Mackinlay, 1993
• Pad A Zooming Graphical Interface for
  Exploring Alternate Interface Physics, Bederson
  Hollan, 1994
• Data Mountain Using Spatial Memory for Document
  Management, Robertson, et al, 1998
• Fisheye Menus, Bederson, 2000
• Quantum Treemaps Bubblemaps for a Zoomable
  Image Browser, Bederson, 2001

7
Leung Apperley Distortion

• Unified theory of distortion techniques
• stretchable rubber sheet mounted on a rigid
  frame
• Stretching Magnification
• Stretching one part must equal shrinkage in other
  areas

8
Piecewise Non-Continuous Magnification Functions

• Bifocal Display, Perspective Wall

Bifocal Display
Perspective Wall
9
Bifocal Display

• Combination of detail view and two distorted side
  views
• Can be applied in 2D
• Since the corners are distorted by the same
  amount in x and y, its just scaled, not distorted

10
Perspective Wall

• Similar to Bifocal, except demagnifies at
  increasing rate, while Bifocal is constant
• Visualizes linear information such as timeline
• Adds 3D but wastes real estate on screen (which
  is contrary to prime objectives of distortion
  techniques)

11
Continuous Magnification Functions

• Fisheye View, Polyfocal Display
• Can distort boundaries because applied radially
  rather than x y

1D Fisheye
2D Polyfocal
12
Fisheye View

• Thresholding
• Information elements have numbers based on
  relevance and distance from point of focus
• Value then determines what information is to
  presented or suppressed

Polar Fisheye View Image from Shishir
Shaw University of Texas, Austin www.adires.com/c
astleman/proj_02.html
13
Polyfocal Display

• Highest peak is focus of display
• Distorts shape of boundaries
• Troughs surrounding peaks are highly distorted
  and can effectively be shrunk to nothing

14
Comparisons
Bifocal View
Polyfocal View
15
Conclusions

• Techniques presented aim to solve problems of
  presenting large amounts of data in a confined
  space.

16
Robertson, Card Mackinlay

• Tech advances processing, networking
• Demand for info management apps Ý
• Beyond the desktop metaphor
• 1980s text-editing
• 1990s information access

17
Information Visualization

• Information Visualization attempt to display
  structural relationships and context that would
  be more difficult to detect by individual
  retrieval requests.

18
Information Workspace

• Workspace for information access

19
Information Workspace, contd

• Low-cost, immediate access to stored objects
• Exploits power of new computers
• Intends to answer demand for information
  management applications
• Informations cost structure

20
Strategies

• Large workspace
• Multiple agents
• Real-time interaction
• Visual abstractions

21
Large workspace

• Add virtual screen space
• Rooms
• Extend the WIMP desktop metaphor
• Increase density
• Animation
• 3D perspective

22
Multiple agents

• Delegate parts of workload
• Search
• Organize
• Interactive Objects

23
Real-time interaction

• Increase real-time interaction between user and
  system

24
Visual abstractions

• Shift cognitive load to application
• Abstract information structures speed users
  ability to assimilate and retrieve information

25
Interactive objects

• Room surfaces
• Controls
• Visualization

26
3D Navigation

• Walking Metaphor
• Point of Interest Logarithmic Flight
• Object of Interest Logarithmic Manipulation
• Doors
• Overview

27
3D/Rooms

• Intends to make screen space effectively larger,
  and denser

28
Visualizers

• attempt to present abstractions of large amounts
  of data tuned to the pattern detection properties
  of the human perceptual system
• Interactive animation
• 3D perspective

29
Visualizers, contd

• Hierarchical Cone Tree
• Linear Perspective Wall
• Spatial Floor Plan
• Continuous Data Sculpture
• Unstructured Information Grid

30
Cone Tree

• 3D hierarchies
• Transparent
• Rotation
• Rotating scrolling

www.techfak.uni-bielefeld.de/ walter/lehre/dm2/vi
s/
31
Cone Tree, contd

• Difficult to see all contents of a directory
• Gratuitous dimensionality Kevin Mullet,
  Icarian.com

32
Perspective Wall

• Descendant of Bifocal Display
• 3D aspect decreases cognitive load

33
Perspective Wall, contd

• Typical example use is file navigation
• However few files can be displayed at once
• Shown by date, type
• Provides Focus Context, but wastes screen real
  estate

34
Conclusions

• Interactive animation to shift cognitive load
• 3D to maximize effective use of screen space
• Implemented new innovations
• Works toward further innovation
• Need more examples of real-world use
• Need usability studies

35
Bederson Hollan Pad

• Beyond the desktop metaphor
• Informational physics
• Representational cues a natural product of
  interaction (e.g., dog-eared books)
• History-enriched digital objects
• Believes desktop metaphor underutilizes
  mechanisms of new media
• Too much information

36
Pad

• Not an application
• Component employed by other applications
• Supports text, files, hypertext, graphics and
  images
• Semantic zooming different representations of
  objects at different zoom levels

37
Interface

• Graphical interface based on zooming
• Attempts to tap into our natural spatial ways of
  thinking
• Intuitive interface for finding information in
  large dataspace on small display
• Interface design as a development of a physics
  of appearance and behavior for collections of
  informational objects.

38
Physics
39
Pad Physics

• View information at different scales
• Relationship between elements in application
• Furnas DOI approach
• Focus Context
• Zoom
• Smooth animation on zoom maintains context

40
Potential Implementations

• Hypertext
• Parent-child relationship between links
• Recommender system
• Directory browser
• Precursor to PhotoMesa

A Zooming Web Browser, Bederson et al, 1996
41
Physics v. Metaphor

• Initial use of metaphor restricts potential
  functionality
• Dead metaphors?
• Files, menus, windows, desktop
• But these metaphors work!
• Combine physics with desktop metaphor for
  hypertext application, others

42
Conclusions

• Learnability consequences
• Need more applications utilizing Pad
• Usability studies

43
Robertson et al Data Mountain

• novel user interface for document management
  designed specifically to take advantage of human
  spatial memory.
• Attempts to apply mental mapping of physical
  space to virtual space
• i.e. finding a piece of paper using spatial
  memory

44
Key Attributes

• Place documents arbitrarily
• 2D interaction in 3D space
• Active page avoidance
• Audio cues
• Page titles
• Landmarks

45
Document Placement

• Arbitrary placement allows users to create their
  own organizational schemes
• Act of placement aids spatial memory

46
3D Space

• 2D interaction allows use of familiar mouse
• Cues include perspective view, occlusion,
  landmarks and shadows
• Can display more information without increasing
  cognitive load
• Pre-attentive processing of perspective views

47
Page Avoidance Behavior

• Initially, did nothing
• System was lifeless, weakened metaphor
• Simulated tall grass
• Two pages can end-up in same place, occlusion
• Minimum distance between pages
• Gives consistent feedback
• Prevents pages from being obscured

48
Audio Cues

• Audio cues are meant to reinforce visual cues
• Are they a bit much?
• Perhaps they would be more useful if more subtle

49
Page Titles

• Similar to Tool Tips, but hover time too long
• Initially, the titles were not connected to the
  page
• Difficult to determine thumbnail the title
  applied to

• Second design addresses those issues
• halo
• titles appear immediately

50
Landmarks

• Surface has colored areas to facilitate
  conceptual organization
• Landmarks can assist in spatial navigation
• Add visual cues to improve recall

51
User Study

• Our first user study yeah!
• Compares Data Mountain with Internet Explorer 4
• Users organized 100 pre-selected pages and then
  retrieved them with either title, summary,
  thumbnail or all three as cues

52
IE4 v. Data Mountain

• IE4 excelled with title cues, but other cues were
  deleterious to retrieval

53
IE4 v. Data Mountain, contd

• Data Mountain 2 (with page avoidance and halos)
  showed significant improvements over earlier
  version especially in incorrect retrievals

54
User Study Flaws

• Impact of time between storage and retrieval?
• Retrieval tests should be based on information
  need, not simple cues like Kobsa paper from
  last week

55
Conclusions

• Need better user study
• Should incorporate features requested by users
  (i.e. group labels, ability to move landmarks)
• User study helps designers learn from others
  mistakes

56
Bederson Fisheye Menus

• Dynamically change the size of a menu item to
  provide a focus area around the mouse pointer,
  while allowing all menu items to remain on screen

57
Menu Design

• Standard menu design appropriate for selecting
  operations
• Well grouped
• In consistent locations

58
Menu Design, contd

• Menus now include data items (i.e.
  bookmarks/favorites)
• Tend to be longer
• Users are less likely to know text of each item
• Supporting browsing is important
• Length is crucial in usability

59
Other Menu Approaches

• Scrolling Arrows
• Hierarchical
• Scrollbars

60
Scrolling Arrows

• User required to move mouse to arrows to scroll
• Access time is proportional to length

61
Hierarchical

• Requires user to know what group desired element
  is in
• Works well if user knows structure
• Okay for stable menus
• Uncommon for data-driven menus (what about
  Favorites/Bookmarks?)

62
Scrollbars

• Better search time than arrows fixed
• But rarely used for pull-down menus in
  applications

63
Fisheye Menu Design

• All elements are visible but items near cursor
  are full-size, further away are smaller
• bubble of readable items move with cursor

64
Distortion Function

• Maximum font size
• Focus length (number of items at full size)
• Together these control the trade-off between the
  number of items at full size and the size of the
  smallest item
• Focus length ? small items ? distortion ?

65
Alphabetic Index

• Indexes can decrease search time
• Index is positioned so that if cursor is aligned
  with it, the item will be the first one for that
  letter
• Initial design had current position, but this was
  confusing because it moved

66
Focus Lock

• Item are difficult to select because small mouse
  movements result in change of focus
• Focus Lock allows user to freeze focused area
  and move mouse freely
• If cursor moves outside focus area, the area will
  expand, and perhaps push ends off the screen
• Demo http//www.cs.umd.edu/hcil/fisheyemenu

67
Evaluation

• Small 10 person test, ½ programmers
• Compared hierarchy, fisheye, scrollbar, and arrow
  bar (scrolling arrows)
• Looking for trends

68
Evaluation Findings

• Hierarchy was best for goal-directed task
• Fisheye preferred for browsing
• Not significantly though
• Non-programmers rated it much lower than
  programmers
• Only one person discovered Focus Lock
• Index was thought to be interactive

69
Conclusions

• Author sees needs for improvements
• Focus lock should be more intuitive
• Could be useful for long menus, such as fonts,
  favorites, etc. if implemented well
• Similar viz is part of Mac OS X!

70
Bederson PhotoMesa

• Zoomable Image Browser
• Quantum Treemaps
• Variation on existing treemaps
• Difference objects of elemental size
• Build on Ordered Treemap algorithm, but guarantee
  aspect ratio
• Bubblemaps also quantum, but non-rectangular use
  space more efficiently

71
PhotoMesa
http//www.cs.umd.edu/hcil/photomesa
72
Motivation

• Image browsing
• Regardless of IR system, must browse results
• Often browse along with other people
• Current systems
• Grid with vertical scrollbar
• Custom albums time-consuming
• Concentrate on images

73
Goal

• Automatically lay out images
• Use immediately little setup time
• Large set of images in context

74
Organization of Images

• Default groupings are by directory, time, or
  filename
• No hierarchy
• Makes managing photos difficult can delete, but
  reorganization a problem
• Can add metadata

75
PhotoMesa Interface

• Zooming primary presentation mechanism
• Zoom in, zoom out on levels of thumbnails
• Quickly drill down to individual picture (at full
  resolution)
• Outline shows area of next zoom level
• History of views
• Thumbnail zooms up when hover w/cursor
• Export images
• Cluster by filename

76
Focus Context

• Animated zoom
• Temporary magnification
• Common uses character map

77
Quantum v. Ordered Treemaps

• Quantum Treemaps better in terms of aspect ratio
• But, QT wastes space
• Most importantly, QT always produce layouts where
  elements are the same size

78
Bubblemaps

• Like Quantum Treemaps, elements guaranteed to be
  same size
• Arbitrary shapes
• No wasted space
• May be harder to visually parse than QT

79
Use of PhotoMesa

• No controlled studies
• Bederson uses with daughter
• Members of Bedersons lab

80
Future Work

• Further usability studies
• Additional image types
• Currently JPEG, GIF only
• Performance

81
Overall Conclusions

• The techniques all facilitate user comprehension
  the relationship between selected information and
  other items
• Screen real estate use
• Zoom and focus context combined maximize screen
  space
• Depending on the application, adding distortion
  can be helpful