An Empirical Study of Web Interface Design on Small Display Devices 11/15/2018 An Empirical Study of Web Interface Design on Small Display Devices Meikang QIU Kang ZHANG Maolin HUANG [1] Department of Computer Science University of Texas at Dallas Richardson, Texas 75083-0688, USA [1] Department of Computer Systems University of Technology, Sydney PO Box 123 Broadway, NSW 2007 Australia 11/15/2018 WI'04, Beijing

Outline Introduction Three Interface Design Methods Simulator and Experiment Results Analysis and Discussion Related Work Conclusion and Future Work 11/15/2018 WI'04, Beijing

Introduction Rapid advance of Internet, Increasing wireless device Significant differences: desktop computer screen vs. small display limited input facilities, memory and bandwidth different viewing conditions screen size, scrollbar and menus Need efficient browsing mechanism: presentation optimization semantic conversion scalable (zooming) methods 11/15/2018 WI'04, Beijing

Three Interface Design Methods Presentation Optimization Method: Optimize to maximize contents and minimize navigation complexity Can properly adjust the width of the displayed area Semantics cannot usually fit the style well Users cannot easily locate desired content parts within the document 11/15/2018 WI'04, Beijing

Three Interface Design Methods Semantic Conversion Method: Web contents are parsed, analyzed, and reordered according importance Tree structure: give an overview of contents to users Jump from any page directly to the page containing the desired material 11/15/2018 WI'04, Beijing

Three Interface Design Methods Scalable (Zooming) method: Progressive rendering process, retains both the structural and semantic information Structural data are delivered first, semantic data second Mobile device can render the structural data within the screen size Clicks to see complete semantic information of certain area 11/15/2018 WI'04, Beijing

Simulator and Experiment Experimental Content: Purpose: survey the efficiency and effectiveness of the three design methods Implement: revised the tutorial material of eBay for our experiment text, reorganized and presented in different styles Wrote a simulation program to model the interface of a small display, The http server can record the timing of each page used 11/15/2018 WI'04, Beijing

Simulator and Experiment --Presentation Optimization 11/15/2018 WI'04, Beijing

Simulator and Experiment --Semantic Conversion 11/15/2018 WI'04, Beijing

Simulator and Experiment --Zooming method 11/15/2018 WI'04, Beijing

Simulator and Experiment Experimental Procedure: Divided the 27 subjects into 4 groups Each subject is given access to a server: httpsrv.95zxu Double clicks on startup.bat to run a Java serverlet A small screen simulating the actual PDA screen Find the answer on the PDA screen simulator 11/15/2018 WI'04, Beijing

Results-Subject Responses 11/15/2018 WI'04, Beijing

Results--Pros and Cons Presentation Optimization Method Prons: novice user Cons: difficult for specific answer, using scroll bar Semantic Conversion Method Prons: organized Cons: sometimes, information was paged and has to be searched from one page to another. Zooming Method Pros: easy to navigate, general location , efficient Cons: picture on a small display is not quite clear. 11/15/2018 WI'04, Beijing

Analysis and Discussion --Time Average time of 20 questions Total time Average time of one question 11/15/2018 WI'04, Beijing

Analysis and Discussion --Correct rate Average correct rates for 20 questions using different method 11/15/2018 WI'04, Beijing

Analysis and Discussion --Page Change Rate Average page change rates of the three methods 11/15/2018 WI'04, Beijing

Analysis and Discussion Adding keyword search may enhance a browsing method. Further compare the Semantic method and Zooming method directly Tree is a common structure in interface design The Zooming (also called scalable) method has good application potential 11/15/2018 WI'04, Beijing

Related Work Mizobuchi et al. : experiments to compare target pointing performance with a pen and with a cursor key. Buyukkokten et al.: text summarization Chittaro et al.:experiments of WAP phones visualization using bar charts Hierarchical Atomic Navigation (HANd): to improve web navigation on small displays Henricksen et al: adaptation of Web browser Buchanan et al.: Horizontal Scroll method, Vertical Scroll method and page method 11/15/2018 WI'04, Beijing

Conclusion and Future Work An empirical studies on three methods Presentation optimization: linear browsing Semantic browser has convenient feature: a table of contents Zooming browser is better organized and zooming into pertinent contents as needed Zooming and semantic browser better than presentation optimization browser 11/15/2018 WI'04, Beijing

Conclusion and Future Work Further empirical studies: more subjects, more diversify profiles Aim at decoupling of the structure and semantic data Combine this work with the graph grammar approach to find an efficient transform and adaptation methods for small displays 11/15/2018 WI'04, Beijing

11/15/2018 Thank you 11/15/2018 WI'04, Beijing