通過(guò)眼動(dòng)實(shí)驗(yàn)，作者分析總結(jié)了導(dǎo)購(gòu)頁(yè)面布局設(shè)計(jì)的幾個(gè)要點(diǎn)。在這里與大家分享，希望在大家設(shè)計(jì)導(dǎo)購(gòu)頁(yè)面的時(shí)候能夠有些啟發(fā)。

隨著“雙十一”的結(jié)束，一場(chǎng)全民網(wǎng)購(gòu)狂歡落下帷幕。當(dāng)往日的“血拼”戰(zhàn)場(chǎng)搬到網(wǎng)頁(yè)，曾經(jīng)的逛街路線(xiàn)成為今天的頁(yè)面瀏覽軌跡；穿衣鏡前的目光如炬變?yōu)槠聊磺白⒁晻r(shí)長(zhǎng)……網(wǎng)頁(yè)設(shè)計(jì)師們這時(shí)已經(jīng)忙的不亦樂(lè)乎了，因?yàn)轫?yè)面的排版布局、信息的陳列描述等無(wú)不影響用戶(hù)在虛擬世界的“血拼”體驗(yàn)。

• “消費(fèi)者關(guān)注什么？他們是如何瀏覽頁(yè)面的？”
• “促銷(xiāo)信息放在左側(cè)還是頂部？”
• “商品一行放3個(gè)還是5個(gè)？”
• ……

為了解答這些問(wèn)題，我們?cè)?014年初開(kāi)展了一次針對(duì)導(dǎo)購(gòu)網(wǎng)站的研究。通過(guò)眼動(dòng)測(cè)試及深度訪談等方法，了解用戶(hù)在不同導(dǎo)購(gòu)頁(yè)面的瀏覽行為及重點(diǎn)關(guān)注內(nèi)容，旨在為導(dǎo)購(gòu)類(lèi)頁(yè)面的設(shè)計(jì)帶來(lái)啟發(fā)。既然研究的是“導(dǎo)購(gòu)網(wǎng)站”，那么首先讓我們首先明確以下幾個(gè)問(wèn)題 ：

• 什么是導(dǎo)購(gòu)類(lèi)網(wǎng)站？導(dǎo)購(gòu)類(lèi)網(wǎng)站是提取電商中優(yōu)質(zhì)商品或品牌，推薦給用戶(hù)，以減少用戶(hù)時(shí)間的網(wǎng)站。
• 導(dǎo)購(gòu)類(lèi)網(wǎng)站布局都有哪些？通過(guò)對(duì)幾大電商導(dǎo)購(gòu)頁(yè)面的布局分析，抽象出以下幾種常見(jiàn)的頁(yè)面布局形式 ：

• 導(dǎo)購(gòu)網(wǎng)站的內(nèi)容主要有哪些？根據(jù)內(nèi)容的不同，可將其主要分為品牌導(dǎo)購(gòu)（如，京東青春）、單品導(dǎo)購(gòu)（如，易訊早市）、 團(tuán)購(gòu)導(dǎo)購(gòu)（如，美團(tuán)）、社區(qū)導(dǎo)購(gòu)（如，美麗說(shuō)）₁。

好啦，一切就緒，讓我們來(lái)看下研究全過(guò)程吧！

本次共招募了30位喜歡“逛”各類(lèi)導(dǎo)購(gòu)網(wǎng)站的用戶(hù)（男：女=7：23），與視覺(jué)和交互設(shè)計(jì)師共同商討選取了21個(gè)較有代表性的導(dǎo)購(gòu)網(wǎng)頁(yè)。為排除內(nèi)容的影響，眼動(dòng)實(shí)驗(yàn)采用靜態(tài)網(wǎng)頁(yè)₂，非真實(shí)網(wǎng)站。同時(shí)將實(shí)驗(yàn)素材設(shè)置了組內(nèi)隨機(jī)和組間隨機(jī)，以此來(lái)避開(kāi)頁(yè)面瀏覽順序?qū)τ脩?hù)造成的影響。即將實(shí)驗(yàn)素材按頁(yè)面內(nèi)容分為3類(lèi)（品牌測(cè)試頁(yè)、單品測(cè)試頁(yè)、主題測(cè)試頁(yè)₃ ），每類(lèi)頁(yè)面均采用隨機(jī)播放的形式，且每組用戶(hù)間看到的頁(yè)面內(nèi)容順序也有所差異。

眼動(dòng)結(jié)束后采用了PEEP法（Post Experience Eyetracked Protocol）讓用戶(hù)回溯。最終結(jié)合眼動(dòng)結(jié)果和訪談內(nèi)容我們得到了以下發(fā)現(xiàn)。同時(shí)根據(jù)用戶(hù)的行為習(xí)慣特征，做了關(guān)于逛導(dǎo)購(gòu)頁(yè)面用戶(hù)的人物畫(huà)像分析，這部分內(nèi)容就先在這里賣(mài)個(gè)關(guān)子，留著下期與大家共同分享。

1. 導(dǎo)購(gòu)類(lèi)網(wǎng)站內(nèi)容還有：比價(jià)導(dǎo)購(gòu)、打折促銷(xiāo)導(dǎo)購(gòu)和返利導(dǎo)購(gòu)等等。但由于這類(lèi)網(wǎng)站均以文字為主，因此不在本次眼動(dòng)研究范圍內(nèi)。
2. 靜態(tài)網(wǎng)頁(yè)像素與屏幕分辨率的寬度保持一致，盡量還原用戶(hù)瀏覽情境。
3. “主題測(cè)試頁(yè)”包含團(tuán)購(gòu)導(dǎo)購(gòu)頁(yè)面。

通過(guò)眼動(dòng)實(shí)驗(yàn)，我們?cè)凇绊?yè)面布局”與“信息元素的關(guān)注度”兩個(gè)維度上發(fā)現(xiàn)：

1. 不同的頁(yè)面布局下由于用戶(hù)視線(xiàn)軌跡的差異，因此適合承載的導(dǎo)購(gòu)頁(yè)面有所不同。
2. 不同類(lèi)型的導(dǎo)購(gòu)頁(yè)面中，用戶(hù)對(duì)圖片、文字、品牌等信息元素的關(guān)注度有所差異。

下面，我們將詳細(xì)分享這次的調(diào)研發(fā)現(xiàn)。

發(fā)現(xiàn)1：頁(yè)面布局對(duì)視線(xiàn)軌跡的影響

通過(guò)研究上文介紹過(guò)的三種頁(yè)面布局（網(wǎng)格式、一欄式、瀑布流式）的典型用戶(hù)視線(xiàn)軌跡，我們發(fā)現(xiàn)這些頁(yè)面從布局上能夠引導(dǎo)用戶(hù)形成特定模式的視線(xiàn)軌跡，而不同的視線(xiàn)軌跡將影響用戶(hù)對(duì)于頁(yè)面信息的認(rèn)知效率及加工深度。因此可以通過(guò)合理利用這些各具特色的頁(yè)面布局，來(lái)提升導(dǎo)購(gòu)頁(yè)面的轉(zhuǎn)化率。

（1） 網(wǎng)格式頁(yè)面布局

從下面的視線(xiàn)軌跡圖上，可以看出網(wǎng)格式頁(yè)面布局中，用戶(hù)的視線(xiàn)軌跡以 Z型 和 弓形 為主。這樣的視線(xiàn)軌跡 閱讀效率高 ，且不容易因?yàn)殄e(cuò)行而漏讀信息。

因此，網(wǎng)格式的頁(yè)面設(shè)計(jì)可展示較多信息，更有利于用戶(hù)的信息檢索。但它的缺點(diǎn)是 圖片 、 文字偏小 ，用戶(hù)對(duì)信息的 認(rèn)知負(fù)擔(dān)較大 。

（2）一欄式頁(yè)面布局

一欄式布局下，用戶(hù)視線(xiàn)軌跡以 Z型 和 F型 為主。Z型軌跡 閱讀效率高 ，F(xiàn)型閱讀軌跡說(shuō)明用戶(hù)閱讀過(guò)程中自主性較強(qiáng)，此時(shí) 信息處理能力較強(qiáng) 。

因此，一欄式頁(yè)面布局適用于 需要強(qiáng)化用戶(hù)認(rèn)知的頁(yè)面 中（如通過(guò)對(duì)頁(yè)面的的瀏覽，建立對(duì)品牌形象的認(rèn)知）。但一欄式布局存在的問(wèn)題則是展示信息量偏少，在導(dǎo)購(gòu)頁(yè)面信息較多的情況下，容易造成因頁(yè)面過(guò)長(zhǎng)而導(dǎo)致的頁(yè)面流失率高的問(wèn)題。

（3） 瀑布流式頁(yè)面布局

瀑布流式布局下，用戶(hù)的視線(xiàn)軌跡以 S型 為主，這樣的軌跡 閱讀流暢，但由于用戶(hù)采用“就近原則” 閱讀信息，容易產(chǎn)生 漏讀現(xiàn)象 。

因此，瀑布流式的頁(yè)面布局適于應(yīng)用在社區(qū)類(lèi)瀏覽型頁(yè)面中，這樣的頁(yè)面往往信息量大，采用瀑布流 式布局瀏覽體驗(yàn)更為流暢。但缺點(diǎn)則是信息不能完全被關(guān)注，容易漏讀信息。

瀑布流式頁(yè)面布局的應(yīng)用建議：

發(fā)現(xiàn)2：不同類(lèi)型的導(dǎo)購(gòu)頁(yè)面中，信息元素的關(guān)注度有所差異

眼動(dòng)實(shí)驗(yàn)的過(guò)程中，我們還發(fā)現(xiàn)不同類(lèi)型的導(dǎo)購(gòu)頁(yè)面，用戶(hù)對(duì)于 圖片、文字 （包括產(chǎn)品參數(shù)、折扣額度）、 品牌?（包括品牌名稱(chēng)、名牌logo）的關(guān)注程度有所差異。

下面我們就具體介紹在這些不同類(lèi)型的導(dǎo)購(gòu)頁(yè)面下，用戶(hù)都關(guān)注哪些內(nèi)容。

（1）品牌促銷(xiāo)類(lèi)導(dǎo)購(gòu)頁(yè)面

品牌促銷(xiāo)類(lèi)導(dǎo)購(gòu)頁(yè)面可劃分為：“品牌推廣”和“品牌特賣(mài)”兩大類(lèi)。而這兩類(lèi)頁(yè)面中，用 戶(hù)對(duì)頁(yè)面信息的關(guān)注度有哪些差異呢？

“品牌推廣頁(yè)面” 通常介紹的是品牌和對(duì)應(yīng)的商品，因此用戶(hù)更容易受 圖片 吸引。但在 “品牌特賣(mài)” 類(lèi)頁(yè)面中，宣傳重點(diǎn)是品牌折扣，因此用戶(hù)重點(diǎn)關(guān)注的是 品牌和折扣信息 ，對(duì)具體商品圖片的關(guān)注度則稍弱一些。

（2）單品促銷(xiāo)類(lèi)導(dǎo)購(gòu)頁(yè)面

普通單品促銷(xiāo)頁(yè) 中，用戶(hù)更關(guān)注 商品圖片 。但在 3C數(shù)碼類(lèi)單品促銷(xiāo)頁(yè) 中，用戶(hù)對(duì)產(chǎn)品參數(shù)這類(lèi)文字信息關(guān)注度更高。因此在3C數(shù)碼類(lèi)的促銷(xiāo)頁(yè)面設(shè)計(jì)中，應(yīng)重點(diǎn)突出商品描述的文字運(yùn)營(yíng)。

（3）社區(qū)類(lèi)導(dǎo)購(gòu)頁(yè)面

社區(qū)類(lèi)導(dǎo)購(gòu)頁(yè)面通常以圖片為主。然而在這眾多圖片中，用戶(hù)對(duì)哪類(lèi)圖片更感興趣呢？我們應(yīng)該重點(diǎn)突出或者不應(yīng)該忽略哪類(lèi)圖片呢？

在研究社區(qū)類(lèi)導(dǎo)購(gòu)頁(yè)面中，相比服飾單品圖片，用戶(hù)更關(guān)注那些展示 搭配效果 的圖片。這一點(diǎn)在行為經(jīng)濟(jì)學(xué)“所有權(quán)依戀癥”現(xiàn)象中也有所體現(xiàn)：展示搭配效果圖有時(shí)候會(huì)讓消費(fèi)者產(chǎn)生已經(jīng)擁有該商品的“虛擬所有權(quán)”的感覺(jué)，進(jìn)而在相同條件下，有真人拍攝的商品賣(mài)得比無(wú)真人搭配的商品要好。

（4）團(tuán)購(gòu)類(lèi)導(dǎo)購(gòu)頁(yè)面

團(tuán)購(gòu)類(lèi)導(dǎo)購(gòu)頁(yè)面中， 實(shí)物類(lèi)產(chǎn)品 與服務(wù)類(lèi)產(chǎn)品的導(dǎo)購(gòu)頁(yè)用戶(hù)關(guān)注點(diǎn)有所差異。

在實(shí)物類(lèi)產(chǎn)品導(dǎo)購(gòu)頁(yè)下，用戶(hù)更關(guān)注的是 商品圖片 ，但在 服務(wù)類(lèi) 產(chǎn)品導(dǎo)購(gòu)頁(yè)中，用戶(hù)對(duì)產(chǎn)品的 文字描述關(guān)注度 也很高。

應(yīng)用建議：

根據(jù)以上發(fā)現(xiàn)，我們針對(duì)導(dǎo)購(gòu)頁(yè)面類(lèi)型與重點(diǎn)關(guān)注的信息元素進(jìn)行了以下梳理總結(jié)。

根據(jù)這些用戶(hù)的關(guān)注重點(diǎn)，在今后的頁(yè)面設(shè)計(jì)中，我們應(yīng)該注意展示并突出用戶(hù)關(guān)注的信息元素，從而提升用戶(hù)的信息獲取效率，同時(shí)也幫助提升網(wǎng)站的轉(zhuǎn)化率。

寫(xiě)在最后的話(huà)

通過(guò)這次的眼動(dòng)研究，我們發(fā)現(xiàn)今后在導(dǎo)購(gòu)頁(yè)面的設(shè)計(jì)中，應(yīng)重點(diǎn)根據(jù)導(dǎo)購(gòu)類(lèi)型，采用不同的頁(yè)面布局，突出不同維度的運(yùn)營(yíng)內(nèi)容。希望我們的研究，能夠幫助互聯(lián)網(wǎng)時(shí)代的“導(dǎo)（設(shè)）購(gòu)（計(jì)）?。瘢└纾üぃ﹤儭痹O(shè)計(jì)出更加吸引用戶(hù)的“血拼”樂(lè)園。

下期我們將分享導(dǎo)購(gòu)類(lèi)網(wǎng)站的用戶(hù)行為畫(huà)像，介紹不同類(lèi)型的用戶(hù)在使用導(dǎo)購(gòu)類(lèi)網(wǎng)站時(shí)的“關(guān)鍵行為”、“頁(yè)面偏好”等內(nèi)容，敬請(qǐng)期待吧!

作者：?郭雨舟

來(lái)源：https://jdc.jd.com/archives/500

版權(quán)：人人都是產(chǎn)品經(jīng)理遵循行業(yè)規(guī)范，任何轉(zhuǎn)載的稿件都會(huì)明確標(biāo)注作者和來(lái)源，若標(biāo)注有誤，請(qǐng)聯(lián)系主編QQ：419297645