skip to main content
research-article

On the Detection of Structural Aesthetic Defects of Android Mobile User Interfaces with a Metrics-based Tool

Published: 15 March 2021 Publication History

Abstract

Smartphone users are striving for easy-to-learn and use mobile apps user interfaces. Accomplishing these qualities demands an iterative evaluation of the Mobile User Interface (MUI). Several studies stress the value of providing a MUI with a pleasing look and feel to engaging end-users. The MUI, therefore, needs to be free from all kinds of structural aesthetic defects. Such defects are indicators of poor design decisions interfering with the consistency of a MUI and making it more difficult to use. To this end, we are proposing a tool (Aesthetic Defects DEtection Tool (ADDET)) to determine the structural aesthetic dimension of MUIs. Automating this process is useful to designers in evaluating the quality of their designs. Our approach is composed of two modules. (1) Metrics assessment is based on the static analysis of a tree-structured layout of the MUI. We used 15 geometric metrics (also known as structural or aesthetic metrics) to check various structural properties before a defect is triggered. (2) Defects detection: The manual combination of metrics and defects are time-consuming and user-dependent when determining a detection rule. Thus, we perceive the process of identification of defects as an optimization problem. We aim to automatically combine the metrics related to a particular defect and optimize the accuracy of the rules created by assigning a weight, representing the metric importance in detecting a defect. We conducted a quantitative and qualitative analysis to evaluate the accuracy of the proposed tool in computing metrics and detecting defects. The findings affirm the tool’s reliability when assessing a MUI’s structural design problems with 71% accuracy.

References

[1]
Khalid Alemerien and Kenneth Magel. 2014. GUIEvaluator: A metric-tool for evaluating the complexity of graphical user interfaces. In Proceedings of the International Conference on Software Engineering and Knowledge Engineering (SEKE’14). 13–18.
[2]
Khalid Alemerien and Kenneth Magel. 2015. SLC: A visual cohesion metric to predict the usability of graphical user interfaces. In Proceedings of the 30th Annual ACM Symposium on Applied Computing. ACM, 1526–1533.
[3]
Hannah Alvarez. 2015. Making your icons user-friendly: A guide to usability in UI design. Retrieved June 20, 2019 from https://www.usertesting.com/blog/user-friendly-ui-icons/.
[4]
Simon Attfield, Gabriella Kazai, Mounia Lalmas, and Benjamin Piwowarski. 2011. Towards a science of user engagement (position paper). In Proceedings of the WSDM Workshop on User Modelling for Web Applications. 9–12.
[5]
Emna Ben Ayed, Christophe Kolski, Rim Magdich, and Houcine Ezzedine. 2016. Towards a context based Evaluation Support System for Quality in Use assessment of mobile systems. In Proceedings of the 2016 IEEE International Conference on Systems, Man, and Cybernetics (SMC’16). IEEE, 004350–004355.
[6]
Rosnita Baharuddin, Dalbir Singh, and Rozilawati Razali. 2013. Usability dimensions for mobile applications—A review. Res. J. Appl. Sci. Eng. Technol 5, 6 (2013), 2225–2231.
[7]
Tengfei Bao, Huanhuan Cao, Enhong Chen, Jilei Tian, and Hui Xiong. 2012. An unsupervised approach to modeling personalized contexts of mobile users. Knowl. Inf. Syst. 31, 2 (2012), 345–370.
[8]
Narjess Bessghaier and Makram Souii. 2017. Towards usability evaluation of hybrid mobile user interfaces. In Proceedings of the 2017 IEEE/ACS 14th International Conference on Computer Systems and Applications (AICCSA’17). IEEE, 895–900.
[9]
Nigel Bevan and Miles Macleod. 1994. Usability measurement in context. Behav. Inf. Technol. 13, 1--2 (1994), 132–145.
[10]
Patrick Mbenza Buanga. 2011. Automated Evaluation of Graphical User Interface Metrics. Ph.D. Thesis. Catholic University of Louvain, Belgium (2011).
[11]
John W. Cresswell. 1998. Qualitative Inquiry and Research Design: Choosing among Five Traditions. Sage Publications, Thousands Oaks, CA.
[12]
Biplab Deka, Zifeng Huang, Chad Franzen, Joshua Hibschman, Daniel Afergan, Yang Li, Jeffrey Nichols, and Ranjitha Kumar. 2017. Rico: A mobile app dataset for building data-driven design applications. In Proceedings of the 30th Annual ACM Symposium on User Interface Software and Technology. ACM, 845–854.
[13]
Claudia Ehmke and Stephanie Wilson. 2007. Identifying web usability problems from eye-tracking data. In Proceedings of the 21st British HCI Group Annual Conference on People and Computers: HCI⋅⋅. But Not as We Know It, Volume 1. British Computer Society, 119–128.
[14]
Martin Fowler. 2018. Refactoring: Improving the Design of Existing Code. Addison-Wesley Professional.
[15]
Geoffrey Holmes, Andrew Donkin, and Ian H. Witten. 1994. Weka: A machine learning workbench. In Proceedings of the Australian New Zealand Intelligent Information Systems Conference (ANZIIS’94). IEEE, 357–361.
[16]
Gasmi Ines, Soui Makram, Chouchane Mabrouka, and Abed Mourad. 2017. Evaluation of mobile interfaces as an optimization problem. Proc. Comput. Sci. 112 (2017), 235–248.
[17]
Melody Y. Ivory, Rashmi R. Sinha, and Marti A. Hearst. 2001. Empirically validated web page design metrics. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. ACM, 53–60.
[18]
Marouane Kessentini and Ali Ouni. 2017. Detecting Android smells using multi-objective genetic programming. In Proceedings of the 4th International Conference on Mobile Software Engineering and Systems. IEEE Press, 122–132.
[19]
Jesper Kjeldskov and Mikael B. Skov. 2003. Creating realistic laboratory settings: Comparative studies of three think-aloud usability evaluations of a mobile system. In Proceedings of the 9th IFIP TC13 International Conference on Human-Computer Interaction. 663–670.
[20]
John R. Koza. 1992. Genetic Programming: On the Programming of Computers by Means of Natural Selection. Vol. 1. MIT Press.
[21]
Liisa Kuparinen, Johanna Silvennoinen, and Hannakaisa Isomäki. 2013. Introducing usability heuristics for mobile map applications. In Proceedings of the 26th International Cartographic Conference. International Cartographic Association.
[22]
Michele Lanza and Radu Marinescu. 2007. Object-oriented Metrics in Practice: Using Software Metrics to Characterize, Evaluate, and Improve the Design of Object-oriented Systems. Springer Science & Business Media.
[23]
Talia Lavie and Noam Tractinsky. 2004. Assessing dimensions of perceived visual aesthetics of web sites. Int. J. Hum.-comput. Stud. 60, 3 (2004), 269–298.
[24]
Hosub Lee, Young Sang Choi, and Yeo-Jin Kim. 2011. An adaptive user interface based on spatiotemporal structure learning. IEEE Commun. Mag. 49, 6 (2011), 118–124.
[25]
Bo-Fu Liu, Shih-Chun Chou, Yu-Ting Lin, and Jih-Yiing Lin. 2011. Toward easy delivery of device-oriented adaptive user interface on mobile devices. In Proceedings of the 2011 5th International Conference on New Trends in Information Science and Service Science (NISS’11), Vol. 1. IEEE, 80–85.
[26]
Rohit Mahajan and Ben Shneiderman. 1997. Visual and textual consistency checking tools for graphical user interfaces. IEEE Trans. Softw. Eng. 23, 11 (1997), 722–735.
[27]
Michael Minge and Manfred Thüring. 2018. Hedonic and pragmatic halo effects at early stages of user experience. Int. J. Hum.-Comput. Stud. 109 (2018), 13–25.
[28]
Aliaksei Miniukovich and Antonella De Angeli. 2014. Visual impressions of mobile app interfaces. In Proceedings of the 8th Nordic Conference on Human-Computer Interaction: Fun, Fast, Foundational. ACM, 31–40.
[29]
Aliaksei Miniukovich and Antonella De Angeli. 2015. Computation of interface aesthetics. In Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems. ACM, 1163–1172.
[30]
Francisco Montero and V. López-Jaquero. 2010. GUILayout++: Supporting prototype creation and quality evaluation for abstract user interface generation. In Proceedings of the Workshop of ACM SIGCHI Symposium on Engineering Interactive Computing Systems.
[31]
Kevin Mullet and Darrell Sano. 1995. Designing Visual Interfaces: Communication Oriented Techniques. Vol. 2550. SunSoft Press, Englewood Cliffs, NJ.
[32]
Fatih Nayebi, Jean-Marc Desharnais, and Alain Abran. 2012. The state of the art of mobile application usability evaluation. In Proceedings of the 2012 25th IEEE Canadian Conference on Electrical & Computer Engineering (CCECE’12). IEEE, 1–4.
[33]
D. C. L. Ngo, L. S. Teo, and J. G. Byrne. 2000. Formalising guidelines for the design of screen layouts. Displays 21, 1 (2000), 3–15.
[34]
David Chek Ling Ngo, Azman Samsudin, and Rosni Abdullah. 2000. Aesthetic measures for assessing graphic screens. J. Inf. Sci. Eng 16, 1 (2000), 97–116.
[35]
Jakob Nielsen and Rolf Molich. 1990. Heuristic evaluation of user interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. ACM, 249–256.
[36]
James Noble and Larry L. Constantine. 1996. Interactive design metric visualization: Visual metric support for user interface design. In Proceedings of the 6th Australian Conference on Computer-Human Interaction. IEEE, 213–220.
[37]
Heather L. O’Brien and Elaine G. Toms. 2008. What is user engagement? A conceptual framework for defining user engagement with technology. J. Am. Soc. Inf. Sci. Technol. 59, 6 (2008), 938–955.
[38]
Heather L. O’Brien and Elaine G. Toms. 2010. The development and evaluation of a survey to measure user engagement. J. Am. Soc. Inf. Sci. Technol. 61, 1 (2010), 50–69.
[39]
Annarita Paiano, Giovanni Lagioia, and Andrea Cataldo. 2013. A critical analysis of the sustainability of mobile phone use. Resourc. Conserv. Recycl. 73 (2013), 162–171.
[40]
Katharina Reinecke, Tom Yeh, Luke Miratrix, Rahmatri Mardiko, Yuechen Zhao, Jenny Liu, and Krzysztof Z Gajos. 2013. Predicting users’ first impressions of website aesthetics with a quantification of perceived visual complexity and colorfulness. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. ACM, 2049–2058.
[41]
Andreas Riegler and Clemens Holzmann. 2018. Measuring visual user interface complexity of mobile applications with metrics. Interact. Comput. 30, 3 (2018), 207–223.
[42]
Brian Robinson and Penelope Brooks. 2009. An initial study of customer-reported GUI defects. In Proceedings of the IEEE International Conference on Software Testing, Verification and Validation Workshops (ICSTW’09). IEEE, 267–274.
[43]
Young Sam Ryu. 2005. Development of Usability Questionnaires for Electronic Mobile Products and Decision Making Methods. Ph.D. Dissertation. Virginia Tech.
[44]
Maria Shitkova, Justus Holler, Tobias Heide, Nico Clever, and Jörg Becker. 2015. Towards usability guidelines for mobile websites and applications. In Proceedings of the International Conference on Wirtschaftsinformatik. 1603–1617.
[45]
Ian Shoenberger, Mohamed Wiem Mkaouer, and Marouane Kessentini. 2017. On the use of smelly examples to detect code smells in JavaScript. In Proceedings of the European Conference on the Applications of Evolutionary Computation. Springer, 20–34.
[46]
Andreas Sonderegger and Juergen Sauer. 2010. The influence of design aesthetics in usability testing: Effects on user performance and perceived usability. Appl. Ergonom. 41, 3 (2010), 403–410.
[47]
Makram Soui, Mabrouka Chouchane, Ines Gasmi, and Mohamed Wiem Mkaouer. 2017. PLAIN: PLugin for predicting the usAbility of mobile user INterface. In Proceedings of the International Joint Conference on Computer Vision, Imaging and Computer Graphics Theory and Applications (VISIGRAPP’17). 127–136.
[48]
I Standard. 1998. Ergonomic requirements for office work with visual display terminals (vdts)–part 11: Guidance on usability. ISO Standard 9241-11: 1998. International Organization for Standardization (1998).
[49]
Xu Sun and Andrew May. 2013. A comparison of field-based and lab-based experiments to evaluate user experience of personalised mobile devices. In Proceedings of the Advances in Human-Computer Interaction 2013 (2013), 2.
[50]
Alistair Sutcliffe. 2009. Designing for user engagement: Aesthetic and attractive user interfaces. Synth. Lect. Hum.-center. Inf. 2, 1 (2009), 1–55.
[51]
Gustavo F. Tondello, Rina R. Wehbe, Rita Orji, Giovanni Ribeiro, and Lennart E. Nacke. 2017. A framework and taxonomy of videogame playing preferences. In Proceedings of the Annual Symposium on Computer-Human Interaction in Play. ACM, 329–340.
[52]
Ali Türkyilmaz, Simge Kantar, M. Enis Bulak, Ozgur Uysal, et al. 2015. User experience design: Aesthetics or functionality? In Managing Intellectual Capital and Innovation for Sustainable and Inclusive Society: Managing Intellectual Capital and Innovation; Proceedings of the MakeLearn and TIIM Joint International Conference 2015. ToKnowPress, 559–565.
[53]
Eric N. Wiebe, Allison Lamb, Megan Hardy, and David Sharek. 2014. Measuring engagement in video game-based environments: Investigation of the user engagement scale. Comput. Hum. Behav. 32 (2014), 123–132.
[54]
Aiko Yamashita and Leon Moonen. 2013. Exploring the impact of inter-smell relations on software maintainability: An empirical study. In Proceedings of the 2013 International Conference on Software Engineering. IEEE Press, 682–691.
[55]
Rosa Yáñez Gómez, Daniel Cascado Caballero, and José-Luis Sevillano. 2014. Heuristic evaluation on mobile interfaces: A new checklist. Sci. World J. 2014, Article 434326 (2014).
[56]
Mathieu Zen. 2013. Metric-based evaluation of graphical user interfaces: Model, method, and software support. In Proceedings of the 5th ACM SIGCHI Symposium on Engineering Interactive Computing Systems. ACM, 183–186.
[57]
Mathieu Zen and Jean Vanderdonckt. 2014. Towards an evaluation of graphical user interfaces aesthetics based on metrics. In Proceedings of the IEEE 8th International Conference on Research Challenges in Information Science (RCIS’14). IEEE, 1–12.

Cited By

View all

Index Terms

  1. On the Detection of Structural Aesthetic Defects of Android Mobile User Interfaces with a Metrics-based Tool

        Recommendations

        Comments

        Information & Contributors

        Information

        Published In

        cover image ACM Transactions on Interactive Intelligent Systems
        ACM Transactions on Interactive Intelligent Systems  Volume 11, Issue 1
        March 2021
        245 pages
        ISSN:2160-6455
        EISSN:2160-6463
        DOI:10.1145/3453938
        Issue’s Table of Contents
        Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected].

        Publisher

        Association for Computing Machinery

        New York, NY, United States

        Publication History

        Published: 15 March 2021
        Accepted: 01 July 2020
        Revised: 01 June 2020
        Received: 01 March 2019
        Published in TIIS Volume 11, Issue 1

        Permissions

        Request permissions for this article.

        Check for updates

        Author Tags

        1. Structural aesthetic defects
        2. automated evaluation
        3. Android MUI
        4. optimization algorithm
        5. NSGA-II

        Qualifiers

        • Research-article
        • Refereed

        Contributors

        Other Metrics

        Bibliometrics & Citations

        Bibliometrics

        Article Metrics

        • Downloads (Last 12 months)39
        • Downloads (Last 6 weeks)4
        Reflects downloads up to 16 Oct 2024

        Other Metrics

        Citations

        Cited By

        View all

        View Options

        Get Access

        Login options

        Full Access

        View options

        PDF

        View or Download as a PDF file.

        PDF

        eReader

        View online with eReader.

        eReader

        HTML Format

        View this article in HTML Format.

        HTML Format

        Media

        Figures

        Other

        Tables

        Share

        Share

        Share this Publication link

        Share on social media