Academic Journal

Automated User Interface Prototyping Framework Integrating Cognitive and Visual Design Principles to Improve Usability and Layout Clarity.

Λεπτομέρειες βιβλιογραφικής εγγραφής
Τίτλος: Automated User Interface Prototyping Framework Integrating Cognitive and Visual Design Principles to Improve Usability and Layout Clarity.
Συγγραφείς: Shi J; School of Art and Communication, Shanghai Institute of Commerce and Foreign Languages., Chen D; Hubei College of the Arts; 13995582640@163.com.
Πηγή: Journal of visualized experiments : JoVE [J Vis Exp] 2026 Aug 14 (234). Date of Electronic Publication: 2026 Aug 14.
Τύπος έκδοσης: Journal Article; Video-Audio Media; Research Support, Non-U.S. Gov't
Γλώσσα: English
Στοιχεία περιοδικού: Publisher: MYJoVE Corporation Country of Publication: United States NLM ID: 101313252 Publication Model: Electronic Cited Medium: Internet ISSN: 1940-087X (Electronic) Linking ISSN: 1940087X NLM ISO Abbreviation: J Vis Exp Subsets: MEDLINE
Imprint Name(s): Original Publication: [Boston, Mass. : MYJoVE Corporation, 2006]-
Ιατρικοί όροι (MeSH): User-Computer Interface* , Cognition*, Convolutional Neural Networks ; Humans ; Color
Περίληψη: Effective user interface (UI) design requires a harmonious balance between visual appeal, cognitive usability, and layout consistency. However, current automatic UI generation approaches primarily focus on visual appearance or component detection and lack a unified framework that integrates cognitive principles, color intelligence, and structural reasoning. Furthermore, existing methods suffer from limited layout generalization, poor interpretability, static color selection, and inconsistent behavior across screens. In this context, this work proposes an automated UI prototyping framework that integrates the Faster region-based convolutional neural network (Faster R-CNN)-based component detection and CIECAM02 uniform color space (CAM02-UCS)-driven perceptual color modeling, enriched with cognitive and visual design principles. The Faster R-CNN is used to identify UI components and infer hierarchical structures from large-scale interface datasets. An enhanced color generation module analyzes brand or reference images to ensure perceptually uniform, harmonious, and usability-compliant color themes using CAM02-UCS. These outputs are further optimized through cognitive design rules, including Gestalt grouping, Fitts' and Hick's laws, attention-based spacing, and visual hierarchy modeling, to automatically generate refined, task-oriented UI layouts. Experiments conducted on RICO, ENRICO, and Guo's UI Color Datasets show that the proposed system achieves 92.4% component detection accuracy, improves layout clarity and reading order accuracy by 18.7%, and produces color palettes rated 24.5% more harmonious by designers compared to baseline methods. User evaluations also indicate a 31% reduction in perceived cognitive load and a 28% increase in design consistency across screens. These findings demonstrate that combining deep learning-based structural understanding with perceptually grounded color modeling and cognitive design principles produces UI prototypes that are highly efficient, aesthetically coherent, and user-friendly. This framework establishes a novel, end-to-end approach to intelligent and human-centered automated UI prototyping.
Entry Date(s): Date Created: 20260818 Date Completed: 20260818 Latest Revision: 20260910
Update Code: 20260910
DOI: 10.3791/71071
PMID: 42611759
Βάση Δεδομένων: MEDLINE
Περιγραφή
ISSN:1940-087X
DOI:10.3791/71071