Research Article

User interface layout optimization design based on eye tracking simulation

¹ School of Art and Design, North China Institute of Aerospace Engineering, Langfang 065000, Hebei, PR China
² Faculty of Art, Sustainability and Creative Industry, Sultan Idris Education University, Tanjong Malim 359000, Perak, Malaysia

^* e-mail: xicuiyu@nciae.edu.cn

Received: 5 July 2025
Accepted: 3 September 2025

Abstract

To solve the problem of user visual attention distribution and spatial misalignment of interface elements in current user interface layout design due to reliance on subjective experience, this paper proposes an optimization method for fashion brand e-commerce user interface design that uses eye tracking simulation and integrates brand characteristics. This paper builds a fashion-specific visual behavior database through multimodal eye movement data collection, and uses the spatiotemporal attention mechanism of the Transformer-XL (Transformer with Extra Long Context) model to predict the gaze hotspots and scanning paths of users in dynamic tasks; then, this paper designs a multi-agent reinforcement learning optimizer, encodes aesthetic rules such as brand logo size and main color ratio as hard constraints, and generates an interface space distribution plan through element competition-collaboration game; finally, this paper develops a real-time interactive prototype based on the Unity engine to achieve dynamic layout closed-loop optimization driven by the collaborative efforts of brand constraints and eye movement simulation heat maps. Experimental results show that this method reduces the task completion time by 32% in the optimization of the light luxury clothing homepage, the overlap between the simulated and real eye movement hot spots reaches 88%, and the brand consistency score increases by 46% (from 3.2 to 4.7), significantly reducing the user's cognitive load and improving the user experience. The conclusion confirms that by integrating eye movement behavior quantification with brand characteristics, it is possible to break through the traditional design's reliance on static aesthetics, provide a “cognitive adaptation-brand expression” dual-goal collaborative intelligent design paradigm for fashion interfaces, and promote the simultaneous improvement of user conversion rate and brand value.