?設(shè)計(jì)是感性的，還是理性的？都有，在理性的基礎(chǔ)上，增加感性的元素。這個設(shè)計(jì)師們都了解，但理性的設(shè)計(jì)點(diǎn)具體體現(xiàn)在哪些地方呢？如何通過理性的設(shè)計(jì)影響用戶行為，提升轉(zhuǎn)化率？

用戶行為

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

在做設(shè)計(jì)的時候，很容易把用戶想象成一個完美的用戶，具有鷹的視力、大象的記憶力、蝙蝠的導(dǎo)航能力、駱駝的耐心、猴子的靈活度。但實(shí)際情況往往如下：

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

事實(shí)2:17%的用戶瀏覽網(wǎng)頁的時間少于4秒；每多100個英文字，用戶只愿意花4.4秒的時間去掃描閱讀；以這個速度，可以評估出49%的用戶平均在每頁閱讀111及以下字?jǐn)?shù)的內(nèi)容，花費(fèi)的時間約是5秒以下?？梢?，用戶瀏覽頁面以掃描為主，每個頁面停留時間很短，沒有耐心逐字逐句去閱讀。?

事實(shí)3: 當(dāng)我們自己看到這種設(shè)計(jì)的時候，填寫注冊表單的欲望就大打折扣。因?yàn)橹雷约河洸蛔∽约涸O(shè)定的問題和答案，沒有耐心去填寫，抗拒記憶。

事實(shí)4: 首次使用微云，拖動文件到微云面板后，沒留意到界面的變化，再一次拖動文件到微云面板，有數(shù)據(jù)變化時才發(fā)現(xiàn)界面的反饋。做設(shè)計(jì)時很容易高估用戶對界面變化的感知程度，我們覺得用戶會注意得到，但用戶可能并沒有發(fā)現(xiàn)界面的變化。

相同樣式的操作提示，IE瀏覽器在提示條的上方增加醒目的橙色橫條，同時增加提醒機(jī)制，當(dāng)用戶超過一段時間沒有點(diǎn)擊操作時，判斷為用戶沒有注意到操作欄的出現(xiàn)，通過顏色漸變動效提示用戶進(jìn)行操作。

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

從上面的案例可以看出，真實(shí)用戶：大寫的“懶”，注意力不集中、不愛記憶、視覺不敏銳、不愛探索、沒有耐心。懶是天性，是正常的表現(xiàn)，我們在設(shè)計(jì)過程中，應(yīng)該避免讓用戶去記憶、思考、尋找和反復(fù)嘗試。

記憶的秘密

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

京東卡綁定過程的體驗(yàn)比銀行的要好，因?yàn)閷?shí)體卡上分區(qū)段，終端輸入的時候也分了區(qū)段，便于用戶的記憶、輸入和校驗(yàn)。整個使用過程較為輕松。

為什么是以四個字為主去分段？因?yàn)殚L了記不住，容易出錯！?

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

再看看下方整理分組后的詞，是不是20秒可以全記?。?/p>

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

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

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

視線的秘密

上圖我們會關(guān)注到什么？寶寶的臉？紙尿褲？浴巾？目標(biāo)不明確。

我們知道視線會受廣告模特的影響，但影響到底有多大？通過下面的案例，看看設(shè)計(jì)對用戶行為的影響力。

圖一模特視線看向前，圖二模特視線看向產(chǎn)品

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

選擇的秘密

一個展臺放置24瓶果醬，另一個展臺防止6瓶果醬，開放給大家免費(fèi)品嘗。

• 大家會傾向于在哪個展臺駐足品嘗？
• 為什么人們想要更多的選擇？
• 選擇多，選擇少，哪個好？
• 哪種購買力會更強(qiáng)？

逐一解答以上的問題。

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

無論是選擇多還是選擇少，人們停在展臺前品嘗的果醬種類數(shù)量都很接近。因?yàn)槿藗兠看沃荒苡涀∪募虑椋?同樣他們每次也只能從三四種事物中進(jìn)行選擇。

關(guān)于購買力的有趣結(jié)論:

• ?24種果醬，60%的顧客會駐足并品嘗，有3%購買了果醬（購買率1.8%）；
• ?6種果醬， 40%的顧客會駐足并品嘗，有31%購買了果醬（購買率12.4%）。

以上結(jié)論意味著什么？跟設(shè)計(jì)有什么關(guān)系？后面會揭曉

思考：如何通過設(shè)計(jì)引導(dǎo)用戶行為？

剛介紹了用戶以及用戶行為，在了解了用戶的記憶、選擇和容易被引導(dǎo)的秘密后，我們?nèi)绾胃鶕?jù)用戶的記憶特點(diǎn)和行為特點(diǎn)、去引導(dǎo)用戶行為，以達(dá)到提升轉(zhuǎn)化率的目標(biāo)？看看以下案例：

圖片大小偏好（eBay A/B test案例）

測試A截圖

測試B截圖

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

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

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

我們可以怎么做？

回答剛才的問題，果醬案例與設(shè)計(jì)的關(guān)系是什么？為什么更多人傾向于在24種果醬的展臺，而其購買轉(zhuǎn)化率卻遠(yuǎn)低于6種果醬的展臺？

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

神奇的進(jìn)度（集換卡）

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

我們可以怎么做？

賦予進(jìn)度效果，給用戶一個開頭，鼓勵用戶往下參與。

處理復(fù)雜的進(jìn)度（LinkedIn個人資料填寫）

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

當(dāng)用戶填寫的進(jìn)度為25%的時候，提示用戶，添加職位信息可以增加15%的進(jìn)度，添加照片進(jìn)度可以增加5%等簡單易完成的任務(wù)。

當(dāng)用戶填寫的進(jìn)度為80%的時候，提示用戶，添加簡介可以增加5%的進(jìn)度，邀請別人給自己寫推薦信可以增加5%的進(jìn)度等較難完成的任務(wù)。

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

我們可以怎么做？

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

推廣圖與銷售額

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

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

為什么結(jié)論會與我們的假設(shè)相反？因?yàn)閳鼍安缓蠒r宜，我們在做首頁的時候給予推廣，用戶是有預(yù)期的，但是在非首頁給出推廣內(nèi)容，反而容易讓用戶自動忽略banner區(qū)域，達(dá)不到轉(zhuǎn)達(dá)重要信息的目的，反而浪費(fèi)了產(chǎn)品展示的空間。

我們可以怎么做？

避免在產(chǎn)品列表頁使用推廣圖，不合時宜地出現(xiàn)推廣圖，反而會讓銷售量下降。克制內(nèi)容的推送，售賣效果更佳。

提升轉(zhuǎn)化率的設(shè)計(jì)技巧

1.視頻的魅力

視頻展示對于網(wǎng)購的重要性：96%的消費(fèi)者認(rèn)為視頻有助于作出網(wǎng)購決策。電商網(wǎng)站商品詳情頁中，將圖片替換成視頻后，用戶轉(zhuǎn)化率提升了12.62%。

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

我們可以怎么做？

• 游戲詳情頁將視頻放在第一位，默認(rèn)播放且靜音；
• 視頻時長控制在30秒以內(nèi)。

2.操作按鈕的設(shè)計(jì)

文字按鈕和圖標(biāo)按鈕的測試，從上圖中可看出，文字按鈕的點(diǎn)擊率高于圖標(biāo)按鈕20%

加入購物車（Add To Cart）、+購物車（+Cart）和購物車圖標(biāo)按鈕，三種樣式的點(diǎn)擊率測試，以購物車圖標(biāo)按鈕為基準(zhǔn)，可看出，純文字的點(diǎn)擊率是最高的。

為什么？因?yàn)槲淖直硪飧鞔_，用戶更容易理解，更容易觸發(fā)用戶去操作。

上圖，在以綠色配色為主的界面中，紅色按鈕的點(diǎn)擊率會高于綠色按鈕的點(diǎn)擊率21%。

在以藍(lán)色配色為主的界面中，越是偏向藍(lán)色的對比色，點(diǎn)擊率越高。

閱讀習(xí)慣是從左到右從上到下，在一個區(qū)域內(nèi)，視線的終點(diǎn)是在右下角，將按鈕放在視線的終點(diǎn)，點(diǎn)擊率會高于放在其他區(qū)域。

我們可以怎么做？

• 能用文字不用圖標(biāo)；
• 巧用對比色；
• 按鈕位置需符合閱讀習(xí)慣。

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

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

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

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

我們可以怎么做？

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

4.售賣中相關(guān)信息展示

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

相比告知用戶價格優(yōu)勢，用戶更看中產(chǎn)品是否有品牌授權(quán)和版權(quán)是否獨(dú)家。有授權(quán)信息的銷售量是之前頁面的107%購買率。

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

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

我們可以怎么做？

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

5. 提升響應(yīng)速度

>降低轉(zhuǎn)化率的情況：亞馬遜發(fā)現(xiàn)，他們的網(wǎng)站頁面加載時間每增加100毫秒，銷售量就會下降1%；近65%的全球互聯(lián)網(wǎng)消費(fèi)者（另一數(shù)據(jù)為57%的在線購物者），在頁面打開時間超過3秒時，會離開該頁面，并且80%的消費(fèi)者不會再訪問該頁面；網(wǎng)站加載時間每增加1秒，客戶滿意度便會下跌7%。

亞馬遜頁面打開時間每增加1秒，全年銷售額減少16億美元，谷歌搜索結(jié)果打開時間每增加0.4秒，全天搜索量減少800萬次。頁面的打開時間和操作響應(yīng)速度對于用戶體驗(yàn)而言非?；A(chǔ)而異常重要，對轉(zhuǎn)化率的影響非常大。

我們可以怎么做？

想要提升轉(zhuǎn)化率，必須先避免基礎(chǔ)體驗(yàn)問題。提高響應(yīng)速度是王道，記住用戶是沒有耐心的。

提升轉(zhuǎn)化率的設(shè)計(jì)技巧小結(jié)：

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

?保持測試，不斷優(yōu)化

保持測試，不斷優(yōu)化是利用設(shè)計(jì)引導(dǎo)用戶行為提升轉(zhuǎn)化率的基礎(chǔ)。跟生活中大多數(shù)事情一樣，最合理的設(shè)計(jì)不是直接從設(shè)計(jì)師腦子里蹦出來的，而是需要經(jīng)過一系列失敗的嘗試、合理的分析和不斷調(diào)整優(yōu)化的過程。享受這個過程吧，過程中，我們會學(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)?，騰訊高級交互設(shè)計(jì)師，曾服務(wù)于QQ音樂多終端（iOS,Android和PC）和手機(jī)QQ游戲中心，有豐富的跨終端設(shè)計(jì)經(jīng)驗(yàn)，現(xiàn)服務(wù)于TGP騰訊游戲平臺。

本文由 @騰訊大講堂授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。