網(wǎng)站設(shè)計(jì)

Website development

網(wǎng)頁按鈕設(shè)計(jì)優(yōu)化指南（CTA按鈕指南一）

發(fā)布時(shí)間：2019-04-08 07:54:23 作者：曹責(zé) 來源：云智互聯(lián)

TAGS：產(chǎn)品設(shè)計(jì),體驗(yàn)設(shè)計(jì)

設(shè)計(jì)師、產(chǎn)品經(jīng)理是否知道只要更改網(wǎng)頁中按鈕的顏色可以將網(wǎng)站的轉(zhuǎn)化率提高35％？是否值得在折疊線上方或頁面底部放置一個(gè)按鈕？如何更改按鈕上的文字以將效率提高68％？

在這里云智引入一個(gè)概念：CTA（Call-To-Action）具有吸引力的按鈕。

云智收集了10多個(gè)有趣的案例研究，并準(zhǔn)備了一個(gè)完整的指南，說明CTA按鈕應(yīng)如何發(fā)揮作用以提高您網(wǎng)站的轉(zhuǎn)換率。我們將分析CTA按鈕是什么，并展示如何將它們正確放置在您的網(wǎng)站上，插入必要的文本并選擇有效的設(shè)計(jì)。

首先讓我們從理論開始。

什么是具有吸引力的按鈕以及關(guān)于它的四個(gè)重要事項(xiàng)？

號(hào)召性用語（CTA）按鈕是網(wǎng)站的圖形元素，提示用戶執(zhí)行某種有針對(duì)性的操作。示例包括注冊(cè)，訂閱時(shí)事通訊，購買，下載，上傳文件等。

有幾種類型的CTA按鈕：

一個(gè)帶有文本的交互式按鈕，告訴您點(diǎn)擊后會(huì)發(fā)生什么：“下載一本書”; “獲得折扣”。
用于將訪問者發(fā)送到其他頁面的按鈕，例如，有關(guān)產(chǎn)品的詳細(xì)信息：“了解詳情”。
按鈕作為潛在客戶表單的一部分。它有助于使數(shù)據(jù)傳輸過程符合邏輯結(jié)論：“發(fā)送”，“訂閱”。用戶在填寫表單中的所有字段后單擊它們。

為您的網(wǎng)站選擇CTA按鈕時(shí)，您需要至少考慮以下四個(gè)要點(diǎn)：

按鈕的位置;
選擇什么樣的設(shè)計(jì);
在按鈕上以及在它上面和下面寫什么;
在頁面上使用CTA按鈕的頻率。

我們將在本文中進(jìn)一步回答所有這些問題，以幫助您為您的網(wǎng)站創(chuàng)建有效的CTA按鈕。

我應(yīng)該在哪里放置CTA按鈕以大化效率？

這就是問題所在：當(dāng)用戶不熟悉您的提案時(shí)，您應(yīng)該在哪里放置主CTA按鈕 - 折疊線上方或底部，作為網(wǎng)頁的邏輯結(jié)尾？

什么時(shí)候應(yīng)該將CTA放在折線上方？

此解決方案似乎有風(fēng)險(xiǎn)，因?yàn)槟罂蛻舳嗽谒鼈兊竭_(dá)后立即單擊按鈕。然而，如果符合以下情況，這種方法是合理的

你有一個(gè)“熱門”的領(lǐng)導(dǎo)者，他已經(jīng)了解你的產(chǎn)品并在其他地方了解了它。例如，您要將用戶從您的訂閱者群引導(dǎo)到目標(biāo)網(wǎng)頁以提供產(chǎn)品折扣。
如果第一個(gè)屏幕被設(shè)計(jì)為登錄頁面的迷你版本，那么您將獲得“溫暖”的領(lǐng)先優(yōu)勢(shì)。

將CTA置于折線之上的六條規(guī)則

吸引客戶注意的短標(biāo)題;
一個(gè)輔助標(biāo)題，解釋了您提案的重點(diǎn);
清晰傳達(dá)您提案的照片或視頻;
對(duì)福利的審查;
社會(huì)證據(jù)和觸發(fā)器;
“Call to Action”按鈕描述客戶端將收到的內(nèi)容。

這是來自Unbounce的公式，用于在第一頁傳播上有效操作CTA。

第一個(gè)網(wǎng)頁屏幕的結(jié)構(gòu)，用于有效的號(hào)召性用語按鈕

如何在網(wǎng)頁底部放置CTA可以提高轉(zhuǎn)化率？

當(dāng)您需要激發(fā)信心并為用戶提供更多信息以做出決策時(shí)，網(wǎng)頁末尾的按鈕會(huì)更好地工作。這些頁面應(yīng)該根據(jù)AIDA模型構(gòu)建：

吸引注意力（標(biāo)題通常是答案），
通過興趣關(guān)注（列出對(duì)客戶的好處），
Arouse Desire（提供誘人的優(yōu)惠），和
行動(dòng)呼吁 ?- 這就是你需要一個(gè)好按鈕的地方。

來自ContentVerve的案例研究證明，CTA在頁面末尾的位置，但不是在開頭，可以將轉(zhuǎn)換率提高304％。該研究的研究任務(wù)是找出哪種方案更有效：CTA高于折線或低于折線。

他們只是將帶有按鈕的表單移動(dòng)到頁面末尾，并將轉(zhuǎn)換率提高了304％。

從上面可以得出一個(gè)合乎邏輯的結(jié)論：

如果客戶已經(jīng)熟悉您的產(chǎn)品或服務(wù)，請(qǐng)將CTA按鈕放在折疊線上方，要求進(jìn)行簡(jiǎn)單，有針對(duì)性的操作，而不需要花費(fèi)太多時(shí)間來決定。
如果您有復(fù)雜的產(chǎn)品或服務(wù)，并且潛在客戶需要消化大量信息以做出決定，請(qǐng)?jiān)谔峁┯嘘P(guān)產(chǎn)品的所有信息以及優(yōu)勢(shì)和信任觸發(fā)器之后放置CTA按鈕。

KISSmetrics創(chuàng)建了一個(gè)圖表，以顯示CTA按鈕的放置方式取決于產(chǎn)品或服務(wù)的復(fù)雜程度：

產(chǎn)品越簡(jiǎn)單，您可以越早放置按鈕。它越難，它應(yīng)該越低。

什么是有效的號(hào)召性用語按鈕設(shè)計(jì)？

要選擇正確的CTA設(shè)計(jì)，請(qǐng)記住以下五個(gè)原則：

1.使按鈕對(duì)比

這里的重點(diǎn)不僅僅是顏色; 該按鈕必須在網(wǎng)頁其他元素的背景下顯而易見。
以下是RIPT Apparel公司的一個(gè)奇怪案例。他們對(duì)CTA按鈕進(jìn)行了A / B測(cè)試，并比較了不顯眼的黑色按鈕和對(duì)比綠色按鈕的效率。

將按鈕的顏色更改為綠色后，網(wǎng)站的轉(zhuǎn)換率增長(zhǎng)了6.3％。

按鈕文本顏色也會(huì)影響轉(zhuǎn)換率。因此，在下一種情況下，用黃色替換黑色文本會(huì)使按鈕效率降低。

通過更改文本顏色，轉(zhuǎn)換率下降了18.01％。

2.按鈕應(yīng)該看起來像一個(gè)按鈕

平坦且不顯眼的按鈕可能被誤認(rèn)為是設(shè)計(jì)元素。當(dāng)您將鼠標(biāo)懸停在按鈕上時(shí)，不要忽略顏色變化或陰影外觀等效果 - 這會(huì)告訴用戶該項(xiàng)目是可點(diǎn)擊的。

另請(qǐng)閱讀：應(yīng)用程序的圖標(biāo)設(shè)計(jì)如何影響應(yīng)用程序下載次數(shù)？

一個(gè)實(shí)際的例子：在一個(gè)網(wǎng)站上，按鈕顏色從藍(lán)色變?yōu)榫G色，角落是圓形的。按鈕變得更亮，與灰色背景形成鮮明對(duì)比。它看起來更像是一個(gè)按鈕。

更改按鈕顏色和形狀后，轉(zhuǎn)換率提高 35.81％

3.紐扣尺寸很重要

不會(huì)注意到太小的按鈕，而太大的按鈕將不會(huì)被識(shí)別為按鈕。在下面的示例中，按鈕大小增加，導(dǎo)致10％的轉(zhuǎn)換率損失。

更大并不總是意味著更好。

這是另一種情況，更改按鈕設(shè)計(jì)會(huì)增加商業(yè)網(wǎng)站的點(diǎn)擊率。

帶有信封圖像的窄棕色按鈕被更亮的橙色和綠色箭頭圖像所取代。它的尺寸也有所增加。結(jié)果，CTR增加了一倍。

4.使用特殊元素吸引注意力

對(duì)比，引人注目的箭頭，如前面的例子，可以為你工作。在下面的例子中，當(dāng)箭頭從按鈕上移開時(shí)，轉(zhuǎn)換率下降了12.29％。

箭頭原來是吸引注意力的元素，使按鈕更加醒目。

5.使用負(fù)空間

借助所謂的負(fù)（空）空間，您可以使按鈕更加醒目。
一個(gè)很好的例子是在Dropbox主頁上。

按鈕在背景下清晰可見，不僅由于對(duì)比色，而且由于周圍有足夠的空白空間。

我應(yīng)該在CTA按鈕之前，之后及之后寫什么？

更改按鈕上的文字會(huì)嚴(yán)重影響轉(zhuǎn)換率。
在以下示例中，我們將兩個(gè)CTA按鈕與不同的文本進(jìn)行了比較。租賃房屋網(wǎng)站的用戶想要獲得有關(guān)設(shè)施的更多信息，必須單擊CTA按鈕以獲取有關(guān)郵件的詳細(xì)信息。測(cè)試了兩個(gè)版本的CTA按鈕文本：“訂單信息”和“獲取信息”。第二個(gè)版本的工作效率提高了38.26％。

在第二個(gè)版本中，按鈕上的文字更好地解釋了點(diǎn)擊后會(huì)發(fā)生什么。

另一個(gè)奇怪的案例涉及用文章替換網(wǎng)站上的按鈕。未注冊(cè)的用戶只能閱讀網(wǎng)站上的部分文章。要閱讀完整的文章，您需要單擊按鈕并注冊(cè)。在實(shí)驗(yàn)過程中，測(cè)試了兩個(gè)按鈕：“立即閱讀全文”和“立即獲取即時(shí)訪問”。

第一個(gè)按鈕的轉(zhuǎn)換率比第二個(gè)按鈕高39.03％。

第一個(gè)按鈕不僅傳達(dá)了價(jià)值，還傳達(dá)了提案的相關(guān)性。這是用戶在閱讀論文時(shí)想要做的事情 - 讀完它。
按鈕上的文字不僅應(yīng)傳達(dá)句子的價(jià)值，還應(yīng)傳達(dá)其相關(guān)性。

以下是更多相關(guān)按鈕文本如何提高轉(zhuǎn)換率的另一個(gè)示例。健身房網(wǎng)站的按鈕文本的兩個(gè)變體進(jìn)行了測(cè)試：“獲得您的會(huì)員資格”和“找到您的健身房并獲得會(huì)員資格”。

第二個(gè)按鈕效果更好68％。

事實(shí)證明，健身房對(duì)其客戶的位置至關(guān)重要，因此這一更相關(guān)的信息提高了轉(zhuǎn)換率。
您在按鈕之前和之后編寫的文本也可以幫助您告訴用戶單擊按鈕后將獲得哪些好處。這樣可以避免在按鈕上放置大量文本，保持其設(shè)計(jì)整潔。

標(biāo)題描述了用戶想要獲得的好處，字幕提供了單擊按鈕時(shí)發(fā)生的事情的解釋，并且CTA按鈕具有單個(gè)清晰的句子。這是理想的公式。

為了吸引人們對(duì)CTA按鈕的注意，您還可以使用其他視覺效果; 例如，從按鈕上方或下方區(qū)域的箭頭指向按鈕本身。

該網(wǎng)頁簡(jiǎn)要列出了該服務(wù)的優(yōu)點(diǎn)。從那里，箭頭將用戶的視圖定向到按鈕。

您可以在按鈕本身上放置幫助信息。有時(shí)，一個(gè)這樣的澄清詞可以使整個(gè)信息更容易理解并提高轉(zhuǎn)換率。

在此示例中，按鈕上的主文本以大字體寫入：“免費(fèi)試用”。細(xì)則指定不需要信用卡。這一舉動(dòng)否定了客戶擔(dān)心花錢購買不熟悉的產(chǎn)品。

如您所見，要獲得更高的轉(zhuǎn)換率，您需要選擇以下按鈕文本：

將向用戶解釋點(diǎn)擊按鈕后會(huì)發(fā)生什么，
將傳達(dá)您的報(bào)價(jià)的價(jià)值，并且
將與用戶的情況相關(guān)。

在這種情況下，您可以將這些消息放在按鈕的上方和下方，還可以使用箭頭和其他效果將用戶的視圖引導(dǎo)到所需的文本。

你應(yīng)該多久插入一次CTA按鈕？

如果你給大多數(shù)人很多選擇，他們根本就無法做出任何選擇。例如，此頁面上豐富的CTA使用戶感到困惑。

在這個(gè)網(wǎng)站上，有很多設(shè)計(jì)元素和按鈕，你迷路了，不知道在哪里點(diǎn)擊。

在網(wǎng)頁上向用戶指定一個(gè)特定路徑，并在終報(bào)價(jià)中指定一個(gè)目標(biāo)操作。如果需要建議事件開發(fā)的幾種變體，請(qǐng)關(guān)注一個(gè)主要的CTA按鈕。其余部分將不太明顯。
例如，Reddit使注冊(cè)按鈕比登錄按鈕更亮。

過渡到舊版本幾乎不可察覺。

在下面的示例中，重點(diǎn)是“創(chuàng)建Wiki”按鈕，但其他兩個(gè)按鈕也引起了用戶的注意。

您為用戶提供的選擇越多，他或她就越不可能。

DrExplain的經(jīng)驗(yàn)表明，屏幕的一個(gè)區(qū)域上不應(yīng)該有幾個(gè)按鈕。刪除其中一個(gè)CTA可將轉(zhuǎn)化率提高26％。

初，他們邀請(qǐng)?jiān)L問者下載并購買自己的產(chǎn)品。

然后，他們邀請(qǐng)用戶免費(fèi)下載。這增加了轉(zhuǎn)換率。

為了不使用CTA過度使用，請(qǐng)遵循以下簡(jiǎn)單公式：一個(gè)屏幕高度，一個(gè)CTA。如果需要放置幾個(gè)CTA按鈕，使主要的一個(gè)對(duì)比度更高，其余的不太明顯; 例如，通過使用鏈接，而不是按鈕。

你的CTA按鈕效果如何？

使用此核對(duì)清單檢查您的網(wǎng)站上的CTA按鈕的有效性：

第一個(gè)屏幕上是否有CTA按鈕？如果是這樣，您是否遵循組織此類屏幕的六條規(guī)則？
頁面上的CTA按鈕是否可見？網(wǎng)頁上是否還有其他元素與之并存，可能會(huì)引起用戶的注意？
按鈕的設(shè)計(jì)是否顯示可點(diǎn)擊？（例如，通過在懸停時(shí)添加顏色，添加陰影等）
CTA是否傳達(dá)了您的提案的價(jià)值？
用戶是否清楚點(diǎn)擊CTA按鈕后會(huì)發(fā)生什么？
CTA的文本是否相關(guān)？
按鈕前面的文字是否與其上的文字一致？
在通往CTA的途中，其他元素會(huì)分散用戶的注意力嗎？
你在網(wǎng)頁上有幾個(gè)不同消息的CTA嗎？主要按鈕是否在其中突出顯示？
您是否使用其他元素來吸引對(duì)按鈕的注意？

如果對(duì)所有10個(gè)問題的答案都是“是”，那么恭喜！如果沒有，你已經(jīng)知道該怎么做了。

我們祝你轉(zhuǎn)化率高！

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,7524,0.html

上一篇：設(shè)計(jì)師經(jīng)常去7個(gè)免費(fèi)ICON圖標(biāo)網(wǎng)站

下一篇：25個(gè)轉(zhuǎn)化率高的網(wǎng)頁按鈕設(shè)計(jì)（CTA按鈕指南二）

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡(jiǎn)單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理