通過眼動實驗，作者分析總結了導購頁面布局設計的幾個要點。在這里與大家分享，希望在大家設計導購頁面的時候能夠有些啟發。

隨著“雙十一”的結束，一場全民網購狂歡落下帷幕。當往日的“血拼”戰場搬到網頁，曾經的逛街路線成為今天的頁面瀏覽軌跡；穿衣鏡前的目光如炬變為屏幕前注視時長……網頁設計師們這時已經忙的不亦樂乎了，因為頁面的排版布局、信息的陳列描述等無不影響用戶在虛擬世界的“血拼”體驗。

• “消費者關注什么？他們是如何瀏覽頁面的？”
• “促銷信息放在左側還是頂部？”
• “商品一行放3個還是5個？”
• ……

為了解答這些問題，我們在2014年初開展了一次針對導購網站的研究。通過眼動測試及深度訪談等方法，了解用戶在不同導購頁面的瀏覽行為及重點關注內容，旨在為導購類頁面的設計帶來啟發。既然研究的是“導購網站”，那么首先讓我們首先明確以下幾個問題 ：

• 什么是導購類網站？導購類網站是提取電商中優質商品或品牌，推薦給用戶，以減少用戶時間的網站。
• 導購類網站布局都有哪些？通過對幾大電商導購頁面的布局分析，抽象出以下幾種常見的頁面布局形式 ：

• 導購網站的內容主要有哪些？根據內容的不同，可將其主要分為品牌導購（如，京東青春）、單品導購（如，易訊早市）、 團購導購（如，美團）、社區導購（如，美麗說）₁。

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

本次共招募了30位喜歡“逛”各類導購網站的用戶（男：女=7：23），與視覺和交互設計師共同商討選取了21個較有代表性的導購網頁。為排除內容的影響，眼動實驗采用靜態網頁₂，非真實網站。同時將實驗素材設置了組內隨機和組間隨機，以此來避開頁面瀏覽順序對用戶造成的影響。即將實驗素材按頁面內容分為3類（品牌測試頁、單品測試頁、主題測試頁₃ ），每類頁面均采用隨機播放的形式，且每組用戶間看到的頁面內容順序也有所差異。

眼動結束后采用了PEEP法（Post Experience Eyetracked Protocol）讓用戶回溯。最終結合眼動結果和訪談內容我們得到了以下發現。同時根據用戶的行為習慣特征，做了關于逛導購頁面用戶的人物畫像分析，這部分內容就先在這里賣個關子，留著下期與大家共同分享。

1. 導購類網站內容還有：比價導購、打折促銷導購和返利導購等等。但由于這類網站均以文字為主，因此不在本次眼動研究范圍內。
2. 靜態網頁像素與屏幕分辨率的寬度保持一致，盡量還原用戶瀏覽情境。
3. “主題測試頁”包含團購導購頁面。

通過眼動實驗，我們在“頁面布局”與“信息元素的關注度”兩個維度上發現：

1. 不同的頁面布局下由于用戶視線軌跡的差異，因此適合承載的導購頁面有所不同。
2. 不同類型的導購頁面中，用戶對圖片、文字、品牌等信息元素的關注度有所差異。

下面，我們將詳細分享這次的調研發現。

發現1：頁面布局對視線軌跡的影響

通過研究上文介紹過的三種頁面布局（網格式、一欄式、瀑布流式）的典型用戶視線軌跡，我們發現這些頁面從布局上能夠引導用戶形成特定模式的視線軌跡，而不同的視線軌跡將影響用戶對于頁面信息的認知效率及加工深度。因此可以通過合理利用這些各具特色的頁面布局，來提升導購頁面的轉化率。

（1） 網格式頁面布局

從下面的視線軌跡圖上，可以看出網格式頁面布局中，用戶的視線軌跡以 Z型 和 弓形 為主。這樣的視線軌跡 閱讀效率高 ，且不容易因為錯行而漏讀信息。

因此，網格式的頁面設計可展示較多信息，更有利于用戶的信息檢索。但它的缺點是 圖片 、 文字偏小 ，用戶對信息的 認知負擔較大 。

（2）一欄式頁面布局

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

因此，一欄式頁面布局適用于 需要強化用戶認知的頁面 中（如通過對頁面的的瀏覽，建立對品牌形象的認知）。但一欄式布局存在的問題則是展示信息量偏少，在導購頁面信息較多的情況下，容易造成因頁面過長而導致的頁面流失率高的問題。

（3） 瀑布流式頁面布局

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

因此，瀑布流式的頁面布局適于應用在社區類瀏覽型頁面中，這樣的頁面往往信息量大，采用瀑布流 式布局瀏覽體驗更為流暢。但缺點則是信息不能完全被關注，容易漏讀信息。

瀑布流式頁面布局的應用建議：

發現2：不同類型的導購頁面中，信息元素的關注度有所差異

眼動實驗的過程中，我們還發現不同類型的導購頁面，用戶對于 圖片、文字 （包括產品參數、折扣額度）、 品牌?（包括品牌名稱、名牌logo）的關注程度有所差異。

下面我們就具體介紹在這些不同類型的導購頁面下，用戶都關注哪些內容。

（1）品牌促銷類導購頁面

品牌促銷類導購頁面可劃分為：“品牌推廣”和“品牌特賣”兩大類。而這兩類頁面中，用 戶對頁面信息的關注度有哪些差異呢？

“品牌推廣頁面” 通常介紹的是品牌和對應的商品，因此用戶更容易受 圖片 吸引。但在 “品牌特賣” 類頁面中，宣傳重點是品牌折扣，因此用戶重點關注的是 品牌和折扣信息 ，對具體商品圖片的關注度則稍弱一些。

（2）單品促銷類導購頁面

普通單品促銷頁 中，用戶更關注 商品圖片 。但在 3C數碼類單品促銷頁 中，用戶對產品參數這類文字信息關注度更高。因此在3C數碼類的促銷頁面設計中，應重點突出商品描述的文字運營。

（3）社區類導購頁面

社區類導購頁面通常以圖片為主。然而在這眾多圖片中，用戶對哪類圖片更感興趣呢？我們應該重點突出或者不應該忽略哪類圖片呢？

在研究社區類導購頁面中，相比服飾單品圖片，用戶更關注那些展示 搭配效果 的圖片。這一點在行為經濟學“所有權依戀癥”現象中也有所體現：展示搭配效果圖有時候會讓消費者產生已經擁有該商品的“虛擬所有權”的感覺，進而在相同條件下，有真人拍攝的商品賣得比無真人搭配的商品要好。

（4）團購類導購頁面

團購類導購頁面中， 實物類產品 與服務類產品的導購頁用戶關注點有所差異。

在實物類產品導購頁下，用戶更關注的是 商品圖片 ，但在 服務類 產品導購頁中，用戶對產品的 文字描述關注度 也很高。

應用建議：

根據以上發現，我們針對導購頁面類型與重點關注的信息元素進行了以下梳理總結。

根據這些用戶的關注重點，在今后的頁面設計中，我們應該注意展示并突出用戶關注的信息元素，從而提升用戶的信息獲取效率，同時也幫助提升網站的轉化率。

寫在最后的話

通過這次的眼動研究，我們發現今后在導購頁面的設計中，應重點根據導購類型，采用不同的頁面布局，突出不同維度的運營內容。希望我們的研究，能夠幫助互聯網時代的“導（設）購（計）?。瘢└纾üぃ﹤儭痹O計出更加吸引用戶的“血拼”樂園。

下期我們將分享導購類網站的用戶行為畫像，介紹不同類型的用戶在使用導購類網站時的“關鍵行為”、“頁面偏好”等內容，敬請期待吧!

作者：?郭雨舟

來源：https://jdc.jd.com/archives/500

版權：人人都是產品經理遵循行業規范，任何轉載的稿件都會明確標注作者和來源，若標注有誤，請聯系主編QQ：419297645