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

人类工效学２０２３年７月第２９卷第４期ＣｈｉｎｅｓｅＪｏｕｒｎａｌｏｆＥｒｇｏｎｏｍｉｃｓꎬＪｕｌｙꎬ２０２３ꎬＶｏｌ.２９ꎬＮｏ.４９

基于视觉浏览行为的购物类ＡＰＰ商品展示

界面图文布局设计研究

任增根ꎬ郭伏ꎬ李明明ꎬ李浩

(东北大学工商管理学院ꎬ沈阳１１０１６９)

【摘要】目的通过眼动追踪技术探索被试浏览不同图文布局商品展示界面时的视觉行为规律ꎮ方法基

于现有购物类ＡＰＰ商品展示界面的设计ꎬ制作双栏上图下文卡片式、左图右文列表式两种商品展示界面作为

实验材料ꎮ招募４０名健康被试进行实验ꎬ记录被试在自由浏览不同图文布局商品展示界面时的眼动数据ꎮ

结果相较于双栏上图下文的卡片式布局ꎬ左图右文的列表式布局增加了用户对文字区域的关注及认知努

力ꎬ平均注视持续时间显著增加ꎬ用户的浏览时间更长ꎬ而平均眼跳速度和平均眼跳幅度显著降低ꎮ无论哪

种布局界面ꎬ屏幕中间区域都是用户关注的焦点ꎬ屏幕上方区域的信息容易被用户忽略ꎮ结论被试浏览双

栏上图下文卡片式布局的商品展示界面时更关注图片ꎬ用户浏览行为呈现从左到右ꎬ自上而下的之字形规

律ꎮ而浏览左图右文的列表式布局的界面时ꎬ用户更关注文字信息ꎬ自上而下逐条浏览ꎮ

【关键词】人机交互ꎻ界面ꎻ产品设计ꎻ购物类ＡＰＰꎻ图文布局ꎻ眼动追踪ꎻ用户体验

中图分类号:ＴＢ１８文献标识码:Ａ文章编号:１００６－８３０９(２０２３)０４－０００９－０６

ＤＯＩ:１０.１３８３７/ｊ.ｉｓｓｎ.１００６－８３０９.２０２３.０４.０００２

ＲｅｓｅａｒｃｈｏｎｔｈｅＧｒａｐｈｉｃＬａｙｏｕｔＤｅｓｉｇｎｏｆＳｈｏｐｐｉｎｇＡＰＰＰｒｏｄｕｃｔ

ＤｉｓｐｌａｙＩｎｔｅｒｆａｃｅＢａｓｅｄｏｎＶｉｓｕａｌＢｒｏｗｓｉｎｇＢｅｈａｖｉｏｒ

ＲＥＮＺｅｎｇ－ｇｅｎꎬＧＵＯＦｕꎬＬＩＭｉｎｇ－ｍｉｎｇꎬＬＩＨａｏ

(ＳｃｈｏｏｌｏｆＢｕｓｉｎｅｓｓＡｄｍｉｎｉｓｔｒａｔｉｏｎꎬＮｏｒｔｈｅａｓｔｅｒｎＵｎｉｖｅｒｓｉｔｙꎬＳｈｅｎｙａｎｇ１１０１６９ꎬＣｈｉｎａ)

【Ａｂｓｔｒａｃｔ】ＯｂｊｅｃｔｉｖｅＴｈｉｓｐａｐｅｒａｉｍｓｔｏｉｎｖｅｓｔｉｇａｔｅｔｈｅｐａｒｔｉｃｉｐａｎｔｓｖｉｓｕａｌｂｒｏｗｓｉｎｇｐａｔｔｅｒｎｓｏｎｔｈｅｐｒｏｄｕｃｔｄｉｓ￣

ｐｌａｙｉｎｔｅｒｆａｃｅｓｗｉｔｈｄｉｆｆｅｒｅｎｔｇｒａｐｈｉｃｌａｙｏｕｔｓ.Ｍｅｔｈｏｄｓｔｗｏｔｙｐｅｓｏｆｐｒｏｄｕｃｔｄｉｓｐｌａｙｉｎｔｅｒｆａｃｅｓꎬｔｗｏ－ｃｏｌｕｍｎｔｏｐｃａｒｄ

ｔｙｐｅꎬａｎｄｌｅｆｔ－ｒｉｇｈｔｔｅｘｔｌｉｓｔｔｙｐｅｗｅｒｅｄｅｓｉｇｎｅｄａｓｔｈｅｅｘｐｅｒｉｍｅｎｔａｌｍａｔｅｒｉａｌ.Ｆｏｒｔｙｈｅａｌｔｈｙｐａｒｔｉｃｉｐａｎｔｓｗｅｒｅｒｅｃｒｕｉｔｅｄｔｏ

ｃｏｎｄｕｃｔａｎＥｙｅ－ｔｒａｃｋｉｎｇｅｘｐｅｒｉｍｅｎｔꎬａｎｄｔｈｅｉｒｅｙｅｍｏｖｅｍｅｎｔｄａｔａｗｅｒｅｒｅｃｏｒｄｅｄｗｈｅｎｔｈｅｙｆｒｅｅｌｙｂｒｏｗｓｅｄｔｈｅｓｈｏｐ￣

ｐｉｎｇａｐｐｐｒｏｄｕｃｔｄｉｓｐｌａｙｉｎｔｅｒｆａｃｅｓｗｉｔｈｄｉｆｆｅｒｅｎｔｇｒａｐｈｉｃｌａｙｏｕｔｓ.Ｒｅｓｕｌｔｓｔｈｅｌｉｓｔ－ｓｔｙｌｅｌａｙｏｕｔｉｎｃｒｅａｓｅｓｔｈｅｐａｒｔｉｃｉ￣

ｐａｎｔｓａｔｔｅｎｔｉｏｎｔｏｔｈｅｔｅｘｔａｒｅａꎬｃｏｇｎｉｔｉｖｅｅｆｆｏｒｔꎬａｎｄｂｒｏｗｓｉｎｇｔｉｍｅ.Ｔｈｅａｖｅｒａｇｅｆｉｘａｔｉｏｎｄｕｒａｔｉｏｎｓｉｇｎｉｆｉｃａｎｔｌｙｉｎｃｒｅａｓｅｓꎬ

ｗｈｉｌｅｔｈｅａｖｅｒａｇｅｓａｃｃａｄｅａｍｐｌｉｔｕｄｅꎬａｎｄｓａｃｃａｄｅｖｅｌｏｃｉｔｙａｖｅｒａｇｅｓｉｇｎｉｆｉｃａｎｔｌｙｄｅｃｒｅａｓｅ.Ｔｈｅｍｉｄｄｌｅａｒｅａｏｆｔｈｅｓｃｒｅｅｎ

ｉｓｔｈ