UIS-Hunter: Detecting UI Design Smells in Android Apps

Similar to code smells in source code, UI design has visual design smells that indicate violations of good UI design guidelines. UI design guidelines constitute design systems for a vast variety of products, platforms, and services. Following a design system, developers can avoid common design issues and pitfalls. However, a design system is often complex, involving various design dimensions and numerous UI components. Lack of concerns on GUI visual effect results in little support for detecting UI design smells that violate the design guidelines in a complex design system. In this paper, we propose an automated UI design smell detector named UIS-Hunter (UI design Smell Hunter). The tool is able to (i) automatically process UI screenshots or prototype files to detect UI design smells and generate reports, (ii) highlight the violated UI regions and list the material design guidelines that the found design smells violate, and (iii) present conformance and violation UI design examples to assist understanding. This tool consists of a Material Design guidelines gallery website and a tool website. The gallery website is a back-end knowledge base that attaches conformance and violation examples to abstract design guidelines and allows developers and designers to explore the multi-dimensional space of a complex design system in a more structured way. As a front-end application, the tool website takes a UI design as input, returns a detailed UI design smell report, and marks the violation regions (if any). Moreover, the tool website presents conformance and violation examples based on the gallery website.

Automated summary

Visual design smells in UI design indicate violations of good design guidelines. By following a design system, developers can avoid common design issues. An automated UI design smell detector helps identify and address UI design problems.