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. Demo URL: https://uishunter.net.cn/https://uishuntergallery.net.cn/Demo Video: https://youtu.be/7UZ0jtD_1gM

[1]  Xiaojuan Ma,et al.  Predicting and Diagnosing User Engagement with Mobile UI Animation via a Data-Driven Approach , 2020, CHI.

[2]  Yang Liu,et al.  Dynamic and Automatic Feedback-Based Threshold Adaptation for Code Smell Detection , 2016, IEEE Transactions on Software Engineering.

[3]  Zhenchang Xing,et al.  Gallery D.C.: Design Search and Knowledge Discovery through Auto-created GUI Component Gallery , 2019, Proc. ACM Hum. Comput. Interact..

[4]  W. Marsden.  I and J , 2012 .

[5]  Girish Suryanarayana,et al.  Refactoring for Software Design Smells: Managing Technical Debt , 2014 .

[6]  Zhenchang Xing,et al.  UIED: a hybrid tool for GUI element detection , 2020, ESEC/SIGSOFT FSE.

[7]  John F. Canny,et al.  A Computational Approach to Edge Detection , 1986, IEEE Transactions on Pattern Analysis and Machine Intelligence.

[8]  Gabriele Bavota,et al.  Detecting bad smells in source code using change history information , 2013, 2013 28th IEEE/ACM International Conference on Automated Software Engineering (ASE).

[9]  Zhenchang Xing,et al.  Seenomaly: Vision-Based Linting of GUI Animation Effects Against Design-Don't Guidelines , 2020, 2020 IEEE/ACM 42nd International Conference on Software Engineering (ICSE).

[10]  Jeffrey Nichols,et al.  Rico: A Mobile App Dataset for Building Data-Driven Design Applications , 2017, UIST.

[11]  Mauricio A. Saca.  Refactoring improving the design of existing code , 2017, 2017 IEEE 37th Central America and Panama Convention (CONCAPAN XXXVII).

[12]  Boyang Li,et al.  Automated Reporting of GUI Design Violations for Mobile Apps , 2018, 2018 IEEE/ACM 40th International Conference on Software Engineering (ICSE).

[13]  Shuchang Zhou,et al.  EAST: An Efficient and Accurate Scene Text Detector , 2017, 2017 IEEE Conference on Computer Vision and Pattern Recognition (CVPR).

[14]  Monika Eisenhower,et al.  Elements Of Survey Sampling , 2016 .

[15]  Zhenchang Xing,et al.  Object detection for graphical user interface: old fashioned or deep learning or a combination? , 2020, ESEC/SIGSOFT FSE.