想提高點擊率?大廠設計師總結了這5個有效的設計策略!

4 評論 5331 瀏覽 52 收藏 8 分鐘

如何提高點擊率是很多設計師的難題。本文主要介紹,如何通過創意視覺設計助力提升點擊率。作者針對核心問題,展開了深入的分析拆解,與大家分享了五個有效的設計策略,一起來看看吧。

策略-設計-驗證-調整策略-再設計… 產品設計的過程總是以此循環,關注設計落地后的數據反饋,正不斷為我們下一次的設計優化劃重點。

前段時間,我們為京東 APP「逛」頻道做了設計改版,并分享了如何在提案階段,讓我們的設計更快過稿。

如今這個改版方案已經上線了一段時間,并與舊版設計做了 AB 測試、獲得一些數據反饋來幫助我們驗證設計策略。

以下,基于這些數據的反饋,我們將分享 5 個可有效提升點擊率的設計策略。

一、用拇指熱區降低操作門檻

在這次改版中,我們將創作入口從頂部下移至屏幕拇指熱區作為懸停按鈕。經測試發現,下移至屏幕拇指熱區后,創作按鈕點擊率比舊版提升了 62.5%。

想提高點擊率?大廠設計師總結了這5個有效的設計策略!

根據屏幕拇指原則,屏幕下方 2/3 區域為易操作區,當按鈕所在區域越往上則越難被點擊到。創作按鈕下移至屏幕中下部的易操作區時,操作門檻的下降讓點擊率有了明顯提升。

想提高點擊率?大廠設計師總結了這5個有效的設計策略!

該研究來自@Josh Clark

可能有人會發現,相比舊版創作按鈕,新版按鈕除了位置下移之外,面積也放大了。

那么,“放大”是否是一個有效的設計策略呢?

二、放大雖最直接,但不是最有效

這次改版中,其實許多模塊都有所放大。不過經測試后發現,“放大”雖然是一種最簡單直接的方式,但其轉化效果不會很明顯。

想提高點擊率?大廠設計師總結了這5個有效的設計策略!

就如上圖中看到的 tab 區、用戶頭像、feeds 卡片,這些只經過“放大”舉措的模塊,點擊率的提升平均只能維持在 7%左右。

如果想獲得更好的轉化效果,光靠“放大”其實很難達到。

如果想強調某個模塊,還需要結合提升層級、增加動效等方式,結合場景選擇合適的策略來達到更好的轉化效果。

從另一個角度看,如果界面中的每個元素都放大,其實到最后也等于沒變化(想象一下老人機)。

三、沉浸式讓用戶看的更久,但更少

這次改版將關注頁中的 feeds 卡片,從時間流調整為沉浸流的樣式。

經測試后發現,采用沉浸流設計的頁面,卡片點擊率提升了 7.65%,用戶停留時長提升了 33.1%,但用戶內容消費數下降 2.9%。

想提高點擊率?大廠設計師總結了這5個有效的設計策略!

這說明,沉浸式讓用戶看的時間更久,時間流讓用戶看的內容更多。

兩種樣式各有優缺點,這讓我們更需要結合自身產品特性和具體場景來選擇,使用“時間流”還是“沉浸流”設計:

想提高點擊率?大廠設計師總結了這5個有效的設計策略!

比如在關注頁這種半開放域內容場景下,我們更希望用戶能對自己已關注的內容,有更深度的互動來促成下單,則使用沉浸流設計更適合;

再比如,在推薦頁這種以系統推薦為主的全開放域內容場景,我們更希望用戶看更多的內容,來達成引流增加曝光量,則更適合用時間流設計。

四、 層級是比位置更關鍵的影響因素

這次改版我們將詳情頁中的熱愛榜模塊,從頁面的頭部下移至底部,作為一個吸底浮層。

經測試后發現,改為吸底浮層的熱愛榜模塊,點擊率提升了 96.9%。

想提高點擊率?大廠設計師總結了這5個有效的設計策略!

其實,模塊不出現在界面中心、甚至放在底部并不等于其優先級低。

模塊的層級反而是比位置更關鍵的影響因素:是否為屏幕絕對位置、是否有投影強化點擊感、是否有清晰邊界與背景拉開..這些才是讓模塊更顯眼的設計策略。

為了讓大家更明顯的感受層級設計對模塊的影響,下圖展示了熱愛榜模塊在相同位置、相同內容的情況,大家覺得哪邊的設計更顯眼呢?

想提高點擊率?大廠設計師總結了這5個有效的設計策略!

五、圖文分離更利于點擊

針對這次改版中的話題模塊,我們用以下 3 種不同的布局,來測試其帶來的轉化差異。最后發現,這種圖文分離的布局點擊率最高:

想提高點擊率?大廠設計師總結了這5個有效的設計策略!

值得一提的是,上圖中最左邊的大圖布局,即使其圖片面積最大,但點擊率還是不如面積較小的、圖文分離布局的點擊率高。

同樣的例子還有,這次改版中的一個列表頁設計。

做了圖文分離的設計后,新版列表即使面積變小,其點擊率仍比舊版提升了 37.5%。

想提高點擊率?大廠設計師總結了這5個有效的設計策略!

從產品角度看,選擇圖文分離的小圖布局,不僅點擊率更佳、屏效也更高。

策略-設計-驗證-調整策略-再設計…

產品設計的過程總是以此循環,關注設計落地后的數據反饋,正不斷為我們下一次的設計優化劃重點。

 

作者:京東JellyDesign

本文由 @京東JellyDesign?授權發布于人人都是產品經理。未經許可,禁止轉載

原文鏈接:https://www.uisdc.com/5-design-strategy

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 牛牛牛!啟發

    來自浙江 回復
  2. 列表圖文分離的實驗,沒提瀏覽深度

    來自上海 回復
  3. 點贊,有所得
    支持一下

    來自美國 回復
  4. 干貨!

    來自廣東 回復