collapse-to-zoom patrick baudisch microsoft 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

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

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 main 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-zoom for interaction semantic thumbnails fits page to screen width fishnet fits page to screen height ++

thanks! try it out: demo reception tonight 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]

next visit of that page: page is already pre-collapsed which leads to fully readable detail view User uses expand-and-zoom gesture… User can follow links directly from within overview Content area expands more and is now readable …make page content grown. Now collapses “menu” column user collapses “archive” column to… collapse- to-zoom: walk through 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