眼隨心動:導購頁面如何設計才能抓住用戶眼球?

4 評論 11737 瀏覽 47 收藏 12 分鐘

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

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

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

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

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

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

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

本次共招募了30位喜歡“逛”各類導購網站的用戶(男:女=7:23),與視覺和交互設計師共同商討選取了21個較有代表性的導購網頁。為排除內容的影響,眼動實驗采用靜態網頁2,非真實網站。同時將實驗素材設置了組內隨機和組間隨機,以此來避開頁面瀏覽順序對用戶造成的影響。即將實驗素材按頁面內容分為3類(品牌測試頁、單品測試頁、主題測試頁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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 來了來了 點個贊,送朵小花

    來自廣東 回復
  2. 非常好,有理有據,支持多進行這樣的測試

    來自北京 回復
  3. 很喜歡,之前就很喜歡瀑布式的商品排列方式,也好奇為什么大家都習慣性的用傳統商品列表展示商品

    來自黑龍江 回復
  4. 這種干貨文章竟然沒有人評論?產品們都去哪里了?

    來自上海 回復