Unveiling the User Experience Design of Mobile Animations from the Cognitive and Emotional Perspective

Existing research lacks a framework to analyze how mobile animations affect cognition and emotion. This study combines eye-tracking and the PAD scale within Garrett’s UX framework, examining how animation properties across structural, framework, and presentation layers shape user perception. The results show that: (1) Dynamic stimuli capture attention faster than static counterparts, particularly when task-relevant, though irrelevant animation may cause distraction; (2) Accelerated motions outperform uniform and decelerated animations in initial attentional capture, revealing a clear hierarchy of effectiveness; (3) Distinct transition styles evoke differentiated emotional responses—left-to-right slides induce mildness, bottom-to-top and zoom-in transitions elicit surprise, while hard cuts predominantly evoke boredom. This research contributes a novel, empirically-grounded framework that systematically maps specific animation parameters to cognitive and emotional outcomes. The findings offer actionable design guidelines for optimizing mobile animation implementation, bridging the gap between animation design principles and user psychology in human–computer interaction.