collapse-to-zoom

1
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 dont fit on PDA screen
5
scenario web pages dont 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, www04tap to zoom into a tile

8
related work overviewdetail

• OHara et. at CHI 99 readable text on hover

9
related work multiple foci

• Wobbrock UIST02 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 menuthere are 4 ways to select

• today no distinction between the four ways of
  opening rectangular selection

19
the name of the game

• photoshop marquee selection
• marking menuselecting commands with a pen
  stroke
• combine both ? marquee menu

20
marquee menu direction selects 1 of 4 commands

21

• slightly longer demo

22
implementation

• runs on desktop / tabletPC
• page-splitting based on DOM
• limitation cant start drag over link
• ? user study

23
next stepstransfer 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 stepsintegrating 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
collapse-to-zoomwalkthrough

• 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

• baudischAVI04fishnet
• require search terms

• woodruffCHI02 popout prism/ enhanced thumbs