collapse-to-zoom patrick baudisch microsoft research, visualization & interaction research xing...
DESCRIPTION
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 conclusionsTRANSCRIPT
collapse-to-zoom
patrick baudischmicrosoft research,visualization & interaction research
xing xie,chong wang,and wei-ying ma
collapse
expand
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 viewscollapse-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
collapse-cell
expand-cell
collapse-column
expand&zoom
expand
collapse
an
mai
n
com
ds m
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
collapse-to-zoomfor interaction
semantic thumbnailsfits page to screen width
fishnetfits page to screen height
+ +
thanks!• try it out: demo reception tonight• http://patrickbaudisch.com
• thanks toxing xiechong wang,and wei-ying ma
• MSR VIBE
related work: haloperipheral awareness indicator• keep it off-screen,
but show the user• [baudisch CHI 2003]
next visit of that page:page is already pre-collapsedwhich leads to fullyreadable detail viewUser uses expand-and-zoomgesture…User can follow links directlyfrom within overviewContent area expands moreand is now readable…make page content grown.Now collapses “menu” columnuser collapses“archive” column to…
collapse-to-zoom:walkthrough
thumbnail view:unreadably small
• zoom into relevant areas
• and remove irrelevant areas (such as “menu” and “ad” columns)
collapse-to-zoom• in order to make something bigger we need
to make something else smaller
related work: search terms• [baudisch++AVI’04]
fishnet
• require search terms
• [woodruff++CHI’02] popout prism/ enhanced thumbs