一句话:系统研究 Material Design 的 93 条“不要做”准则,量化 Android 应用中的 UI 设计坏味道,并构建自动检测器 UIS-Hunter。
论文把源代码中的代码坏味道概念扩展到 UI 设计,提出“视觉设计坏味道”。作者系统分析 Google Material Design 的 93 条 don't-do-that 准则,发现其远超美学范畴,涉及布局、排版、图标、导航、传达、色彩、形状七个设计维度,以及组件解剖、放置、行为、使用四个方面。对 9,286 个 Android 应用的 60,756 个 UI 的研究显示,2,587 个应用的 7,497 个 UI 至少违反一条准则,反映开发者缺乏训练与工具支持。为此作者实现自动检测器 UIS-Hunter,抽取并校验组件元数据、排版、图标、色彩与边缘等多模态 UI 信息,精确率 0.81、召回率 0.90;并提供准则画廊与用户研究,表明其优于人工检测,且违规对用户有严重负面影响。
Just like code smells in source code, UI design has visual design smells. We study 93 don't-do-that guidelines in the Material Design, a complex design system created by Google. We find that these don't-guidelines go far beyond UI aesthetics, and involve seven general design dimensions (layout, typography, iconography, navigation, communication, color, and shape) and four component design aspects (anatomy, placement, behavior, and usage). Violating these guidelines results in visual design smells in UIs (or UI design smells). In a study of 60,756 UIs of 9,286 Android apps, we find that 7,497 UIs of 2,587 apps have at least one violation of some Material Design guidelines. This reveals the lack of developer training and tool support to avoid UI design smells. To fill this gap, we design an automated UI design smell detector (UIS-Hunter) that extracts and validates multi-modal UI information (component metadata, typography, iconography, color, and edge) for detecting the violation of diverse don't-guidelines in Material Design. The detection accuracy of UIS-Hunter is high (precision=0.81, recall=0.90) on the 60,756 UIs of 9,286 apps. We build a guideline gallery with real-world UI design smells that UIS-Hunter detects for developers to learn the best Material Design practices. Our user studies show that UIS-Hunter is more effective than manual detection of UI design smells, and the UI design smells that are detected by UIS-Hunter have severely negative impacts on app users.
@inproceedings{YangX0CYL21,
title = {Don’t Do That! Hunting Down Visual Design Smells in Complex UIs Against Design Guidelines},
author = {Bo Yang and Zhenchang Xing and Xin Xia and Chunyang Chen and Deheng Ye and Shanping Li},
booktitle = {ICSE},
year = {2021},
doi = {10.1109/icse43902.2021.00075}
}