Zooming, Focus Context, and Distortion - PowerPoint PPT Presentation

About This Presentation
Title:

Zooming, Focus Context, and Distortion

Description:

Title: Zooming, Focus + Context, and Distortion Author: lzagreus Last modified by: lzagreus Created Date: 3/7/2002 10:37:27 PM Document presentation format – PowerPoint PPT presentation

Number of Views:276
Avg rating:3.0/5.0
Slides: 82
Provided by: lzag
Category:

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com