圖片復雜程度與呈現密度對消費者搜索效率影響

汪洋 張磊 楊海波

摘 要：電商手機APP交互界面的特點直接影響到用戶的體驗，進而影響銷售效果。采用眼動追蹤技術，記錄了52名被試搜索目標商品時的視線變化過程，探索電商手機APP圖片復雜程度與呈現密度對搜索效率的影響。結果表明，在圖片復雜程度方面，被試在簡單圖片條件下的搜索效率顯著高于復雜圖片條件；在圖片呈現密度方面，被試在每行呈現2圖條件下的搜索效率顯著高于每行呈現4圖；對于電商手機APP導航界面設計而言，導航圖片為簡單圖片、且每行呈現2圖時的搜索效率較好。

關鍵詞：電子商務，手機APP，搜索效率，眼動追蹤

中圖分類號：B 849；TB 472 文獻標識碼：A 文章編號：1672-7312（2018）03-0277-05

Abstract：The characteristics of the interface of the handset APP directly affect users experience，and then affect the sales effect.In this paper，the eye-tracking was used to record the data of 52 subjects to explore the influence of the complexity and the density of the APP images on the search efficiency.The results show that，in terms of the complexity of the picture，simple pictures as category navigation result in a high efficiency than complicity one；and in the aspect of image rendering density，2 pictures per row as category navigation result in a high efficiency than 4 pictures per row.For the e-commerce mobile phone APP navigation interface design，when the navigation picture is a simple picture，and when each row presents 2 pictures，the search efficiency is better

Key words：e-commerce；APP；search efficiency；eye movement

0 引 言

調查數據表明，2017年中國網絡購物市場繼續保持快速發展的態勢，電子商務逐漸成為商貿的主要方式之一。2017年11月11天貓當天交易額為1 682億，其中移動客戶端占總交易量的90%。電商購物手機APP作為電子商務重要的載體之一，并發揮巨大的作用。

近年來，眾多研究開始關注手機APP導航界面的設計效果。謝濤從用戶體驗的角度對界面圖形的微觀質感進行研究，說明界面色彩豐富、圖片質感高的用戶界面能夠促進其搜索效率[1]。代悅從認知加工的角度對圖形用戶界面的圖標進行分析，結果發現用戶的經驗、記憶等活動會影響他們理解圖標的效率[2]。章玉宛對蘋果手機界面進行分析，結果發現具有高清晰度、高理解性、易于掌控的界面更易于被用戶接受[3]。由此可以看出，在界面圖標的復雜程度對個體搜索效率影響方面還存在一定的爭論，需要進一步探討。

一些研究也探討了界面圖標呈現密度對個體搜索效率的影響。趙乃迪研究發現，在網頁信息搜索中，消費者更喜歡在高密度頁面中進行搜索[4]。但是吳曉莉等人對個體進行復雜系統人機交互界面操作時的行為進行分析發現，當頁面呈現內容過多時，個體由于認知資源所限，容易造成注意失效以及記憶錯誤等問題[5]。資源限制模型認為，個體的認知資源具有一定限度，因此要求個體根據活動內容的不同方面進行資源分配[6]。當個體面對簡單活動時，對認知資源的要求相對較低，而當個體面對復雜活動時，所需的認知資源相對較高，因此，當個體進行的任務中所受的干擾并不局限在某個感覺通道范圍之內時，個體能夠順利完成該任務，而當個體所受的干擾與任務所需的感覺通道相一致時，個體的任務完成效率會下降。

基于上述研究中的不一致，本研究從認知加工角度出發，利用眼動追蹤技術，對不同復雜程度、不同呈現密度導航圖片對用戶的搜索效率的影響進行探究，探求何種設計更利于消費者的搜索。在前人研究基礎上，本研究提出如下假設。

1）個體在簡單圖片導航的界面上搜索效率高于復雜圖片；

2）個體在每行呈現2圖時的搜索效率比每行呈現4圖時的效率高。

1 方法

1.1 被試

被試為隨機招募的52人（年齡在19～28歲之間），29名女性，23名男性。所有被試均無色盲、色弱等眼疾，視力或矯正視力均為正常水平，且都有使用智能手機進行網絡購物的經驗，網購經驗在2年以上。

1.2 實驗設計

實驗為2（圖片復雜程度：簡單、復雜）×2（呈現密度：每行4圖、每行2圖）完全被試內設計。

1.3 儀器設備

實驗儀器為SMI RED250型桌面式眼動儀，顯示器為19寸液晶顯示器，分辨率為1 360×1 024像素，眼動儀采樣頻率為250 Hz.刺激材料的呈現、數據記錄和數據處理均由眼動自帶軟件完成。

1.4 實驗材料及程序

實驗材料是模擬的電商手機APP導航原型界面，基于不同自變量，模擬界面設計分別為復雜程度（簡單、復雜）、呈現密度（每行2圖、每行4圖），且同一商品分類導航界面上的圖片數量不變。

實驗在眼動實驗室進行，每個被試單獨進行實驗。實驗中，要求被試坐在刺激屏幕正前方并將下頜放在下頜托上，眼睛與屏幕中心的距離保持60 cm左右。正式實驗前進行練習實驗，以便被試熟悉實驗流程和要求，整個實驗大約持續15分鐘。

1.5 數據處理

眼動數據首先使用SMI BeGaze 2.5進行處理，然后通過SPSS 21.0進行處理分析。本研究的因變量指標包括搜索時間、目標商品區域的到達時間、目標商品注視百分比3個指標。搜索時間是指自界面開始呈現倒被試找到目標商品為止的時間，搜索時間越短，表明被試的搜索效率越高；目標商品區域的到達時間是指圖片呈現開始，個體注視第一進入目標區域以前的時間，該指標值越小，表明個體的搜索效率越高；第三個是目標商品注視百分比，指被試對目標商品的注視時間除以總注視時間的比率，此值越高，表明被試的搜索效率越高。

2 結果分析

2.1 目標商品區域的到達時間

各實驗條件下不同目標商品區域到達時間的均值和標準差見表1.

經重復測量方差分析發現圖片復雜程度主效應顯著，F（1，51）=8.517，p<0.01，η2=0.143，說明被試在不同復雜程度圖片的導航界面上的對目標商品區域的到達時間存在顯著差異。進一步分析發現，被試在簡單圖片導航界面中的目標商品區域到達時間顯著短于復雜圖片條件，說明簡單圖片導航更易于使被試尋找到既定目標。

呈現密度主效應不顯著，F（1，51）=0.181，p>0.05，說明被試在不同密度的圖片導航界面上對目標商品區域的到達時間不存在顯著差異。

圖片復雜程度和呈現密度的交互作用顯著，F（1，51）=10.254，p<0.01，η2=0.167，說明被試在不同復雜程度、不同密度的圖片導航界面上對目標商品區域的到達時間存在顯著差異。簡單效應分析發現：①簡單圖片條件下，呈現密度主效應不顯著：F（1，51）=3.839，p>0.05，說明當圖片為簡單圖片時，被試在不同密度的圖片導航界面上對目標商品區域的到達時間不存在顯著差異；②復雜圖片條件下，呈現密度主效應顯著，F（1，51）=5.951，p<0.05，η2=0.104，說明當圖片為復雜圖片時，被試在不同密度的圖片導航界面上對目標商品區域的到達時間存在顯著差異。進一步分析發現，被試在每行呈現2圖的導航界面中對目標商品區域的到達時間顯著低于每行呈現4圖的導航界面，即被試在每行呈現2圖導航界面上比于每行呈現4圖的圖片導航界面上更容易注意到搜索目標；③每行呈現4圖條件下，圖片復雜程度主效應顯著，F（1，51）=16985，p<0.001，η2=0.250，說明當導航界面每行呈現4圖時，被試在不同復雜程度的圖片導航界面上對目標商品區域的到達時間存在顯著差異。進一步分析發現，被試在簡單圖片導航界面上對目標商品區域的到達時間顯著低于復雜圖片導航界面，即被試在簡單圖片導航界面上比復雜圖片導航界面上更容易注意到搜索目標，因而搜索效率更高；④每行呈現2圖條件下，圖片復雜程度主效應不顯著，F（1，51）=0.514，p >0.05，說明當導航界面每行呈現2圖時，被試在不同復雜程度的圖片導航界面上的對目標商品區域的到達時間不存在顯著差異。

2.2 搜索時間

各因素水平下被試的平均搜索時間和標準差見表2.

重復測量方差分析發現，圖片復雜程度主效應顯著，F（1，51）=24.441，p<0.001，η2=0.324，說明被試在不同復雜程度圖片導航界面上搜索效率存在顯著差異。進一步分析發現，被試在簡單圖片導航界面中的搜索效率高于復雜圖片導航界面。

呈現密度主效應顯著，F（1，51）=4.073，p<0.05，η2=0.074，說明被試在不同圖片密度導航界面上搜索效率存在顯著差異。進一步分析發現，被試在每行呈現2圖的導航界面中搜索效率高于每行呈現4圖的導航界面。

圖片復雜程度和呈現密度的交互作用顯著，F（1，51）=5.248，p<0.05，η2=0.093，說明被試在不同圖片復雜程度、不同呈現密度的導航界面上的搜索效率存在顯著差異。簡單效應分析發現：①在簡單圖片條件下，呈現密度主效應顯著，F（1，51）=10.188，p<0.01，η2=0.166，表明當圖片為簡單圖片時，被試在不同呈現密度條件下的搜索效率存在顯著差異。進一步分析發現，被試在每行呈現2圖條件下的搜索時間顯著低于每行呈現4圖條件，即被試在每行呈現2圖時的搜索效率顯著高于每行呈現4圖時的搜索效率；②在復雜圖片條件下，呈現密度主效應不顯著，F（1，51）=0.065，p>0.05，說明當圖片為復雜圖片時，被試在不同呈現密度條件下的搜索效率不存在顯著差異；③在每行呈現4圖條件下，圖片復雜程度主效應不顯著，F（1，51）=1463，p>0.05；④在每行呈現2圖條件下，圖片復雜程度主效應顯著，F（1，51）=27.680，p<0.001，η2=0.352，表明當導航界面每行呈現2圖時，被試在不同復雜程度圖片條件下的搜索效率存在顯著差異。進一步分析發現，被試在簡單圖片條件下的搜索時間顯著低于復雜圖片條件，即被試在簡單圖片導航界面上的搜索效率顯著高于復雜圖片導航界面。

2.3 目標商品注視百分比

各條件下被試對目標商品注視百分比的平均數和標準差見表3.

重復測量方差分析發現。

圖片復雜程度主效應顯著，F（1，51）=10.724，p<0.01，η2=0.174，說明被試在不同復雜程度圖片條件下對目標商品的注視百分比存在顯著差異。進一步分析發現，被試在簡單圖片導航界面下的目標商品注視百分比高于復雜圖片導航界面。

呈現密度主效應顯著，F（1，51）=24.865，p<0.001，η2=0.328，說明被試在不同呈現密度條件下對目標商品的注視百分比存在顯著差異。進一步分析發現，被試在每行呈現2圖導航界面中目標商品注視百分比低于每行呈現4圖的導航界面。

圖片復雜程度和呈現密度的交互作用顯著，F（1，51）=4.360，p<0.05，η2=0.079，說明被試在不同復雜程度、不同呈現密度的導航界面上對目標商品的注視百分比存在顯著差異。簡單效應分析發現：①在簡單圖片條件下，呈現密度主效應顯著，F（1，51）=28.892，p<0.001，η2=0.361，說明當圖片為簡單圖片時，被試在不同呈現密度條件下的目標商品注視百分比存在顯著差異。進一步分析發現，被試在每行呈現2圖條件下的目標商品注視百分比顯著低于每行呈現4圖條件；②在復雜圖片條件下，呈現密度主效應顯著，F（1，51）=15.174，p<0.001，η2=0.229，說明當圖片為復雜圖片時，被試在不同呈現密度條件下的目標商品注視百分比存在顯著差異。進一步分析發現，被試在每行呈現2圖條件下的目標商品注視百分比顯著低于每行呈現4圖條件；③在每行呈現4圖時，圖片復雜程度主效應顯著，F（1，51）=11.802，p<0.01，η2=0.188，說明當導航界面每行呈現4圖時，被試在不同復雜程度的圖片導航界面上的搜索效率存在顯著差異。進一步分析發現，被試在簡單圖片條件下的目標商品注視百分比顯著低于復雜圖片條件；④在每行呈現2圖時，圖片復雜程度主效應顯著，F（1，51）=1.548，p>0.05，說明當導航界面每行呈現2圖時，被試在不同復雜程度的圖片導航界面下的目標商品注視百分比無顯著差異。

3 討 論

3.1 圖片呈現密度對搜索效率的影響

本研究發現，圖片呈現密度影響消費者的搜索效率。呈現密度影響搜索效率的機制，可以從知覺負載角度解釋。研究表明，個體的注意資源有限，當前任務進行時個體知覺負載量的高低對注意資源的分配具有決定作用[7]。當同時呈現的刺激物相對較多時，個體進行認知加工時所占用的注意資源相對較多，知覺加工負荷相對較高，因而對呈現刺激的加工速度相對降低；而當同時呈現的刺激物相對較少時，個體進行認知加工時所占用的注意資源就相對較少，知覺加工符合相對較低，因而對呈現刺激的加工速度相對較高。

葉晶瑩等研究了獼猴在不同注意任務類型及難度的情況下的微眼動情況，結果發現，隨著任務難度的增加，越來越多的注意資源被占用，因而獼猴對目標刺激辨別所需的反應時也隨之增加[8]。羅良等人對個體在不同記憶負荷條件下皮層慢電位的變化進行研究，結果發現，高負荷任務條件下所誘發的皮層慢電位成分顯著低于低負荷任務條件下的水平[9]。這表明，個體在進行高難度任務時，所占用的認知資源相對較多，右前額葉區-中央區域的抑制程度相對較大，因而對所呈現的無關刺激加工相對較少；而當個體在進行低難度任務時，所占用的認知資源相對較少，右前額葉區-中央區域相對較活躍，從而使大腦對無關刺激的進行加工，降低個體對于目標刺激的搜索效率，產生干擾效應。張斌等對工作記憶負荷對個體注意捕獲的影響進行研究，結果發現工作記憶負荷對注意捕獲有一定的影響，隨著工作記憶負荷水平的增加，個體對無關刺激的注意捕獲程度更大[10]。不難看出，當個體進行高難度任務時，所需的知覺負載量相對較高，因而占用了更多的注意資源，降低了個體對目標刺激的加工速度。在本實驗中，每行呈現4圖的圖片導航界面較每行呈現2圖的導航界面更為復雜，此時個體對導航界面中的圖片刺激加工占用了更多的注意資源，因而搜索效率相對較低。由此可以看出，導航界面每行呈現2圖時更利于個體的搜索。

3.2 圖片復雜程度對搜索效率的影響

Yantis認為，當個體注意被空間某個位置的刺激所吸引時，便會在大腦皮層上反映出有關刺激源的時空選擇，在對刺激源進行特定特征搜索的過程中，個體會有意的采用維度辨別模式進行。通過維度辨別模式，個體能夠清楚地了解到哪些刺激是目標刺激，哪些刺激是非目標刺激[11]。其實，個體在關注當前任務時，任務目標以表征的形式存在與工作記憶中[12]，同時，刺激呈現的方式、個體對非目標刺激的期待以及個體某些相對固定的搜索模式都會對注意加工有一定的影響。本研究中，簡單圖片導航界面的操作定義為單一商品、沒有任何修飾物的圖片為導航的界面；復雜圖片導航界面的操作定義為多重商品、有模特或色彩修飾的圖片為導航的界面。由此可見，簡單圖片導航界面上的刺激屬性相對較少，更容易與個體長時記憶中的刺激物原型或模板進行匹配，因而搜索效率相對較高；而復雜圖片導航界面上的刺激數量比簡單圖片導航界面上的刺激數量相對較多，增加了匹配難度及時間，在一定意義上降低了個體的搜索效率。且每行呈現4圖的導航界面比每行呈現2圖的導航界面占用了更多的認知加工資源，從另一方面增加了個體對刺激物的加工難度，因而降低了個體的搜索效率。

個體在認知某一刺激時，會將某種特定的感覺信息與長時記憶中已存儲的相關信息進行比較，進而選擇最佳匹配信息進行決斷[13]。也就是說，個體在對某一事物進行覺知時，會根據自己已有的經驗與當前刺激物的性質特點進行比較，當比較結果與個體經驗一致時，個體成功識別當前刺激物，當比較結果與個體經驗不一致時，個體通過將已有的經驗進行重組，再次與刺激物性質特點進行比較，并進行一致與不一致的判斷，直至成功識別。本研究的結果表明，不同復雜程度的圖片導航界面上搜索效率存在顯著差異，個體在簡單圖片導航界面中的搜索效率高于復雜圖片導航界面。

有研究表明，目標模式對個體的視覺搜索效率有一定的影響[14]。目標模式是指存儲于長時記憶中的具有目標關鍵特征的相應信息。目標的預先呈現對個體的視覺注意具有自上而下的引導作用，這使視覺范圍內具有目標關鍵特征的刺激物優先得到個體的注意[15]。本研究中，被試進行搜索任務之前，主試首先向被試呈現既定的文字性搜索目標，使得被試在進行視覺搜索之前首先形成了對目標的既定模式，因而在搜索任務過程中，當目標與被試頭腦中既定目標模式匹配性最強時，目標被識別[17-20]。由此可以看出，導航界面運用簡單圖片，個體進行導航更利于個體的模式識別，這是因為在簡單圖片導航界面上所呈現的無關刺激相對較少，從而更利于個體迅速找到既定目標。

4 結 語

1）在圖片復雜程度方面，被試在簡單圖片條件下的搜索效率顯著高于復雜圖片條件，這是因為個體在簡單圖片導航界面上進行搜索時，加工難度相對較小，既定目標也更容易引起注意。

2）在圖片呈現密度方面，被試在每行呈現2圖條件下的搜索效率顯著高于每行呈現4圖，這是因為過多的信息會干擾個體的搜索效率，進而影響既定目標的選擇。因此，對于電商手機APP導航界面設計而言，導航界面為簡單圖片、且每行呈現2圖時不僅能夠降低個體在搜索既定目標時的認知加工難度，更利于提升消費者的搜索效率。

參考文獻：

[1] 謝 濤.圖形化用戶界面設計中的微觀質感體現[J].美術大觀，2014（03）：91.

[2]代 悅.以用戶認知為導向的圖標設計[J].設計，2012（02）：98-99.

[3]章玉宛.怎樣設計你的蘋果——淺析iPhone及應用軟件的用戶界面[J].美術教育研究，2014（05）：86-88.

[4]趙乃迪.網頁布局對視覺搜索影響的眼動研究[D].上海：復旦大學，2012.

[5]吳曉莉，薛澄岐，王海燕，等.復雜系統人機交互界面的E-C映射模型[J].機械工程學報，2014，50（12）：206-212.

[6]Kahneman.Attention and effort[M].Englewood Cliffs，NJ：Prentice Hall，1973.

[7]Lavie N.Distracted and confused？Selective attention under load[J].Trends in Cognitive Sciences，2005（09）：75-82.

[8]葉晶瑩，薛林雁，黃 丹，等.不同注意任務類型及難度對獼猴微眼動的影響[J].生物化學與生物物理進展，2014，41（09）：860-869.

[9]羅 良，林崇德，劉兆敏，等.客體工作記憶任務中大腦皮層活動的記憶負荷效應[J].心理學報，2006，38（06）：805-814.

[10]張 斌，張智君，蔡太生.工作記憶負荷對注意捕獲的影響研究[J].心理科學，2011，34（01）：33-37.

[11]Yantis S.Goal-directed and stimulus-driven determinants of attentional control[C]//In Monsell S and Driver J Attention and Performance（Eds.）.Cambridge，MA：MIT Press，2000，18：73-103.

[12]Soto D，Heinke D，Humphreys G W，et al.Early，involuntary top-dowm guidance of attention from working memory[J].Journal of Experimental Psychology：Human Perception and Performance，2005，31（02）：248-261.

[13]Tedesco D，Schade A，Pernice K，et al.Site map usability[M].London：NN/g-Nielsen Norman Group，2008.

[14]Wolfe J M.Guided search 2.0：a revised model of visual search[J].Psychonomic Bulletin and Review，1994（01）：202-238.

[15]Duncan J，Humphrey G W.Beyond the search surface：visual search and attentional engagement[J].Journal of Experimental Psychology：Human Perception and Performance，1992（18）：578-588.

[16]Wolfe J M.Preattentive object files：Shapeless bundles of basic features[J].Vision Research，1997，37（01）：23-31.

[17]Theeuwes J.Cross-dimensional perceptual selectivity[J].Perception and Psychophysics，1991，50（06）：184-193.

[18]Theeuwes J.Perceprual selectivity for colour and form[J].Perception and Psychophysics，1992，51（03）：599-606.

[19]Theeuwes J.Stimulus-driven capture and attentional set：selective search for color and visual abrupt onsets[J].Journal of Experimental Psychology：Human Perception and Performance，1994，20（01）：799-806.

[20]Theeuwes J，Burger R.Attentional control during visual search：the effect of irrelevant singletons[J]..Journal of Experimental Psychology：Human Perception and Performance，1998，24（03）：1342-1353.

（責任編輯：張 江）