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.

W4A2006

Web Browsing Using Web Browsing Using Cellular Cellular PhonesPhones

Mobile users can browse web pagesdesigned for desktop PCs.

[Problems]Small screenPoor interfaces

W4A2006

Web Page StructureWeb Page StructureWeb page is composed of differentcomponents.

Component = Information block

Site directory

Search form

News

W4A2006

Two Step for BrowsingTwo Step for BrowsingHow to Browse

1. Find an objectivecomponent

2. Read within theComponentin detail

W4A2006

Two Step for BrowsingTwo Step for BrowsingHow to Browse

1. Find an objective component

2. Read within the Component in detail

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

W4A2006

Components ClassificationComponents ClassificationComponents have common characteristicsaccording to their contents.

From 15 typical Web sites, found componentsclassification

TextText&ImageImageLink&ImageVertical link setVertical&horizontallink set

W4A2006

Components ClassificationComponents ClassificationComponents have common characteristicsaccording to their contents.

From 15 typical Web sites, found componentsclassification

TextText&ImageImageLink&ImageVertical link setVertical&horizontallink set

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

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.

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

W4A2006

System DesignSystem Design

WWW・URL ・URL

・Screenshot・Informationon components

Client Server

OverviewAdaptivepresentation ofcomponent

Extract componentsDeterminecomponents’ classes

W4A2006

Page OverviewPage Overview

Overview Zoom in

W4A2006

Adaptive PresentationAdaptive Presentation[Text component]

Users read “Text components” by scrollingmanually.By “Jump” function, reduce scroll operations.

Jump function

W4A2006

Adaptive presentationAdaptive presentation[Image component]

Presented by auto-scrollingZoomed out to prevent zigzag scroll

W4A2006

Adaptive presentationAdaptive presentation[Text&Image component]

Users read byscrolling manually.Switch over imageswithin the componentsby pressing a key.

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.

W4A2006

DemonstrationDemonstration

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

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

!!!!

!!!!

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

W4A2006

Decision of componentsDecision of components’’ classes classes

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

W4A2006

System DesignSystem Design

WWW・URL ・URL

・Screenshot・Informationon components

Client Server

OverviewAdaptivepresentation ofcomponent

Extract componentsDeterminecomponents’ classes

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.