基于眼動實驗的手機購物APP購物車按鈕位置設(shè)計

余曉東，孫軍華，葉春明，王思棋

(上海理工大學(xué) 管理學(xué)院，上海 200093)

1 引言

隨著信息化程度的加深，購物APP逐漸成為現(xiàn)代人生活中必不可少的一部分。截至2020年12月，我國網(wǎng)絡(luò)購物用戶規(guī)模達7.82億，手機網(wǎng)絡(luò)支付用戶規(guī)模達8.53億，占手機網(wǎng)民的86.5%[1]，隨著技術(shù)的發(fā)展和智能手機的普及，移動互聯(lián)網(wǎng)購物和支付的用戶的數(shù)量還將繼續(xù)快速地增加。

移動互聯(lián)網(wǎng)的用戶行為模式很大程度上取決于手機購物APP的設(shè)計。目前對于手機APP的設(shè)計研究主要是從藝術(shù)設(shè)計和視覺設(shè)計的角度，或者從心理學(xué)的角度以及易用性的角度進行錯誤!未找到引用源。

眼動技術(shù)在研究頁面布局方面能夠發(fā)揮很大作用，能夠有效改善各種APP的頁面布局，提升其效率[5]。白學(xué)軍等學(xué)者基于眼動實驗總結(jié)出頁面上、中方的信息會受到更多次數(shù)以及更長時間的注視；位于中間的信息再確認效果優(yōu)于上下兩方[8]。張婷等學(xué)者提出，在網(wǎng)店頁面設(shè)計上，采用強烈的色彩對比手段，并融入時尚元素的店鋪更受消費者喜愛[9]。

雖然目前利用眼動技術(shù)進行了很多相關(guān)研究，但使用眼動技術(shù)對手機購物APP具體功能鍵的研究卻很少。因此本文研究以手機購物APP的購物車按鈕為研究對象，通過實驗設(shè)計，對用戶操作購物車按鈕的眼動指標(biāo)與操作指標(biāo)進行統(tǒng)計分析，確定影響用戶使用購物車按鈕效率的網(wǎng)頁設(shè)計因素，并提出改進建議。

2 方法

2.1 對象

本文采取經(jīng)過作業(yè)周期確定觀測次數(shù)的辦法來確定試驗次數(shù)，本研究的單次實驗時間為2-5 min，所以確定受測者的樣本量至少為15個。本次實驗共招募了19個被試，均為本科在讀的大學(xué)生，其中男生12人，女生7人，均無色盲、色弱等缺陷癥狀，年齡在19-25歲之間，均有手機網(wǎng)購的經(jīng)驗，能夠熟練使用包括淘寶，京東，每日優(yōu)鮮在內(nèi)的多款手機購物APP。被試者的裸眼視力或矯正視力經(jīng)過核驗都在1.0以上。通過數(shù)據(jù)提取與篩選，剔除一個無效的眼動數(shù)據(jù)，最終本實驗分析的有效數(shù)據(jù)為18條。

2.2 實驗儀器

本次實驗使用的儀器為DG3(Dikablis Glass 3)眼鏡式眼動儀，它是德國ERGONEERS研發(fā)的新一代可穿戴式眼動儀，延續(xù)了Dikablis眼動儀高精度的特性，同時降低了侵入性，它采用工程塑料材質(zhì)，堅固、小巧，對被試的影響較低。

本次實驗的地點為贏富儀器(上海)科技有限公司的一號實驗室，光線明亮，房間的隔音效果也極佳，完全滿足實驗要求。

2.3 眼動實驗指標(biāo)選取

本文是對手機購物APP的購物車按鈕位置進行比較性研究，通過實驗設(shè)計，選擇三個購物車位置差異較大的手機購物APP，讓實驗者在每個APP上進行購物操作，通過比較受測者的眼動和操作指標(biāo)，來確定購物車按鈕的最佳位置，提出改善對策。

通過預(yù)實驗，對眼動指標(biāo)數(shù)據(jù)統(tǒng)計分析后，本研究將總?cè)蝿?wù)時間、總注視次數(shù)、注視持續(xù)時間、平均注視時間、目標(biāo)注視率、興趣區(qū)注意力集中率作為本次研究的眼動指標(biāo)，各指標(biāo)的含義見表1所示。

表1 眼動指標(biāo)及其含義

在瀏覽了當(dāng)前網(wǎng)絡(luò)上大部分購物APP后，本實驗挑選了三個比較有代表性的包含上述購物車按鈕類型的手機購物APP進行實驗研究，這三個APP分別是天貓超市，每日優(yōu)鮮，唯品會。

2.4 興趣區(qū)設(shè)定

興趣區(qū)(Area Of Interest),簡稱AOI，是指分析中的目標(biāo)區(qū)域，與研究目的相關(guān)的刺激區(qū)域。在眼動實驗中，根據(jù)不同的眼動儀配套軟件，實驗設(shè)計者可以在實驗開始前或者試驗結(jié)束后提取數(shù)據(jù)的過程中，利用軟件在被試材料上畫出一個區(qū)域，這個區(qū)域可以被單獨分析并提取相應(yīng)的指標(biāo)，區(qū)別于測試材料上的其他區(qū)域。

圖1 天貓超市興趣區(qū)1和興趣區(qū)2的設(shè)定

在眼動實驗的過程中，眼動測試的材料大多是一段視頻或者一個界面，要求被試者完成特定的任務(wù)。在這種情況下，由于注視時伴隨的飄移、震顫、微小的不隨機眼跳以及所研究界面上其余的有吸引力的圖標(biāo)或者位置，眼動的軌跡不可能是完全吻合研究任務(wù)所規(guī)劃的路徑，通常會隨機分布于規(guī)劃路徑兩側(cè)，甚至有被試者完全偏離軌跡，通過另外的路徑完成任務(wù)，此時，想要比較準確的繼續(xù)研究測試材料，必須精準的劃分興趣區(qū)域。

本文主要研究購物APP購物車按鈕位置，故將天貓超市，每日優(yōu)鮮與唯品會三個軟件的主要購物車按鈕位置劃分為興趣區(qū)，著重記錄研究興趣區(qū)內(nèi)的各種眼動指標(biāo)數(shù)據(jù)。圖1是以天貓超市為例設(shè)計的興趣區(qū)1和興趣區(qū)2。

2.5 實驗流程

(1)打開天貓超市；

(2)首先打開主頁面的購物車，查看其中的商品；

(3)退回主頁面；

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

(5)在搜索結(jié)果頁面直接將第一個商品加入購物車；

(6)查看購物車，查看加入后的商品；

(7)退回主頁面；

(8)在搜索框中搜索“筆記本電腦”；

(9) 選擇第一個商品，在商品詳情頁面將其加入購物車；

(10)查看購物車，查看加入后的商品；

(11)退回主頁面；

(12)退回桌面，打開每日優(yōu)鮮APP；

(13)重復(fù)上述2-11操作；

(14)退回桌面，打開唯品會APP；

(15) 重復(fù)上述2-11操作。

所有實驗者都會在同一部手機上進行相同的操作，手機型號為小米手機Redmi K40 Pro。

3 結(jié)果

3.1 眼動數(shù)據(jù)分析

對三個APP的總?cè)蝿?wù)時間、總注視次數(shù)、注視持續(xù)時間、平均注視時間、目標(biāo)注視率、興趣區(qū)注意力集中率等六個眼動指標(biāo)進行單因素方差分析，結(jié)果發(fā)現(xiàn)，總?cè)蝿?wù)時間，興趣區(qū)2的總注視時間，興趣區(qū)2注視次數(shù)，興趣區(qū)2的注意力集中率四項眼動指標(biāo)具有顯著的差異，具體結(jié)果如表2所示。

表2 三個APP的眼動數(shù)據(jù)單因素方差分析統(tǒng)計

將三個APP相應(yīng)的眼動數(shù)據(jù)兩兩對比進行單因素方差分析，結(jié)果表明天貓超市與每日優(yōu)鮮在興趣區(qū)2的注視次數(shù)以及注意力集中率的實驗數(shù)據(jù)沒有顯著性差異，天貓超市與唯品會在任務(wù)時間上也并沒有顯著差異，其余兩兩指標(biāo)數(shù)據(jù)均有顯著差異。

3.2 操作數(shù)據(jù)分析

操作者的動作時間也是代表操作效率的指標(biāo)之一，因此本研究利用眼動儀錄下的視頻，又提取了以下4個指標(biāo)，進行統(tǒng)計分析。

(1)首頁購物車按鈕搜索時間

(2)搜索頁面購物車按鈕的搜索時間

(3)商品詳情頁面購物車按鈕的搜索時間

(4)商品詳情頁面添加購物車時間

對上述指標(biāo)數(shù)據(jù)進行單因素方差分析發(fā)現(xiàn)，四個操作時間的指標(biāo)都具有顯著的差異，得到具體的結(jié)果如表3所示。

表3 操作數(shù)據(jù)單因素方差統(tǒng)計

將三個APP相應(yīng)的操作數(shù)據(jù)兩兩對比進行單因素方差分析，結(jié)果表明每日優(yōu)鮮與唯品會在商品詳情頁面、搜索頁面、首頁的購物車按鈕搜索時間的實驗數(shù)據(jù)上均無顯著性差異，天貓超市與唯品會在搜索頁面購物車按鈕的搜索時間上也無顯著差異，其余指標(biāo)數(shù)據(jù)均有顯著性差異。

將三個APP的具有顯著差異的眼動指標(biāo)和操作指標(biāo)數(shù)據(jù)進行比較，如圖2和圖3所示。

圖2 眼動指標(biāo)均值對比折線圖

圖3 操作指標(biāo)的均值對比折線圖

3.3 數(shù)據(jù)比較分析

由表2眼動數(shù)據(jù)比較分析可見，對于購物車按鈕使用效率的主要影響因素集中在興趣區(qū)2。在完全相同的實驗流程下，每日優(yōu)鮮的總?cè)蝿?wù)時間要短于天貓超市，顯著短于唯品會，從整體的操作效率角度來看，每日優(yōu)鮮的購物車按鈕位置以及布局在三者中處于最優(yōu)地位。

在對于興趣區(qū)2的注視次數(shù)、注視時間以及注意力集中率的均值對比中，搜索效率上依舊是每日優(yōu)鮮大于天貓超市，天貓超市大于唯品會。但具體指標(biāo)均值來看，天貓超市和每日優(yōu)鮮均值相差并不明顯，而唯品會的均值與前兩者相比有非常明顯的差距，這表明對于興趣區(qū)2的操作，被試者在使用前兩款軟件時的搜索時間和決策時間要遠遠短于唯品會，而這一點在提取的時間指標(biāo)上也得到了證明，商品詳情頁面添加購物車的時間中，天貓超市為2.7778s、每日優(yōu)鮮為2.1111s、而唯品會為3.8886s，明顯高于前兩者，在加入購物車時，被試者有明顯的猶豫時間。

其余的時間數(shù)據(jù)依舊是每日優(yōu)鮮的數(shù)據(jù)占優(yōu)，而在首頁購物車按鈕搜索時間均值上，天貓超市為5s,每日優(yōu)鮮和唯品會都為3s，天貓超市的首頁購物車按鈕搜索時間要明顯高于每日優(yōu)鮮與唯品會，這表明被試者在使用天貓超市APP時在首頁搜索購物車按鈕效率低，其位置設(shè)置明顯不合理，需要改進。

通過以上分析可知：

(1)三個手機購物APP中，每日優(yōu)鮮在購物車的按鈕位置設(shè)計是最優(yōu)的。

(2)需要進一步探究在天貓超市與每日優(yōu)鮮搜索頁面購物車按鈕位置布局基本相同的情況下，其搜索頁面的購物車按鈕搜索時間指標(biāo)經(jīng)分析具有顯著差異并且均值上也有差別的原因。

(3)天貓超市APP在首頁的購物車按鈕設(shè)計并不合理。其搜索時間指標(biāo)上與另外兩個APP都有顯著性差異，均值比較上也高于另外兩個APP。

(4)唯品會在興趣區(qū)2的購物車按鈕位置設(shè)計并不合理。其在興趣區(qū)2上的所有眼動指標(biāo)都與其余兩個APP存在顯著差異。而在搜索時間指標(biāo)中，添加購物車時間指標(biāo)也與其余APP顯著差異，均值遠大于其余APP，用戶存在明顯的遲疑和猶豫，需要改進。

4 討論

4.1 不同頁面的購物車按鈕最佳位置不同

(1)首頁購物車按鈕位置應(yīng)優(yōu)先設(shè)置于手機屏幕的下邊線處

手機購物APP的首頁購物車按鈕直接會影響到消費者的購買欲望，可以說是至關(guān)重要，關(guān)于手機購物APP的首頁購物車按鈕位置的設(shè)計，首先必須是易于發(fā)現(xiàn)的，用戶可以很輕易的找尋到購物車按鈕的位置來使用這項功能輔助購物，常見的易于發(fā)現(xiàn)的位置有手機屏幕的左上、右上、左下、右下是個角落與上下左右四條邊線位置。其次必須考慮到用戶的普遍習(xí)慣，目前市面上大部分手機購物APP的首頁購物車按鈕位置都設(shè)置在首頁下邊線位置，具體位置會有微小的差異，這會給用戶心理暗示，形成普遍的用戶習(xí)慣，在首頁尋找購物車時，用戶會下意識地向手機下邊線方向?qū)ふ?，如果此時購物車按鈕并不在下邊線處，則會開始注意手機的四個角落，這會造成搜索效率的極大降低，天貓超市的首頁購物車按鈕設(shè)置在右上角，顯然與用戶的普遍習(xí)慣并不吻合，其在實驗中的相關(guān)指標(biāo)也證明用戶對于天貓超市APP首頁購物車按鈕的搜索效率是最低的。

(2)搜索頁面的購物車按鈕位置應(yīng)優(yōu)先設(shè)置于右上角

搜索頁面購物車按鈕位置依舊需要考慮易于發(fā)現(xiàn)性，將范圍縮小至手機上下左右四條邊線與四個角落，其次考慮到在搜索頁面添加購物車的動作必定發(fā)生在“搜索”動作之后，搜索欄一般設(shè)置于上邊線處，再綜合考慮用戶普遍的使用習(xí)慣，推薦設(shè)置于頁面右上角處。

(3)商品詳情頁面購物車按鈕位置應(yīng)優(yōu)先在下邊線和右上角共同設(shè)立

商品詳情頁面是大部分高端商品或類型復(fù)雜商品添加進購物車的必需頁面，“查看購物車”行為在這個頁面普遍發(fā)生，購物車按鈕位置的搜索效率對于商品的成交成功率起到較大的影響，根據(jù)用戶的普遍習(xí)慣與查看購物車前必要的“添加購物策車”行為，推薦設(shè)置在頁面下邊線“添加購物車”按鈕的旁邊；并且由于搜索頁面購物車按鈕通常放置于右上角，會對用戶造成一定的搜索導(dǎo)向性，將商品詳情頁面購物車按鈕位置設(shè)置在右上角也是一個好的選擇。目前大部分手機購物APP在商品詳情頁面會在以上提到的兩個位置共同設(shè)立購物車按鈕。

4.2 基于工效學(xué)對購物車按鈕進行設(shè)計

購物車的圖標(biāo)設(shè)計表達含義必須明確。唯品會的相關(guān)實驗數(shù)據(jù)分析已經(jīng)證明，不明確的圖標(biāo)設(shè)計會讓用戶產(chǎn)生明顯的遲疑和思考，極大地降低整個購物操作的效率。購物車的圖案設(shè)計應(yīng)當(dāng)簡潔明了，含義表達明確，顏色搭配合理，不能為了其他方面的考慮而忽視壓縮其原本功能的含義表達，唯品會APP的加入購物車按鈕就是為了突出“搶購”這一特點而放棄原本的“加入購物車”的含義表達，造成用戶操作不便，因小失大。

4.3 設(shè)置購物車圖標(biāo)追蹤方式

在手機購物APP每日優(yōu)鮮中，每次加入購物車按鈕時，都會出現(xiàn)一個商品圖片的縮略圖，縮略圖會由加入購物車按鈕平滑移動到當(dāng)前頁面的購物車按鈕中，有效的引導(dǎo)用戶發(fā)現(xiàn)購物車的位置，也作為加入購物車操作成功的提示，如圖4所示。本文將這種方式定義為“圖標(biāo)追蹤方式”。

圖4 圖標(biāo)追蹤方式示意圖

天貓超市與每日優(yōu)鮮搜索頁面購物車按鈕位置布局基本相同，兩者效率差異的原因就在于每日優(yōu)鮮應(yīng)用了圖標(biāo)追蹤方式，而天貓超市沒有，具體如下表4。

表4 天貓超市與每日優(yōu)鮮的購物車按鈕搜索效率差異

由表4可以清楚的看到，圖標(biāo)追蹤方式的加入可以有效地引導(dǎo)用戶發(fā)現(xiàn)購物車按鈕的位置并且作為標(biāo)志提醒用戶加入購物車操作成功，及大幅度的提高用戶對于購物車圖標(biāo)的搜索效率以及用戶對于購物車系統(tǒng)的使用效率，因此建議手機購物APP加入圖標(biāo)追蹤方式以提高用戶的購物體驗。

在實驗中，被試者對于三個手機購物app使用的熟練程度不同，可能會導(dǎo)致實驗結(jié)果出現(xiàn)些微的偏差，具體熟練度排名應(yīng)當(dāng)符合天貓超市大于每日優(yōu)鮮，每日優(yōu)鮮等于唯品會，而實驗結(jié)果大致可歸結(jié)為每日優(yōu)鮮大于天貓超市，天貓超市大于唯品會，這反倒相當(dāng)有效的證明“圖標(biāo)追蹤方式”的優(yōu)越性，而唯品會商品詳情頁面“添加購物車時間”與前兩款A(yù)PP相差過大，熟練度影響微乎其微。

5 結(jié)論

綜上所述，本文利用眼動追蹤實驗，追蹤研究用戶在使用手機購物APP時使用購物車按鈕的眼動過程以及操作過程，通過與試驗以及指標(biāo)數(shù)據(jù)提煉與比較確定研究指標(biāo)，再通過單因素方差分析確定顯著差異指標(biāo)。在實驗分析的基礎(chǔ)上對選取的三款代表性手機購物APP的購物車按鈕的設(shè)計存在的問題進行改進和優(yōu)化，為今后對于手機購物APP購物車按鈕位置的改進提供數(shù)據(jù)支撐和建議。

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