![Page 1: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/1.jpg)
W4A2006W4A2006
A Web Browsing SystemA Web Browsing Systembased on Adaptive Presentation ofbased on Adaptive Presentation ofWeb Contents for Cellular PhonesWeb Contents for Cellular Phones
Yuki Arase*, Takuya Maekawa*, TakahiroHara*, Toshiaki Uemukai**, Shojiro Nishio*
* : Osaka University** : KDDI R&D Laboratories Inc.
![Page 2: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/2.jpg)
W4A2006
Web Browsing Using Web Browsing Using Cellular Cellular PhonesPhones
Mobile users can browse web pagesdesigned for desktop PCs.
[Problems]Small screenPoor interfaces
![Page 3: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/3.jpg)
W4A2006
Web Page StructureWeb Page StructureWeb page is composed of differentcomponents.
Component = Information block
Site directory
Search form
News
![Page 4: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/4.jpg)
W4A2006
Two Step for BrowsingTwo Step for BrowsingHow to Browse
1. Find an objectivecomponent
2. Read within theComponentin detail
![Page 5: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/5.jpg)
W4A2006
Two Step for BrowsingTwo Step for BrowsingHow to Browse
1. Find an objective component
2. Read within the Component in detail
![Page 6: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/6.jpg)
W4A2006
GoalGoal
Display the overview of a page→ Reduce scroll to find an objective
componentPresent the component adapted toits characteristics→Reduce scroll to read the component
A Web browsing system based on Adaptive Presentation
of Web Contents for Cellular Phone
Overview
![Page 7: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/7.jpg)
W4A2006
Components ClassificationComponents ClassificationComponents have common characteristicsaccording to their contents.
From 15 typical Web sites, found componentsclassification
TextText&ImageImageLink&ImageVertical link setVertical&horizontallink set
![Page 8: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/8.jpg)
W4A2006
Components ClassificationComponents ClassificationComponents have common characteristicsaccording to their contents.
From 15 typical Web sites, found componentsclassification
TextText&ImageImageLink&ImageVertical link setVertical&horizontallink set
![Page 9: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/9.jpg)
W4A2006
Components ClassificationComponents ClassificationComponents have common characteristicsaccording to their contents.
From 15 typical Web sites, found 6 componentsclassification
TextText&ImageImageLink&ImageVertical link setVertical&horizontallink set
![Page 10: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/10.jpg)
W4A2006
Reading style of each component classReading style of each component class
Users' reading behaviors change according tocomponents' class.[Example]
Text&Image→ looks at images as well as reading texts
Vertical link set→ searches and selects link
By adaptively presenting a component according to the users' reading behavior,
scroll operations can be reduced.
![Page 11: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/11.jpg)
W4A2006
Preliminary ExperimentPreliminary Experiment[Purpose] Determine how to present a component according to its class.
[Differences in the style for searching links]Thoroughly read each text associated with a linkSkim through the component
Zigzag scroll ishard to readcomponents.
○ImageLink set
Reading speeddiffers amongindividuals
×TextText&Image
RemarksResultComponent’s class
![Page 12: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/12.jpg)
W4A2006
System DesignSystem Design
WWW・URL ・URL
・Screenshot・Informationon components
Client Server
OverviewAdaptivepresentation ofcomponent
Extract componentsDeterminecomponents’ classes
![Page 13: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/13.jpg)
W4A2006
Page OverviewPage Overview
Overview Zoom in
![Page 14: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/14.jpg)
W4A2006
Adaptive PresentationAdaptive Presentation[Text component]
Users read “Text components” by scrollingmanually.By “Jump” function, reduce scroll operations.
Jump function
![Page 15: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/15.jpg)
W4A2006
Adaptive presentationAdaptive presentation[Image component]
Presented by auto-scrollingZoomed out to prevent zigzag scroll
![Page 16: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/16.jpg)
W4A2006
Adaptive presentationAdaptive presentation[Text&Image component]
Users read byscrolling manually.Switch over imageswithin the componentsby pressing a key.
![Page 17: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/17.jpg)
W4A2006
Adaptive presentationAdaptive presentation[Link set component]
Link&ImageVertical link setVertical&horizontal link set
Reduce scroll operations by auto-scrolling.Determine the speed and zoom ratio according tocontents of the component.
![Page 18: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/18.jpg)
W4A2006
DemonstrationDemonstration
![Page 19: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/19.jpg)
W4A2006
ConclusionConclusionWe designed and implemented adaptivepresentation system of Web contents for Webbrowsing using cellular phones.
OverviewPresent components according to their class
[Future Work]User experimentsVerify an appropriate speed for auto-scrolling
![Page 20: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/20.jpg)
W4A2006
Adaptive presentationAdaptive presentation[Decision of auto-scrolling speed]
Comfortable speed is different each ofcomponent’s class and user’s reading style.→A user selects appropriate α value.
Thoroughly reading link textsSkimming through the component
BreadthIDSpeed
!=
)areaunit per characters ofnumber the(
)sec 1per recognizecan human characters ofnumber the("
!"#
=)('
)('
scrollingHorizontalHeightscomponent
scrollingVerticalWidthscomponentBreadth
!!!!
!!!!
![Page 21: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/21.jpg)
W4A2006
Extracting ComponentsExtracting ComponentsWeb page are partitioned into small blocks.
Using HTML DOM TreeObjective size of component : 1~5 times of display
A
B
ED
C
F G
AB
C
D E
F G
A
B
ED
C
F G
A
B
ED
C
F G
![Page 22: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/22.jpg)
W4A2006
Decision of componentsDecision of components’’ classes classes
![Page 23: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/23.jpg)
W4A2006
Preliminary ExperimentPreliminary Experiment[Purpose] Determine how to present a component according to its
class.[Settings]
16 subjects selected the best pattern for auto-scrollingfor each component class.
SpeedZoom ratio
Experimental systemdetermines a scroll path
![Page 24: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/24.jpg)
W4A2006
System DesignSystem Design
WWW・URL ・URL
・Screenshot・Informationon components
Client Server
OverviewAdaptivepresentation ofcomponent
Extract componentsDeterminecomponents’ classes
![Page 25: A Web Browsing System based on Adaptive Presentation of ... · Adaptive presentation [Link set component] Link&Image Vertical link set Vertical&horizontal link set Reduce scroll operations](https://reader036.vdocuments.pub/reader036/viewer/2022071219/605666501a69c12cbb71e0ed/html5/thumbnails/25.jpg)
W4A2006
Related Work : Provide Overview [Chen03]Related Work : Provide Overview [Chen03]
When a user selects a component fromoverview, that area is zoomed in.→Reduce scroll operations to find a componentHowever…
Did not focus on reducing complicated scrolloperations to read within components.