基于视觉浏览行为的购物类APP商品展示界面图文布局设计研究

Research on the Graphic Layout Design of Shopping APP Product Display Interface Based on Visual Browsing Behavior

目的通过眼动追踪技术探索被试浏览不同图文布局商品展示界面时的视觉行为规律。方法基于现有购物类APP商品展示界面的设计,制作双栏上图下文卡片式、左图右文列表式两种商品展示界面作为实验材料。招募40名健康被试进行实验,记录被试在自由浏览不同图文布局商品展示界面时的眼动数据。结果相较于双栏上图下文的卡片式布局,左图右文的列表式布局增加了用户对文字区域的关注及认知努力,平均注视持续时间显著增加,用户的浏览时间更长,而平均眼跳速度和平均眼跳幅度显著降低。无论哪种布局界面,屏幕中间区域都是用户关注的焦点,屏幕上方区域的信息容易被用户忽略。结论被试浏览双栏上图下文卡片式布局的商品展示界面时更关注图片,用户浏览行为呈现从左到右,自上而下的之字形规律。而浏览左图右文的列表式布局的界面时,用户更关注文字信息,自上而下逐条浏览。

Objective This paper aims to investigate the participants'visual browsing patterns on the product display interfaces with different graphic layouts.Methods two types of product display interfaces,two-column top card type,and left-right text list type were designed as the experimental material.Forty healthy participants were recruited to conduct an Eye-tracking experiment,and their eye movement data were recorded when they freely browsed the shopping app product display interfaces with different graphic layouts.Results the list-style layout increases the participants'attention to the text area,cognitive effort,and browsing time.The average fixation duration significantly increases,while the average saccade amplitude,and saccade velocity average significantly decrease.The middle area of the screen is the focus of participants'attention,and the product information at the top of the screen is easily ignored by participants.Conclusion The findings of the study showed that the participants paid more attention to the pictures when they browsed the product display interface with the card layout,and the participant browsing behavior showed a zigzag pattern from left to right.In contrast,participants were more focused on textual information in the list-style layout,and participants'browsing behavior was the top-down and zigzag pattern.