You are on page 1of 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

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

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

52 221. Firstly. is used to simulate handheld terminal device.write(blockCode). TS 18. The visual page block that a user is currently reading. can meet the demand of processing large number online web HttpServletResponse response) pages swiftly. function mouseMove(event) { x0 = event. After the key issues have been solved.getParameter("blockid "). pseudocode of AJAX code generator algorithm is given below: 1: invoke thumbnail generator.getBlockHtmlById(blockid). the system in [4] as traditional system (TS). we give two days to the participants to familiar with operating the two systems.getWriter. When in data collection time. Thirty students are invited to finish i. Intel PIII Good Fully understandable with few inconvenience 1 1. are chosen construct response and send the response to client. V.73GHz CPU and 2G memory. y1) = displayPostionCompute(x0. is automatically zoomed in the questionnaire.getBlock(blockid == null) because the DAS assigns part of computing task to the AJAX forward the request. whereas the system } } described in this paper is referred as dynamic adaptation function showBlockCenter( ){ system (DAS). 6: generate AJAX code. (b) thumbnail view. x1.style. based on link block and content block. For efficiency evaluation.ContentLoader(url. Table II shows test result. 3: invoke page blocker.clientX. Poor Dissatisfactory users feel -1 We implemented the adaptation proxy system entirely in Java. y0) TABLE II. the system effectiveness. (c) zoom in automatically. For effectiveness evaluation. 4: block imaging processing. var x0. //means client request a new page components running on the mobile client. block. Google android simulator.showBlockCenter. checkGetNewBlock(). System efficiency is mainly determined by system as follows: processing speed.83 F. (x1. Snapshot of prototype system (a) original web page shown on PC. we call new cmnet.2kB per file. Excellent The best user experience users feel 2 which supports AJAX programming [14]. their daily lives. SYSTEM EFFICIENCY EVALUATION showBlock(block) . EVALUATION GRADE AND ITS CORRESPONDING SCORE } } Grade Description Score IV.48 2725."POST". portal websites such as CQUPT. 2: initialize block list. y0) Coverage Region of the current effectiveness evaluation. 3000 web pages of 10 typical The servlet components receive AJAX request. where the pointer is focused.clientY. each 140 .e. 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.. sina and yahoo etc. where we also used proxy side { var url="servlet/asynchronousProcessCenter". (a) (b) (c) /*******Begin: key AJAX pseudocode generated is given as follows*******/ Figure 5. SYSTEM IMPLEMENTATION Unusable The worst condition -2 The system was implemented based on the above design. y1.93 158. the client is requiring. All the participants are active users of web in on. strParams). And the DAS’s efficiency is higher than the TS’s { String blockid=request. For comparison. if ( blockid == null or blocksList. Servlet Components DAS 13.57 This module is responsible for communicating with asynchronous AJAX components running on mobile client.display="block".89 3816. } TABLE III. we design a questionnaire to survey indexes of figure 1. response. after that. y0. Fair Normal 0 The proxy is carried by a PC with Windows XP. 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. 5: construct Block URL field in block list. null. else { String blockCode = blocksList. Total files’ size is work of this module is locating the web page block which 51600kB and 17. by referring to the experiment Figure 5 shows process result corresponding to part of the method in [7]. Bandwidth is set at 30Kbps to simulate the current China Mobile GPRS’s access bandwidth. The main to buildup efficiency evaluation test set.getCurrentID( ). Evaluation scheme is similar to the zooming in block) scheme implemented in [4]. y0 = event. it reaches the public class AsynchronousProcessCenter extends HttpServlet { conclusion that efficiency of the dynamic adaptation system public void doPost(HttpServletRequest request.getElementById("blockid"). deployment to carry a layered web page adaptation engine var strParams = "blockid="+blocksList. var block = document. SYSTEM EVALUATION } Evaluation is divided into efficiency evaluation and function checkGetNewBlock( ){ if (no block is zooming in or (x0. parse it.

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