想提高點擊率?大廠設計師總結了這5個有效的設計策略!
如何提高點擊率是很多設計師的難題。本文主要介紹,如何通過創意視覺設計助力提升點擊率。作者針對核心問題,展開了深入的分析拆解,與大家分享了五個有效的設計策略,一起來看看吧。
策略-設計-驗證-調整策略-再設計… 產品設計的過程總是以此循環,關注設計落地后的數據反饋,正不斷為我們下一次的設計優化劃重點。
前段時間,我們為京東 APP「逛」頻道做了設計改版,并分享了如何在提案階段,讓我們的設計更快過稿。
如今這個改版方案已經上線了一段時間,并與舊版設計做了 AB 測試、獲得一些數據反饋來幫助我們驗證設計策略。
以下,基于這些數據的反饋,我們將分享 5 個可有效提升點擊率的設計策略。
一、用拇指熱區降低操作門檻
在這次改版中,我們將創作入口從頂部下移至屏幕拇指熱區作為懸停按鈕。經測試發現,下移至屏幕拇指熱區后,創作按鈕點擊率比舊版提升了 62.5%。
根據屏幕拇指原則,屏幕下方 2/3 區域為易操作區,當按鈕所在區域越往上則越難被點擊到。創作按鈕下移至屏幕中下部的易操作區時,操作門檻的下降讓點擊率有了明顯提升。
該研究來自@Josh Clark
可能有人會發現,相比舊版創作按鈕,新版按鈕除了位置下移之外,面積也放大了。
那么,“放大”是否是一個有效的設計策略呢?
二、放大雖最直接,但不是最有效
這次改版中,其實許多模塊都有所放大。不過經測試后發現,“放大”雖然是一種最簡單直接的方式,但其轉化效果不會很明顯。
就如上圖中看到的 tab 區、用戶頭像、feeds 卡片,這些只經過“放大”舉措的模塊,點擊率的提升平均只能維持在 7%左右。
如果想獲得更好的轉化效果,光靠“放大”其實很難達到。
如果想強調某個模塊,還需要結合提升層級、增加動效等方式,結合場景選擇合適的策略來達到更好的轉化效果。
從另一個角度看,如果界面中的每個元素都放大,其實到最后也等于沒變化(想象一下老人機)。
三、沉浸式讓用戶看的更久,但更少
這次改版將關注頁中的 feeds 卡片,從時間流調整為沉浸流的樣式。
經測試后發現,采用沉浸流設計的頁面,卡片點擊率提升了 7.65%,用戶停留時長提升了 33.1%,但用戶內容消費數下降 2.9%。
這說明,沉浸式讓用戶看的時間更久,時間流讓用戶看的內容更多。
兩種樣式各有優缺點,這讓我們更需要結合自身產品特性和具體場景來選擇,使用“時間流”還是“沉浸流”設計:
比如在關注頁這種半開放域內容場景下,我們更希望用戶能對自己已關注的內容,有更深度的互動來促成下單,則使用沉浸流設計更適合;
再比如,在推薦頁這種以系統推薦為主的全開放域內容場景,我們更希望用戶看更多的內容,來達成引流增加曝光量,則更適合用時間流設計。
四、 層級是比位置更關鍵的影響因素
這次改版我們將詳情頁中的熱愛榜模塊,從頁面的頭部下移至底部,作為一個吸底浮層。
經測試后發現,改為吸底浮層的熱愛榜模塊,點擊率提升了 96.9%。
其實,模塊不出現在界面中心、甚至放在底部并不等于其優先級低。
模塊的層級反而是比位置更關鍵的影響因素:是否為屏幕絕對位置、是否有投影強化點擊感、是否有清晰邊界與背景拉開..這些才是讓模塊更顯眼的設計策略。
為了讓大家更明顯的感受層級設計對模塊的影響,下圖展示了熱愛榜模塊在相同位置、相同內容的情況,大家覺得哪邊的設計更顯眼呢?
五、圖文分離更利于點擊
針對這次改版中的話題模塊,我們用以下 3 種不同的布局,來測試其帶來的轉化差異。最后發現,這種圖文分離的布局點擊率最高:
值得一提的是,上圖中最左邊的大圖布局,即使其圖片面積最大,但點擊率還是不如面積較小的、圖文分離布局的點擊率高。
同樣的例子還有,這次改版中的一個列表頁設計。
做了圖文分離的設計后,新版列表即使面積變小,其點擊率仍比舊版提升了 37.5%。
從產品角度看,選擇圖文分離的小圖布局,不僅點擊率更佳、屏效也更高。
策略-設計-驗證-調整策略-再設計…
產品設計的過程總是以此循環,關注設計落地后的數據反饋,正不斷為我們下一次的設計優化劃重點。
作者:京東JellyDesign
本文由 @京東JellyDesign?授權發布于人人都是產品經理。未經許可,禁止轉載
原文鏈接:https://www.uisdc.com/5-design-strategy
題圖來自 Unsplash,基于 CC0 協議
牛牛牛!啟發
列表圖文分離的實驗,沒提瀏覽深度
點贊,有所得
支持一下
干貨!