UI Quality Lab - A Web-based Platform for Automatic Web User Interface Assessment

UIQLab is a platform designed for Web Engineers to support them in assessing their web user interfaces automatically. This project aims to facilitate an easier use of web user interface metrics and assessment models for automated UI evaluation through a single, unifying web-based platform. UIQLab is developed by Calvin Liusnando and Sebastian Heil at the Distributed and Self-organizing Systems Group. It is a python-based web application. UIQLab is provided as open source resource under MIT License.

Further Information

UIQLab is detailed in our paper accepted at ICWE 2025.

This page serves as the digital appendix of the submission. All source code and experimental data from our evaluation experiments is available in the replication package of the submission.

Code Repository

The most recent version of UIQLab can found in the UIQLab Github Repository

Live Demo

You can try out a running version of the UIQLab platform using the following link. To get started, try putting a URL of a web user interface you would like to assess in the text input and click the "ADD URL" button and then on "CONFIRM WUI INPUT(S)". Then select the desired metrics for assessment below.

Available UI Assessments

Currently, UIQLab provides 14 automatic UI assessment models and metrics from literature covering a wide range of input types, output types, methods and foci. The following table provides an overview on the available assessments.

ID Short Name Input Output Preprocessing References
01PNG SizeImageNumericalN/A[1], [2]
02JPEG Size/Compr.ImageVectorFormat[1], [2]
03ColorfulnessImageNumericalN/A[3]
04Color AVG/STDImageVectorCIELAB[3]
05WhitespaceImageNumericalObject Detection[4], [1]
06UI InterpretationImageJSONN/A[4], [5]
07UMSIImageBinaryN/A[6]
08Word CountHTMLNumericalDOM[7]
09EdgesImageNumerical, BinaryGrayscale[8], [9]
10CongestionImageNumerical, BinaryCIELAB[4], [8]
11Subband EntropyImageNumericalCIELAB[4], [8]
12Shannon EntropyImageNumericalGrayscale[2]
13AccessibilityHTMLJSONN/A[10]
14NIMAImageVectorN/A[4], [11]

References

  1. A. Miniukovich and A. De Angeli (2015). "Computation of Interface Aesthetics". CHI'15: Proceedings of the 33rd Annual ACM Conference on Human Factor in Computing Systems, pp. 1163–1172. DOI: 10.1145/2702123.2702575
  2. E. Boychuk and M. Bakaev (2019). "Entropy and Compression Based Analysis of Web User Interfaces". International Conference on Web Engineering (ICWE) 2019, pp. 253–261. Lecture Notes in Computer Science, vol. 11496. Springer, Cham. DOI: 10.1007/978-3-030-19274-7_19
  3. D. Hasler and S. Süsstrunk (2003). "Measuring Colorfulness in Natural Images". Proceedings of IS&T/SPIE Electronic Image 2003: Human Vision and Electronic Imaging VIII, pp. 87–95. DOI: 10.1117/12.477378
  4. A. Oulasvirta et al. (2018). "Aalto Interface Metrics (AIM): A Service and Code-base for Computational GUI Evaluation". Adjunct Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology (UIST '18), pp. 16-19. DOI: 10.1145/3266037.3266087
  5. M. Xie, S. Feng, Z. Xing, J. Chen, and C. Chen (2020). "UIED: A Hybrid Tool for GUI Element Detection". Proceedings of the 28th ACM Joint Meeting on European Software Engineering Conference and Symposium on the Foundations of Software Engineering, pp. 1655–1659. DOI: 10.1145/3368089.3417940
  6. C. Fosco, V. Casser, A. K. Bedi, P. O'Donovan, A. Hertzmann, and Z. Bylinskii (2020). "Predicting Visual Importance Across Graphic Design Types" In: Proceedings of the 33rd Annual ACM Symposium on User Interface Software and Technology, pp. 249–260. DOI: 10.1145/3379337.3415825
  7. M. Y. Ivory, R. R. Sinha, and M. A. Hearst (2001). “Empirically validated web page design metrics,” Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pp. 53–60. DOI: 10.1145/365024.365035
  8. R. Rosenholtz, Y. Li, and L. Nakano (2007). "Measuring Visual Clutter". In: Journal of Vision August 2007, vol. 7, no. 2, p. 17. DOI: 10.1167/7.2.17
  9. M. L. Mack and A. Oliva (2004). "Computational estimation of visual complexity". 12th Annual Object, Perception, Attention, and Memory Conference.
  10. K. Sereduck (2018). "axe-selenium-python 2.1.6". URL: https://pypi.org/project/axe-selenium-python/
  11. H. Talebi and P. Milanfar (2018). "Neural Image Assessment". IEEE Transactions on Image Processing, vol. 27, no. 8. DOI: 10.1109/TIP.2018.2831899