UiAnalyzer: Evaluating whether the UI of apps is at the risk of violating the design conventions in terms of function layout

There are many unofficial but widely accepted design conventions on the function layout of the user interface (UI) of apps, which include the position of functions and position relationship between functions. If an app fails to follow these design conventions, users may feel uncomfortable when using the app and this can negatively affect its market value. Unfortunately, no research is available to help app developers analyze whether the UI of their products is at the risk of violating the design conventions in terms of the function layout. To fill this gap, we propose a novel function layout analysis method called UiAnalyzer. This method compares the function layout of a UI with that of similar UIs to evaluate the acceptability of its function layout. Specifically, UiAnalyzer first generates semantic wireframes for the analyzed UI and similar UIs according to their function layout. Then, it extracts visual features from the semantic wireframes using a convolutional neural network and applies an anomaly detection algorithm to process the obtained visual features to determine whether the visual feature corresponding to the analyzed UI is anomalous. The experiment based on Google Play apps shows that UiAnalyzer is capable of evaluating the function layout of UIs of apps.

Automated summary

The study proposes a function layout analysis method called UiAnalyzer to help app developers evaluate the conformity of their UI's function layout with design conventions. The method compares the analyzed UI with similar UIs, generates semantic wireframes, extracts visual features, and determines the abnormality of the UI's function layout.