首頁 找知識 用戶體驗. Call to Action 按鈕的最佳實踐與技巧

Call to Action 按鈕的最佳實踐與技巧

Call to Action 按鈕是我們在優化轉換管道時最重要的因素之一。設計高轉換的 Call to Action 按鈕需要好好規劃。本文涵蓋了 Call to Action 按鈕的重要因素,檢驗不同到達頁面和他們的 Call to Action 按鈕,從而進一步學習透過如何優化這個按鈕以提高網站、郵件和部落格的轉換。

Call to Action 按鈕

Call to Action,CTA按鈕,轉換率

Call to Action 按鈕就是那個促使訪客採取特定行為的因素,經常以一個按鈕或者連結形式出現。一個 Call to Action 按鈕可以包含任何形式,從一個設法讓人們去註冊某個服務的“訂閱“按鈕,到讓人們完成購買或者服務支付的“購買”按鈕都有可能。關於 Call to Action 按鈕這裡有3個要素需要你注意:

1、 注意力

2、 訊息

3、 策略

這3個要素對於 Call to Action 的轉換率有著重大的影響並且能夠透過優化產生完全不同的效果

注意力

你需要完成的首要任務就是 Call to Action 按鈕吸引注意力,從而帶來有效的較高轉換。一個 Call to Action 按鈕必須突出而且是訪客轉向的第一自然位置。透過確保你的 Call to Action 按鈕吸引注意力,你可以確保更多的訪客點擊它。也就是說,你不是簡單的透過一個巨大的按鈕去誇大蒙蔽訪客,這裡有很多除了尺寸之外額外的方式能夠讓你抓住訪客的注意力。

尺寸

相比其他頁面上你想要確保你的 CTA 按鈕突出的因素,尺寸當然重要。在到達頁面上一個 Call to Action 的尺寸將表明它很重要,因此需要確保它比任何其他按鈕或者連結都要大。這個小竅門不僅適用於到達頁,同樣適用於結帳步驟,Call to Action 按鈕必須盡可能的比其他連結或者按鈕明顯,所有其他干擾的因素都應該被移除。

顏色

按鈕的顏色對於它的轉換有著巨大的影響。除了心理學上顏色對於購買行為的影響,顏色同時能夠使你的 Call to Action 按鈕更加突出和明顯。在你的到達頁面上 Call to Action 相關因素上利用高對比顏色,把 Call to Action 在一個能夠突顯按鈕而不是淹沒它的背景上。

例如下圖,關於慈善:圖中的水有個很好的用了高對比按鈕的顏色的到達頁—綠色背景上的藍色,並且利用一個小女孩的形象來吸引觀眾注意力。這個特別形象非常的有意思,在這類到達頁上測試不同的情感觸發將是很有意思的一件事情。

Call to Action,CTA按鈕,轉換率

影像

到達頁的影像在 CTA 吸引力中佔據最大的部分。除了確保影像沒有奪走按鈕上所有的注意力外,這個影像對於用戶而言會有很大的指示和幫助作用。人類的大腦處理影像的速度是文字的 60000倍,這意味著在到達頁面的影像在指引人們正確方向上是一個重要的角色。要確保所有的元素和影像都是對 Call to Action 按鈕的補充,甚至指向這個按鈕。

這個到達頁有3個重要的強調 Call to Action 的元素:

1. 按鈕的尺寸—確保 CTA 在頁面上是佔絕對優勢的

2. 影像清晰的指向 CTA

3. 按鈕顏色是突出並且顯而易見的

Call to Action,CTA按鈕,轉換率

影像不一定必須指向影像,但是它們應該以不同的方式彼此聯繫--影像需要作為一個指示器決定決定訪客瀏覽和移動到哪裡去利用它。用一個凝視著按鈕方向的人的形象(見上圖)或者其他匯集在按鈕旁邊的到達頁元素(見下圖),這個 Incredimail 的例子展示裡如何利用不同的環繞按鈕元素去吸引注意力:

Call to Action,CTA按鈕,轉換率

另一個 Cheezburger 的不錯的案例:

Call to Action,CTA按鈕,轉換率

留白

用留白來構造 CTA 按鈕是一個從頁面上其他元素中分離出按鈕的非常棒的方式。留白賦予 call to action 按鈕一個比較顯性的存在感。基本上通過在按鈕旁允許足夠的留白(空白)可以使按鈕在頁面上更具統治地位。

切記:不要留太大的空白出來以至於創造一種與整體頁面沒有關聯的錯覺。

位置

記錄在案的最古老的準則:把 CTA 放在上半版版面。“上半版版面”區域是指訪客不需要滾動滑鼠就能看到的到達頁的部分。這個區域是你放置你所有重要元素—比如 CTA 按鈕的地方。大部分訪客都不會滾動螢幕,並且由於你只有有限的時間將訪客轉換為顧客,你必須把 CTA 放在一眼就能立即看到的地方。

 

下圖中 Microsoft 把 call to action 按鈕放在了頁面下面,使得訪客滾動到下面後完成轉換(如果他們確實在尋找 CTA),就不是一個很好的主意。

Call to Action,CTA按鈕,轉換率
Call to Action,CTA按鈕,轉換率

訊息

當你開始設計 Call to action 時,文字和訊息對於轉換率有重大的影響。如果 call to action 按鈕只是說“提交”或者“繼續”對於獲得轉換及對訪客增加價值是完全不夠的。這裡有針對按鈕的訊息和文字的三個原則:

1. 簡短直接

2. 行為導向

3. 清楚易懂

 

在 call to action 按鈕中傳達一種緊迫感和價值,確保文字突出,對訪客有價值並且告訴他們如何去做。ROON 有個很讚的 Call to action 按鈕,無論是從對比色(它按照需要提供了全部的注意力)還是行為導向方面。另外一個紅利是他們在 CTA 下面添加了支持性文字,提供了需求轉換的額外價值。

Call to Action,CTA按鈕,轉換率

Call to Action 最佳實踐

在我們繼續第三個也是最後一個 Call to Action(戰略)元素之前,先來檢查下這些不同的我們能從中學到很多的 Call to action 按鈕:Avocode 的 call to action 按鈕以非常棒的方式為了他們的 Beta 版發布收集郵件和 leads。

其中不乏好的點子:

1. 只有一個可以填寫的地方

2. 按鈕與背景顏色形成鮮明的對比

3. CTA 旁邊的大幅留白

4. 表達冷靜和信任感的藍色的利用

Call to Action,CTA按鈕,轉換率

Gengo 的 Call to action 偉大之處在於:

1. 高度行為導向引導訪客立刻開始行動

2. 按鈕本身足夠大去吸引注意力

3. 表達了信任與授權的顏色和頁尾的顏色一致

Call to Action,CTA按鈕,轉換率

另一個非常棒的 Whistle 的案例:

1. 圖中的狗指向了 Call to Action

2. Call to action 按鈕與到達頁形成鮮明對比

我希望改變的一個地方:影片按鈕從 CTA 這裡吸引走了好多注意力,解決辦法之一就是去掉下面的 call to action 的按鈕,將按鈕改成一個連結。

Call to Action,CTA按鈕,轉換率

策略

Call to action 按鈕透過給訪客附加值更為重要的的是對下一步進行明確指引,以此來助力到達頁。整個到達頁應當傳達某一策略和情感觸發。到達頁上有一個好的 Call to action 但是沒有策略是不夠的。

記住你只有2.8秒的時間將訪客轉換到管道中,之後40%的訪客都會丟失的。確保你的到達頁和 Call to action 給訪客提供了實際價值,幫助他們更加輕鬆的在你的網站上瀏覽。

Call to action 是到你的轉換管道的一個通道。以一定的方式建立和設計它們打開了一道邀請人們轉換的大門。

本文由dcplus數位行銷實戰家編輯
原文出處:dcplus 合作夥伴 WAWChina
【原文】Call to Action 按鈕的最佳實踐與技巧

作者介紹
作者:Talia Wolf,Conversioner的創始人和CEO
譯者:李曉艷,多年一直在大型電商、旅遊預訂網站負責SEM策劃和管理、網絡營銷和網站分析。

關於 WAWChina

WAWChina
網站分析星期三(Web Analytics Wednesday) 是一個頂尖的互聯網交流和分享的NGO平臺, 同時也是國內最大的系統介紹網站分析以及互聯網行銷分析和優化的專業網站。WAW創辦人宋星是百度廣告產品部首席顧問;WAW共同創辦人顧青是E-Bizcamp.com創辦人暨執行長。

大家都在看

新聞媒體界的話題高手!東森新聞是如何用貼文吸引粉絲的?

新聞媒體界的話題高手!東森新聞是如何用貼文吸引粉絲的?

隨著網際網路快速改變媒體經營型態,時刻更新的網路媒體加上跨越地域限制的新聞平台,使貼文更有機會瞬間因轉貼傳遍全世界。看看七大超過兩百萬粉絲數的新聞粉絲團分析這些新聞社群,是否能完全掌握粉絲!

還想知道更多數位新知?快來訂閱 dcplus 關鍵分享報

您希望收到哪些資訊呢?