W3Touch – Metrics-based Web Page Adaptation for Touch

Web designers currently face the increased proliferation and diversity of new touch devices which pose major challenges to the design task. We developed W3Touch–an interface instrumentation toolkit for web designers to collect user performance data for different device characteristics in order to help them identify potential design problems for touch interaction. Web designers can visualise the data aggregated by W3Touch and use simple metrics to automate the adaptation process for many different viewing and interaction contexts.

The figure below illustrates the adaptation process based on W3Touch for an example page. The adaptation using W3Touch consists of three steps. First, the user interaction is monitored and relevant data collected for each metric. Second, W3Touch implements visualisation techniques for inspection of the raw data and segmentation of the interface into critical components based on thresholds defined for each metric. Based on these visualisations, designers may adjust the thresholds and experiment with different adaptations. Finally, they can deploy an adaptation catalogue fixing the design problems identified for different contexts. In the example, the links in the sidebar navigation are displayed larger and with more spacing, enabling precise selection without the need for zooming.

Metrics-based adaptation process using W3Touch: (1) logging, (2) inspection, (3) segmentation and (4) adaptation

Paper

W3Touch: Metrics-based Web Page Adaptation for Touch
Michael Nebeling, Maximilian Speicher and Moira C. Norrie
Proceedings of 31st ACM SIGCHI Conference on Human Factors in Computing Systems (CHI 2013), Paris, France, April 2013

Paper
Video Preview (10.5 MB, MP4)
Slides
Demo

Contact

Should you have any questions or comments, please feel free to contact Michael Nebeling.