Towards the Automatic Restructuring of Structural Aesthetic Design of Android User Interfaces

Published in Computer Standards & Interfaces, 2021

Recommended citation: Bessghaier, N., Soui, M., & Ghaibi, N. (2022). Towards the automatic restructuring of structural aesthetic design of Android user interfaces. Computer Standards & Interfaces, 81, 103598. http://NarjesBessghaier.github.io/files/MUIRestructuring.pdf

End-user engagement heavily relies on the aesthetic design of the application’s user interfaces. Designers are keen to create user interfaces that are usable and appealing. However, fundamental design issues , such as inconsistent padding and margins, cluttered user interfaces, and a high variation of element sizes, are too frequent in a UI design.. Prior studies provided ready-to-implement user interface alternatives. However, the aesthetic quality of these alternative designs is not guaranteed, and it limits the creativity of designers. Therefore, we present in this study an automated approach for restructuring a user interface structural design based on its data model. Our framework checks the violation of 13 generic structural design standards provided by Google Material Design. Then, the framework provides a set of recommendations for each violated guideline based on the specifications of the evaluated MUI. As a proof of concept, we used the tool ADDET to evaluate the quality of the original and restructured versions of 511 user interfaces in terms of the number of aesthetic defects and aesthetic properties. The results revealed a significant positive difference with a mean of 0.59 for the benefit of restructured user interfaces with an improved set of 7 quality metrics. We have also found that our approach could improve to an extent the accessibility of some designs by providing bigger element sizes.