Transcript Collapse-to-zoom - Patrick Baudisch

collapse-to-zoom
expand
patrick baudisch
collapse
microsoft research,
visualization & interaction research
xing xie,
chong wang,
and wei-ying ma
short demo
(there will be a second, slightly longer demo
at the end of this talk)
contents
• short demo
• the problem: viewing large documents on
small screens
• related work: overviews, fisheyes,…
• collapse-to-zoom: removing irrelevant
content…
• …in a single pen stroke (marquee menu)
• slightly longer demo
• conclusions
scenario: web pages
don’t fit on PDA screen
scenario: web pages
don’t fit on PDA screen
related work
• approaches
•
•
•
•
device-specific authoring
multiple-device authoring
automatic re-authoring
and client-side navigation
thumbnail views
collapse-to-zoom
related work: zooming
• [Xie etc. al, www’04]:
tap to zoom into a tile
related work: overview+detail
[O’Hara et. at CHI 99]:
readable text on hover
related work: multiple foci
[Wobbrock++ UIST’02]:
Web thumb
limitation of zooming
• page content is
unreadable…
• …so how can users
know where to zoom
in?
collapse-to-zoom
collapse-to-zoom
• allow users to use their knowledge
about relevant areas  zoom in
(arbitrary rectangular regions)
.
collapse-to-zoom
• allow users to use their knowledge
about relevant areas  zoom in
• …but also allow leveraging their
knowledge about what is not
relevant  collapse
collapse-to-zoom
• always show full page width
• use freed space to grow
remaining (relevant) content
collapse-to-zoom
• provide visual context at
all times: placeholders
collapse-to-zoom
• allow bookmarking collapsed state
marquee menu
marquee menu:
there are 4 ways to select
• today: no distinction between
the four ways of opening
rectangular selection
the name of the game
• photoshop: “marquee selection”
• “marking menu”:
selecting commands with a pen stroke
• combine both  marquee menu
marquee menu: direction
selects 1 of 4 commands
expand-cell
expand&zoom
expand
collapse
collapse-column collapse-cell
slightly longer demo
implementation
• runs on desktop / tabletPC
• page-splitting based on DOM
• limitation: can’t start drag over link
•  user study
next steps:
transfer to smartphone
• generic
• label cells with numeric
codes and let users
enter cell label [Paek et
al. CSCW 2004]
• simple: reduce to 1D
• collapse column and
expand column
•  webTV
next steps:
integrating it all
+
fishnet
fits page to screen height
+
collapse-to-zoom
for interaction
semantic thumbnails
fits page to screen width
thanks!
• try it out: demo reception tonight
• http://patrickbaudisch.com
• thanks to
xing xie
chong wang,
and wei-ying ma
• MSR VIBE
related work: halo
peripheral awareness indicator
• keep it off-screen,
but show the user
• [baudisch CHI 2003]
collapseto-zoom:
walk
through
• zoom into
relevant areas
• and remove
irrelevant
areas (such as
“menu” and
next
which
User
Content
…make
thumbnail
visit
collapses
uses
can
leads
page
area
of
follow
expand-and-zoom
view:
that
toexpands
content
fully
links
page:directly
grown.
more
“ad” columns) user
“archive”
readable
from
Now
unreadably
collapses
column
detail
overview
small
“menu”
view
to… column
page
gesture…
and
iswithin
isnow
already
readable
pre-collapsed
collapse-to-zoom
• in order to make something bigger we need
to make something else smaller
related work: search terms
• [baudisch++AVI’04]
fishnet
• [woodruff++CHI’02]
popout prism/
enhanced thumbs
• require search terms