UIGuider: Detecting Implicit Design Guidelines Using a Domain Knowledge Graph Approach

Mobile application developers must adhere to a set of design guidelines to ensure consistency in graphical user interfaces (GUIs) and strive for best practices. Violating these widely accepted design guidelines can negatively impact user experience and diminish an application's market value. Although a few explicit design guidelines outline specific user interface layouts to avoid, substantial design knowledge remains scattered across various web pages. This implicit design knowledge includes design guidelines for UI component usage scenarios, anatomy, fine-grained categorizations, etc. Manually inspecting design guideline violations is knowledge-intensive and time-consuming, demanding high levels of expertise. To address this, we propose UIGuider, a novel approach to automatically constructing a component-based design knowledge graph using multimodal data. UIGuider can discern valuable text containing design guidelines, extract component and concept entities, and establish relationships among them. Our experiments demonstrate the effectiveness and usefulness of UIGuider in automatically detecting implicit design guidelines and constructing domain knowledge graphs. Additionally, the result presentation of a design violation detection tool is optimized. The results of user studies confirm that the use of the knowledge graph and real-world app datasets enhances the overall usability of the tool.