基于眼动实验的手机购物APP购物车按钮位置设计

余晓东，孙军华，叶春明，王思棋

(上海理工大学 管理学院，上海 200093)

1 引言

随着信息化程度的加深，购物APP逐渐成为现代人生活中必不可少的一部分。截至2020年12月，我国网络购物用户规模达7.82亿，手机网络支付用户规模达8.53亿，占手机网民的86.5%[1]，随着技术的发展和智能手机的普及，移动互联网购物和支付的用户的数量还将继续快速地增加。

移动互联网的用户行为模式很大程度上取决于手机购物APP的设计。目前对于手机APP的设计研究主要是从艺术设计和视觉设计的角度，或者从心理学的角度以及易用性的角度进行错误!未找到引用源。

眼动技术在研究页面布局方面能够发挥很大作用，能够有效改善各种APP的页面布局，提升其效率[5]。白学军等学者基于眼动实验总结出页面上、中方的信息会受到更多次数以及更长时间的注视；位于中间的信息再确认效果优于上下两方[8]。张婷等学者提出，在网店页面设计上，采用强烈的色彩对比手段，并融入时尚元素的店铺更受消费者喜爱[9]。

虽然目前利用眼动技术进行了很多相关研究，但使用眼动技术对手机购物APP具体功能键的研究却很少。因此本文研究以手机购物APP的购物车按钮为研究对象，通过实验设计，对用户操作购物车按钮的眼动指标与操作指标进行统计分析，确定影响用户使用购物车按钮效率的网页设计因素，并提出改进建议。

2 方法

2.1 对象

本文采取经过作业周期确定观测次数的办法来确定试验次数，本研究的单次实验时间为2-5 min，所以确定受测者的样本量至少为15个。本次实验共招募了19个被试，均为本科在读的大学生，其中男生12人，女生7人，均无色盲、色弱等缺陷症状，年龄在19-25岁之间，均有手机网购的经验，能够熟练使用包括淘宝，京东，每日优鲜在内的多款手机购物APP。被试者的裸眼视力或矫正视力经过核验都在1.0以上。通过数据提取与筛选，剔除一个无效的眼动数据，最终本实验分析的有效数据为18条。

2.2 实验仪器

本次实验使用的仪器为DG3(Dikablis Glass 3)眼镜式眼动仪，它是德国ERGONEERS研发的新一代可穿戴式眼动仪，延续了Dikablis眼动仪高精度的特性，同时降低了侵入性，它采用工程塑料材质，坚固、小巧，对被试的影响较低。

本次实验的地点为赢富仪器(上海)科技有限公司的一号实验室，光线明亮，房间的隔音效果也极佳，完全满足实验要求。

2.3 眼动实验指标选取

本文是对手机购物APP的购物车按钮位置进行比较性研究，通过实验设计，选择三个购物车位置差异较大的手机购物APP，让实验者在每个APP上进行购物操作，通过比较受测者的眼动和操作指标，来确定购物车按钮的最佳位置，提出改善对策。

通过预实验，对眼动指标数据统计分析后，本研究将总任务时间、总注视次数、注视持续时间、平均注视时间、目标注视率、兴趣区注意力集中率作为本次研究的眼动指标，各指标的含义见表1所示。

表1 眼动指标及其含义

在浏览了当前网络上大部分购物APP后，本实验挑选了三个比较有代表性的包含上述购物车按钮类型的手机购物APP进行实验研究，这三个APP分别是天猫超市，每日优鲜，唯品会。

2.4 兴趣区设定

兴趣区(Area Of Interest),简称AOI，是指分析中的目标区域，与研究目的相关的刺激区域。在眼动实验中，根据不同的眼动仪配套软件，实验设计者可以在实验开始前或者试验结束后提取数据的过程中，利用软件在被试材料上画出一个区域，这个区域可以被单独分析并提取相应的指标，区别于测试材料上的其他区域。

图1 天猫超市兴趣区1和兴趣区2的设定

在眼动实验的过程中，眼动测试的材料大多是一段视频或者一个界面，要求被试者完成特定的任务。在这种情况下，由于注视时伴随的飘移、震颤、微小的不随机眼跳以及所研究界面上其余的有吸引力的图标或者位置，眼动的轨迹不可能是完全吻合研究任务所规划的路径，通常会随机分布于规划路径两侧，甚至有被试者完全偏离轨迹，通过另外的路径完成任务，此时，想要比较准确的继续研究测试材料，必须精准的划分兴趣区域。

本文主要研究购物APP购物车按钮位置，故将天猫超市，每日优鲜与唯品会三个软件的主要购物车按钮位置划分为兴趣区，着重记录研究兴趣区内的各种眼动指标数据。图1是以天猫超市为例设计的兴趣区1和兴趣区2。

2.5 实验流程

(1)打开天猫超市；

(2)首先打开主页面的购物车，查看其中的商品；

(3)退回主页面；

(4)在搜索框中搜索“香蕉”；

(5)在搜索结果页面直接将第一个商品加入购物车；

(6)查看购物车，查看加入后的商品；

(7)退回主页面；

(8)在搜索框中搜索“笔记本电脑”；

(9) 选择第一个商品，在商品详情页面将其加入购物车；

(10)查看购物车，查看加入后的商品；

(11)退回主页面；

(12)退回桌面，打开每日优鲜APP；

(13)重复上述2-11操作；

(14)退回桌面，打开唯品会APP；

(15) 重复上述2-11操作。

所有实验者都会在同一部手机上进行相同的操作，手机型号为小米手机Redmi K40 Pro。

3 结果

3.1 眼动数据分析

对三个APP的总任务时间、总注视次数、注视持续时间、平均注视时间、目标注视率、兴趣区注意力集中率等六个眼动指标进行单因素方差分析，结果发现，总任务时间，兴趣区2的总注视时间，兴趣区2注视次数，兴趣区2的注意力集中率四项眼动指标具有显著的差异，具体结果如表2所示。

表2 三个APP的眼动数据单因素方差分析统计

将三个APP相应的眼动数据两两对比进行单因素方差分析，结果表明天猫超市与每日优鲜在兴趣区2的注视次数以及注意力集中率的实验数据没有显著性差异，天猫超市与唯品会在任务时间上也并没有显著差异，其余两两指标数据均有显著差异。

3.2 操作数据分析

操作者的动作时间也是代表操作效率的指标之一，因此本研究利用眼动仪录下的视频，又提取了以下4个指标，进行统计分析。

(1)首页购物车按钮搜索时间

(2)搜索页面购物车按钮的搜索时间

(3)商品详情页面购物车按钮的搜索时间

(4)商品详情页面添加购物车时间

对上述指标数据进行单因素方差分析发现，四个操作时间的指标都具有显著的差异，得到具体的结果如表3所示。

表3 操作数据单因素方差统计

将三个APP相应的操作数据两两对比进行单因素方差分析，结果表明每日优鲜与唯品会在商品详情页面、搜索页面、首页的购物车按钮搜索时间的实验数据上均无显著性差异，天猫超市与唯品会在搜索页面购物车按钮的搜索时间上也无显著差异，其余指标数据均有显著性差异。

将三个APP的具有显著差异的眼动指标和操作指标数据进行比较，如图2和图3所示。

图2 眼动指标均值对比折线图

图3 操作指标的均值对比折线图

3.3 数据比较分析

由表2眼动数据比较分析可见，对于购物车按钮使用效率的主要影响因素集中在兴趣区2。在完全相同的实验流程下，每日优鲜的总任务时间要短于天猫超市，显著短于唯品会，从整体的操作效率角度来看，每日优鲜的购物车按钮位置以及布局在三者中处于最优地位。

在对于兴趣区2的注视次数、注视时间以及注意力集中率的均值对比中，搜索效率上依旧是每日优鲜大于天猫超市，天猫超市大于唯品会。但具体指标均值来看，天猫超市和每日优鲜均值相差并不明显，而唯品会的均值与前两者相比有非常明显的差距，这表明对于兴趣区2的操作，被试者在使用前两款软件时的搜索时间和决策时间要远远短于唯品会，而这一点在提取的时间指标上也得到了证明，商品详情页面添加购物车的时间中，天猫超市为2.7778s、每日优鲜为2.1111s、而唯品会为3.8886s，明显高于前两者，在加入购物车时，被试者有明显的犹豫时间。

其余的时间数据依旧是每日优鲜的数据占优，而在首页购物车按钮搜索时间均值上，天猫超市为5s,每日优鲜和唯品会都为3s，天猫超市的首页购物车按钮搜索时间要明显高于每日优鲜与唯品会，这表明被试者在使用天猫超市APP时在首页搜索购物车按钮效率低，其位置设置明显不合理，需要改进。

通过以上分析可知：

(1)三个手机购物APP中，每日优鲜在购物车的按钮位置设计是最优的。

(2)需要进一步探究在天猫超市与每日优鲜搜索页面购物车按钮位置布局基本相同的情况下，其搜索页面的购物车按钮搜索时间指标经分析具有显著差异并且均值上也有差别的原因。

(3)天猫超市APP在首页的购物车按钮设计并不合理。其搜索时间指标上与另外两个APP都有显著性差异，均值比较上也高于另外两个APP。

(4)唯品会在兴趣区2的购物车按钮位置设计并不合理。其在兴趣区2上的所有眼动指标都与其余两个APP存在显著差异。而在搜索时间指标中，添加购物车时间指标也与其余APP显著差异，均值远大于其余APP，用户存在明显的迟疑和犹豫，需要改进。

4 讨论

4.1 不同页面的购物车按钮最佳位置不同

(1)首页购物车按钮位置应优先设置于手机屏幕的下边线处

手机购物APP的首页购物车按钮直接会影响到消费者的购买欲望，可以说是至关重要，关于手机购物APP的首页购物车按钮位置的设计，首先必须是易于发现的，用户可以很轻易的找寻到购物车按钮的位置来使用这项功能辅助购物，常见的易于发现的位置有手机屏幕的左上、右上、左下、右下是个角落与上下左右四条边线位置。其次必须考虑到用户的普遍习惯，目前市面上大部分手机购物APP的首页购物车按钮位置都设置在首页下边线位置，具体位置会有微小的差异，这会给用户心理暗示，形成普遍的用户习惯，在首页寻找购物车时，用户会下意识地向手机下边线方向寻找，如果此时购物车按钮并不在下边线处，则会开始注意手机的四个角落，这会造成搜索效率的极大降低，天猫超市的首页购物车按钮设置在右上角，显然与用户的普遍习惯并不吻合，其在实验中的相关指标也证明用户对于天猫超市APP首页购物车按钮的搜索效率是最低的。

(2)搜索页面的购物车按钮位置应优先设置于右上角

搜索页面购物车按钮位置依旧需要考虑易于发现性，将范围缩小至手机上下左右四条边线与四个角落，其次考虑到在搜索页面添加购物车的动作必定发生在“搜索”动作之后，搜索栏一般设置于上边线处，再综合考虑用户普遍的使用习惯，推荐设置于页面右上角处。

(3)商品详情页面购物车按钮位置应优先在下边线和右上角共同设立

商品详情页面是大部分高端商品或类型复杂商品添加进购物车的必需页面，“查看购物车”行为在这个页面普遍发生，购物车按钮位置的搜索效率对于商品的成交成功率起到较大的影响，根据用户的普遍习惯与查看购物车前必要的“添加购物策车”行为，推荐设置在页面下边线“添加购物车”按钮的旁边；并且由于搜索页面购物车按钮通常放置于右上角，会对用户造成一定的搜索导向性，将商品详情页面购物车按钮位置设置在右上角也是一个好的选择。目前大部分手机购物APP在商品详情页面会在以上提到的两个位置共同设立购物车按钮。

4.2 基于工效学对购物车按钮进行设计

购物车的图标设计表达含义必须明确。唯品会的相关实验数据分析已经证明，不明确的图标设计会让用户产生明显的迟疑和思考，极大地降低整个购物操作的效率。购物车的图案设计应当简洁明了，含义表达明确，颜色搭配合理，不能为了其他方面的考虑而忽视压缩其原本功能的含义表达，唯品会APP的加入购物车按钮就是为了突出“抢购”这一特点而放弃原本的“加入购物车”的含义表达，造成用户操作不便，因小失大。

4.3 设置购物车图标追踪方式

在手机购物APP每日优鲜中，每次加入购物车按钮时，都会出现一个商品图片的缩略图，缩略图会由加入购物车按钮平滑移动到当前页面的购物车按钮中，有效的引导用户发现购物车的位置，也作为加入购物车操作成功的提示，如图4所示。本文将这种方式定义为“图标追踪方式”。

图4 图标追踪方式示意图

天猫超市与每日优鲜搜索页面购物车按钮位置布局基本相同，两者效率差异的原因就在于每日优鲜应用了图标追踪方式，而天猫超市没有，具体如下表4。

表4 天猫超市与每日优鲜的购物车按钮搜索效率差异

由表4可以清楚的看到，图标追踪方式的加入可以有效地引导用户发现购物车按钮的位置并且作为标志提醒用户加入购物车操作成功，及大幅度的提高用户对于购物车图标的搜索效率以及用户对于购物车系统的使用效率，因此建议手机购物APP加入图标追踪方式以提高用户的购物体验。

在实验中，被试者对于三个手机购物app使用的熟练程度不同，可能会导致实验结果出现些微的偏差，具体熟练度排名应当符合天猫超市大于每日优鲜，每日优鲜等于唯品会，而实验结果大致可归结为每日优鲜大于天猫超市，天猫超市大于唯品会，这反倒相当有效的证明“图标追踪方式”的优越性，而唯品会商品详情页面“添加购物车时间”与前两款APP相差过大，熟练度影响微乎其微。

5 结论

综上所述，本文利用眼动追踪实验，追踪研究用户在使用手机购物APP时使用购物车按钮的眼动过程以及操作过程，通过与试验以及指标数据提炼与比较确定研究指标，再通过单因素方差分析确定显著差异指标。在实验分析的基础上对选取的三款代表性手机购物APP的购物车按钮的设计存在的问题进行改进和优化，为今后对于手机购物APP购物车按钮位置的改进提供数据支撑和建议。

本研究还存在着一些局限，首先，在实验过程中，被试者所使用的头戴式眼动仪虽然保证了被试者头部较高的自由度，更容易捕捉手机屏幕，但过高的自由度使得视野不稳定，给后续的数据提取造成了很大困难，希望后续研究可通过其他方式尽量减少这方面的影响。其次，被试者在实验时的心理状态没有得到有效控制，过于紧张与过于放松都会对实验结果造成一定的影响，希望后续设计可以预先进行心理辅导以减少误差。