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