?設(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)載。