1 / 29

collapse-to-zoom

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

janice
Download Presentation

collapse-to-zoom

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. expand collapse collapse-to-zoom patrick baudischmicrosoft research,visualization & interaction research xing xie,chong wang,and wei-ying ma

  2. short demo (there will be a second, slightly longer demo at the end of this talk)

  3. 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

  4. scenario: web pages don’t fit on PDA screen

  5. scenario: web pages don’t fit on PDA screen

  6. related work • approaches • device-specific authoring • multiple-device authoring • automatic re-authoring • and client-side navigation thumbnail viewscollapse-to-zoom

  7. related work: zooming • [Xie etc. al, www’04]:tap to zoom into a tile

  8. related work: overview+detail • [O’Hara et. at CHI 99]: readable text on hover

  9. related work: multiple foci • [Wobbrock++ UIST’02]: Web thumb

  10. limitation of zooming • page content is unreadable… • …so how can users know where to zoom in? ?

  11. collapse-to-zoom

  12. collapse-to-zoom • allow users to use their knowledge about relevant areas  zoom in (arbitrary rectangular regions) .

  13. 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

  14. collapse-to-zoom • always show full page width • use freed space to grow remaining (relevant) content

  15. collapse-to-zoom • provide visual context at all times: placeholders

  16. collapse-to-zoom • allow bookmarking collapsed state

  17. marquee menu

  18. marquee menu:there are 4 ways to select • today: no distinction between the four ways of opening rectangular selection

  19. the name of the game • photoshop: “marqueeselection” • “marking menu”:selecting commands with a pen stroke • combine both  marquee menu

  20. expand-cell expand&zoom collapse-column collapse-cell ds an expand m com collapse main marquee menu: direction selects 1 of 4 commands

  21. slightly longer demo

  22. implementation • runs on desktop / tabletPC • page-splitting based on DOM • limitation: can’t start drag over link •  user study

  23. 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

  24. next steps:integrating it all + + collapse-to-zoomfor interaction fishnetfits page to screen height semantic thumbnailsfits page to screen width

  25. thanks! • try it out: demo reception tonight • http://patrickbaudisch.com • thanks toxing xiechong wang,and wei-ying ma • MSR VIBE

  26. related work: halo peripheral awareness indicator • keep it off-screen,but show the user • [baudisch CHI 2003]

  27. User can follow links directlyfrom within overview User uses expand-and-zoomgesture… thumbnail view:unreadably small user collapses“archive” column to… which leads to fullyreadable detail view next visit of that page:page is already pre-collapsed …make page content grown.Now collapses “menu” column Content area expands more and is now readable collapse-to-zoom:walkthrough • zoom into relevant areas • and remove irrelevant areas (such as “menu” and “ad” columns)

  28. collapse-to-zoom • in order to make something bigger we need to make something else smaller

  29. related work: search terms • [baudisch++AVI’04]fishnet • require search terms • [woodruff++CHI’02] popout prism/ enhanced thumbs

More Related