Slicing*-Tree Based Web Page Transformation for Small Displays

1
Slicing-Tree Based Web Page Transformation for
Small Displays

• Xiangye Xiao, Qiong Luo, Dan Hong, Hongbo Fu
• Contact xiaoxy_at_cs.ust.hk
• Department of Computer Science
• Hong Kong University of Science and Technology
  (HKUST)

2
Overview

• Problem
• Web browsing on small displays
• Small screen
• Limited bandwidth and input devices
• Our solution
• Divide a Web page into a multi-level hierarchy of
  smaller blocks with balanced fanout and height
• Make each transformed page fit the screen
• Use textually-enhanced thumbnails

3
Example Transformed Pages
Pen Tap
Pen Tap
Pen Tap



(a) (b)
(c) (d)

• (a)(c) textually-enhanced thumbnails with
  multiple hyperlinks, displayed when corresponding
  sections are pen-tapped
• (d) a block from the original page

4
Example Textually-Enhanced Thumbnail
Thumbnail of the part bordered with red lines
The thumbnail is enhanced by the textual summary
(keywords) of the corresponding part

5
System Architecture

• Forwards the request and transforms the received
  Web page into a tree hierarchy of thumbnail index
  pages and leaf sub-pages.
• Returns the root index page to the PDA for
  display and stores the other sub-pages locally.
• Serves the user the corresponding sub-page that
  has been stored on the proxy, when the user
  selects a region in the index page.

6
Page Transformation Process
7
Example Slicing-Tree Representation

• The leaf blocks bordered with blue lines on the
  left correspond to the leaf nodes of the
  slicing-tree on the right.
• The adjacent small blocks are merged according to
  their sizes, coherence of semantics, and layout.
• The merged larger blocks correspond to the
  internal nodes of the slicing-tree.

8
Experimental Evaluation

• Experimental setup
• Subjects 2 groups of 5 grad. students each,
  browse on PDAs with/without our system on proxy
• Devices HP iPAQ hx4700 Pocket PC
• Test data set 15 Web pages 10 browsing tasks
• Experimental result
• Task completion time achieved shorter task
  completion time in all of the 10 tasks.
  Improvement focused search tasks 47 reading
  tasks 22.7
• Input effort reduced of pen moves in 9 out of
  10 tasks. Improvement focused search tasks 50
  reading tasks 28.4
• Bandwidth consumption saved bandwidth
  consumption in 7 out of 10 tasks, and the average
  saving was 18.9.

9
Conclusion

• Slicing-tree based transformation method
  improves Web browsing on PDAs
• Multi-level hierarchy balances fanout and height.
• Horizontal and vertical scrolling is nearly
  eliminated.
• Textually-enhanced thumbnails provide better
  overviews and contexts to sub-pages.

Full paper available at http//www.cs.ust.hk/xiao
xy/