讓你忍不住買買買，購物網(wǎng)站會(huì)這樣設(shè)計(jì)

今天分享的這篇文章，則告訴你京東設(shè)計(jì)中心，如何將眼動(dòng)研究應(yīng)用到實(shí)際設(shè)計(jì)中，設(shè)計(jì)更好的網(wǎng)頁，讓你更愉快地買買買。

隨著「雙十一」的結(jié)束，一場全民網(wǎng)購狂歡落下帷幕。當(dāng)往日的「血拼」戰(zhàn)場搬到網(wǎng)頁，曾經(jīng)的逛街路線成為今天的頁面掃瞄 軌跡;穿衣鏡前的目光如炬變?yōu)槠聊磺澳? 時(shí)長……網(wǎng)頁設(shè)計(jì)師們這時(shí)已經(jīng)忙的不亦樂乎了，因?yàn)轫撁娴呐虐娌季?、信息的陳列描述等無不影響用戶在虛擬世界的「血拼」體驗(yàn)。

「消費(fèi)者關(guān)注什么?他們是如何掃瞄 頁面的?」

「促銷信息放在左側(cè)還是頂部?」

「商品一行放 3 個(gè)還是 5 個(gè)?」

為了解答這些問題，我們在 2014 年初開展了一次針對導(dǎo)購網(wǎng)站的研究。通過眼動(dòng)測試及深度訪談等方法，了解用戶在不同導(dǎo)購頁面的掃瞄 行為及重點(diǎn)關(guān)注內(nèi)容，旨在為導(dǎo)購類頁面的設(shè)計(jì)帶來啟發(fā)。

既然研究的是「導(dǎo)購網(wǎng)站」，那么首先讓我們首先明確以下幾個(gè)問題 ：

1. 什么是導(dǎo)購類網(wǎng)站?

導(dǎo)購類網(wǎng)站是提取電商中優(yōu)質(zhì)商品或品牌，推舉 給用戶，以減少用戶時(shí)間的網(wǎng)站。

2. 導(dǎo)購類網(wǎng)站布局都有哪些?

通過對幾大電商導(dǎo)購頁面的布局分析，抽象出以下幾種常見的頁面布局形式 ：

3. 導(dǎo)購網(wǎng)站的內(nèi)容主要有哪些?

根據(jù)內(nèi)容的不同，可將其主要分為品牌導(dǎo)購(如，京東青春)、單品導(dǎo)購(如，易訊早市)、 團(tuán)購導(dǎo)購(如，美團(tuán))、社區(qū)導(dǎo)購(如，美麗說)1。

好啦，一切就緒，讓我們來看下研究全過程吧!

本次共招募了 30 位喜歡「逛」各類導(dǎo)購網(wǎng)站的用戶(男：女=7：23)，與視覺和交互設(shè)計(jì)師共同商討選取了 21 個(gè)較有代表性的導(dǎo)購網(wǎng)頁。為排除內(nèi)容的影響，眼動(dòng)實(shí)驗(yàn)采納靜態(tài)網(wǎng)頁 2，非真實(shí)網(wǎng)站。

同時(shí)將實(shí)驗(yàn)素材設(shè)置了組內(nèi)隨機(jī)和組間隨機(jī)，以此來避開頁面掃瞄 順序?qū)τ脩粼斐傻挠绊?。馬上實(shí)驗(yàn)素材按頁面內(nèi)容分為3類(品牌測試頁、單品測試頁、主題測試頁3 )，每類頁面均采納隨機(jī)播放的形式，且每組用戶 間看到的頁面內(nèi)容順序也有所差異。

眼動(dòng)結(jié)束后采納了 PEEP 法(Post Experience Eyetracked Protocol)讓用戶回溯。最終結(jié)合眼動(dòng)結(jié)果和訪談內(nèi)容我們得到了以下發(fā)現(xiàn)。

同時(shí)根據(jù)用戶的行為習(xí)慣特征，做了關(guān)于逛導(dǎo)購頁面用戶的人物畫像分析，這部分內(nèi)容就先在這里賣個(gè)關(guān)子，留著下期與大家共同分享。

1. 導(dǎo)購類網(wǎng)站內(nèi)容還有：比價(jià)導(dǎo)購、打折促銷導(dǎo)購和返利導(dǎo)購等等。但由于這類網(wǎng)站均以文字為主，因此不在本次眼動(dòng)研究范圍內(nèi)。

2. 靜態(tài)網(wǎng)頁像素與屏幕分辨率的寬度保持一致，盡量還原用戶掃瞄 情境。

3. 「主題測試頁」包含團(tuán)購導(dǎo)購頁面。

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

1. 不同的頁面布局下由于用戶視線軌跡的差異，因此適合承載的導(dǎo)購頁面有所不同。

2. 不同類型的導(dǎo)購頁面中，用戶對圖片、文字、品牌等信息元素的關(guān)注度有所差異。

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

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

通過研究上文介紹過的 3 種頁面布局(網(wǎng)格式、一欄式、瀑布流式)的典型用戶視線軌跡，我們發(fā)現(xiàn)這些頁面從布局上能夠引導(dǎo)用戶形成特定模式的視線軌跡，而不同的視線軌跡將影響用戶對于頁面信息的認(rèn)知效率及加工深度。

因此可以通過合理利用這些各具特色的頁面布局，來提升導(dǎo)購頁面的轉(zhuǎn)化率。

(1)網(wǎng)格式頁面布局

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

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

(2)一欄式頁面布局

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

因此，一欄式頁面布局適用于 需要強(qiáng)化用戶認(rèn)知的頁面中(如通過對頁面的的掃瞄 ，建立對品牌形象的認(rèn)知)。

但一欄式布局存在的問題則是展示信息量偏少，在導(dǎo)購頁面信息較多的情況下，容易造成因頁面過長而導(dǎo)致的頁面流失率高的問題。

(3)瀑布流式頁面布局

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

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

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

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

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

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

(1)品牌促銷類導(dǎo)購頁面

品牌促銷類導(dǎo)購頁面可劃分為：「品牌推廣」和「品牌特賣」兩大類。而這兩類頁面中，用 戶對頁面信息的關(guān)注度有哪些差異呢?

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

(2)單品促銷類導(dǎo)購頁面

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

(3)社區(qū)類導(dǎo)購頁面

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

在研究社區(qū)類導(dǎo)購頁面中，相比服飾單品圖片，用戶更關(guān)注那些展示搭配效果的圖片。

這一點(diǎn)在行為經(jīng)濟(jì)學(xué)「所有權(quán)依戀癥」現(xiàn)象中也有所體現(xiàn)：展示搭配效果圖有時(shí)候會(huì)讓消費(fèi)者產(chǎn)生已經(jīng)擁有該商品的「虛擬所有權(quán)」的感覺，進(jìn)而在相同條件下，有真人拍攝的商品賣得比無真人搭配的商品要好。

(4)團(tuán)購類導(dǎo)購頁面

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

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

應(yīng)用建議：

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

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

寫在最后的話

通過這次的眼動(dòng)研究，我們發(fā)現(xiàn)今后在導(dǎo)購頁面的設(shè)計(jì)中，應(yīng)重點(diǎn)根據(jù)導(dǎo)購類型，采納不同的頁面布局，突出不同維度的運(yùn)營內(nèi)容。希望我們的研究，能夠幫助互聯(lián)網(wǎng)時(shí)代的「導(dǎo)(設(shè))購(計(jì))小(民)哥(工)們」設(shè)計(jì)出更加吸引用戶的「血拼」樂園。

下期我們將分享導(dǎo)購類網(wǎng)站的用戶行為畫像，介紹不同類型的用戶在使用導(dǎo)購類網(wǎng)站時(shí)的「關(guān)鍵行為」、「頁面偏好」等內(nèi)容，敬請期待吧!