summary thumbnails readable overviews for small screen web
summary thumbnails readable overviews for small screen web browsers heidi lam university of british columbia patrick baudisch microsoft research CHI 2005 unreadable
readable unreadable
• any screen size • any font size
demo
related work
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 et. al UIST’ 02]: Web thumb
related work: popouts • popout prism [suh, et al. , chi’ 02] • enhanced thumbnails
related work: fisheyes • document lens [robertson, uist’ 93] • unifying presentation space [carpendale, uist’ 01] • focus+context sketching on a Pocket PC [lank, chi’ 04]
related work: fisheyes works well to reduce page length applying it to page width works not so well forces users to scroll for each line fishnet [Baudisch, AVI 2004]
related work: collapse-to-zoom [UIST 2004]
implementation
implementation 1 load html mars mission html 1. load html in web browser control 2 process html 2. process html to render text readable (and reduce text to fit) 3. export the new html to client 4. client does scaling mars m 3 export html 4 render page at client
original page processing html for each object on the web page • count # of lines • increase font size • reduce text to preserve # of lines • remove words from the end • or, remove the most commonly occurring word based on a frequency dictionary scale font up reduce text to fit
benefits? ü no horizontal scrolling ü preservation of original page layout ü readable text • but wait… so much missing text!
user study
user study hypotheses 1. preserving original web page layout is important to locate information 2. readable text reduces the need to zoom 3. effects of text reduction are acceptable
user study design – I • task: generic target search the experience of browsing pages designed for the desktop • page gathering: • • task creation: • • interviewed 12 desktop users picked 3 -5 pages from browser history 45 page overall gathered URLs, tasks and expected targets summarized task description for each page and target study set generation: • • removed 1 outlier page 44 pages separated into 4 sets of 11 pages per set
user study design – II • design: within subject • participants: 11 externally recruited • interfaces: • • • thumbnail summary thumbnail single-column • desktop • dependent variables: • • • task time and accuracy amount of zooming amount of scrolling order of interface presentation counterbalanced order of page presentation randomized
text we got during page gathering Ready To Start short summary we added
Ready To Start thumbnail interface
Ready To Start summary thumbnail interface
Ready To Start single column interface
Ready To Start desktop interface
results task time Mean task times (s) 25 20 15 10 5 0 Thumbnail Summary Th. Single Column Desktop
results task time Mean task times (s) ANOVA (p =. 04) 25 20 15 10 5 0 Thumbnail # of zooming events t-test (p <. 001) Summary Th. Single Column Desktop
results % error preference # of participants 10 8 6 4 2 0 Thumbnail Summary summary Thumbnail Single Column
current/future work
add navigation concept maybe add fishnet
how to do it conversion service • using proxy server • “so how fast are you? ” 6 sec/page • first need faster shallow parser • (but can convert 22, 000 legacy pages)
how to do it on device • might work better • DOM there anyway • need full text anyway
other app scenarios • TV-based browsers: same problem in bigger • Browse through Word document • On desktop: present search results
read more & try out patrickbaudisch. com/projects thanks to VIBE
END
The other users • 300 -500 million PCs vs. 1. 5 billion cell phones • phone = only access to the digital world • Not just information workers • how much of the digital world can you really see through our current user interfaces?
text reduction • current • cut off at the end of paragraph • OR remove common words • future • use something smarter (but what we have works surprisingly well) • however • goal is to show users where to zoom in • may not be a summarizer
related work: multi blending [CHI 2004] problem with traditional alpha blending: is this bush in palette or background? solution multiblending: glass palette distinguished from background photo & background more recognizable
related work: peep hole • Ka-Ping Yee [CHI’ 03]
thunderhawk summary thumb
other document viewers • Word on Smartphone has same problem • use summary thumbnails to find the page you care about (easy: recognize layout & words) • then zoom in
- Slides: 49