這5個(gè)設(shè)計(jì)策略,讓你的點(diǎn)擊率翻倍——京東逛改版數(shù)據(jù)驗(yàn)證

01.

用拇指熱區(qū)

降低操作門(mén)檻

新知達(dá)人, 這5個(gè)設(shè)計(jì)策略,讓你的點(diǎn)擊率翻倍——京東逛改版數(shù)據(jù)驗(yàn)證

在這次改版中,我們將創(chuàng)作入口從頂部下移至屏幕拇指熱區(qū)作為懸停按鈕。

經(jīng)測(cè)試發(fā)現(xiàn),下移至 屏幕拇指熱 區(qū)后,創(chuàng)作按鈕點(diǎn)擊率比舊版提升了62.5%。

新知達(dá)人, 這5個(gè)設(shè)計(jì)策略,讓你的點(diǎn)擊率翻倍——京東逛改版數(shù)據(jù)驗(yàn)證

根據(jù) 屏幕拇指原則 ,屏幕下方2/3區(qū)域?yàn)橐撞僮鲄^(qū),當(dāng)按鈕所在區(qū)域越往上則越難被點(diǎn)擊到。

創(chuàng)作按鈕下移至屏幕中下部的易操作區(qū)時(shí),操作門(mén)檻的下降讓點(diǎn)擊率有了明顯提升。

新知達(dá)人, 這5個(gè)設(shè)計(jì)策略,讓你的點(diǎn)擊率翻倍——京東逛改版數(shù)據(jù)驗(yàn)證

 該研究來(lái)自@Josh Clark

可能有人會(huì)發(fā)現(xiàn), 相比舊版創(chuàng)作按鈕 ,新版按鈕除了位置下移之外,面積也放大了。

那么,“放大”是否是一個(gè)有效的設(shè)計(jì)策略呢?

02.

放大雖最直接

但不是最有效

新知達(dá)人, 這5個(gè)設(shè)計(jì)策略,讓你的點(diǎn)擊率翻倍——京東逛改版數(shù)據(jù)驗(yàn)證

這次改版中,其實(shí)許多模塊都有所放大。不過(guò)經(jīng)測(cè)試后發(fā)現(xiàn),“放大”雖然是一種最簡(jiǎn)單直接的方式,但其轉(zhuǎn)化效果不會(huì)很明顯。

新知達(dá)人, 這5個(gè)設(shè)計(jì)策略,讓你的點(diǎn)擊率翻倍——京東逛改版數(shù)據(jù)驗(yàn)證

就如上圖中看到的tab區(qū)、用戶(hù)頭像、feeds卡片,這些只經(jīng)過(guò)“放大”舉措的模塊,點(diǎn)擊率的提升平均只能維持在7%左右。

如果想獲得更好的轉(zhuǎn)化效果,光靠“放大”其實(shí)很難達(dá)到。 

如果想強(qiáng)調(diào)某個(gè)模塊,還需要結(jié)合提升層級(jí)、增加動(dòng)效等方式,結(jié)合場(chǎng)景選擇合適的策略來(lái)達(dá)到更好的轉(zhuǎn)化效果。

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

03.

沉浸式讓用戶(hù)

看的更久, 但更少

新知達(dá)人, 這5個(gè)設(shè)計(jì)策略,讓你的點(diǎn)擊率翻倍——京東逛改版數(shù)據(jù)驗(yàn)證

這次改版將關(guān)注頁(yè)中的feeds卡片,從時(shí)間流調(diào)整為沉浸流的樣式。

經(jīng)測(cè)試后發(fā)現(xiàn),采用沉浸流設(shè)計(jì)的頁(yè)面,卡片點(diǎn)擊率提升了7.65%,用戶(hù)停留時(shí)長(zhǎng)提升了33.1%,但用戶(hù)內(nèi)容消費(fèi)數(shù)下降2.9%。

新知達(dá)人, 這5個(gè)設(shè)計(jì)策略,讓你的點(diǎn)擊率翻倍——京東逛改版數(shù)據(jù)驗(yàn)證

這說(shuō)明, 沉浸式讓用戶(hù)看的時(shí)間更久,時(shí)間流讓用戶(hù)看的內(nèi)容更多 。

兩種樣式各有優(yōu)缺點(diǎn),這讓我們更需要 結(jié)合自身產(chǎn)品特性和具體場(chǎng)景來(lái)選擇 ,使用“時(shí)間流“還是”沉浸流“設(shè)計(jì):

新知達(dá)人, 這5個(gè)設(shè)計(jì)策略,讓你的點(diǎn)擊率翻倍——京東逛改版數(shù)據(jù)驗(yàn)證

比如在關(guān)注頁(yè)這種 半開(kāi)放域 內(nèi)容場(chǎng)景下,我們更希望用戶(hù)能對(duì)自己已關(guān)注的內(nèi)容,有更深度的互動(dòng)來(lái)促成下單,則使用沉浸流設(shè)計(jì)更適合;

再比如,在推薦頁(yè)這種以系統(tǒng)推薦為主的 全開(kāi)放域 內(nèi)容場(chǎng)景,我們更希望用戶(hù)看更多的內(nèi)容,來(lái)達(dá)成引流增加曝光量,則更適合用時(shí)間流設(shè)計(jì)。

04.

層級(jí)是比位置

更關(guān)鍵的影響因素

新知達(dá)人, 這5個(gè)設(shè)計(jì)策略,讓你的點(diǎn)擊率翻倍——京東逛改版數(shù)據(jù)驗(yàn)證

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? 經(jīng)測(cè)試后發(fā)現(xiàn),改為吸底浮層的熱愛(ài)榜模塊,點(diǎn)擊率提升了96.9%。

新知達(dá)人, 這5個(gè)設(shè)計(jì)策略,讓你的點(diǎn)擊率翻倍——京東逛改版數(shù)據(jù)驗(yàn)證

其實(shí),模塊不出現(xiàn)在界面中心、甚至放在底部并不等于其優(yōu)先級(jí)低。

模塊的 層級(jí)反而是 比位置更關(guān)鍵的影響因素 : 是否為屏幕絕對(duì)位置、是否有投影強(qiáng)化點(diǎn)擊感、是否有清晰邊界與背景拉開(kāi)..這些才是讓模塊更顯眼的設(shè)計(jì)策略。

為了讓大家更明顯的感受層級(jí)設(shè)計(jì)對(duì)模塊的影響,下圖展示了熱愛(ài)榜模塊在相同位置、相同內(nèi)容的情況, 大家覺(jué)得哪邊的設(shè)計(jì)更顯眼呢 

新知達(dá)人, 這5個(gè)設(shè)計(jì)策略,讓你的點(diǎn)擊率翻倍——京東逛改版數(shù)據(jù)驗(yàn)證

05.

圖文分離

更利于點(diǎn)擊

新知達(dá)人, 這5個(gè)設(shè)計(jì)策略,讓你的點(diǎn)擊率翻倍——京東逛改版數(shù)據(jù)驗(yàn)證

針對(duì)這次改版中的話(huà)題模塊,我們用以下3種不同的布局,來(lái)測(cè)試其帶來(lái)的轉(zhuǎn)化差異。 最后發(fā)現(xiàn),這種 圖文分離的布局點(diǎn)擊率最高 

新知達(dá)人, 這5個(gè)設(shè)計(jì)策略,讓你的點(diǎn)擊率翻倍——京東逛改版數(shù)據(jù)驗(yàn)證

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

同樣的例子還有,這次改版中的一個(gè)列表頁(yè)設(shè)計(jì)。 

做了圖文分離的設(shè)計(jì)后,新版列表即使面積變小,其點(diǎn)擊率仍比舊版提升了37.5%。

新知達(dá)人, 這5個(gè)設(shè)計(jì)策略,讓你的點(diǎn)擊率翻倍——京東逛改版數(shù)據(jù)驗(yàn)證

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

策略-設(shè)計(jì)-驗(yàn)證-調(diào)整策略-再設(shè)計(jì)…

產(chǎn)品設(shè)計(jì)的過(guò)程總是以此循環(huán),關(guān)注設(shè)計(jì)落地后的數(shù)據(jù)反饋,正不斷為我們下一次的設(shè)計(jì)優(yōu)化劃重點(diǎn)。

本文經(jīng)授權(quán)發(fā)布,不代表增長(zhǎng)黑客立場(chǎng),如若轉(zhuǎn)載,請(qǐng)注明出處:http://gptmaths.com/quan/55591.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
上一篇 2022-01-06 19:11
下一篇 2022-01-06 19:30

增長(zhǎng)黑客Growthhk.cn薦讀更多>>

發(fā)表回復(fù)

登錄后才能評(píng)論