【干貨】行為·設(shè)計(jì)·轉(zhuǎn)化率——通過(guò)設(shè)計(jì)引導(dǎo)用戶行為提升轉(zhuǎn)化率
?設(shè)計(jì)是感性的,還是理性的?都有,在理性的基礎(chǔ)上,增加感性的元素。這個(gè)設(shè)計(jì)師們都了解,但理性的設(shè)計(jì)點(diǎn)具體體現(xiàn)在哪些地方呢?如何通過(guò)理性的設(shè)計(jì)影響用戶行為,提升轉(zhuǎn)化率?
用戶行為
要了解用戶,必須先了解用戶行為
在做設(shè)計(jì)的時(shí)候,很容易把用戶想象成一個(gè)完美的用戶,具有鷹的視力、大象的記憶力、蝙蝠的導(dǎo)航能力、駱駝的耐心、猴子的靈活度。但實(shí)際情況往往如下:
事實(shí)1: 2013年平均注意力是8秒,較2000年注意力時(shí)長(zhǎng)減少了4秒;金魚(yú)的平均注意力是9秒。人的平均注意力還不如一條魚(yú)來(lái)得持久。
事實(shí)2:17%的用戶瀏覽網(wǎng)頁(yè)的時(shí)間少于4秒;每多100個(gè)英文字,用戶只愿意花4.4秒的時(shí)間去掃描閱讀;以這個(gè)速度,可以評(píng)估出49%的用戶平均在每頁(yè)閱讀111及以下字?jǐn)?shù)的內(nèi)容,花費(fèi)的時(shí)間約是5秒以下。可見(jiàn),用戶瀏覽頁(yè)面以掃描為主,每個(gè)頁(yè)面停留時(shí)間很短,沒(méi)有耐心逐字逐句去閱讀。?
事實(shí)3: 當(dāng)我們自己看到這種設(shè)計(jì)的時(shí)候,填寫(xiě)注冊(cè)表單的欲望就大打折扣。因?yàn)橹雷约河洸蛔∽约涸O(shè)定的問(wèn)題和答案,沒(méi)有耐心去填寫(xiě),抗拒記憶。
事實(shí)4: 首次使用微云,拖動(dòng)文件到微云面板后,沒(méi)留意到界面的變化,再一次拖動(dòng)文件到微云面板,有數(shù)據(jù)變化時(shí)才發(fā)現(xiàn)界面的反饋。做設(shè)計(jì)時(shí)很容易高估用戶對(duì)界面變化的感知程度,我們覺(jué)得用戶會(huì)注意得到,但用戶可能并沒(méi)有發(fā)現(xiàn)界面的變化。
相同樣式的操作提示,IE瀏覽器在提示條的上方增加醒目的橙色橫條,同時(shí)增加提醒機(jī)制,當(dāng)用戶超過(guò)一段時(shí)間沒(méi)有點(diǎn)擊操作時(shí),判斷為用戶沒(méi)有注意到操作欄的出現(xiàn),通過(guò)顏色漸變動(dòng)效提示用戶進(jìn)行操作。
事實(shí)5: Photoshop、Excel等軟件經(jīng)常使用,但還是很多功能不清楚。然而,我們并沒(méi)有主動(dòng)探索,也沒(méi)有足夠的耐心去逐一嘗試,除非有功能使用的需求。
從上面的案例可以看出,真實(shí)用戶:大寫(xiě)的“懶”,注意力不集中、不愛(ài)記憶、視覺(jué)不敏銳、不愛(ài)探索、沒(méi)有耐心。懶是天性,是正常的表現(xiàn),我們在設(shè)計(jì)過(guò)程中,應(yīng)該避免讓用戶去記憶、思考、尋找和反復(fù)嘗試。
記憶的秘密
銀行卡上以四位數(shù)為一組分段顯示卡號(hào),但用戶輸入賬號(hào)時(shí),卻沒(méi)有為用戶分區(qū)段顯示,不便于用戶核對(duì)校驗(yàn),整個(gè)輸入過(guò)程都是步步驚心,生怕搞錯(cuò)。
京東卡綁定過(guò)程的體驗(yàn)比銀行的要好,因?yàn)閷?shí)體卡上分區(qū)段,終端輸入的時(shí)候也分了區(qū)段,便于用戶的記憶、輸入和校驗(yàn)。整個(gè)使用過(guò)程較為輕松。
為什么是以四個(gè)字為主去分段?因?yàn)殚L(zhǎng)了記不住,容易出錯(cuò)!?
看看上方的詞,如果給你20秒,你可以記住幾個(gè)詞?
再看看下方整理分組后的詞,是不是20秒可以全記住?
面對(duì)大量未分類的信息,用戶就會(huì)感到被信息湮沒(méi)。把散亂的內(nèi)容分組展示,用戶就容易理解和記憶了。
從上圖中,我們可以看出要求記憶的內(nèi)容越多,記憶精準(zhǔn)度則越低。內(nèi)容項(xiàng)很多時(shí),我們可以通過(guò)精簡(jiǎn)數(shù)量,或者可以用歸類、分組的方法展示更多信息,每組展示盡量不多于4條信息,減少對(duì)用戶記憶的依賴。
如上圖中Adobe軟件中的分組,讓用戶快速定位功能,便于查找和理解。
視線的秘密
上圖我們會(huì)關(guān)注到什么?寶寶的臉?紙尿褲?浴巾?目標(biāo)不明確。
我們知道視線會(huì)受廣告模特的影響,但影響到底有多大?通過(guò)下面的案例,看看設(shè)計(jì)對(duì)用戶行為的影響力。
圖一模特視線看向前,圖二模特視線看向產(chǎn)品
從視線熱點(diǎn)圖中可以看出,模特視線看向前方的廣告中,用戶視線更多地關(guān)注在模特的臉上;模特視線看向產(chǎn)品的廣告中,用戶更多地關(guān)注到了產(chǎn)品本身,顯然廣告圖二才達(dá)到了商家的目的,讓用戶關(guān)注到了產(chǎn)品。在這個(gè)案例中,通過(guò)極其細(xì)微的視線引導(dǎo),大大提升了用戶對(duì)產(chǎn)品和相關(guān)信息的關(guān)注度,達(dá)到了廣告的效果。
選擇的秘密
一個(gè)展臺(tái)放置24瓶果醬,另一個(gè)展臺(tái)防止6瓶果醬,開(kāi)放給大家免費(fèi)品嘗。
- 大家會(huì)傾向于在哪個(gè)展臺(tái)駐足品嘗?
- 為什么人們想要更多的選擇?
- 選擇多,選擇少,哪個(gè)好?
- 哪種購(gòu)買力會(huì)更強(qiáng)?
逐一解答以上的問(wèn)題。
目標(biāo)不明確,不確定自己的選擇,所以會(huì)不停地尋找更多的信息,想要更多的選擇,傾向于在選擇多的展臺(tái)。這是多巴胺效應(yīng)的一部分,尋找信息令人上癮。
無(wú)論是選擇多還是選擇少,人們停在展臺(tái)前品嘗的果醬種類數(shù)量都很接近。因?yàn)槿藗兠看沃荒苡涀∪募虑椋?同樣他們每次也只能從三四種事物中進(jìn)行選擇。
關(guān)于購(gòu)買力的有趣結(jié)論:
- ?24種果醬,60%的顧客會(huì)駐足并品嘗,有3%購(gòu)買了果醬(購(gòu)買率1.8%);
- ?6種果醬, 40%的顧客會(huì)駐足并品嘗,有31%購(gòu)買了果醬(購(gòu)買率12.4%)。
以上結(jié)論意味著什么?跟設(shè)計(jì)有什么關(guān)系?后面會(huì)揭曉
思考:如何通過(guò)設(shè)計(jì)引導(dǎo)用戶行為?
剛介紹了用戶以及用戶行為,在了解了用戶的記憶、選擇和容易被引導(dǎo)的秘密后,我們?nèi)绾胃鶕?jù)用戶的記憶特點(diǎn)和行為特點(diǎn)、去引導(dǎo)用戶行為,以達(dá)到提升轉(zhuǎn)化率的目標(biāo)?看看以下案例:
圖片大小偏好(eBay A/B test案例)
測(cè)試A截圖
測(cè)試B截圖
通過(guò)多次測(cè)試,eBay的研究人員普遍認(rèn)為如果明顯位置列出的商品數(shù)量越多,滾動(dòng)或者分頁(yè)的次數(shù)越少,就越能吸引買家。根據(jù)這種假設(shè),在此所列出的A/Btest就應(yīng)該證明小的圖像可以增加每個(gè)頁(yè)面的商品數(shù)量,并因此更能吸引顧客。
但令研究人員吃驚的是,與尺寸較大的圖像(A)相比,尺寸較小的圖像(B)并未達(dá)到預(yù)期效果。通過(guò)深入調(diào)查和后續(xù)試驗(yàn),研究人員了解到事實(shí)與他們的假設(shè)剛好相反——即使圖像尺寸較大就意味著每一頁(yè)上列出的商品數(shù)量會(huì)減少,但這種方式更能吸引買家。得出試驗(yàn)結(jié)果之后,eBay迅速做出調(diào)整,在整個(gè)網(wǎng)站上都換成了尺寸較大的圖像。如下圖:
eBay稱采用圖片放大,文字減少的方法,用戶滾屏速度和閱讀速度會(huì)變慢,這樣可使收益提升25%。
我們可以怎么做?
回答剛才的問(wèn)題,果醬案例與設(shè)計(jì)的關(guān)系是什么?為什么更多人傾向于在24種果醬的展臺(tái),而其購(gòu)買轉(zhuǎn)化率卻遠(yuǎn)低于6種果醬的展臺(tái)?
用戶使用界面的時(shí)候,與果醬案例一樣,當(dāng)有更豐富內(nèi)容的時(shí)候,用戶會(huì)停留更久的時(shí)間,也更愿意停留,但是同一時(shí)間內(nèi)(一屏內(nèi))顯示的信息過(guò)多時(shí)反而會(huì)降低用戶的記憶和決策,不知道如何選擇,使轉(zhuǎn)化率變低。推薦內(nèi)容給用戶時(shí),克制給用戶提供過(guò)多的內(nèi)容,如果不得不提供更多的內(nèi)容,可考慮用漸進(jìn)呈現(xiàn)的方式,避免用戶迷失于信息之中。
神奇的進(jìn)度(集換卡)
卡片一完成集齊印花換奶茶任務(wù)的比例是19%,卡片二完成任務(wù)的比例是34%。同樣是有8個(gè)印花待集齊,但賦予了進(jìn)度的設(shè)計(jì),起到了鼓勵(lì)用戶和提升參與度的效果,會(huì)有更多的用戶去執(zhí)行并完成任務(wù)。
我們可以怎么做?
賦予進(jìn)度效果,給用戶一個(gè)開(kāi)頭,鼓勵(lì)用戶往下參與。
處理復(fù)雜的進(jìn)度(LinkedIn個(gè)人資料填寫(xiě))
填寫(xiě)Linkedin的個(gè)人信息頁(yè)是一個(gè)復(fù)雜的過(guò)程,如上圖,需要的信息大內(nèi)容多,涉及到記憶過(guò)往的信息,和有足夠的耐心去思考如何可以更好地表達(dá),以及把自己的經(jīng)歷包裝得更得體。前面所提到的記憶、思考和耐心,都包含在Linkedin的個(gè)人資料頁(yè)填寫(xiě)任務(wù)中。接下來(lái)看看Linkedin是如何引導(dǎo)用戶一步步完成復(fù)雜的任務(wù)。
當(dāng)用戶填寫(xiě)的進(jìn)度為25%的時(shí)候,提示用戶,添加職位信息可以增加15%的進(jìn)度,添加照片進(jìn)度可以增加5%等簡(jiǎn)單易完成的任務(wù)。
當(dāng)用戶填寫(xiě)的進(jìn)度為80%的時(shí)候,提示用戶,添加簡(jiǎn)介可以增加5%的進(jìn)度,邀請(qǐng)別人給自己寫(xiě)推薦信可以增加5%的進(jìn)度等較難完成的任務(wù)。
很好地運(yùn)用了目標(biāo)趨近效應(yīng)。目標(biāo)趨近效應(yīng),是指人們接近目標(biāo)時(shí)會(huì)加快行動(dòng),離目標(biāo)越近,人們就越有動(dòng)力完成它,尤其是當(dāng)成功近在眼前的時(shí)候。所以Linkedin將任務(wù)難度從易到難分布,越接近目標(biāo),越容易被激勵(lì),任務(wù)難度也越大。
我們可以怎么做?
后續(xù)設(shè)計(jì)中如果遇到冗長(zhǎng)的任務(wù),我們可以把任務(wù)拆分出來(lái),將復(fù)雜的問(wèn)題分解為一系列更簡(jiǎn)單的問(wèn)題,并且按照從易到難展示給用戶,降低用戶對(duì)任務(wù)的抵觸心理,引導(dǎo)用戶逐步去完成任務(wù)。
推廣圖與銷售額
上方左圖是規(guī)整的產(chǎn)品列表,無(wú)推廣內(nèi)容。右圖在頁(yè)面中增加了banner圖,列表區(qū)有產(chǎn)品大小圖的對(duì)比。第一眼看到這兩張對(duì)比圖時(shí),默默覺(jué)得右圖更吸引用戶,相信不少人與我有相同的感覺(jué),但實(shí)際效果是左圖銷售量會(huì)比右圖高17.1%。
上方左圖在頁(yè)面中增加了banner圖,告知用戶預(yù)購(gòu)可在下次購(gòu)買時(shí)獲得20元的優(yōu)惠;右圖是去掉了banner圖,只展示游戲列表。左圖告知用戶預(yù)購(gòu)的好處,感覺(jué)會(huì)有更多用戶參與預(yù)購(gòu),銷售量會(huì)更高,但實(shí)際情況是右圖銷售量會(huì)比左圖高43.4%。
為什么結(jié)論會(huì)與我們的假設(shè)相反?因?yàn)閳?chǎng)景不合時(shí)宜,我們?cè)谧鍪醉?yè)的時(shí)候給予推廣,用戶是有預(yù)期的,但是在非首頁(yè)給出推廣內(nèi)容,反而容易讓用戶自動(dòng)忽略banner區(qū)域,達(dá)不到轉(zhuǎn)達(dá)重要信息的目的,反而浪費(fèi)了產(chǎn)品展示的空間。
我們可以怎么做?
避免在產(chǎn)品列表頁(yè)使用推廣圖,不合時(shí)宜地出現(xiàn)推廣圖,反而會(huì)讓銷售量下降??酥苾?nèi)容的推送,售賣效果更佳。
提升轉(zhuǎn)化率的設(shè)計(jì)技巧
1.視頻的魅力
視頻展示對(duì)于網(wǎng)購(gòu)的重要性:96%的消費(fèi)者認(rèn)為視頻有助于作出網(wǎng)購(gòu)決策。電商網(wǎng)站商品詳情頁(yè)中,將圖片替換成視頻后,用戶轉(zhuǎn)化率提升了12.62%。
除了是否默認(rèn)展示視頻外,視頻長(zhǎng)度也對(duì)轉(zhuǎn)化率有影響。視頻長(zhǎng)度接近60秒,有一半用戶放棄觀看;視頻長(zhǎng)度短于30秒用戶更有觀看的意愿,注意力也更為集中。
我們可以怎么做?
- 游戲詳情頁(yè)將視頻放在第一位,默認(rèn)播放且靜音;
- 視頻時(shí)長(zhǎng)控制在30秒以內(nèi)。
2.操作按鈕的設(shè)計(jì)
文字按鈕和圖標(biāo)按鈕的測(cè)試,從上圖中可看出,文字按鈕的點(diǎn)擊率高于圖標(biāo)按鈕20%
加入購(gòu)物車(Add To Cart)、+購(gòu)物車(+Cart)和購(gòu)物車圖標(biāo)按鈕,三種樣式的點(diǎn)擊率測(cè)試,以購(gòu)物車圖標(biāo)按鈕為基準(zhǔn),可看出,純文字的點(diǎn)擊率是最高的。
為什么?因?yàn)槲淖直硪飧鞔_,用戶更容易理解,更容易觸發(fā)用戶去操作。
上圖,在以綠色配色為主的界面中,紅色按鈕的點(diǎn)擊率會(huì)高于綠色按鈕的點(diǎn)擊率21%。
在以藍(lán)色配色為主的界面中,越是偏向藍(lán)色的對(duì)比色,點(diǎn)擊率越高。
閱讀習(xí)慣是從左到右從上到下,在一個(gè)區(qū)域內(nèi),視線的終點(diǎn)是在右下角,將按鈕放在視線的終點(diǎn),點(diǎn)擊率會(huì)高于放在其他區(qū)域。
我們可以怎么做?
- 能用文字不用圖標(biāo);
- 巧用對(duì)比色;
- 按鈕位置需符合閱讀習(xí)慣。
3.增加緊迫感和稀缺性元素
唯品會(huì)的20分鐘購(gòu)物車清空功能,實(shí)際上這是一個(gè)減庫(kù)存的功能,并不是純屬為了誘導(dǎo)或刺激用戶購(gòu)買。倒數(shù)計(jì)時(shí)告知用戶,貨物只為用戶保存20分鐘,20分鐘后不購(gòu)買,將返回到購(gòu)物架供別人選擇。一個(gè)簡(jiǎn)單的時(shí)間倒計(jì)時(shí)元素,會(huì)讓用戶自然而然地產(chǎn)生緊迫感。產(chǎn)生如果現(xiàn)在不買,20分鐘后可能就會(huì)沒(méi)貨了的感覺(jué)。讓用戶感受到什么叫時(shí)光飛逝稍縱即逝,腎上腺素上升,心跳加快,進(jìn)入買買買模式!
“賦予效應(yīng)”使得人們對(duì)已經(jīng)擁有的事物會(huì)習(xí)慣性地視若無(wú)睹;只有在失去或即將失去的時(shí)候才會(huì)產(chǎn)生加倍的珍惜感。而唯品會(huì)的20分鐘倒計(jì)時(shí)和京東的還剩N件,都在一定程度上起到了讓用戶珍惜即將失去的購(gòu)買權(quán)的作用,從而增加了用戶購(gòu)買的欲望。
電商中常見(jiàn)的用部分“已搶光”暗示用戶,襯托氛圍,再不買,就都搶光了,通過(guò)這種方式促進(jìn)用戶作出購(gòu)買決定,是一種常見(jiàn)的營(yíng)銷策略。
我們可以怎么做?
可以考慮在后續(xù)售賣中,增加緊迫感和稀缺性元素。比如:限定2000個(gè)折扣名額、限定24小時(shí)的折扣時(shí)間等。
4.售賣中相關(guān)信息展示
從上面案例中可看出在價(jià)格相同的情況下,增加折扣信息的標(biāo)簽,會(huì)比無(wú)標(biāo)簽的銷售量提升148.3%。
相比告知用戶價(jià)格優(yōu)勢(shì),用戶更看中產(chǎn)品是否有品牌授權(quán)和版權(quán)是否獨(dú)家。有授權(quán)信息的銷售量是之前頁(yè)面的107%購(gòu)買率。
64%的用戶會(huì)等到商品打折的時(shí)候才購(gòu)買。59%的用戶會(huì)在購(gòu)買前搜索優(yōu)惠碼??梢?jiàn)折扣對(duì)用戶而言,影響力是非常大的。
70%的用戶會(huì)在移動(dòng)端比價(jià),38%的用戶會(huì)在移動(dòng)端兌換優(yōu)惠券。80%的中國(guó)網(wǎng)購(gòu)用戶會(huì)使用移動(dòng)支付。用戶會(huì)更傾向于在有忠誠(chéng)度成長(zhǎng)體系的平臺(tái)去購(gòu)買商品。
我們可以怎么做?
- 重視折扣信息的展示;
- 在售賣的同時(shí),建立忠誠(chéng)度成長(zhǎng)體系,增加用戶粘性;
- 讓用戶更便捷地在移動(dòng)端領(lǐng)取兌換券/優(yōu)惠碼,在移動(dòng)端完成支付。
5. 提升響應(yīng)速度
>降低轉(zhuǎn)化率的情況:亞馬遜發(fā)現(xiàn),他們的網(wǎng)站頁(yè)面加載時(shí)間每增加100毫秒,銷售量就會(huì)下降1%;近65%的全球互聯(lián)網(wǎng)消費(fèi)者(另一數(shù)據(jù)為57%的在線購(gòu)物者),在頁(yè)面打開(kāi)時(shí)間超過(guò)3秒時(shí),會(huì)離開(kāi)該頁(yè)面,并且80%的消費(fèi)者不會(huì)再訪問(wèn)該頁(yè)面;網(wǎng)站加載時(shí)間每增加1秒,客戶滿意度便會(huì)下跌7%。
亞馬遜頁(yè)面打開(kāi)時(shí)間每增加1秒,全年銷售額減少16億美元,谷歌搜索結(jié)果打開(kāi)時(shí)間每增加0.4秒,全天搜索量減少800萬(wàn)次。頁(yè)面的打開(kāi)時(shí)間和操作響應(yīng)速度對(duì)于用戶體驗(yàn)而言非?;A(chǔ)而異常重要,對(duì)轉(zhuǎn)化率的影響非常大。
我們可以怎么做?
想要提升轉(zhuǎn)化率,必須先避免基礎(chǔ)體驗(yàn)問(wèn)題。提高響應(yīng)速度是王道,記住用戶是沒(méi)有耐心的。
提升轉(zhuǎn)化率的設(shè)計(jì)技巧小結(jié):
- 巧用神奇的數(shù)字?4?(分組、記憶、選擇)
- 賦予進(jìn)度效果
- 任務(wù)拆分
- 界面排布(圖片大小、運(yùn)營(yíng)內(nèi)容的展示)
- 視頻的魅力
- 增加緊迫感和稀缺性元素
- 折扣信息和授權(quán)信息展示
- 重視移動(dòng)支付
- 提升響應(yīng)速度
- 提升用戶滿意度
?保持測(cè)試,不斷優(yōu)化
保持測(cè)試,不斷優(yōu)化是利用設(shè)計(jì)引導(dǎo)用戶行為提升轉(zhuǎn)化率的基礎(chǔ)。跟生活中大多數(shù)事情一樣,最合理的設(shè)計(jì)不是直接從設(shè)計(jì)師腦子里蹦出來(lái)的,而是需要經(jīng)過(guò)一系列失敗的嘗試、合理的分析和不斷調(diào)整優(yōu)化的過(guò)程。享受這個(gè)過(guò)程吧,過(guò)程中,我們會(huì)學(xué)到更多。
參考資料:
https://blog.dlvrit.com/2015/06/diminishing-attention-span/
https://blog.crazyegg.com/2014/10/20/9-simple-yet-effective-tips-capitalize-eye-tracking-insights/
http://www.acquisio.com/blog/ecommerce/21-ways-improve-sales-eshop-infographic/
https://erikrunyon.com/2013/07/carousel-interaction-stats/?????????????????
http://blog.treepodia.com/2010/03/at-60-seconds-more-than-half-your-audience-is-gone/
http://www.invespcro.com/blog/how-discounts-affect-online-consumer-buying-behavior/
作者:張?jiān)疲v訊高級(jí)交互設(shè)計(jì)師,曾服務(wù)于QQ音樂(lè)多終端(iOS,Android和PC)和手機(jī)QQ游戲中心,有豐富的跨終端設(shè)計(jì)經(jīng)驗(yàn),現(xiàn)服務(wù)于TGP騰訊游戲平臺(tái)。
本文由 @騰訊大講堂授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
get到很多有用的點(diǎn),感謝!
很受用?。?!感謝分享?。。。。。。?!
很不錯(cuò)的分享,有收獲,感謝
很棒!很受用
太贊了這個(gè),尤其是關(guān)于那個(gè)banner的誤區(qū)。純正的干貨。抱走了,謝謝
真的很受用。也結(jié)合這些案例和理論思考自己的產(chǎn)品了。謝謝分享
干貨 已收藏