任何一名設(shè)計師應(yīng)該都會接觸到運營活動頁，產(chǎn)品落地頁此類需求。而這些落地頁設(shè)計需求的業(yè)務(wù)目標(biāo)衡量標(biāo)準(zhǔn)都相當(dāng)明確——即轉(zhuǎn)化率。再進(jìn)一步，與我們的設(shè)計輸出直接相關(guān)的就是首頁轉(zhuǎn)化率/點擊率。這些數(shù)據(jù)通過埋點能很輕易地獲得，一般情況下，產(chǎn)品經(jīng)理會提前在需求文檔中標(biāo)明需要埋點的地方（埋點簡單說就是測量某個位置或者交互節(jié)點的具體數(shù)據(jù)，例如發(fā)生了多少次點擊），獲得數(shù)據(jù)用于驗證產(chǎn)品最終是否符合預(yù)期，是否達(dá)到了理想的轉(zhuǎn)化效果。
叮~ 講到這我們應(yīng)該明確了一件事，整個落地的設(shè)計其實最終都是為那個關(guān)鍵數(shù)據(jù)服務(wù)，無論是點擊率還是轉(zhuǎn)化率，達(dá)到預(yù)期甚至超出預(yù)期，那你的設(shè)計就完美地完成了任務(wù)，這也是驗證設(shè)計有效性的主要方法，將設(shè)計與數(shù)據(jù)關(guān)聯(lián)，用可量化的數(shù)據(jù)指標(biāo)來驗證偏感性的視覺工作。
就這樣，設(shè)計與產(chǎn)品/運營的世紀(jì)大戰(zhàn)開始了。因為我們都有了一個共同的目標(biāo)，因此在產(chǎn)品的最終收益、期望效果方面互相都很明確。但在實現(xiàn)手段上，我們很輕易地產(chǎn)生了分歧。主要分歧點就是「按鈕在左還是按鈕在右」這個問題上。我們需要理解，這不是一個簡單的交互問題，因為它其中摻雜了商業(yè)內(nèi)容。如果這是一個交互問題，那我們很容易判斷，例如彈窗的主次按鈕應(yīng)該主右副左，這既符合平臺規(guī)范，也符合用戶認(rèn)知和操作習(xí)慣。
然而作為一個強商業(yè)屬性的落地頁，按鈕在左或者按鈕在右都有其合理性。我選擇左，而運營同學(xué)代表他們團(tuán)隊要求右。 于是我敗下陣來，當(dāng)然，雖然表面上設(shè)計師輸了，但我們怎么能服輸，于是我想盡辦法來驗證左側(cè)放置按鈕才是更有利于轉(zhuǎn)化的形式。下面我們來看看不同的傾向?qū)?yīng)的設(shè)計原理。
產(chǎn)生左與右的爭執(zhí)其實主要源于設(shè)計與需求方的兩個判斷方向。首先說一下我的判斷邏輯，按照已知經(jīng)過驗證的理論，即 F 閱讀順序（尼爾森的用戶閱讀視線模型），用戶瀏覽落地頁的順序應(yīng)當(dāng)是從左往右自上而下，因此左上角的信息最早觸達(dá)用戶。在當(dāng)前主流的首圖式落地頁樣式下，首圖 banner 中的內(nèi)容應(yīng)當(dāng)置于左側(cè)，以使用戶更快地獲知產(chǎn)品的關(guān)鍵信息。
在落地頁首圖的體驗文案本身就是一個設(shè)計的覆蓋范圍，因為它直接關(guān)系到首頁的視覺傳達(dá)效率，即用戶需要花費多長時間、多少精力才能理解你的產(chǎn)品。我們往往在首頁體驗文案中采用主標(biāo)題加副標(biāo)題的形式，著重解釋這個產(chǎn)品是個什么東西、用戶能從這獲得什么，往往通過主副文案搭配的形式，來完成整個大意的闡述。
基于此，核心內(nèi)容置于左側(cè)，用戶在快速掃視時能夠第一時間獲知產(chǎn)品信息，了解產(chǎn)品利益點，這與我們精心準(zhǔn)備整個網(wǎng)站，以及精心準(zhǔn)備誘導(dǎo)力文案的方法相契合。這是我做出內(nèi)容置于左側(cè)的設(shè)計決策的主要思路？梢钥闯，我這里主要參考的是 F 閱讀模型這一理論，根據(jù)這個經(jīng)驗我得到的結(jié)論是 重要的信息應(yīng)當(dāng)擺放在左側(cè)以使用戶立即觸達(dá)核心信息，這將有利于接下來的引導(dǎo)或者轉(zhuǎn)化。
另一方面，運營同學(xué)又是基于什么考慮決定將核心內(nèi)容放在右側(cè)的呢？答案是操作習(xí)慣，理論化的話可以用費茨定律概括，（目標(biāo)距離用戶距離越短，用戶觸達(dá)的效率越高）？紤]到大部分用戶使用右手操作，鼠標(biāo)也大都懸停在屏幕右側(cè)，因此，按鈕置于右側(cè)，用戶點擊的路徑變得更短，也就更容易觸達(dá)和轉(zhuǎn)化（純體驗角度或者說效率角度）。
你仔細(xì)閱讀這部分內(nèi)容，從分歧點到各自的理論支撐實際上都沒有太大的漏洞，為什么沒有漏洞？因為確實都沒有錯誤，也都存在其合理性。例如我們常用的購物 APP 會把按鈕置于右下角，用戶操作起來必然比左上角的按鈕更加容易高效。那么在這兩種分析都合理的背景下，我們要對比或爭論的其實不是哪個判斷是錯誤的，而是哪個判斷更有利，更合理，能夠帶來更多的數(shù)據(jù)轉(zhuǎn)化。因此，這個問題最終由對錯問題，轉(zhuǎn)化為一個優(yōu)劣問題。
有些人很機(jī)智，這個時候肯定會想，既然左邊最容易觸達(dá)信息，右邊最容易觸達(dá)按鈕操作，那左邊放置內(nèi)容，右側(cè)放置操作不就完美解決了嗎？哎呀，讀者真聰明。
由于 F 閱讀的邏輯，將展示性質(zhì)的「內(nèi)容」放置于左側(cè)，使用戶更快觸達(dá)關(guān)鍵信息，由于費茨定律，以及多年來養(yǎng)成的用戶習(xí)慣（操作組件在右側(cè)，當(dāng)然現(xiàn)在很多放在中間的情況）將需要執(zhí)行的操作置于右側(cè)，使用戶快速交互并完成任務(wù)。有一定道理，甚至在實際落地產(chǎn)品中我們也能看到一些類似的設(shè)計，例如豆瓣。 這是一種左與右的妥協(xié)
但需要注意的是，豆瓣產(chǎn)品的右側(cè)放置的是較為復(fù)雜的交互模塊，例如完整的登錄注冊模塊。在該場景下，用戶在交互路徑更短的右側(cè)區(qū)域執(zhí)行交互效率要明顯高于左側(cè)區(qū)域。
那么下面開始論述按鈕置于左側(cè)的觀點
論點一：排版的限制
豆瓣的形式對于落地頁產(chǎn)品，可能并不適用。主要有兩方面原因。我們都知道，產(chǎn)品落地頁首屏的組成為體驗文案，主 CTA，插畫配圖三部分。常規(guī)做法是插畫作為一組信息置于一側(cè)，文案加按鈕作為一組信息置于一側(cè)。因為，體驗文案與按鈕具有強關(guān)聯(lián)性，同時按鈕與文案作為一組信息，才能與另一側(cè)的插畫搭配構(gòu)建平衡的布局，呈現(xiàn)比較優(yōu)美的視覺效果。
請登錄后查看原圖，因此，豆瓣那種妥協(xié)方式并不適用于商業(yè)類落地頁。因為內(nèi)容和操作本身是一體的，這源于排版的規(guī)整性的限制，按鈕和文案只能同時存在于一側(cè)，如果刻意去追求左側(cè)內(nèi)容，右側(cè)操作，效果就像下面這樣。一方面，只靠文案和按鈕無法撐起左右兩個區(qū)域，一方面文案和按鈕被割裂開，用戶的視線由文案轉(zhuǎn)到按鈕的路徑過長，體驗較差。（文案與按鈕成組后，用戶可以在閱讀內(nèi)容產(chǎn)生動機(jī)后立即觸達(dá)交互按鈕并完成轉(zhuǎn)化）
論點二：文案與配圖孰輕孰重
如果你親自體驗這兩種區(qū)別的落地頁（左圖右文/左文右圖），你會發(fā)現(xiàn)有一個共同點，就是在某個區(qū)域的停留時長，沒錯就是內(nèi)容區(qū)域。以下圖的頂部卡片區(qū)域為例，在閱讀時我的瀏覽情況是，大致地掃視左側(cè)的插畫，然后注視右側(cè)文字區(qū)，了解文章的具體內(nèi)容，并在此區(qū)域停留較長時間，畢竟仔細(xì)閱讀需要花費時間。
這就涉及到一個問題，插畫與內(nèi)容哪個更重要？其實答案很明顯，我們只需要舍棄掉其中一項來測試下，看看哪個內(nèi)容的缺失會對用戶理解設(shè)計傳達(dá)的語義產(chǎn)生較大影響。OK，我覺得沒必要測試了（虛晃一槍）。很明顯，刪除插畫后，我們?nèi)匀豢梢酝ㄟ^文章的標(biāo)題來獲知文章概要等關(guān)鍵信息，就像落地頁首屏的體驗文案，即便沒有插畫我們也能通過首頁文案來獲知這個產(chǎn)品是什么，能夠為我?guī)硎裁础?/p>
然而如果去掉關(guān)鍵信息，去掉標(biāo)題與按鈕，僅憑插畫我們無法分辨當(dāng)前頁面到底在講述什么東西。設(shè)計本身就像是人與人的交流，產(chǎn)品就是我們，而用戶則是我們的交流對象，去掉核心的文案，相當(dāng)于把我們自己變成了啞巴，而去掉插畫，最多相當(dāng)于我們交流時面無表情罷了。
因此，在商業(yè)落地頁中，我們以轉(zhuǎn)化為核心目標(biāo)，而能夠更快地觸達(dá)最重要的信息顯然是明智之舉，因此我們希望將核心的文案內(nèi)容置于左側(cè)。
（另外，一圖勝千言的原理只適用于個別場景，例如數(shù)據(jù)可視化。設(shè)計人員通過將數(shù)值數(shù)據(jù)轉(zhuǎn)化為易于理解的柱狀圖扇形圖，來傳達(dá)數(shù)據(jù)結(jié)論。而視覺修飾性質(zhì)的插畫則無法做到準(zhǔn)確表意，我們通常在產(chǎn)品設(shè)計中見到的插畫更多的是在情感上和審美上給予我們一定的愉悅，但想要準(zhǔn)確描述關(guān)鍵信息，還是需要文字作為核心角色）
論點三：用戶會因為便于操作而產(chǎn)生動機(jī)？
另一點同樣值得我們思考，即用戶真的會因為某個按鈕更容易點擊而被轉(zhuǎn)化嗎？或者我們換個形式問，假設(shè)你是一名男性，你會因為按鈕在鼠標(biāo)附近而選擇點擊購買女士內(nèi)衣嗎？你會在自己財務(wù)狀況較差的時候因為按鈕在鼠標(biāo)附近而點擊購買奢侈品嗎？在大多數(shù)理性場景下，我相信你不會這樣做。
所以這時候要引入福格模型，用來闡述產(chǎn)生轉(zhuǎn)化的整個路徑。福格模型簡單來講就是一個公式：B=MAT。B(behavior) 代表行為，M(motivation) 代表動機(jī)也就是用戶需求，A(ability) 代表用戶使用的門檻，T(trigger) 代表觸發(fā)。也就是用戶行為的產(chǎn)生需要用戶需求為基礎(chǔ)，需要保證產(chǎn)品的易用性，但是這還不夠，在這個基礎(chǔ)上我們還需要在產(chǎn)品中通過設(shè)計觸發(fā)用戶。完成轉(zhuǎn)化的三個關(guān)鍵要素是，動機(jī)、能力、觸發(fā)，缺一不可。
福格模型幫助我們解決了這個疑問。用戶的購買或者轉(zhuǎn)化始于動機(jī)，就像我上面舉的例子，如果一個用戶根本對產(chǎn)品沒有需求（男性對女性內(nèi)衣），那就不會產(chǎn)生動機(jī)，在沒有動機(jī)的情況下，后面兩項內(nèi)容，能力或者觸發(fā)都沒有意義，無法發(fā)揮作用。整個轉(zhuǎn)化的流程可以參考下方的示意圖。
實際上對于那些有強烈動機(jī)購買或使用產(chǎn)品的用戶，你的一切設(shè)計都沒有太大意義，因為用戶有強烈訴求的情況下，他會發(fā)揮主觀能動性去找到轉(zhuǎn)化的入口，主動完成轉(zhuǎn)化。同理，有些用戶是完全不會產(chǎn)生動機(jī)的，不是目標(biāo)用戶群。
設(shè)計策略主要針對的是有動機(jī)但不強烈（某種程度上有需求或者被吸引），以及暫時沒有動機(jī)的兩類用戶。通過我們的首屏及詳細(xì)內(nèi)容，痛點利益點的介紹，來放大用戶動機(jī)，制造共鳴點，創(chuàng)造美好的想象空間，使用戶涌現(xiàn)強烈動機(jī)。然后轉(zhuǎn)化就自然而然的產(chǎn)生。
因此，在首屏我們的核心要義是通過內(nèi)容設(shè)計來觸發(fā)用戶動機(jī)，而不是想方設(shè)法觸發(fā)操作。走捷徑的誤觸方案設(shè)計能保證百分百的觸發(fā)率，但那種觸發(fā)沒有任何意義。到這里我們應(yīng)該明確了，用戶會因為好的內(nèi)容所觸發(fā)的動機(jī)而買單，但不會因為你把按鈕放在我手邊而產(chǎn)生購買沖動。
因此，我的結(jié)論是，用戶更有可能因為左側(cè)展示的強洞察力的文案而產(chǎn)生動機(jī)，而動機(jī)是整個轉(zhuǎn)化的起始，也是最關(guān)鍵的一點，有了動機(jī)，觸發(fā)（按鈕位置）的效率即便低一點，但轉(zhuǎn)化仍然很有可能繼續(xù)（就像動機(jī)產(chǎn)生了慣性，有了強烈的動機(jī)會自發(fā)地去尋找觸發(fā)器，去尋找按鈕以自主完成轉(zhuǎn)化，但觸發(fā)器不會有慣性）
這個觀點論述下來，主要涉及到 F 閱讀模型，費茨定律以及福格模型，算是很基本的設(shè)計原則，也順便幫大家重溫一下。最后，我們再拿一些其他實證來進(jìn)一步論述，例如國內(nèi)一線公司的落地頁設(shè)計。
1. 一線公司落地頁布局
2. 全球獨角獸企業(yè)落地頁
OK，本文到此結(jié)束，上面的只是個人分析，最終結(jié)論實際上應(yīng)當(dāng)依照實際測試結(jié)果來評估
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。