Auto-Extraction and Integration ofMetrics forWeb User Interfaces

Maxim Bakaev, Sebastian Heil, Vladimir Khvorostov, Martin Gaedke
<span title="">2019</span> <i title="River Publishers"> <a target="_blank" rel="noopener" href="" style="color: black;">Journal of Web Engineering</a> </i> &nbsp;
Metric-based assessment of web user interface (WUI) quality attributes is shifting from code (HTML/CSS) analysis to mining webpages'visual representations based on image recognition techniques. In our paper, we describe a visual analysis tool which takes a WUI screenshot and produces structured and machine-readable representation (JSON) of the interface elements' spatial allocation. The implementation is based on OpenCV (image recognition functions), dlib (trained detector for the elements'
more &raquo; ... sification), and Tesseract (label and content text recognition). The JSON representation is used to automatically calculate several metrics related to visual complexity, which is known to have major effect on user experience with UIs. We further describe a WUI measurement platform that allows integration of the currently dispersed sets of metrics from different providers and demonstrate the platform's use with several remote services. We perform statistical analysis of the 562 M. Bakaev et al. collected metrics in relation to complexity-related subjective evaluations obtained from 63 human subjects of various nationalities. Finally, we build predictive models for visual complexity and show that their accuracy can be improved by integrating the metrics from different sets. Regressions with the single index of visual complexity metric that we proposed had R 2 =0.460, while the best joint model with 4 metrics had R 2 =0.647.
<span class="external-identifiers"> <a target="_blank" rel="external noopener noreferrer" href="">doi:10.13052/jwe1540-9589.17676</a> <a target="_blank" rel="external noopener" href="">fatcat:h33genhf2zhsdlatonlla3mvdy</a> </span>
<a target="_blank" rel="noopener" href="" title="fulltext PDF download" data-goatcounter-click="serp-fulltext" data-goatcounter-title="serp-fulltext"> <button class="ui simple right pointing dropdown compact black labeled icon button serp-button"> <i class="icon ia-icon"></i> Web Archive [PDF] <div class="menu fulltext-thumbnail"> <img src="" alt="fulltext thumbnail" loading="lazy"> </div> </button> </a> <a target="_blank" rel="external noopener noreferrer" href=""> <button class="ui left aligned compact blue labeled icon button serp-button"> <i class="external alternate icon"></i> Publisher / </button> </a>