專業(yè)網(wǎng)站建設(shè)B/S軟件開(kāi)發(fā)專業(yè)微信營(yíng)銷(xiāo)專業(yè)技術(shù)建設(shè)團(tuán)隊(duì)做客戶滿意度最高的軟件公司
今天分享的這篇文章，則告訴你京東設(shè)計(jì)中心，如何將眼動(dòng)研究應(yīng)用到實(shí)際設(shè)計(jì)中，設(shè)計(jì)更好的網(wǎng)頁(yè)，讓你更愉快地買(mǎi)買(mǎi)買(mǎi)。
隨著「雙十一」的結(jié)束，一場(chǎng)全民網(wǎng)購(gòu)狂歡落下帷幕。當(dāng)往日的「血拼」戰(zhàn)場(chǎng)搬到網(wǎng)頁(yè)，曾經(jīng)的逛街路線成為今天的頁(yè)面掃瞄 軌跡;穿衣鏡前的目光如炬變?yōu)槠聊磺澳? 時(shí)長(zhǎng)……網(wǎng)頁(yè)設(shè)計(jì)師們這時(shí)已經(jīng)忙的不亦樂(lè)乎了，因?yàn)轫?yè)面的排版布局、信息的陳列描述等無(wú)不影響用戶在虛擬世界的「血拼」體驗(yàn)。
「消費(fèi)者關(guān)注什么?他們是如何掃瞄 頁(yè)面的?」
「促銷(xiāo)信息放在左側(cè)還是頂部?」
「商品一行放 3 個(gè)還是 5 個(gè)?」
為了解答這些問(wèn)題，我們?cè)?2014 年初開(kāi)展了一次針對(duì)導(dǎo)購(gòu)網(wǎng)站的研究。通過(guò)眼動(dòng)測(cè)試及深度訪談等方法，了解用戶在不同導(dǎo)購(gòu)頁(yè)面的掃瞄 行為及重點(diǎn)關(guān)注內(nèi)容，旨在為導(dǎo)購(gòu)類頁(yè)面的設(shè)計(jì)帶來(lái)啟發(fā)。
既然研究的是「導(dǎo)購(gòu)網(wǎng)站」，那么首先讓我們首先明確以下幾個(gè)問(wèn)題 ：
1. 什么是導(dǎo)購(gòu)類網(wǎng)站?
導(dǎo)購(gòu)類網(wǎng)站是提取電商中優(yōu)質(zhì)商品或品牌，推舉 給用戶，以減少用戶時(shí)間的網(wǎng)站。
2. 導(dǎo)購(gòu)類網(wǎng)站布局都有哪些?
通過(guò)對(duì)幾大電商導(dǎo)購(gòu)頁(yè)面的布局分析，抽象出以下幾種常見(jiàn)的頁(yè)面布局形式 ：
3. 導(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ō))1。
好啦，一切就緒，讓我們來(lái)看下研究全過(guò)程吧!
本次共招募了 30 位喜歡「逛」各類導(dǎo)購(gòu)網(wǎng)站的用戶(男：女=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è) 2，非真實(shí)網(wǎng)站。
同時(shí)將實(shí)驗(yàn)素材設(shè)置了組內(nèi)隨機(jī)和組間隨機(jī)，以此來(lái)避開(kāi)頁(yè)面掃瞄 順序?qū)τ脩粼斐傻挠绊?。馬上實(shí)驗(yàn)素材按頁(yè)面內(nèi)容分為3類(品牌測(cè)試頁(yè)、單品測(cè)試頁(yè)、主題測(cè)試頁(yè)3 )，每類頁(yè)面均采納隨機(jī)播放的形式，且每組用戶 間看到的頁(yè)面內(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)購(gòu)頁(yè)面用戶的人物畫(huà)像分析，這部分內(nèi)容就先在這里賣(mài)個(gè)關(guān)子，留著下期與大家共同分享。
導(dǎo)購(gòu)類網(wǎng)站內(nèi)容還有：比價(jià)導(dǎo)購(gòu)、打折促銷(xiāo)導(dǎo)購(gòu)和返利導(dǎo)購(gòu)等等。但由于這類網(wǎng)站均以文字為主，因此不在本次眼動(dòng)研究范圍內(nèi)。
靜態(tài)網(wǎng)頁(yè)像素與屏幕分辨率的寬度保持一致，盡量還原用戶掃瞄 情境。
「主題測(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)：
不同的頁(yè)面布局下由于用戶視線軌跡的差異，因此適合承載的導(dǎo)購(gòu)頁(yè)面有所不同。
不同類型的導(dǎo)購(gòu)頁(yè)面中，用戶對(duì)圖片、文字、品牌等信息元素的關(guān)注度有所差異。
下面，我們將詳細(xì)分享這次的調(diào)研發(fā)現(xiàn)。
通過(guò)研究上文介紹過(guò)的 3 種頁(yè)面布局(網(wǎng)格式、一欄式、瀑布流式)的典型用戶視線軌跡，我們發(fā)現(xiàn)這些頁(yè)面從布局上能夠引導(dǎo)用戶形成特定模式的視線軌跡，而不同的視線軌跡將影響用戶對(duì)于頁(yè)面信息的認(rèn)知效率及加工深度。
因此可以通過(guò)合理利用這些各具特色的頁(yè)面布局，來(lái)提升導(dǎo)購(gòu)頁(yè)面的轉(zhuǎn)化率。
從下面的視線軌跡圖上，可以看出網(wǎng)格式頁(yè)面布局中，用戶的視線軌跡以 Z 型和弓形為主。這樣的視線軌跡 閱讀效率高 ，且不容易因?yàn)殄e(cuò)行而漏讀信息。
因此，網(wǎng)格式的頁(yè)面設(shè)計(jì)可展示較多信息，更有利于用戶的信息檢索。但它的缺點(diǎn)是圖片 、文字偏小，用戶對(duì)信息的認(rèn)知負(fù)擔(dān)較大 。
一欄式布局下，用戶視線軌跡以 Z 型和 F 型為主。Z 型軌跡 閱讀效率高 ，F(xiàn) 型閱讀軌跡說(shuō)明用戶閱讀過(guò)程中自主性較強(qiáng)，此時(shí)信息處理能力較強(qiáng) 。
因此，一欄式頁(yè)面布局適用于 需要強(qiáng)化用戶認(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)題。
瀑布流式布局下，用戶的視線軌跡以 S 型為主，這樣的軌跡閱讀流暢，但由于用戶采納「就近原則」 閱讀信息，容易產(chǎn)生漏讀現(xiàn)象 。
因此，瀑布流式的頁(yè)面布局適于應(yīng)用在社區(qū)類掃瞄 型頁(yè)面中，這樣的頁(yè)面往往信息量大，采納瀑布流式布局掃瞄 體驗(yàn)更為流暢。但缺點(diǎn)則是信息不能完全被關(guān)注，容易漏讀信息。
瀑布流式頁(yè)面布局的應(yīng)用建議：
眼動(dòng)實(shí)驗(yàn)的過(guò)程中，我們還發(fā)現(xiàn)不同類型的導(dǎo)購(gòu)頁(yè)面，用戶對(duì)于圖片、文字 (包括產(chǎn)品參數(shù)、折扣額度)、 品牌 (包括品牌名稱、名牌 logo)的關(guān)注程度有所差異。
下面我們就具體介紹在這些不同類型的導(dǎo)購(gòu)頁(yè)面下，用戶都關(guān)注哪些內(nèi)容。
品牌促銷(xiāo)類導(dǎo)購(gòu)頁(yè)面可劃分為：「品牌推廣」和「品牌特賣(mài)」兩大類。而這兩類頁(yè)面中，用 戶對(duì)頁(yè)面信息的關(guān)注度有哪些差異呢?
「品牌推廣頁(yè)面」 通常介紹的是品牌和對(duì)應(yīng)的商品，因此用戶更容易受圖片吸引。但在 「品牌特賣(mài)」 類頁(yè)面中，宣傳重點(diǎn)是品牌折扣，因此用戶重點(diǎn)關(guān)注的是品牌和折扣信息 ，對(duì)具體商品圖片的關(guān)注度則稍弱一些。
一般 單品促銷(xiāo)頁(yè)中，用戶更關(guān)注商品圖片 。但在 3C 數(shù)碼類單品促銷(xiāo)頁(yè) 中，用戶對(duì)產(chǎn)品參數(shù)這類文字信息關(guān)注度更高。因此在 3C 數(shù)碼類的促銷(xiāo)頁(yè)面設(shè)計(jì)中，應(yīng)重點(diǎn)突出商品描述的文字運(yùn)營(yíng)。
社區(qū)類導(dǎo)購(gòu)頁(yè)面通常以圖片為主。然而在這眾多圖片中，用戶對(duì)哪類圖片更感興趣呢?我們應(yīng)該重點(diǎn)突出或者不應(yīng)該忽略哪類圖片呢?
在研究社區(qū)類導(dǎo)購(gòu)頁(yè)面中，相比服飾單品圖片，用戶更關(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ú)真人搭配的商品要好。
團(tuán)購(gòu)類導(dǎo)購(gòu)頁(yè)面中， 實(shí)物類產(chǎn)品與服務(wù)類產(chǎn)品的導(dǎo)購(gòu)頁(yè)用戶關(guān)注點(diǎn)有所差異。
在實(shí)物類產(chǎn)品導(dǎo)購(gòu)頁(yè)下，用戶更關(guān)注的是商品圖片 ，但在服務(wù)類產(chǎn)品導(dǎo)購(gòu)頁(yè)中，用戶對(duì)產(chǎn)品的文字描述關(guān)注度也很高。
應(yīng)用建議：
根據(jù)以上發(fā)現(xiàn)，我們針對(duì)導(dǎo)購(gòu)頁(yè)面類型與重點(diǎn)關(guān)注的信息元素進(jìn)行了以下梳理總結(jié)。
根據(jù)這些用戶的關(guān)注重點(diǎn)，在今后的頁(yè)面設(shè)計(jì)中，我們應(yīng)該注意展示并突出用戶關(guān)注的信息元素，從而提升用戶的信息獵取 效率，同時(shí)也幫助提升網(wǎng)站的轉(zhuǎn)化率。
通過(guò)這次的眼動(dòng)研究，我們發(fā)現(xiàn)今后在導(dǎo)購(gòu)頁(yè)面的設(shè)計(jì)中，應(yīng)重點(diǎn)根據(jù)導(dǎo)購(gòu)類型，采納不同的頁(yè)面布局，突出不同維度的運(yùn)營(yíng)內(nèi)容。希望我們的研究，能夠幫助互聯(lián)網(wǎng)時(shí)代的「導(dǎo)(設(shè))購(gòu)(計(jì))小(民)哥(工)們」設(shè)計(jì)出更加吸引用戶的「血拼」樂(lè)園。
下期我們將分享導(dǎo)購(gòu)類網(wǎng)站的用戶行為畫(huà)像，介紹不同類型的用戶在使用導(dǎo)購(gòu)類網(wǎng)站時(shí)的「關(guān)鍵行為」、「頁(yè)面偏好」等內(nèi)容，敬請(qǐng)期待吧!
豫公網(wǎng)安備41018402000614號(hào)