設(shè)計是感性的迅箩，還是理性的溉愁？都有，在理性的基礎(chǔ)上饲趋，增加感性的元素拐揭。這個設(shè)計師們都了解，但理性的設(shè)計點具體體現(xiàn)在哪些地方呢奕塑？如何通過理性的設(shè)計影響用戶行為堂污，提升轉(zhuǎn)化率？

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

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

**事實1: **2013年平均注意力是8秒夕玩，較2000年注意力時長減少了4秒你弦；金魚的平均注意力是9秒。人的平均注意力還不如一條魚來得持久燎孟。禽作。。

事實2:17%的用戶瀏覽網(wǎng)頁的時間少于4秒揩页；每多100個英文字旷偿，用戶只愿意花4.4秒的時間去掃描閱讀；以這個速度爆侣，可以評估出49%的用戶平均在每頁閱讀111及以下字數(shù)的內(nèi)容萍程，花費的時間約是5秒以下±厶幔可見尘喝，**用戶瀏覽頁面以掃描為主磁浇，每個頁面停留時間很短斋陪，沒有耐心逐字逐句去閱讀。 **

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

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

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

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

從上面的案例可以看出粒梦，真實用戶：大寫的“懶”亮航，注意力不集中、不愛記憶匀们、視覺不敏銳缴淋、不愛探索、沒有耐心泄朴。懶是天性重抖，是正常的表現(xiàn)，我們在設(shè)計過程中祖灰，應(yīng)該避免讓用戶去記憶钟沛、思考、尋找和反復(fù)嘗試局扶。

記憶的秘密

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

京東卡綁定過程的體驗比銀行的要好悠鞍，因為實體卡上分區(qū)段对室，終端輸入的時候也分了區(qū)段，便于用戶的記憶咖祭、輸入和校驗掩宜。整個使用過程較為輕松。

為什么是以四個字為主去分段么翰？**因為長了記不住锭亏，容易出錯！ **

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

再看看下方整理分組后的詞固该，是不是20秒可以全記坠酢？

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

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

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

視線的秘密

上圖我們會關(guān)注到什么？寶寶的臉办悟？紙尿褲驾凶？浴巾牙甫？目標不明確潮改。

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

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

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

選擇的秘密

** 一個展臺放置24瓶果醬粤蝎，另一個展臺防止6瓶果醬，開放給大家免費品嘗袋马。**

大家會傾向于在哪個展臺駐足品嘗初澎？

為什么人們想要更多的選擇？

選擇多虑凛，選擇少碑宴，哪個好？

哪種購買力會更強桑谍？

逐一解答以上的問題延柠。

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

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

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

24種果醬础浮，60%的顧客會駐足并品嘗帆调，有3%購買了果醬（購買率1.8%）；

6種果醬豆同， 40%的顧客會駐足并品嘗番刊，有31%購買了果醬（購買率12.4%）。

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

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

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

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

測試A截圖

測試B截圖

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

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

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

我們可以怎么做？

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

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

神奇的進度（集換卡）

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

我們可以怎么做？

賦予進度效果奖唯，給用戶一個開頭惨缆，鼓勵用戶往下參與。

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

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

當用戶填寫的進度為25%的時候蕾各，提示用戶，添加職位信息可以增加15%的進度庆揪，添加照片進度可以增加5%等簡單易完成的任務(wù)示损。

當用戶填寫的進度為80%的時候，提示用戶嚷硫，添加簡介可以增加5%的進度检访，邀請別人給自己寫推薦信可以增加5%的進度等較難完成的任務(wù)始鱼。

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

我們可以怎么做系吭？

推廣圖與銷售額

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

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

為什么結(jié)論會與我們的假設(shè)相反？因為場景不合時宜陕悬，我們在做首頁的時候給予推廣题暖，用戶是有預(yù)期的，但是在非首頁給出推廣內(nèi)容，反而容易讓用戶自動忽略banner區(qū)域胧卤，達不到轉(zhuǎn)達重要信息的目的唯绍，反而浪費了產(chǎn)品展示的空間。

我們可以怎么做枝誊？

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

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

1.視頻的魅力

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

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

我們可以怎么做痛侍？

游戲詳情頁將視頻放在第一位朝氓，默認播放且靜音；

視頻時長控制在30秒以內(nèi)主届。

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

文字按鈕和圖標按鈕的測試赵哲，從上圖中可看出，文字按鈕的點擊率高于圖標按鈕20%

加入購物車（Add To Cart）君丁、+購物車（+Cart）和購物車圖標按鈕枫夺，三種樣式的點擊率測試，以購物車圖標按鈕為基準绘闷，可看出橡庞，純文字的點擊率是最高的。

為什么印蔗？因為文字表意更明確扒最，用戶更容易理解，更容易觸發(fā)用戶去操作华嘹。

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

在以藍色配色為主的界面中强挫，越是偏向藍色的對比色岔霸，點擊率越高。

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

我們可以怎么做？

能用文字不用圖標臀叙；

巧用對比色略水；

按鈕位置需符合閱讀習(xí)慣。

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

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

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

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

我們可以怎么做套腹？

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

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

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

[圖片上傳中店雅。政基。。（37）]
相比告知用戶價格優(yōu)勢闹啦，用戶更看中產(chǎn)品是否有品牌授權(quán)和版權(quán)是否獨家沮明。有授權(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)消費者（另一數(shù)據(jù)為57%的在線購物者），在頁面打開時間超過3秒時虽惭，會離開該頁面橡类，并且80%的消費者不會再訪問該頁面；網(wǎng)站加載時間每增加1秒芽唇，客戶滿意度便會下跌7%顾画。

亞馬遜頁面打開時間每增加1秒取劫，全年銷售額減少16億美元，谷歌搜索結(jié)果打開時間每增加0.4秒研侣，全天搜索量減少800萬次谱邪。頁面的打開時間和操作響應(yīng)速度對于用戶體驗而言非常基礎(chǔ)而異常重要庶诡，對轉(zhuǎn)化率的影響非常大惦银。
我們可以怎么做？
想要提升轉(zhuǎn)化率末誓，必須先避免基礎(chǔ)體驗問題扯俱。提高響應(yīng)速度是王道，記住用戶是沒有耐心的喇澡。

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

巧用神奇的數(shù)字 4 （分組蘸吓、記憶、選擇）

賦予進度效果

任務(wù)拆分

界面排布（圖片大小撩幽、運營內(nèi)容的展示）

視頻的魅力

增加緊迫感和稀缺性元素

折扣信息和授權(quán)信息展示

重視移動支付

提升響應(yīng)速度

提升用戶滿意度

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

保持測試，不斷優(yōu)化是利用設(shè)計引導(dǎo)用戶行為提升轉(zhuǎn)化率的基礎(chǔ)窜醉。跟生活中大多數(shù)事情一樣宪萄，最合理的設(shè)計不是直接從設(shè)計師腦子里蹦出來的，而是需要經(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/
作者：張云，騰訊高級交互設(shè)計師藤抡，曾服務(wù)于QQ音樂多終端（iOS,Android和PC）和手機QQ游戲中心侠碧，有豐富的跨終端設(shè)計經(jīng)驗，現(xiàn)服務(wù)于TGP騰訊游戲平臺缠黍。