1. 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 , USA
[1] Department of Computer Systems
University of Technology, Sydney
PO Box 123 Broadway, NSW 2007 Australia
11/15/2018
WI'04, Beijing

2. 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

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
11/15/2018
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
11/15/2018
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
11/15/2018
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
11/15/2018
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
11/15/2018
WI'04, Beijing

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

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

10. Simulator and Experiment --Zooming method
11/15/2018
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
11/15/2018
WI'04, Beijing

12. Results-Subject Responses
11/15/2018
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.
11/15/2018
WI'04, Beijing

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

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

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

17. 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

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
11/15/2018
WI'04, Beijing

19. 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

20. 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

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