這5個設(shè)計策略，讓你的點擊率翻倍——京東逛改版數(shù)據(jù)驗證

01.

用拇指熱區(qū)

降低操作門檻

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

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

根據(jù) 屏幕拇指原則 ，屏幕下方2/3區(qū)域為易操作區(qū)，當(dāng)按鈕所在區(qū)域越往上則越難被點擊到。

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

 該研究來自@Josh Clark

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

那么，“放大”是否是一個有效的設(shè)計策略呢？

02.

放大雖最直接

但不是最有效

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

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

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

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

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

03.

沉浸式讓用戶

看的更久， 但更少

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

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

這說明， 沉浸式讓用戶看的時間更久，時間流讓用戶看的內(nèi)容更多 。

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

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

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

04.

層級是比位置

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

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

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

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

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

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

05.

圖文分離

更利于點擊

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

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

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

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

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

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

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