設(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ù)難度也越大。
我們可以怎么做系吭?
后續(xù)設(shè)計中如果遇到冗長的任務(wù)五嫂,我們可以把任務(wù)拆分出來,將復(fù)雜的問題分解為一系列更簡單的問題肯尺,并且按照從易到難展示給用戶沃缘,降低用戶對任務(wù)的抵觸心理,引導(dǎo)用戶逐步去完成任務(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)速度
Hhezy.com和DooYea聯(lián)合譯制
降低轉(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騰訊游戲平臺缠黍。