Vous êtes sur la page 1sur 5

2009 International Conference on Networks Security, Wireless Communications and Trusted Computing

A New Mobile Web Presentation with Better User


Experience
Yunpeng Xiao Yang Tao Qian Li
Software College, Chongqing Software College, Chongqing Department of Academic Affairs
University of Posts and University of Posts and Chongqing University of Posts and
Telecommunications Telecommunications Telecommunications
Chongqing, 400065, China Chongqing, 400065, China Chongqing, 400065, China
shineagle2005@hotmail.com taoyang64@cta.cq.cn liqian31992@hotmail.com

Abstract—Mobile handheld device, as small screen, limited user users must manually scroll through the various parts of the
interface and hardware power, can not browse web pages page.
designed for PCs comfortably. By means of mobile web 2.0, a new
mobile web presentation with better user experience is proposed. A number of researches have been proposed with varying
A thumbnail view of the original web page is firstly presented to focus on splitting the existing web page into small blocks
mobile user. While mobile user browsing the thumbnail view which are suitable for displaying on mobile handheld devices.
page, moving his mouse pointer, the original block which the However, using these systems, mobile user’s behavior is very
pointer is focusing will be gotten from the proxy asynchronously different from the behavior when he/she using PC for web
and zoomed in automatically. The mode does not charge the browsing. On the other hand, these systems also change the
layout of the web page and make mobile user can browse specific original layout of web page. By questionnaire, we find few
web information block clearly and conveniently. Using the mode, website supporters agree with modifying their pages by third
mobile user’s behavior is very similar to PC user’s. Moreover, a party.
prototype system and a set of evaluation experiments have been
implemented to verify the scheme and show its values in both In this paper, a new mobile web presentation with better
technical and economical viewpoints. user experience based on mobile web 2.0 is proposed; firstly,
an original web page is converted to a thumbnail view page and
Keywords-Mobile web2.0; page block imaging; page segmentat- is displayed for quick overview; then the original web page is
ion; web page adaptation blocked using a vision based page segmentation method; for
keeping each visual block’s original sharp, page block imaging
I. INTRODUCTION is used subsequently; afterwards, AJAX code [2] is generated
and inserted into the thumbnail page; when the thumbnail page
Nowadays, more people are using their mobile handheld is sent to mobile client and is being viewed, the original visual
devices for web surfing when they are on the move. However, block which the mouse pointer is focusing will be gotten from
in mobile computing environments, mobile handheld devices proxy side asynchronously and zoomed in automatically by
with constrained functionality such as small screen, limited AJAX running on mobile client; finally, a prototype system
computing power and so on, restrict the services provided for and a set of evaluation methods have been implemented.
mobile web surfing. It is difficult for mobile users to browse
large web page designed for PC users comfortably. The rest of the paper is organized as follows. Section II
presents related work. Section III introduces system framework
The main difficulties can be ascribed to four constrained in detail. Section IV presents system implementation. Section
challenges on mobile devices, namely, limited access V describes a set of experimental evaluations. Finally, we give
bandwidth, poor hardware power, small screen and restrict conclusions and remarks about our future work in Section Ď.
operational interface of mobile devices. As the appearance of
high bandwidth wireless network, like WiFi, WiMAX and 3G
etc., and thank to the galloping development of hardware,
bandwidth and hardware power do not constrain mobile web
surfing by now. But the small screen and limited user
operational interface are still the crucial problems that restrain
overspreading of the usage. And we can foresee that the two
problems will not be solved in the near future. To locate his/her
interested content, mobile user has to perform numerous (a) (b) (c)
operations that include a series of time-consuming and tiring Figure 1. A normal page (http://www.yahoo.com) (a) shown on a normal
scrolling through an entire page. Figure 1a shows a sample desktop PC, (b) shown on a Google android, (c) shown as thumbnail view on
portal page which is viewed on a typical desktop computer. a Google android.
Figure 1b displays this page shown on Google android [1]. The
small screen can only display a slice of the information, so

978-0-7695-3610-1/09 $25.00 © 2009 IEEE 137


DOI 10.1109/NSWCTC.2009.333
II. RELATED WORK Proxy
Thumbnail generator
There are a number of researches concerning various foci
on web page adaptation for mobile devices. We look into these
Web server Page blocker
related works in this section. Session-based
user Block list
Yu Chen et al. proposed a scheme which determines a web management Page block imaging
page’s structure by analyzing the page layout and then uses a AJAX filter
page-splitting algorithm to effectively partition the page into a AJAX code generator
series of tailored content blocks [3]. We proposed a layered Mobile client
web page adaptation engine based on link block and content Servlet components
block, which split a page into link blocks and content blocks,
reconstructed them using layered network thinking [4]. The Figure 2. System framework.
main problem with the two methods is that users must
frequently switch between an upper layer link view and the
detailed content layer to read all the content. Another similar TABLE I. BLOCK LIST
method, the web browser proposed by Yonghyun Hwang et al.
Block Coverage Region (Pixel) Block HTML
summarizes the text of content within a web page and then ID URL code
JPEG
tl-X tl-Y dr-X dr-Y
creates an index [5]–[7], deleting specific content within the
page. When a user selects content from the index of the page, Ă Ă Ă Ă Ă Ă Ă Ă
the content is fully displayed. Ă Ă Ă Ă Ă Ă Ă Ă
One significant scheme to increase web content readability
on small screens concerns extracting visual blocks from large BlockID is the unique identification of each block, contains
web pages. Deng Cai et al. [8] proposed a vision-based page 16 bits, which is constructed by page blocker module. After an
segmentation (VIPS) that makes full use of page layout feature original web page is split into many blocks by page blocker,
to semantically segment the web page. Whereas, because this this field will be filled.
method is not designed for mobile web surfing, it is unsuitable
to display these semantic blocks on the mobile devices directly. Coverage Region is pixel coordinate that each block
covers. This field has four subfields: tl-X is the block’s X
A more appropriate approach is to retain the original layout coordinate of top-left corner; tl-Y is Y coordinate of top-left
of a page in web browsing using mobile devices, as well as corner; dr-X is X coordinate of down-right corner; dr-Y is Y
reducing users’ scroll operations. Some researches were coordinate of down-right corner. The field is initialized by page
proposed in recent years try to solve the problem. Baudisch et blocker module firstly, then it may be modified by page block
al. in [9], Heidi Lam et al. in [10] and Yu Chen et al. in [11] imaging module.
proposed a thumbnail view method. Minimap, which is
proposed by Virpi Roto [12], has a similar goal. And now, Block URL is the URL which AJAX code running on
Google android is using this browsing method. Figure 1c mobile client uses it to obtain each visual block. Interrogation
shows the same portal page as a thumbnail view displayed on expression is used here to construct the URL. For example, as
android. The thumbnail view lets users easily browse or access shown in figure 1, if the whole original page’s URL is
overviews of large web pages, but mobile users still must zoom http://www.yahoo.com, and if the blockID of the visual block,
in/out repeatedly and scroll for a more detailed view. which is at the top of the original page, is ****, then the block
URL will be http://www.yahoo.com?blockid=****. This field
As above, the work reported in this paper has a similar goal is constructed by AJAX code generator module.
that does not change the original layout at all, provides the
overview for users to grasp the whole layout, and uses AJAX HTML code is HTML source code of each block which is
which is core technology of web2.0 to present each visual created by page blocker module.
block with better user experience. JPEG is picture file of each visual block. This field is
constructed by page block imaging module.
III. SYSTEM FRAMEWORK
The system scheme takes normal web pages as input, and A. Session-based User Management Filter
produces new web pages adapted to mobile device as output. The proxy provides a session-based mechanism for user
The whole system implementation is carried by proxy. As state management. Every request from mobile client will be
shown in Figure 2, the system is composed of six modules: filtered by this module. So the module is the control center of
Session-based user management filter, Thumbnail generator, the proxy. It parses every request from mobile client and
Page blocker, Page block imaging, AJAX code generator and decides how to deal. For example, from figure 2, we can see
Servlet components. that for each mobile client, there should be two http session
objects to record the client’s state: one in the web server and
Besides the six modules, a block list is defined to record the other in the proxy. The part works of this module is
each page block. As the block list will be used by several responsibility to correlate the two http session objects. Since
modules, here Table I, which shows the definition in detail, is each session object has its own ID to unique identify it, a
presented at firstly.

138
hashMap data structure is used to mapping the two session IDs E. AJAX Code Generator
for correlating the two session objects. This module generates and inserts AJAX code into
The module maintains the state of the user’s delivery thumbnail page so that when mobile user using thumbnail view
context information during the session. The user state for overview, moving pointer to a specific small block, the
management enables dynamic configuration and tuning of the AJAX code that running on mobile client can get and show the
proxy’s operation. original visual block from the proxy asynchronously for the
better user experience.
B. Thumbnail Generator The main issue of this module focuses on determining the
As mentioned in section II, some researches are proposed to position where to display the visual block on the small screen.
convert a normal web page to a thumbnail view one. In this Figure 4 shows the coordinate of the mobile device’s screen.
paper, we employ Summary thumbnails method [10] proposed The screen’s size can be measured by AJAX code running on
by Heidi Lam et al. as converter. Not like Google android mobile client and the size of visual block, which to be
which implements the conversion at mobile client side, we displayed, can be gotten from table I. Here, we use sw and sh
implement it at proxy side because the thumbnail page will be represent screen’s width and height, use bw and bh represent
further processed by subsequent modules. Using this method, block’s width and height respectively. The whole screen is
JavaScript of original web page will not be tampered at all. divided into four same regions. We number them ķ - ĺ
respectively. Supposing (x0, y0) represents the coordinate of
C. Page Blocker the current mouse pointer’s position, ̜ represents revised
A number of researches are proposed on splitting the variable for fine adjusting the display position for the better
existing web page into small blocks. However, most of them visual effect, we set ̜ = 3 pixels here. Supposing (x1, y1)
fail to take into account visual structure of the web page. In the represents top left corner coordinate of the visual block to be
sense of human perception, it is always the case that people displayed. The pseudocode of computing display position (x1,
view a web page as different semantic objects rather than a y1) is given as follows:
single object. Considering that the spatial and visual cues can (x1, y1) displayPostionCompute(x0, y0)//return (x1, y1)
help the user to unconsciously divide the web page into several {
semantic parts, VIPS proposed by Deng Cai et al. [8] is used as if ( (x0, y0)ęķ ) //if in ķ, original block will be displayed on the
page blocker in this module. From figure 3, we can see each // down-right of the current mouse pointer’s position
visual block is around by unconspicuous thin lines. The method { x1 = x0 + ̜;
effectively segments the web page based on these visual thin if ( bh <= (sh – y0) ) y1 = y0 ;
else if ( bh < sh) y1 = sh - bh;
lines of the web page. else y1 = ̜;
}
else if ( (x0, y0) ęĸ ) //if in ĸ, original block will be displayed
// on the down-left of the current mouse pointer’s position
{ if ( bw < x0 ) x1 = x0 - bw - ̜;
else x1 = ̜;
if ( bh <= (sh – y0) ) y1 = y0 ;
else if ( bh < sh) y1 = sh - bh;
else y1 = ̜;
}
Figure 3. System framework. else if ( (x0, y0) ęĹ ) //if in Ĺ, original block will be
//displayed on the top-right of the current mouse pointer’s position
After the original web page is split into several visual { x1 = x0 + ̜;
if ( bh < y0) y1 = y0 - bh ;
blocks, it is time to fill block list subsequently. For each block,
else y1 = ̜;
BlockID will be created by this module at first, and then other }
fields will be constructed and filled one by one except Block else if ((x0, y0) ęĺ ) //if in ĺ, original block will be
URL field and JPEG field. //displayed on the top-left of the current mouse pointer’s position
{ if ( bw < x0) x1 = x0 - bw - ̜;
D. Page Block Imaging else x1 = ̜;
if ( bh < y0) y1 = y0 - bh ;
Once a complete web page is divided into multiple blocks, else y1 = ̜;
the CSS of the original web page, which preserves the whole }
page sharp, will be of no use any longer. For preserving blocks’ }
original sharp that website authors want to present to us, page (0, 0) x
block imaging technology is used in this module. We employ a
page block imaging method based on IDS (Iterated Dividing ĸ
and Shrinking) [13], which is competent for the task, as
ķ
converter. After each block imaging is finished, the module
will update Coverage Region field and fill JPEG field in block Ĺ ĺ
list. y

Figure 4. System framework.

139
After the key issues have been solved, pseudocode of
AJAX code generator algorithm is given below:
1: invoke thumbnail generator;
2: initialize block list;
3: invoke page blocker;
4: block imaging processing;
5: construct Block URL field in block list;
6: generate AJAX code; (a) (b) (c)
/*******Begin: key AJAX pseudocode generated is given as follows*******/
Figure 5. Snapshot of prototype system (a) original web page shown on PC,
var x0, y0, x1, y1;
(b) thumbnail view, (c) zoom in automatically.
function mouseMove(event) {
x0 = event.clientX;
y0 = event.clientY;
checkGetNewBlock(); V. SYSTEM EVALUATION
} Evaluation is divided into efficiency evaluation and
function checkGetNewBlock( ){
if (no block is zooming in or (x0, y0) Coverage Region of the current
effectiveness evaluation. Evaluation scheme is similar to the
zooming in block) scheme implemented in [4], where we also used proxy side
{ var url="servlet/asynchronousProcessCenter"; deployment to carry a layered web page adaptation engine
var strParams = "blockid="+blocksList.getCurrentID( ); based on link block and content block. For comparison, we call
new cmnet.ContentLoader(url,showBlockCenter, null,"POST", strParams); the system in [4] as traditional system (TS), whereas the system
}
}
described in this paper is referred as dynamic adaptation
function showBlockCenter( ){ system (DAS).
var block = document.getElementById("blockid");
block.style.display="block";
(x1, y1) = displayPostionCompute(x0, y0) TABLE II. SYSTEM EFFICIENCY EVALUATION
showBlock(block) ; Efficiency Index
Efficiency
}
/*******************End: key AJAX pseudocode *******************/ Evaluation Execution time(s) Speed(files/s) Speed(kB/s)
7: insert AJAX code generated in last step into original web page; TS 18.93 158.48 2725.83

F. Servlet Components DAS 13.52 221.89 3816.57


This module is responsible for communicating with
asynchronous AJAX components running on mobile client. For efficiency evaluation, 3000 web pages of 10 typical
The servlet components receive AJAX request, parse it, portal websites such as CQUPT, sina and yahoo etc. are chosen
construct response and send the response to client. The main to buildup efficiency evaluation test set. Total files’ size is
work of this module is locating the web page block which 51600kB and 17.2kB per file. When in data collection time, the
client is requiring. The pseudocode of the key servlet collection system uses thread pool model and set the pool with
component which named AsynchronousProcessCenter is given 50 threads. System efficiency is mainly determined by system
as follows: processing speed. Table II shows test result, it reaches the
public class AsynchronousProcessCenter extends HttpServlet { conclusion that efficiency of the dynamic adaptation system
public void doPost(HttpServletRequest request, can meet the demand of processing large number online web
HttpServletResponse response) pages swiftly. And the DAS’s efficiency is higher than the TS’s
{ String blockid=request.getParameter("blockid ");
if ( blockid == null or blocksList.getBlock(blockid == null)
because the DAS assigns part of computing task to the AJAX
forward the request; //means client request a new page components running on the mobile client.
else { String blockCode = blocksList.getBlockHtmlById(blockid);
response.getWriter.write(blockCode);
} TABLE III. EVALUATION GRADE AND ITS CORRESPONDING SCORE
}
} Grade Description Score

IV. SYSTEM IMPLEMENTATION Unusable The worst condition -2


The system was implemented based on the above design. Poor Dissatisfactory users feel -1
We implemented the adaptation proxy system entirely in Java. Fair Normal 0
The proxy is carried by a PC with Windows XP, Intel PIII Good Fully understandable with few inconvenience 1
1.73GHz CPU and 2G memory. Google android simulator, Excellent The best user experience users feel 2
which supports AJAX programming [14], is used to simulate
handheld terminal device. Bandwidth is set at 30Kbps to
simulate the current China Mobile GPRS’s access bandwidth. For effectiveness evaluation, by referring to the experiment
Figure 5 shows process result corresponding to part of the method in [7], we design a questionnaire to survey indexes of
figure 1. The visual page block that a user is currently reading, the system effectiveness. Thirty students are invited to finish
i.e., where the pointer is focused, is automatically zoomed in the questionnaire. All the participants are active users of web in
on. their daily lives. Firstly, we give two days to the participants to
familiar with operating the two systems; after that, each

140
participant is asked to grade each index of the questionnaire VI. CONCLUSIONS AND FUTURE WORK
using one of five grades described in table ċ; then we translate With the evolution of wireless telecommunication
each grade to a specific score shown in table ċ and compute technology and information technology, it seems more
the sum of users scoring. The questionnaire is composed of important to provide a mobile web access mode with a swift,
eight questions: convenient, economical, personalized and shining appearance.
1) How visual intuition about the system? To meet the requirement, a dynamic web page presentation for
mobile web browsing is proposed. Compared with current
2) How easy to locate your interested information?
small screen mobile device web surfing method, our scheme
3) How easy to view specific information?
provides the following three benefits: 1) By using mobile
4) How easy for operation? web2.0, the mode provides a new web browsing mode with
5) How about your user experience using this system? better user experience; 2) Using this mode, user’s behavior is
6) How similar the user experience is to Web surfing using very similar to PC user’s; 3) Compared with other proxy mode,
PCs? the processing time is shorten because part of computing task is
7) How about the response speed about the system? assigned to the AJAX components running on the mobile client.
8) Do you like continue using this system while mobile
surfing? In the next step, we will focus on displaying specific visual
block more reasonable and research on shortening web page
processing time at proxy side.
Question 1)
Question 2) REFERENCES
Question 3) [1] Android, An Open Handset Alliance Project, Google Inc., November,
2007, Available: http://code.google.com/android.
Question 4)
[2] J. J. Garrett, “Ajax: A New Approach to Web Applications”, February
Question 5) 18, 2005, [Online]. Available: http://www.adaptivepath.com/ideas/essay
s/archives/000385.php.
Question 6)
[3] Y. Chen, W.Y. Ma and H.J. Zhang, “Detecting web page structure for
Question 7) adaptive viewing on small form factor devices”, in Proc. of the 12th
international conference on World Wide Web, ACM press, Budapest,
Question 8) Hungary, May 20-24, 2003, pp. 225-233.
[4] Y.P. Xiao, Y. Tao and Q. Li, “Web page adaptation for mobile device,”
Total Score in Fourth IEEE International Conference on Wireless Communications,
Networking and Mobile Computing, October 2008, to be published.
Figure 6. Score statistics of questionnaire survey.
[5] Y. Hwang, J. Kim and E. Seo, “Structure-Based Transcoding Heuristics
for Mobile Devices,” IEEE Internet Computing, vol. 7, no. 5, 2003, pp.
Figure 6 shows the total score of each question for both 14–21.
systems. From the result, the DAS get very high score for
[6] Y. Hwang, E. Seo and J. Kim, “WebAlchemist: A Structure-Aware
question 1, 2, 5 and 6. The result shows the DAS proposed in Web Transcoding System for Mobile Devices,” in Proc. Mobile Search
this paper provides a good user experience for mobile web Workshop, Honolulu, Hawaii, May, 2002.
surfing which is simulate to use PCs for web surfing, because [7] Y. Hwang, J. Kim, and E. Seo, “Structure-Aware Web Transcoding for
the DAS do not charge the layout of the original web page that Mobile Devices,” IEEE Internet Computing, vol. 7, no. 5, 2003, pp. 14–
make mobile users feel they are browsing web pages using 21.
small size PCs. And the introduction of web2.0, especially [8] D. Cai, S. Yu, J.R. Wen and W.Y. Ma, “VIPS: A VIsion based Page
AJAX, makes user experience better. Segmentation Algorithm”, Microsoft Technical Report, MSR-TR-2003-
79, 2003.
The TS also obtains high score for question 3 and 4, [9] P. Baudisch and H. Lam, “Semantic Thumbnails”, United States Patent,
especially in question 3. The result shows that users feel Patent NO.: US 7345688, March 18, 2008.
comfortably using TS while viewing specific content block, [10] H. Lam and P. Baudisch, “Summary thumbnails: readable overviews for
because TS split web pages into link blocks and content blocks, small screen web browsers”, in Proc. of the SIGCHI conference on
Human factors in computing systems, Portland, Oregon, USA, ACM
and use the whole screen to display each type block. DAS, on press, April 02-07, 2005, pp. 681-690.
the contrary, displays visual block according to the mouse [11] Y. Chen, X. Xie, W.Y. Ma and H. J. Zhang, “Adapting web page for
pointer’s current position. So the DAS may uses part of screen small-screen devices”, IEEE Internet Computing, vol. 9, no. 1, 2005, pp.
when displaying specific block. 50-56.
[12] V. Roto, A. Popescu, A. Koivisto and E. Vartiainen, “Minimap: a web
However, both systems do not get high score for question 7 page visualization method for mobile phones”, in Proc. of the SIGCHI
because web page adaptation engine processing at proxy side conference on Human Factors in computing systems, Montréal, Québec,
prolongs response time. Canada, ACM press, April 22-27, 2006, pp. 35-44.
[13] J.X. Cao, B. Mao and J.Z. Luo, “A web page segmentation algorithm
Throughout this questionnaire survey, it can be concluded based on iterated dividing and shrinking,” in workshop of International
that the DAS is effective for mobile web browsing because Conference on Network and Parallel Computing, IFIP 2007, pp. 701-705.
most participants like continue using this system while they are [14] Webstandard Team, “Android Tutorial at mobile ajax”, February 19,
on the move. 2008, Available: http://mobileajax.de/2008/02/19/android-tutorial.

141