產(chǎn)品設(shè)計不僅是空間的藝術(shù)，也是時間的藝術(shù)。產(chǎn)品設(shè)計是以空間為手段，時間為目的。

都說繪畫是空間的藝術(shù)，音樂和文學(xué)是時間的藝術(shù)?？墒侨四X的處理能力有限，在欣賞繪畫時，不可能一下子感受到所有細(xì)節(jié)，必然是通過一定的瀏覽順序欣賞。

比如：清明上河圖，從空間上看是一副宋朝民間生活的寫實畫作。但如果按照畫卷展開從右向左的順序，你將看到一個一個的小故事。這種表現(xiàn)形式其實更像是連環(huán)畫，更像是文學(xué)作品，也就是時間藝術(shù)的范疇了。

所以，繪畫藝術(shù)，同時有著時間藝術(shù)的特點。

如果產(chǎn)品的頁面設(shè)計是一門藝術(shù)的話，最接近的應(yīng)該是繪畫。這種把許多不同的元素放到不同的位置的藝術(shù)，明顯是一種空間藝術(shù)。但為了讓用戶按照預(yù)想的順序閱讀內(nèi)容，必須考慮用空間藝術(shù)表現(xiàn)時間藝術(shù)。而產(chǎn)品設(shè)計最終目的是為了用戶體驗，這樣考慮下來產(chǎn)品的時間藝術(shù)的特點似乎更加明顯。

也就是說，產(chǎn)品設(shè)計是以空間為手段，時間為目的。

同樣的功能，顯眼的位置很重要

人們是以F型瀏覽模式對網(wǎng)頁進(jìn)行視線掃描的，簡單地說就是從左到右，從上到下。

所以，左邊的內(nèi)容會比右邊的內(nèi)容更容易被看到，上方的內(nèi)容會比下方的的內(nèi)容更容易看到。

遵循這一模式，最簡單的改動就是將內(nèi)容放到更顯眼的位置。

案例1

“我買網(wǎng)”的注冊頁面做過一次AB測試，分別將提交表單設(shè)計在頁面的左側(cè)和右側(cè)。

版本A

版本B

最后發(fā)現(xiàn)，版本A勝出，表單設(shè)計在頁面的左側(cè)的提交率相對右側(cè)提高了30.8%。這就是因為左邊的內(nèi)容用戶更容易看到。

案例2

互動百科旗下?lián)碛幸豢蠲赓M開源的百科建站工具，通過這個工具就可以很容易地搭建出一套自有的百科系統(tǒng)。

該工具的產(chǎn)品介紹頁面列出了許多功能特性，互動百科團(tuán)隊希望了解哪一個特性是用戶最看重的，因此進(jìn)行了一次AB測試。

原始版本的第一個功能說明是“企業(yè)級的安全防護(hù)”，測試版的第一個說明是“提供自適應(yīng)的多終端適配”。

原始版本

測試版本

最后發(fā)現(xiàn)，測試版本的轉(zhuǎn)化率相比原始版本提升了13%。雖然內(nèi)容完全相同，但是不同的排版讓用戶更容易地看到自己感興趣的內(nèi)容。

同樣的營銷，先看到什么很重要

從眾效應(yīng)是應(yīng)用最廣泛的一種營銷武器，比如：“三億人都在用的購物APP”——拼多多

但有些廣告卻反其道而行之，標(biāo)榜自己的與眾不同，同樣擁有一批消費者，比如：“標(biāo)記我的生活”——小紅書

甚至同一個用戶，既會從眾，也喜歡特立獨行。那么，人們究竟在什么時候會從眾，什么時候會選擇與眾不同？

影響力教父西奧迪尼有一本書叫《先發(fā)影響力》，書中提出：你讓用戶先看到什么，用戶就更注重什么。

案例3

舊金山現(xiàn)代藝術(shù)館做了兩個廣告。第一個廣告強(qiáng)調(diào)博物館的受歡迎程度，宣傳“每年有超過100萬人次參觀”。把這條廣告向正在觀看動作電影的觀眾播放時，強(qiáng)烈地激起了他們對博物館的好感?？上蛘谟^看浪漫愛情電影的受眾播放時，卻使他們對博物館的好感降低了。

第二條廣告強(qiáng)調(diào)了博物館的獨特性，廣告詞是“從人群中脫穎而出”。這條廣告在觀看愛情電影的觀眾中大獲成功，但在正在觀看動作電影的觀眾里效果特別差。

從人類演化的角度來看，人們遇到危險的情況時，會有加入群體的強(qiáng)烈傾向。而在遇到美好愛情時，則會避開群體。

也就是說，人們到底看重什么，和他之前看了什么有很大的關(guān)系。所以根據(jù)用戶的瀏覽順序，要注意先后信息的關(guān)聯(lián)性。

如果你在視頻網(wǎng)站中投放廣告，不僅僅考慮自己的廣告設(shè)計，還要考慮用戶之前看的是什么內(nèi)容。

案例4

一家在線家具網(wǎng)站的沙發(fā)比競爭對手的更舒服，質(zhì)量更好，但價格比競爭對手高。怎么樣才能讓用戶關(guān)注舒適度而不是關(guān)注價格呢？

心理學(xué)家建議把網(wǎng)頁的背景換成蓬松的云朵，把用戶的注意力吸引到了“舒適”上。用戶明顯地提升了以更舒服也更貴的沙發(fā)作為購買的首選。

另一組以硬幣作為背景，用戶則明顯傾向于購買更便宜的家具。

案例5

某K12在線教育機(jī)構(gòu)對其網(wǎng)課報名的落地頁進(jìn)行了一次AB測試，不同之處是其中的一段文案。

原始版本為“一次注冊。讓孩子一生與眾不同?！睖y試版本為“直播+輔導(dǎo)，學(xué)習(xí)更有效?！?/p>

結(jié)果，測試組（學(xué)習(xí)更有效）相比于原始版本（與眾不同），注冊人數(shù)增加29%，頁面的注冊轉(zhuǎn)化率提高了近32%。

兩個頁面最后都寫到“現(xiàn)在注冊和200萬優(yōu)秀家庭共同學(xué)習(xí)”，也就是用從眾效應(yīng)做最后的說服手段。

但是，原始版本在一開始卻說“讓孩子一生與眾不同”，如果想要孩子與眾不同，那么家長還會有從眾的心理嗎？

文案的不匹配讓用戶的從眾心理大幅地削弱。

同樣的內(nèi)容，正確的順序很重要

人們的購買行為雖然看起來千差萬別，但實際上都會經(jīng)過一系列特定的過程。這個過程被稱為消費者購買決策過程，一般會經(jīng)歷四個步驟：

1. 產(chǎn)生興趣
2. 收集信息
3. 評估價值
4. 購買決策

這是用戶在購買時必然會經(jīng)過的階段，頁面設(shè)計的空間藝術(shù)必須符合用戶的決策過程的時間藝術(shù)。

案例6

微軟商城的產(chǎn)品部門想要通過AB測試，主要是通過調(diào)整各個信息模塊的位置，找出更有效的方式，提高商品頁面的購物轉(zhuǎn)化率。

調(diào)整的模塊分別是：售價欄、詳情欄、促銷欄。

以下是各個版本的情況：

原始版本

測試版本A

測試版本B

測試版本C

最終測試測試版本C的轉(zhuǎn)化情況略低于原始版本，版本A和測試版本B相比原始版本的按鈕轉(zhuǎn)化率有不同程度的提升，其中測試版本A的提升最為明顯，轉(zhuǎn)化率相比原始版本提高了65.80%！

同樣的內(nèi)容，不同的順序竟然有如此大的提升。

我們用消費者購買決策模型稍一分析就能知道其中的原因，頁面上的內(nèi)容包括：商品圖片、詳情欄、促銷欄、售價欄。

其中商品圖片、詳情欄屬于“收集信息”的階段。促銷欄、售價欄屬于“評估價值”的階段。

所以，我們把四個頁面放在，將這兩類信息用不同顏色標(biāo)注。根據(jù)網(wǎng)頁F型瀏覽模式以及頁面的特點，用戶瀏覽這個頁面應(yīng)該是先看完左邊再看右邊。

版本A和版本B的信息呈現(xiàn)符合購買決策的過程，先收集信息，再評估價值。而原始版本和版本C順序是混亂的，用戶的決策過程在時間上是不連續(xù)的。

案例7

國外某電子書的銷售頁面進(jìn)行了一次AB測試，相比原始版本，測試版本將一部分的名人推薦的信息放到了購買按鈕的上方。

這個改動使得購買點擊率提升了64.5%。

這個案例也是兩個頁面內(nèi)容完全相同，僅僅調(diào)整順序就實現(xiàn)購買率的提升。

按照微軟商城的分析經(jīng)驗，我們做同樣的處理：

提升的原理是在把幫助用戶評估價值的名人推薦放在了正確的位置。

總結(jié)

產(chǎn)品設(shè)計不僅僅是空間的藝術(shù)，也是時間的藝術(shù)。產(chǎn)品設(shè)計不能像電影一樣確定用戶的觀看順序，但是在每一幀的畫面內(nèi)，還是可以根據(jù)用戶瀏覽的特點，心理的特點進(jìn)行頁面調(diào)整，讓用戶實現(xiàn)預(yù)期的瀏覽順序。

希望你能以空間為手段，以時間為目的，打造擁有更好用戶體驗的時間藝術(shù)。

參考文獻(xiàn)

• Jakob Nielsen：F-Shaped Pattern For Reading Web Content (original study)
• 云眼：小改動，大收益 – 哪個表單會勝出？
• 云眼：互動百科調(diào)整產(chǎn)品介紹順序來提高轉(zhuǎn)化率羅伯特·西奧迪尼：《先發(fā)影響力》
• 吆喝科技：某K12在線教育機(jī)構(gòu)著陸頁優(yōu)化
• 吆喝科技：微軟商城商品展示頁優(yōu)化
• wishpond：50 A/B Testing Examples & Case Studies To Draw Inspiration From

#專欄作家#

三元方差，公眾號：三元方差（sanyuanfangcha），人人都是產(chǎn)品經(jīng)理專欄作家。專注用數(shù)據(jù)驅(qū)動業(yè)務(wù)增長，擅長數(shù)據(jù)分析、用戶增長。喜歡閱讀、思考和創(chuàng)作。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議