summary thumbnails readable overviews for small screen web browsers by Sfusaro

VIEWS: 8 PAGES: 49

									summary
thumbnails
readable overviews for small screen web browsers




heidi lam
university of
british columbia

patrick baudisch                                   readable
                             unreadable
microsoft research

CHI 2005
             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
                                       mars m
2. process html to render text
   readable (and reduce text to fit)

                                              3 export html
3. export the new html to client
                                        4 render page at client
4. client does scaling
                                   original page



processing html
for each object on the web page
                                   scale font up
   • count # of lines
   • increase font size
   • reduce text to preserve #
      of lines
     • remove words from the end
     • or, remove the most         reduce text to fit
       commonly occurring word
       based on a frequency
       dictionary
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:
         •   interviewed 12 desktop users
         •   picked 3-5 pages from browser history  45 page overall
         •   gathered URLs, tasks and expected targets

     •   task creation:
         •   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:
                                order of interface presentation
   •   thumbnail
                                counterbalanced
   •   summary thumbnail
   •   single-column            order of page presentation
                                randomized
   •   desktop

• dependent variables:
   •   task time and accuracy
   •   amount of zooming
   •   amount of scrolling
                 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                         25


                                       20




                 Mean task times (s)
                                       15


                                       10


                                       5


                                       0
                                            Thumbnail   Summary Th. Single Column   Desktop
results
         task time                               25



             ANOVA
                                                 20




                        Mean task times (s)
            (p = .04)                            15


                                                 10


                                                  5


                                                  0
                                                      Thumbnail   Summary Th. Single Column   Desktop


# of zooming events                              14
                                                 12
                           # of zooming events




              t-test
                                                 10
                                                 8
           (p < .001)                            6
                                                 4
                                                 2
                                                 0
                                                          Thumbnail                Summary Th.
results
    % error                            16
                                       14
                                       12
                                       10




                             % error
                                        8
                                        6
                                        4
                                        2
                                        0
                                            Thumbnail     Summary     Single Column      Desktop
                                                          Thumbnail




  preference                           10
               # of participants




                                       8
                                       6
                                       4

                                       2
                                       0
                                            Thumbnail
                                              Thumbnail       Summary
                                                                summary               Single
                                                                                      Single Column
                                                              Thumbnail
                                                                Thumbnail             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

								
To top