【干貨】行為·設計·轉化率——通過設計引導用戶行為提升轉化率

7 評論 29787 瀏覽 294 收藏 27 分鐘

?設計是感性的,還是理性的?都有,在理性的基礎上,增加感性的元素。這個設計師們都了解,但理性的設計點具體體現在哪些地方呢?如何通過理性的設計影響用戶行為,提升轉化率?

用戶行為

要了解用戶,必須先了解用戶行為

QQ圖片20160813115007

在做設計的時候,很容易把用戶想象成一個完美的用戶,具有鷹的視力、大象的記憶力、蝙蝠的導航能力、駱駝的耐心、猴子的靈活度。但實際情況往往如下:

QQ圖片20160813115427

事實1: 2013年平均注意力是8秒,較2000年注意力時長減少了4秒;金魚的平均注意力是9秒。人的平均注意力還不如一條魚來得持久。

QQ圖片20160813120132

事實2:17%的用戶瀏覽網頁的時間少于4秒;每多100個英文字,用戶只愿意花4.4秒的時間去掃描閱讀;以這個速度,可以評估出49%的用戶平均在每頁閱讀111及以下字數的內容,花費的時間約是5秒以下。可見,用戶瀏覽頁面以掃描為主,每個頁面停留時間很短,沒有耐心逐字逐句去閱讀。?

事實3: 當我們自己看到這種設計的時候,填寫注冊表單的欲望就大打折扣。因為知道自己記不住自己設定的問題和答案,沒有耐心去填寫,抗拒記憶。

QQ圖片20160813123218

事實4: 首次使用微云,拖動文件到微云面板后,沒留意到界面的變化,再一次拖動文件到微云面板,有數據變化時才發現界面的反饋。做設計時很容易高估用戶對界面變化的感知程度,我們覺得用戶會注意得到,但用戶可能并沒有發現界面的變化。
QQ圖片20160813134849

相同樣式的操作提示,IE瀏覽器在提示條的上方增加醒目的橙色橫條,同時增加提醒機制,當用戶超過一段時間沒有點擊操作時,判斷為用戶沒有注意到操作欄的出現,通過顏色漸變動效提示用戶進行操作。

QQ圖片20160813135310

事實5: Photoshop、Excel等軟件經常使用,但還是很多功能不清楚。然而,我們并沒有主動探索,也沒有足夠的耐心去逐一嘗試,除非有功能使用的需求。

QQ圖片20160813135437

從上面的案例可以看出,真實用戶:大寫的“懶”,注意力不集中、不愛記憶、視覺不敏銳、不愛探索、沒有耐心。懶是天性,是正常的表現,我們在設計過程中,應該避免讓用戶去記憶、思考、尋找和反復嘗試。

記憶的秘密

銀行卡上以四位數為一組分段顯示卡號,但用戶輸入賬號時,卻沒有為用戶分區段顯示,不便于用戶核對校驗,整個輸入過程都是步步驚心,生怕搞錯。

QQ圖片20160813135726

京東卡綁定過程的體驗比銀行的要好,因為實體卡上分區段,終端輸入的時候也分了區段,便于用戶的記憶、輸入和校驗。整個使用過程較為輕松。

QQ圖片20160813135844

QQ圖片20160813135856

為什么是以四個字為主去分段?因為長了記不住,容易出錯!?

QQ圖片20160813140042

看看上方的詞,如果給你20秒,你可以記住幾個詞?

再看看下方整理分組后的詞,是不是20秒可以全記住?

QQ圖片20160813140055

面對大量未分類的信息,用戶就會感到被信息湮沒。把散亂的內容分組展示,用戶就容易理解和記憶了。

QQ圖片20160813140238

從上圖中,我們可以看出要求記憶的內容越多,記憶精準度則越低。內容項很多時,我們可以通過精簡數量,或者可以用歸類、分組的方法展示更多信息,每組展示盡量不多于4條信息,減少對用戶記憶的依賴。

QQ圖片20160813161428

如上圖中Adobe軟件中的分組,讓用戶快速定位功能,便于查找和理解。

視線的秘密

QQ圖片20160813161622

上圖我們會關注到什么?寶寶的臉?紙尿褲?浴巾?目標不明確。

我們知道視線會受廣告模特的影響,但影響到底有多大?通過下面的案例,看看設計對用戶行為的影響力。

QQ圖片20160813161714

圖一模特視線看向前,圖二模特視線看向產品

QQ圖片20160813161727

從視線熱點圖中可以看出,模特視線看向前方的廣告中,用戶視線更多地關注在模特的臉上;模特視線看向產品的廣告中,用戶更多地關注到了產品本身,顯然廣告圖二才達到了商家的目的,讓用戶關注到了產品。在這個案例中,通過極其細微的視線引導,大大提升了用戶對產品和相關信息的關注度,達到了廣告的效果。

選擇的秘密

QQ圖片20160813161929

一個展臺放置24瓶果醬,另一個展臺防止6瓶果醬,開放給大家免費品嘗。

  • 大家會傾向于在哪個展臺駐足品嘗?
  • 為什么人們想要更多的選擇?
  • 選擇多,選擇少,哪個好?
  • 哪種購買力會更強?

逐一解答以上的問題。

目標不明確,不確定自己的選擇,所以會不停地尋找更多的信息,想要更多的選擇,傾向于在選擇多的展臺。這是多巴胺效應的一部分,尋找信息令人上癮。

無論是選擇多還是選擇少,人們停在展臺前品嘗的果醬種類數量都很接近。因為人們每次只能記住三四件事情, 同樣他們每次也只能從三四種事物中進行選擇。

關于購買力的有趣結論:

  • ?24種果醬,60%的顧客會駐足并品嘗,有3%購買了果醬(購買率1.8%);
  • ?6種果醬, 40%的顧客會駐足并品嘗,有31%購買了果醬(購買率12.4%)。

以上結論意味著什么?跟設計有什么關系?后面會揭曉

思考:如何通過設計引導用戶行為?

剛介紹了用戶以及用戶行為,在了解了用戶的記憶、選擇和容易被引導的秘密后,我們如何根據用戶的記憶特點和行為特點、去引導用戶行為,以達到提升轉化率的目標?看看以下案例:

圖片大小偏好(eBay A/B test案例)

QQ圖片20160813162101

測試A截圖

QQ圖片20160813162117

測試B截圖

通過多次測試,eBay的研究人員普遍認為如果明顯位置列出的商品數量越多,滾動或者分頁的次數越少,就越能吸引買家。根據這種假設,在此所列出的A/Btest就應該證明小的圖像可以增加每個頁面的商品數量,并因此更能吸引顧客。

但令研究人員吃驚的是,與尺寸較大的圖像(A)相比,尺寸較小的圖像(B)并未達到預期效果。通過深入調查和后續試驗,研究人員了解到事實與他們的假設剛好相反——即使圖像尺寸較大就意味著每一頁上列出的商品數量會減少,但這種方式更能吸引買家。得出試驗結果之后,eBay迅速做出調整,在整個網站上都換成了尺寸較大的圖像。如下圖:

QQ圖片20160813162308

eBay稱采用圖片放大,文字減少的方法,用戶滾屏速度和閱讀速度會變慢,這樣可使收益提升25%。

我們可以怎么做?

QQ圖片20160813162600

回答剛才的問題,果醬案例與設計的關系是什么?為什么更多人傾向于在24種果醬的展臺,而其購買轉化率卻遠低于6種果醬的展臺?

用戶使用界面的時候,與果醬案例一樣,當有更豐富內容的時候,用戶會停留更久的時間,也更愿意停留,但是同一時間內(一屏內)顯示的信息過多時反而會降低用戶的記憶和決策,不知道如何選擇,使轉化率變低。推薦內容給用戶時,克制給用戶提供過多的內容,如果不得不提供更多的內容,可考慮用漸進呈現的方式,避免用戶迷失于信息之中。

神奇的進度(集換卡)

QQ圖片20160813162708

卡片一完成集齊印花換奶茶任務的比例是19%,卡片二完成任務的比例是34%。同樣是有8個印花待集齊,但賦予了進度的設計,起到了鼓勵用戶和提升參與度的效果,會有更多的用戶去執行并完成任務。

我們可以怎么做?

賦予進度效果,給用戶一個開頭,鼓勵用戶往下參與。

處理復雜的進度(LinkedIn個人資料填寫)

QQ圖片20160813163329

填寫Linkedin的個人信息頁是一個復雜的過程,如上圖,需要的信息大內容多,涉及到記憶過往的信息,和有足夠的耐心去思考如何可以更好地表達,以及把自己的經歷包裝得更得體。前面所提到的記憶、思考和耐心,都包含在Linkedin的個人資料頁填寫任務中。接下來看看Linkedin是如何引導用戶一步步完成復雜的任務。

QQ圖片20160813163104

當用戶填寫的進度為25%的時候,提示用戶,添加職位信息可以增加15%的進度,添加照片進度可以增加5%等簡單易完成的任務。
QQ圖片20160813163116

當用戶填寫的進度為80%的時候,提示用戶,添加簡介可以增加5%的進度,邀請別人給自己寫推薦信可以增加5%的進度等較難完成的任務。

很好地運用了目標趨近效應。目標趨近效應,是指人們接近目標時會加快行動,離目標越近,人們就越有動力完成它,尤其是當成功近在眼前的時候。所以Linkedin將任務難度從易到難分布,越接近目標,越容易被激勵,任務難度也越大。

我們可以怎么做?

QQ圖片20160813163528

后續設計中如果遇到冗長的任務,我們可以把任務拆分出來,將復雜的問題分解為一系列更簡單的問題,并且按照從易到難展示給用戶,降低用戶對任務的抵觸心理,引導用戶逐步去完成任務。

推廣圖與銷售額

QQ圖片20160813163625

上方左圖是規整的產品列表,無推廣內容。右圖在頁面中增加了banner圖,列表區有產品大小圖的對比。第一眼看到這兩張對比圖時,默默覺得右圖更吸引用戶,相信不少人與我有相同的感覺,但實際效果是左圖銷售量會比右圖高17.1%。

QQ圖片20160813163636

上方左圖在頁面中增加了banner圖,告知用戶預購可在下次購買時獲得20元的優惠;右圖是去掉了banner圖,只展示游戲列表。左圖告知用戶預購的好處,感覺會有更多用戶參與預購,銷售量會更高,但實際情況是右圖銷售量會比左圖高43.4%。

為什么結論會與我們的假設相反?因為場景不合時宜,我們在做首頁的時候給予推廣,用戶是有預期的,但是在非首頁給出推廣內容,反而容易讓用戶自動忽略banner區域,達不到轉達重要信息的目的,反而浪費了產品展示的空間。

我們可以怎么做?

避免在產品列表頁使用推廣圖,不合時宜地出現推廣圖,反而會讓銷售量下降??酥苾热莸耐扑?,售賣效果更佳。

提升轉化率的設計技巧

1.視頻的魅力

視頻展示對于網購的重要性:96%的消費者認為視頻有助于作出網購決策。電商網站商品詳情頁中,將圖片替換成視頻后,用戶轉化率提升了12.62%。
QQ圖片20160813163940

除了是否默認展示視頻外,視頻長度也對轉化率有影響。視頻長度接近60秒,有一半用戶放棄觀看;視頻長度短于30秒用戶更有觀看的意愿,注意力也更為集中。

我們可以怎么做?

  • 游戲詳情頁將視頻放在第一位,默認播放且靜音;
  • 視頻時長控制在30秒以內。

2.操作按鈕的設計

QQ圖片20160813164020

文字按鈕和圖標按鈕的測試,從上圖中可看出,文字按鈕的點擊率高于圖標按鈕20%
QQ圖片20160813164140

加入購物車(Add To Cart)、+購物車(+Cart)和購物車圖標按鈕,三種樣式的點擊率測試,以購物車圖標按鈕為基準,可看出,純文字的點擊率是最高的。

為什么?因為文字表意更明確,用戶更容易理解,更容易觸發用戶去操作。

QQ圖片20160813164151

上圖,在以綠色配色為主的界面中,紅色按鈕的點擊率會高于綠色按鈕的點擊率21%。

QQ圖片20160813164204

在以藍色配色為主的界面中,越是偏向藍色的對比色,點擊率越高。

QQ圖片20160813164214

閱讀習慣是從左到右從上到下,在一個區域內,視線的終點是在右下角,將按鈕放在視線的終點,點擊率會高于放在其他區域。

我們可以怎么做?

  • 能用文字不用圖標;
  • 巧用對比色;
  • 按鈕位置需符合閱讀習慣。

3.增加緊迫感和稀缺性元素

QQ圖片20160813164527

唯品會的20分鐘購物車清空功能,實際上這是一個減庫存的功能,并不是純屬為了誘導或刺激用戶購買。倒數計時告知用戶,貨物只為用戶保存20分鐘,20分鐘后不購買,將返回到購物架供別人選擇。一個簡單的時間倒計時元素,會讓用戶自然而然地產生緊迫感。產生如果現在不買,20分鐘后可能就會沒貨了的感覺。讓用戶感受到什么叫時光飛逝稍縱即逝,腎上腺素上升,心跳加快,進入買買買模式!

QQ圖片20160813164609

“賦予效應”使得人們對已經擁有的事物會習慣性地視若無睹;只有在失去或即將失去的時候才會產生加倍的珍惜感。而唯品會的20分鐘倒計時和京東的還剩N件,都在一定程度上起到了讓用戶珍惜即將失去的購買權的作用,從而增加了用戶購買的欲望。

QQ圖片20160813164637

電商中常見的用部分“已搶光”暗示用戶,襯托氛圍,再不買,就都搶光了,通過這種方式促進用戶作出購買決定,是一種常見的營銷策略。

我們可以怎么做?

可以考慮在后續售賣中,增加緊迫感和稀缺性元素。比如:限定2000個折扣名額、限定24小時的折扣時間等。

4.售賣中相關信息展示

QQ圖片20160813164816

從上面案例中可看出在價格相同的情況下,增加折扣信息的標簽,會比無標簽的銷售量提升148.3%。

QQ圖片20160813164830

相比告知用戶價格優勢,用戶更看中產品是否有品牌授權和版權是否獨家。有授權信息的銷售量是之前頁面的107%購買率。

QQ圖片20160813164842

64%的用戶會等到商品打折的時候才購買。59%的用戶會在購買前搜索優惠碼。可見折扣對用戶而言,影響力是非常大的。

QQ圖片20160813164856

70%的用戶會在移動端比價,38%的用戶會在移動端兌換優惠券。80%的中國網購用戶會使用移動支付。用戶會更傾向于在有忠誠度成長體系的平臺去購買商品。

我們可以怎么做?

  • 重視折扣信息的展示;
  • 在售賣的同時,建立忠誠度成長體系,增加用戶粘性;
  • 讓用戶更便捷地在移動端領取兌換券/優惠碼,在移動端完成支付。

5. 提升響應速度

QQ圖片20160813172617

QQ圖片20160813172630

>降低轉化率的情況:亞馬遜發現,他們的網站頁面加載時間每增加100毫秒,銷售量就會下降1%;近65%的全球互聯網消費者(另一數據為57%的在線購物者),在頁面打開時間超過3秒時,會離開該頁面,并且80%的消費者不會再訪問該頁面;網站加載時間每增加1秒,客戶滿意度便會下跌7%。

QQ圖片20160813165253

亞馬遜頁面打開時間每增加1秒,全年銷售額減少16億美元,谷歌搜索結果打開時間每增加0.4秒,全天搜索量減少800萬次。頁面的打開時間和操作響應速度對于用戶體驗而言非常基礎而異常重要,對轉化率的影響非常大。

我們可以怎么做?

想要提升轉化率,必須先避免基礎體驗問題。提高響應速度是王道,記住用戶是沒有耐心的。

提升轉化率的設計技巧小結:

  • 巧用神奇的數字?4?(分組、記憶、選擇)
  • 賦予進度效果
  • 任務拆分
  • 界面排布(圖片大小、運營內容的展示)
  • 視頻的魅力
  • 增加緊迫感和稀缺性元素
  • 折扣信息和授權信息展示
  • 重視移動支付
  • 提升響應速度
  • 提升用戶滿意度

?保持測試,不斷優化

保持測試,不斷優化是利用設計引導用戶行為提升轉化率的基礎。跟生活中大多數事情一樣,最合理的設計不是直接從設計師腦子里蹦出來的,而是需要經過一系列失敗的嘗試、合理的分析和不斷調整優化的過程。享受這個過程吧,過程中,我們會學到更多。

參考資料:

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/

 

作者:張云,騰訊高級交互設計師,曾服務于QQ音樂多終端(iOS,Android和PC)和手機QQ游戲中心,有豐富的跨終端設計經驗,現服務于TGP騰訊游戲平臺。

本文由 @騰訊大講堂授權發布于人人都是產品經理,未經作者許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. get到很多有用的點,感謝!

    來自北京 回復
  2. 很受用?。?!感謝分享!?。。。。。。?/p>

    來自上海 回復
  3. 很不錯的分享,有收獲,感謝

    回復
  4. 很棒!很受用

    來自本機地址 回復
  5. 太贊了這個,尤其是關于那個banner的誤區。純正的干貨。抱走了,謝謝

    來自本機地址 回復
  6. 真的很受用。也結合這些案例和理論思考自己的產品了。謝謝分享

    來自本機地址 回復
  7. 干貨 已收藏

    回復