CTA（Call To Action）設計四大要點，提高網站轉換率
「網站 CTA 不夠明顯」、「這邊多加一個 CTA」… 不管是做行銷、設計、還是網站經營，對「CTA」這個詞大都時有所聞。CTA（Call to Action）目的是引導使用者進行下一步行動，進而實現品牌商業目標，舉例來說，當訪客透過 SEO 進來網站後，我們要怎麼留住他們、並一步步引導完成轉換呢？這時就需要 CTA 來擔任引導角色。
這篇文章要和大家分享 CTA 的設計要點，包括怎麼樣的 CTA 才能有效引導使用者、要如何評估 CTA 的成效等等。
這篇文章會由 Harris 先生顧問團隊維護、並且由 Harris 進行監修。
最後編修日期：2024 年 6 月
CTA是什麼
CTA（Call to Action）是一個行銷術語，中文稱作「行動呼籲」或「號召性用語」，是指行銷人員透過呼籲、號召引導使用者作出特定行動。CTA 通常會以按鈕或短句的形式，出現在廣告、傳單、電子報、網站、Landing Page 等等行銷管道，例如「加入購物車、閱讀更多、領取優惠、立即諮詢」都是常見的 CTA。
根據品牌商業目標不同，CTA 會有不同的設計和用詞，不過 CTA 的目的都是「引導使用動線，刺激採取行動」來達到行銷目標。以網站為例，訪客進站後不一定會仔細閱讀網站內容，而是會先快速掃視大標題、按鈕、圖片這種醒目的元素，這時 CTA 便能告訴訪客下一步該做什麼，鼓勵他們繼續瀏覽網站、和網站互動、以及最重要的採取特定行動（購買、聯繫、訂閱），進而提升行銷轉換率。
相反地，如果 CTA 設計不夠清楚，可能會影響到網站的使用體驗、甚至影響到轉換率。我們常遇到客戶反映網站的跳出率高， CTA 設計不夠良好就是常見的可能原因之一。
若要初步的判斷網站 CTA 是否清楚，請設想你是第一次來到某個網站，打開網頁後先快速掃視 CTA 是否夠顯眼、網站瀏覽的動線是順暢嗎？還是你會不知道下一步該看什麼頁面？
CTA設計重點
那麼，CTA 要怎麼設計才好呢？
研究指出按鈕形式的 CTA ，其點擊率比純文字 CTA 要來的好，這是因為人們本能會優先注意畫面中最突出、不一樣的元素，因此 CTA 常會放在「按鈕、pop-up 彈窗、橫幅 Banner」等等特別的 UI 元素中，都是在引起使用者注意並點擊。
雖然只是一個按鈕，但在設計 CTA 時，針對文字、樣式、尺寸、位置等等因素都有不同的設計重點：
| CTA元素 | 設計重點 |
|---|---|
| 樣式 | 使用和背景對比度高、注目性高的顏色，按鈕也可以加入陰影、圓角、Hover 效果 |
| 尺寸 | 尺寸要比內文大，需檢查手機版是否好點擊 |
| 文字 | 使用指示明確的動詞，並強調好處或急迫性 |
| 位置 | CTA 可以多次出現在不同版位，例如 First View、側欄、頁面中間、底部、彈窗等等 |
▍CTA樣式
要讓 CTA 快速抓住使用者眼球，「樣式」是最關鍵的因素。
CTA 顏色要和網頁背景做出對比，才能讓 CTA 在畫面中跳脫出來，例如網頁為淺色背景，CTA 適合用深色按鈕搭配白色文字；而深色背景的網頁則適合淺色按鈕搭配黑色文字。另外，CTA 建議採用「明亮、對比度高、注目性高」的配色組合，注目性高的配色除了能引起注意力，還有刺激情感的積極作用，鼓勵訪客進一步點擊 CTA。（色彩注目性的高低可以參考下圖）
如果 CTA 是按鈕形式，也很建議加入一些網頁 UI 效果來凸顯視覺，例如以陰影增加立體感、導圓角設計、游標移動的 Hover 效果等等，不只能在視覺上強調 CTA，還能增加訪客和網站的互動性和點擊意願。
▍CTA尺寸
大多數人在瀏覽網頁時，目光本能地會先注意最大或最明顯的物件，因此我們也可以透過「尺寸」來引導閱讀順序。建議 CTA 尺寸和字級要比內文更大，和內容做出差異才容易被看到；但也需注意不宜超過 H1 標題，以免喧賓奪主影響整體排版。小提醒，由於愈來愈多人習慣用手機瀏覽網站，記得要特別檢查 CTA 在手機版網站是否會有跑版、變形、或是尺寸太小不易點擊的狀況。
▍CTA文字
設計出吸睛的 CTA 樣式是好的開始、成功的一半，而能否刺激使用者點擊的關鍵則在於「CTA 文字」。大多數人在瀏覽網頁時通常會快速掃視與捲動畫面，如果他們沒有找到想看的內容，有很高的機率會直接離開，也就是說我們只有短短幾秒的時間能向他們傳遞訊息。為了有效切中要害直擊使用者需求， CTA 文字需符合「簡潔有力、指令明確、直白有說服力」三大原則：
• 簡潔有力
CTA 常見是「動詞+名詞」形式的組合短句，文字應盡可能簡短扼要，因為短句會比一整段句子更容易理解，讓使用者一目瞭然我們想表達的重點。舉個例子，「點我填寫報名表單」和「免費報名」相比，哪一個比較有吸引力呢？
• 指令明確
CTA 文字必須包含「指示明確的動詞」，例如前往XX、開始XX、立即XX、查看XX，這樣強烈的指令能刺激使用者開始行動。這邊舉例幾個常見的 CTA 動詞：
- 電商：購買、訂購、加入購物車、收藏
- B2B品牌：開始、尋找、諮詢、訂閱、註冊、了解、查看、繼續
CTA 雖然力求簡潔，但也要盡可能把資訊說明清楚，要避免只單用動詞當作 CTA 文字，例如：
- 查看 vs 查看方案
- 報名 vs 報名試聽
- 開始 vs 開始閱讀
- 前往 vs 前往申辦
如果只單用動詞、而沒有說明接續的內容，這樣容易讓使用者困惑他們正在執行的動作內容，「查看」要看些什麼？「前往」又會去哪裡？因此除了指令之外，還要給予足夠的資訊，才能有效推動使用者採取下一步行動。
• 直白有說服力
要讓 CTA 文字更有說服力的方法，就是直接了當告訴使用者「點擊 CTA 能帶來的好處」，使用者看多了「領取優惠」可能已感到麻木，而若 CTA 直白寫出「現省 100 元」、「限時９折」等等好處，則更有機會激起使用者的興趣。
另外也可以在 CTA 前後增加具有急迫性的說明文字，例如限時優惠、僅限今天、優惠倒數XX天等等，由於急迫性與稀缺性會引發人本能的「錯失恐懼」，便能有效引導使用者立即採取行動，增加 CTA 的點擊率。
▍CTA位置
CTA 樣式能吸引目光、文字能刺激行動、而最後別忘了「位置」能增加 CTA 被注意和點擊的機會。在同一網頁的多個地方放置 CTA，可以增加被看到的頻率，避免使用者捲動太快而錯過。CTA 常見的位置例如：
- Header：固定在網站最頂部，是每個頁面都會看到的位置，通常會包含最重要的 CTA
- 首頁 Hero Banner：訪客進入網站後、無需捲動即會看到的第一個畫面，通常會在標題下方放置 CTA
- 頁面中間：頁面中段也建議加入 CTA，當使用者往下查看網站內容、逐漸對你的產品或服務有興趣時，CTA 在這邊就具有相當的號召力。
- 頁尾：放在頁面底部的 CTA 是一種總結和呼籲，當使用者看完網頁所有內容，最後記得引導他下一步行動，像是查看更多商品、延伸閱讀、立即聯繫我們……等等都能鼓勵使用者繼續停留在我們網站
- 跳出式彈窗、橫幅：適合放最新活動或促銷訊息的 CTA
但也要避免過度放置 CTA，否則易造成反效果。一個位置建議放一個 CTA 即可，同時放多個 CTA 不只會讓畫面看起來很亂，也容易讓使用者陷入猶豫反而不採取行動。因此在安排 CTA 位置時，大原則是以使用者的閱讀順序為主，思考哪個位置能吸引目光、不會造成干擾、同時又符合內容敘述邏輯。
| 其實CTA的四大要訣就是：CTA必須與網站上的其他元素『不同顏色』、『不同形狀』、『不同大小』、『不同位置』，大家把口訣記起來，就能輕鬆掌握CTA的設計原理喔！ | ||
CTA設計的其他建議
認識 CTA 設計基本的四個要素後，這邊還有幾個建議和大家分享：
▍以使用者出發
CTA 設計有一個常見的誤區：只站在品牌方的角度「呼籲」使用者採取行動，忽略了 CTA 到底能不能說服、觸動使用者。舉例來說，為了刺激使用者點擊便在 CTA 放了「立即聯繫」、「立即查看」等等字眼，但以使用者的立場來看，他們為什麼要點？他們真的有這個需求嗎？
CTA 是給使用者看的，以使用者需求出發的 CTA，才能真正直擊他們的心。
在設計 CTA 時，不妨思考一下：
- 使用者點擊這個 CTA 的動機是什麼？
- 當使用者點擊 CTA 時，他們會得到什麼？
這兩個問題的答案，就是我們能放在 CTA 按鈕和周圍說明文字的內容：）
▍做出差異性
另外一個建議是「讓你的 CTA 和別人不一樣」。
立即購買、免費試用、免費諮詢、了解更多……這些 CTA 非常普遍、十之八九的網站都在使用，如果你的 CTA 和其他人有所不同，就是一個吸引人的獨特亮點。以健身房的「免費體驗」為例，你可以在 CTA 旁增加個性化的說明文字來提高點擊意願，像是「開始30天甩肉計畫」、「今天就動起來」，當其他競品都只有寫「免費體驗」時，你的 CTA 就顯得更耳目一新。
如何優化CTA成效
很多時候我們精心設計的 CTA，使用者其實不買單。一個有效的 CTA，通常都經過不斷的測試、優化、驗證，才能逐漸推敲出什麼樣的 CTA 效果最好。
CTA 設計並沒有絕對的範本或公式，不一定什麼用詞的轉換率最好，也沒有 100% 保證最佳的配色組合，即使在其他網站上成功的 CTA 對你的受眾也不見得有效果。因此，最好的方法還是透過 A/B 測試，嘗試不同的文字、顏色、位置等等，實際觀察使用者的點擊狀況。A/B 測試時一次只調整一項變因即可，要測試位置的話 CTA 樣式需保持一致、若測試文字則顏色和位置要一致……以此類推。
市面上許多工具都有 A/B 測試的功能，設定好不同版本的 CTA 後，工具會自動把使用者分流導去不同版本的頁面。以我們網站為例，我們想測試 CTA 按鈕不同顏色的效果，便使用 Crazy Egg 建立了綠色版本的按鈕，Crazy Egg 會自動把使用者分流、並比較不同版本的點擊率。
除此之外，透過「使用者真實行為的數據」也能幫助我們優化 CTA。
一個網頁上通常會置入多個 CTA，透過 CrazyEgg、Hotjar 這類質化工具的「熱點圖」，便能一目瞭然各個 CTA 的點擊熱度。而若是想要更完整的數據，例如每天查看 CTA 有多少次點擊或多少使用者，則可以透過 GTM 和 GA4 設定事件來追蹤。
CTA 是網站優化中很重要的一個項目，一個按鈕背後需要兼顧這麼多設計細節，不過大家也不用把它想得很複雜，經過一步步測試、驗證、優化，就可以琢磨出你和使用者最佳的溝通管道。大家除了參考以上的設計原則，平時身為使用者在瀏覽其他網站時，不妨也注意一下其他網站的 CTA，也會有不少細節可以參考借鏡喔：）
