每一個(gè)CTA都為轉(zhuǎn)換提供了一個(gè)機(jī)會(huì)。

為什么你的轉(zhuǎn)化總是上不去？

明明已經(jīng)設(shè)計(jì)了賞心悅目的頁面，文案編輯也算得上是嘔心瀝血了，連優(yōu)惠力度也是前所未有——
但為什么就是沒有令人滿意的轉(zhuǎn)化？！生氣！掀桌！哇！

你想過沒有，你的CTA，夠格兒嗎？

行為召喚（CTA，Call to Action）是你從轉(zhuǎn)化漏斗的一個(gè)階段進(jìn)入到下一階段的門戶，并同其他因素一起在漏斗的最后階段完成利益轉(zhuǎn)化。

這意味著，任何一個(gè)階段的CTA出了問題都將放大為整個(gè)轉(zhuǎn)化流程的問題。對你的業(yè)務(wù)來說，被正確設(shè)計(jì)的行為召喚是非常重要的。

一個(gè)理想的CTA的樣子：

• 應(yīng)該容易發(fā)現(xiàn)。
• CTA文本應(yīng)該被視為一個(gè)簡單而又可操作的短語。
• 采取這一行動(dòng)的目標(biāo)應(yīng)該足夠誘人。

你做得對嗎？數(shù)據(jù)驅(qū)動(dòng)的分析表明，你有很大的概率把它搞砸，70%的小型企業(yè)網(wǎng)站上沒有CTA。

你的文案和圖片是為了讓用戶清楚地了解情況。如果用戶無法理解它，那么您的CTA（期望用戶進(jìn)行的操作）將會(huì)變得無效。

以下是七個(gè)阻礙你在落地頁上布設(shè)行為召喚的常見陷阱：

1、視線盲區(qū)致使用戶錯(cuò)過CTA

?“一個(gè)理想的CTA能夠‘懂’用戶并且能被用戶點(diǎn)擊”

想想看。如果用戶沒有看到CTA，他點(diǎn)擊它的可能性有多大?

不是很樂觀。

因?yàn)檎Ｑ垡嗷虼掖乙黄扯鲆暷切┰趫D像和文字的干擾下不顯眼的按鈕、或是設(shè)計(jì)的太小個(gè)兒的按鈕是導(dǎo)致按鈕盲區(qū)的原因。沒有人有時(shí)間（沒那個(gè)閑情逸致趴在網(wǎng)頁上）找按鈕去點(diǎn)擊。

你應(yīng)該把按鈕放在哪里?

早些時(shí)候，最好的做法建議把它放在頂上，在頭版上。

這里有個(gè)小問題需要注意。如果那些能幫助用戶下決心的關(guān)鍵信息都不在頭版里，那么在頭版放置一個(gè)行為召喚按鈕將不會(huì)有任何幫助。當(dāng)用戶從上向下滾動(dòng)瀏覽時(shí)，你的CTA就這樣離開了他的視線。哦，眼不見，心不煩。

費(fèi)茨定律：快速移動(dòng)到目標(biāo)區(qū)域所需的時(shí)間是距離目標(biāo)與目標(biāo)寬度之間比值的函數(shù)。

依仗追蹤用戶運(yùn)動(dòng)和人體工程學(xué)的科學(xué)定律，你可以決定你應(yīng)該在哪里設(shè)置按鈕和寬度，在此不贅述。

它應(yīng)該是什么顏色的呢?

綠色會(huì)更吸引人嗎？藍(lán)色看起來會(huì)更好嗎？紅色是不是無法讓人產(chǎn)生足夠的信任感？

有很多可供選擇的顏色。自問一些關(guān)于按鈕顏色的問題：其中一個(gè)是按鈕在背景上的可見性（突不突出）。雖然一個(gè)“橙色的大按鈕”對很多人來說都很有效，但它并不是“一種適應(yīng)所有情況的解決方案”。

隨著在網(wǎng)頁上配置透明的幽靈圖標(biāo)成為一種新興的趨勢，在顏色方面的爭論已經(jīng)顯得不那么重要了。前提是如果這CTA很容易發(fā)現(xiàn)，那么得到點(diǎn)擊的機(jī)會(huì)就很大。

但要確保一個(gè)基礎(chǔ)：無論按鈕有沒有顏色，都應(yīng)該是突出的、便于區(qū)分的。

2、語義模糊的文字，或者根本沒有文字

盡管我們已經(jīng)本能地意識到遙控器上的紅色電源按鈕，大多數(shù)的這類設(shè)備仍在按鈕下保有一個(gè)電源符號或?qū)懼皃wr（電源控制）”的文字。這類標(biāo)簽為我們省去了反復(fù)猜測的麻煩。

大多數(shù)CTA按鈕都是由文本來表意的，但別敷衍了事。無論是這些文字講述的是明確的目標(biāo)、一個(gè)聲明還是產(chǎn)生顯而易見的結(jié)果，都應(yīng)該清晰的表述出來。也可以在按鈕文本之前，明確會(huì)生成的結(jié)果事件。

比如亞馬遜是這么做的：

按鈕文本必須是清楚明白（不動(dòng)腦子都能看懂）的。例如:

• 創(chuàng)建一個(gè)帳戶。
• 獲取免費(fèi)試用。
• 添加為聯(lián)系人。

3、在一個(gè)頁面中加入過多的CTA

“別因兩個(gè)CTA之間爆發(fā)的沖突而損失你的轉(zhuǎn)化”

不要讓用戶面臨在兩個(gè)主要的CTA按鈕之間做選擇的境況，這種情況下只要給他們一個(gè)鏈接到另一選擇的頁面就好了。第二個(gè)CTA就應(yīng)當(dāng)像一個(gè)文本鏈接，別讓它與主要的CTA產(chǎn)生競爭，以免分散用戶注意力。

一個(gè)經(jīng)典的飯粒呸范例就是登錄按鈕下的注冊鏈接：

假設(shè)你經(jīng)營一個(gè)SaaS業(yè)務(wù)，并在同一個(gè)落地頁上同時(shí)提供了付費(fèi)服務(wù)和免費(fèi)試用。你認(rèn)為哪類用戶會(huì)有更高的占比？是免費(fèi)的還是付費(fèi)的？

雖然中小型企業(yè)用戶更有可能點(diǎn)擊免費(fèi)使用，但資金充裕的客戶可能想要直接使用付費(fèi)功能。在一個(gè)落地頁上配置太多的信息來同時(shí)迎合幾類受眾，這反而有可能導(dǎo)致用戶猶豫不決而錯(cuò)失商機(jī)。

來看一個(gè)提供雙CTA和只有單獨(dú)CTA的栗子：

圖片文字翻譯：Scanitto從他們PDF軟件的落地頁上移除了“立刻購買”按鈕后發(fā)現(xiàn)免費(fèi)試用的下載提升了29.75%

為什么取消“立刻購買”反而幫助他們賣出更多？Dan Ariely在他的博客中有記載，太多的選擇會(huì)阻止人們做出決定，這解釋了可能的原因。

不要讓客戶因選擇CTA而感到困惑。要清楚你想從頁面中獲得的核心什么，因此不要?jiǎng)?chuàng)建太多的選擇，有時(shí)用戶可能會(huì)選擇離開。

4、劣質(zhì)的文案-錯(cuò)失的行為召喚

做銷售不僅僅是在提供很大的折扣，而且是向顧客展示他們需要從你那里購買的原因。通過使用“行為召喚”周圍的內(nèi)容可以提高的情感和理性方面的吸引力，使你的“召喚”更有成效。

文案錯(cuò)誤，可能就像使用錯(cuò)誤的字體，過多的形容詞，甚至是文本的可見性一樣簡單。如果用戶不能閱讀，頁面就沒有用。它們會(huì)離開這個(gè)頁面，甚至是在看到CTA之前，你也會(huì)因此失去商機(jī)。

注意用戶的問題（情感訴求），以及你要如何解決它（理性訴求）。當(dāng)你說出與他們相關(guān)的問題并給出一個(gè)解決方案時(shí)，你將很容易獲得他們的尊重。這就確定了了Cialdini教授六個(gè)說服力原則（互惠、一致性/承諾、權(quán)威、社會(huì)證明/從眾、喜愛、稀缺）中的喜愛和權(quán)威原則。一旦確定了這兩個(gè)原則，再請他們點(diǎn)擊CTA按鈕，就容易得到更好的結(jié)果了。

同樣，對于電子郵件，圖像和圖標(biāo)，也可以激發(fā)好奇心和提高轉(zhuǎn)換效果。加上一句“你想知道更多嗎?”然后，通過一個(gè)鏈接或一個(gè)按鈕，將用戶帶到一個(gè)頁面，該頁面可以準(zhǔn)確地傳遞郵件中所承諾的內(nèi)容。

有一些特定的單詞可以觸發(fā)用戶的良好響應(yīng)，收集他們。你要找的是能迅速引起情感共鳴的詞語。（百度一下你就知道）

有時(shí)更改CTA的文案以更好地適應(yīng)您的用戶可以起到扭轉(zhuǎn)局面的強(qiáng)大作用，就像它對ADT（見下圖）所做的那樣。僅僅更換為更貼合用戶的文案，使得他們的轉(zhuǎn)化增加了60%。小改變，大不同。

5、不恰當(dāng)?shù)膱D像

大量的研究將告訴你，添加相關(guān)的圖片會(huì)使轉(zhuǎn)換的百分比有所增加。確實(shí)如此，但是注意：你應(yīng)該知道把握這個(gè)度。雜亂的圖像反而會(huì)分散用戶的注意力。用戶可能會(huì)駐足瀏覽這些圖像，一旦他們不能發(fā)現(xiàn)相關(guān)信息，他們很可能會(huì)在沒注意到CTA的情況下就離開網(wǎng)頁。就像下面的這個(gè)例子:

為了更好地理解您應(yīng)該使用什么樣的圖像，請先理解為什么需要使用它們。

圖像可以激發(fā)好奇心，吸引用戶甚至可以產(chǎn)生信任感。但不要讓他們（這些圖像）妨礙了你的意圖，也就是你的CTA。

相關(guān)帖子:不是所有的圖片都是平等的。這是一個(gè)關(guān)于股票圖像和真實(shí)照片的案例研究。

舉個(gè)栗子，我們VWO（本文的出處）自身經(jīng)歷過的實(shí)例：

其中一些用戶發(fā)現(xiàn)這張照片太令人毛骨悚然了，無法繼續(xù)閱讀。而這封電子郵件的真正意圖，那個(gè)CTA，是跟在這個(gè)圖片的后面的，因此受到驚嚇的用戶甚至沒看到那個(gè)CTA。當(dāng)然，我們（VWO）最后道歉了！得到的教訓(xùn)是：圖像應(yīng)該是來幫助提高轉(zhuǎn)換的，而不是來阻止它們的。

6、背景色喧賓奪主

CTA沒有被注意到的另一個(gè)原因可能是因?yàn)楸尘邦伾钊穗y忘。

解決方法是應(yīng)用對比色。

對比是設(shè)計(jì)的原則之一。我們的眼睛傾向于接受對比色。像背景、文本和圖形等頁面元素若要在屏幕上清晰成像，就需要形成對比 。在web頁面中使用空白和易于區(qū)分的顏色可以提高可視性和可讀性。

正如設(shè)計(jì)行業(yè)進(jìn)行平面設(shè)計(jì)的核心是內(nèi)容能否被清晰表達(dá)，留白的空間和強(qiáng)烈的顏色對比是這種方法不可或缺的一部分。如下面的示例所示。

保持排版干凈，嘗試創(chuàng)建一個(gè)調(diào)色板，協(xié)調(diào)文本、按鈕和背景，以突出彼此的差別。請參閱下面的這個(gè)頁面。為了從有如霓虹燈般的綠色背景下看到同樣是綠色的文本，你的瞳孔甚至?xí)诓粩嗟氖湛s擴(kuò)大中感到不適。來訪者甚至可能不知道那里是否有一個(gè)按鈕，CTA在相近的色塊中幾近消失。

別這么做。不但損害用戶的眼睛，還損失你的轉(zhuǎn)化。

7、本應(yīng)有CTA的地方卻找不到按鈕

是的，我們在提醒你注意“房間里的大象”，因?yàn)槟愫苡锌赡苠e(cuò)過了它。這已經(jīng)不是一個(gè)CTA陷阱了，這是一個(gè)徹頭徹尾的錯(cuò)誤。

你給網(wǎng)站設(shè)計(jì)的的每一頁難道不都應(yīng)有目的嗎?

如果是，則添加一個(gè)CTA以實(shí)現(xiàn)它。

如果可以，每個(gè)頁面都應(yīng)該被用來轉(zhuǎn)換，即使它只是一個(gè)在結(jié)賬結(jié)束時(shí)的感謝頁面。一位經(jīng)驗(yàn)豐富的推銷員知道，當(dāng)用戶走出家門時(shí)，如何用一個(gè)漂亮的收尾工作讓他們走回去。

在你的感謝頁面上，你可以使用“繼續(xù)和我們一起購物”之類的原因來給出CTA。你可能覺得你不需要在那里配置CTA，但你應(yīng)當(dāng)在那個(gè)頁面上有一個(gè)CTA。

回到文章開始的地方：還記得我說過，70%的小企業(yè)并不在意他們的主頁上是否有一個(gè)CTA嗎?

一旦你處理了主頁上的文案和網(wǎng)頁設(shè)計(jì)之類的問題，就該看看你的CTA了。

在主頁上放置一個(gè)容易被發(fā)現(xiàn)的CTA，并以此為基礎(chǔ)讓用戶進(jìn)一步探索網(wǎng)頁細(xì)節(jié)是一個(gè)非常好的主意。Susty-Party嘗試了這個(gè)改變，然后如魔法一般提高了250%的轉(zhuǎn)化（真的這么可怕嗎）

如何避免這些錯(cuò)誤?

每一個(gè)CTA都為轉(zhuǎn)換提供了一個(gè)機(jī)會(huì)。上文指出的最常見的錯(cuò)誤可以被輕松規(guī)避，只要你在頁面設(shè)計(jì)上花更多的精力來研究用戶行為。我們知道這項(xiàng)任務(wù)并不像看上去的那么簡單。對此，我們建議是：當(dāng)有疑問時(shí)（比如對是否在首頁添加CTA搖擺不定，對落地頁的幾種對比色配置難以抉擇），使用A / B測試來驗(yàn)證你的假設(shè)。

Tips：

A/B測試是一種用數(shù)據(jù)進(jìn)行產(chǎn)品決策的方法。它用于比較網(wǎng)頁或應(yīng)用程序的兩個(gè)或多個(gè)版本，以確定哪一個(gè)版本更好。當(dāng)你面前有同一個(gè)頁面的多個(gè)設(shè)計(jì)方案、卻又不好確定該選擇哪一個(gè)效果最好的時(shí)候，就讓A/B測試來幫你吧（朋友，你聽說過“云測數(shù)據(jù)”這個(gè)玩A/B測試的公眾號嗎）

A/B測試本質(zhì)上是一個(gè)控制變量的實(shí)驗(yàn)機(jī)制，其向部分用戶隨機(jī)顯示待測試頁面的某一個(gè)版本，然后統(tǒng)計(jì)分析用戶數(shù)據(jù)，進(jìn)而確定哪個(gè)版本對于設(shè)定的轉(zhuǎn)化目標(biāo)有更好的表現(xiàn)。

原標(biāo)題：《7 Common Pitfalls of Call to Action Design》

來源：Visual Website Optimizer

作者： Aditi Gupta

譯者：一顆糯米，Testin數(shù)據(jù)運(yùn)營事業(yè)部的一小只，公眾號：云測數(shù)據(jù)（testindata）

本文由 @?一顆糯米 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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