1 / 21

An Empirical Study of Web Interface Design on Small Display Devices

This study explores three interface design methods for small display devices - presentation optimization, semantic conversion, and scalable (zooming). The results and analysis show the advantages and disadvantages of each method. The study also suggests future work on decoupling structure and semantic data.

tblakney
Download Presentation

An Empirical Study of Web Interface Design on Small Display Devices

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. An Empirical Studyof 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 WI'04, Beijing

  2. Outline • Introduction • Three Interface Design Methods • Simulator and Experiment • Results • Analysis and Discussion • Related Work • Conclusion and Future Work WI'04, Beijing

  3. 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 WI'04, Beijing

  4. 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 WI'04, Beijing

  5. 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 WI'04, Beijing

  6. 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 WI'04, Beijing

  7. 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 WI'04, Beijing

  8. Simulator and Experiment--Presentation Optimization WI'04, Beijing

  9. Simulator and Experiment--Semantic Conversion WI'04, Beijing

  10. Simulator and Experiment--Zooming method WI'04, Beijing

  11. 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 WI'04, Beijing

  12. Results-Subject Responses WI'04, Beijing

  13. 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. WI'04, Beijing

  14. Analysis and Discussion--Time Average time of 20 questions Total time Average time of one question WI'04, Beijing

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

  16. Analysis and Discussion--Page Change Rate Average page change rates of the three methods WI'04, Beijing

  17. Analysis and Discussion 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 WI'04, Beijing

  18. 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 WI'04, Beijing

  19. Conclusion and Future Work Conclusion: • 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 WI'04, Beijing

  20. Conclusion and Future Work 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 WI'04, Beijing

  21. Thank you WI'04, Beijing

More Related