基于眼動實驗的手機購物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購物車按鈕位置的改進提供數據支撐和建議。

本研究還存在著一些局限，首先，在實驗過程中，被試者所使用的頭戴式眼動儀雖然保證了被試者頭部較高的自由度，更容易捕捉手機屏幕，但過高的自由度使得視野不穩定，給后續的數據提取造成了很大困難，希望后續研究可通過其他方式盡量減少這方面的影響。其次，被試者在實驗時的心理狀態沒有得到有效控制，過于緊張與過于放松都會對實驗結果造成一定的影響，希望后續設計可以預先進行心理輔導以減少誤差。