怎樣設(shè)計(jì)轉(zhuǎn)化頁(yè)?重點(diǎn)關(guān)注2個(gè)方面!
編輯導(dǎo)語(yǔ):在信息多樣化的互聯(lián)網(wǎng)中,要想吸引用戶(hù)的眼球,設(shè)計(jì)頁(yè)面的信息展示點(diǎn)是有講究的。交互設(shè)計(jì)師做轉(zhuǎn)化頁(yè)面的出發(fā)點(diǎn)是什么?可以采取什么手段去承載流量以及提高轉(zhuǎn)化率。這些都是在設(shè)計(jì)轉(zhuǎn)化頁(yè)時(shí),需要重點(diǎn)關(guān)注的信息點(diǎn)。
上個(gè)月淘寶新版本訂單頁(yè)的改版大家對(duì)整個(gè)改版都給與了高度贊譽(yù),今天再次體驗(yàn),發(fā)現(xiàn)并不是所有商品的訂單頁(yè)都是新版樣式,想來(lái)淘寶應(yīng)該也在進(jìn)行測(cè)試,去驗(yàn)證改版的有效性。
先不管后面數(shù)據(jù)如何,今天我們來(lái)聊聊,交互設(shè)計(jì)師在做這種轉(zhuǎn)化頁(yè)面出發(fā)點(diǎn)是什么?可以采取什么手段去承載流量,提高轉(zhuǎn)化。
從上圖可以看出在未增加新功能,新頁(yè)面的情況下,設(shè)計(jì)師對(duì)頁(yè)面信息、結(jié)構(gòu)進(jìn)行了重整,你會(huì)發(fā)現(xiàn)更注重用戶(hù)價(jià)值的傳遞,整個(gè)頁(yè)面更加高效,用戶(hù)關(guān)注的信息點(diǎn)都很突出,并且有這么多優(yōu)惠,讓用戶(hù)心理感覺(jué)更省錢(qián)了。以上這些都是為了去傳遞用戶(hù)價(jià)值,不斷的刺撓用戶(hù)心防,讓用戶(hù)破防!今天從交互設(shè)計(jì)師的角度闡述下如何去做轉(zhuǎn)化頁(yè)。
一、凸顯價(jià)值
在這個(gè)信息爆炸的時(shí)代,人都不愿意在無(wú)意義的事情上浪費(fèi)一秒鐘,而面對(duì)產(chǎn)品界面也是一樣,看一眼沒(méi)有叢中自己能得到什么可能就劃走了。所以在轉(zhuǎn)化頁(yè)這種承流量的頁(yè)面,凸顯用戶(hù)價(jià)值非常重要。
我們首先應(yīng)該明確你目標(biāo)用戶(hù)想要的到底是什么?是優(yōu)惠?是承諾?還是被認(rèn)可?如:購(gòu)物類(lèi)產(chǎn)品,用戶(hù)在平臺(tái)上可以獲得什么價(jià)值?除了可以不用去實(shí)體店在家就可以下單(滿(mǎn)足惰性)外,在使用APP過(guò)程中還能獲得什么價(jià)值?購(gòu)物的爽感、有優(yōu)惠便宜感覺(jué)自己賺到了?所以具體設(shè)計(jì)轉(zhuǎn)化頁(yè)扥的時(shí)候就是要抓住這些最關(guān)鍵點(diǎn),然后進(jìn)行放大,不斷刺撓用戶(hù)心防。
1. 讓用戶(hù)感覺(jué)省錢(qián)
其實(shí)絕大多數(shù)用戶(hù)都不是理性消費(fèi)者,因?yàn)槿诵栽颍覀兊乃伎挤绞酱蠖喽际潜幌到y(tǒng)1(無(wú)意識(shí)且快速,不費(fèi)腦力)占據(jù)的,讓消費(fèi)者失去了理性的誘因有很多,比如:占便宜、錯(cuò)過(guò)、恐懼、好奇、虧欠、虛榮、逆反等等。其中便宜和錯(cuò)過(guò)是最常用于設(shè)計(jì)中的。
(1)直接 | 通過(guò)優(yōu)惠標(biāo)簽、對(duì)比、簡(jiǎn)單粗暴告知省了多少錢(qián)
便宜并不是真的便宜,而是讓消費(fèi)者感覺(jué)到占了小便宜。相比較拼團(tuán)特惠標(biāo)簽,直接將用戶(hù)可以省多少錢(qián),對(duì)用戶(hù)的沖擊會(huì)更強(qiáng)。
(2)間接 | 營(yíng)造一種錯(cuò)過(guò)就虧了、就沒(méi)有了的感覺(jué)
這在心理學(xué)叫:損失厭惡,它指的是人們對(duì)已經(jīng)擁有的事物會(huì)習(xí)慣性地視若無(wú)睹,只有在失去或即將失去的時(shí)候才會(huì)產(chǎn)生加倍的珍惜感。對(duì)應(yīng)到收益與損失上在人們心理敏感程度上來(lái)看,比起收益,人們對(duì)于損失更加敏感,這就是為什么在雙十一期間,各大商家都打著:“全年最低價(jià),再不買(mǎi)就漲價(jià)、不買(mǎi)你就虧了、搶光了…”的標(biāo)語(yǔ),但是這種只是感覺(jué)上給人們?cè)斐珊孟裾娴摹疤澊罅恕保蔷退阗I(mǎi)到其實(shí)也未必賺到。
所以,我們?cè)诰唧w界面上也可以適當(dāng)采用這個(gè)原理技巧,增加緊迫感和稀缺性元素,營(yíng)造一種錯(cuò)過(guò)就虧了的感覺(jué),讓用戶(hù)在猶豫時(shí),能夠斬釘截鐵的按下 “轉(zhuǎn)化按鈕”!
上圖VUE、脈脈都是采用“限時(shí)”的這個(gè)手法來(lái)因遭稀缺性與緊迫感,從而增加用戶(hù)購(gòu)買(mǎi)欲望,而京東則采用“僅剩1件”“一年歷史最低價(jià)”的方式來(lái)營(yíng)造緊迫感。
2. 強(qiáng)化產(chǎn)品賣(mài)點(diǎn)打消用戶(hù)疑慮
你可以看到現(xiàn)在各大電商上的物品的展示圖都從原來(lái)的靜態(tài)圖向動(dòng)態(tài)圖及視頻化方向演變,這這種手段就是為了更加高效,直觀(guān)的展示產(chǎn)品本身的特質(zhì),讓用戶(hù)看了一目了然。在通過(guò)分析得出產(chǎn)品最終賣(mài)點(diǎn)后,在呈現(xiàn)形式上交互設(shè)計(jì)師也需要多多考慮。以下重點(diǎn)在展示產(chǎn)品賣(mài)點(diǎn)方式上進(jìn)行闡述。
(1)動(dòng)態(tài)化展示
淘寶上的商品動(dòng)圖,非常直觀(guān)的展示產(chǎn)品核心特性,幫助消除用戶(hù)疑慮。
(2)對(duì)比型展示
通過(guò)列表直接展示普通用戶(hù)和會(huì)員用戶(hù)間的差異,這樣的方式直觀(guān),代入感強(qiáng),能夠很好體現(xiàn)產(chǎn)品本身的服務(wù)價(jià)值,更容易打消用戶(hù)購(gòu)買(mǎi)疑慮。
(3)平鋪直述
直接將用戶(hù)可以獲得特權(quán)展示,告知用戶(hù)可獲得哪些權(quán)益與服務(wù),一般通過(guò)icon+文案的方式直接呈現(xiàn)給用戶(hù)。
這樣的方式雖然沒(méi)什么大問(wèn)題,但是在比較多權(quán)限的時(shí)候,細(xì)看其實(shí)會(huì)不知所云,不知道具體是干嘛用的,所以如果要采用這樣的方式建議搭配輔助說(shuō)明。
3. 亮數(shù)據(jù)(權(quán)威性)
將產(chǎn)品的數(shù)據(jù)直接展示出來(lái),通過(guò)多維度數(shù)據(jù)權(quán)威展示產(chǎn)品亮點(diǎn)。
所以在凸顯價(jià)值感知上我們可以怎么做:
- 建立標(biāo)簽體系,通過(guò)標(biāo)簽優(yōu)惠讓用戶(hù)感覺(jué)省錢(qián)
- 營(yíng)造稀缺與緊迫感,讓用戶(hù)感覺(jué)再不行動(dòng)就虧了
- 強(qiáng)調(diào)產(chǎn)品核心賣(mài)點(diǎn)且直觀(guān)展示
- 數(shù)據(jù)化闡述可信度更高,更有權(quán)威性
二、提供清晰交互動(dòng)線(xiàn)
交互本身是一個(gè)動(dòng)態(tài)的過(guò)程,轉(zhuǎn)化頁(yè)有時(shí)需要承載比較多的關(guān)鍵信息,而如何讓這些信息清晰,有序的展示在用戶(hù)面前并引發(fā)用戶(hù)互動(dòng)是交互設(shè)計(jì)師需要思考的??梢詮?頁(yè)面框架、操作引導(dǎo)上去思考與用戶(hù)的關(guān)系。
1. 頁(yè)面框架
轉(zhuǎn)化頁(yè)面的上的信息需要非常高效的傳達(dá)給用戶(hù),應(yīng)采用最高效的方式展示給用戶(hù)。因?yàn)椴煌谫?gòu)物類(lèi)、視頻類(lèi)APP用戶(hù)以“逛一逛、刷一刷”看看有啥好看的心態(tài),漫無(wú)目的的瀏覽,而是會(huì)集中精力尋找價(jià)值從而說(shuō)服自己去買(mǎi),所以我們 框架盡量線(xiàn)性,符合自上而下,自左往右的閱讀習(xí)慣,所以放到頁(yè)面上建議 直接大模塊化從上至下排布,這樣能讓頁(yè)面更加規(guī)整,也符合與用戶(hù)的視線(xiàn)。
以上是我在各大應(yīng)用會(huì)員轉(zhuǎn)化頁(yè)的框架,可以發(fā)現(xiàn),拋開(kāi)內(nèi)容信息,整體框架前兩個(gè)會(huì)讓人感覺(jué)更舒服,這樣的搭配更加流暢性,比例更好,不會(huì)太分割,其實(shí)在設(shè)計(jì)模塊化卡片大小時(shí)也可以考慮下黃金比例。
2. 操作引導(dǎo)
說(shuō)到引導(dǎo)我們可以來(lái)看一看下方案例,僅僅增加了很小的一個(gè)細(xì)節(jié)就達(dá)到質(zhì)的效果。
所以在做轉(zhuǎn)化頁(yè)面時(shí),對(duì)關(guān)鍵按鈕我們也需要采取一些方式讓用戶(hù)注意到,并吸引用戶(hù)點(diǎn)擊。主要可以從按鈕的位置、大小顏色,動(dòng)效、文案4個(gè)方面來(lái)思考。
3. 位置
由于轉(zhuǎn)化頁(yè)需要展示較多信息給到用戶(hù)充分思考,所以一般根據(jù)用戶(hù)的瀏覽習(xí)慣,按鈕一般放下右下角視覺(jué)落點(diǎn)處,這樣能后比較好的組織頁(yè)面內(nèi)容,突出又不強(qiáng)頁(yè)面主要視線(xiàn)。
4. 大小和顏色
重要的轉(zhuǎn)化按鈕大小絕對(duì)不能太小,但也不宜過(guò)大。記得UI中有關(guān)于按鈕大小的計(jì)算公式,可以在這個(gè)公式基礎(chǔ)上進(jìn)行靈活調(diào)整。有些寬度很寬是為了加大用戶(hù)點(diǎn)擊熱區(qū),讓用戶(hù)更容易點(diǎn)到。
顏色一般使用應(yīng)用主題色,如果有多個(gè)按鈕,主按鈕顏色盡量有一定對(duì)比,這樣才能將我們想要讓用戶(hù)點(diǎn)擊的那個(gè)跳出來(lái)。
5. 動(dòng)效
動(dòng)效一般在按鈕上增加一些掃光、光效、按鈕本身輕微動(dòng)效即可,只要很微小的效果就可以,因?yàn)槿搜墼谝欢鸯o態(tài)內(nèi)容中很容易注意到動(dòng)的東西,如果做的很強(qiáng)烈就本末倒置了。
6. 文案
按鈕上的文案一定程度上也能夠促進(jìn)轉(zhuǎn)化,所以在文案上表意的基礎(chǔ)上可結(jié)合我上面講述的第一部分進(jìn)行文案的設(shè)定,加強(qiáng)用戶(hù)感知!
三、寫(xiě)在最后
以上講述了交互設(shè)計(jì)師在面對(duì)重要的轉(zhuǎn)化頁(yè)時(shí)應(yīng)該要著重將價(jià)值簡(jiǎn)單高效的傳達(dá)給用戶(hù),加強(qiáng)用戶(hù)的感知,可以通過(guò)貼標(biāo)簽、緊迫感文案、動(dòng)態(tài)化、對(duì)比化、平鋪直述、亮數(shù)據(jù)內(nèi)容展示,更好的將產(chǎn)品價(jià)值傳達(dá)給到用戶(hù),在具體內(nèi)容布局上建議準(zhǔn)尋線(xiàn)性的框架搭配顏色、動(dòng)效、引導(dǎo)性文案的方式引導(dǎo)用戶(hù)操作。
本文由 @小發(fā)哥 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于CC0協(xié)議。
寫(xiě)的確實(shí)不錯(cuò),但是有錯(cuò)別字哦哈哈哈
看來(lái)不僅要有設(shè)計(jì),還要懂去抓住用戶(hù)心理才行啊
限時(shí)優(yōu)惠像那種什么加xx元換購(gòu)或者是0.1搶購(gòu)的字眼確實(shí)挺能刺激消費(fèi)者的
嗯嗯 的確
感覺(jué)在手把手教你如何設(shè)計(jì)轉(zhuǎn)化頁(yè)了哈哈
怎樣設(shè)計(jì)轉(zhuǎn)化頁(yè)?作者1分析的很棒哦,想相信對(duì)那些設(shè)計(jì)轉(zhuǎn)化頁(yè)的設(shè)計(jì)師將會(huì)非常有用。