你是不是有曾經在找服務或產品的過程中,在網站上看到「立即預約」、「了解更多」、「馬上購買」的按鈕或連結?這個呼叫你去點擊的按鈕叫做「CTA(Call To Action)」,CTA 設計得好可以吸引更多人的採取行動,CTA忘記放會讓網站失去不少訂單與詢問,本文將帶你從頭徹底了解 CTA(行動呼籲),掌握CTA製作秘訣,相信你一定可以做出好用又好看的 CTA !
CTA(Call To Action)是什麼?
CTA 英文是「 Call To Action」 的縮寫,中文翻譯為「行動呼籲」,CTA大多會以圖片、按鈕呈現,偶爾也會搭配圖文以詢問單方式出現,CTA可以因為文字敘述、圖片設計、擺放位置而影響CTA的點擊成效,只要是呼叫或啟發使用者做一下個動作的行為,都叫做CTA( 行動呼籲)。
CTA的用意是什麼?
為什麼網站需要加入CTA( Call To Action)?以下介紹使用呼叫行動呼籲的目的,讓你更加了解CTA的重要性:
引導使用者做出點擊行動
消費者進到網站的目的是想要了解資訊,頁面裡放符合內容的行動呼籲,可以在瀏覽過程中,增加執行點擊行動的機會,深入了解更多內容。常見範例如:優惠活動內容搭配「 立即購買」按鈕、活動內容搭配「 立即參加」、「 立即登記」CTA。
〈延伸閱讀:什麼是點擊率?如何提昇點擊率 CTR?〉
案例:巨匠美語官網活動CTA
輔助內容行銷
網站除了做好使用者體驗,還要創造對消費者實用、有幫助的內容。讓目標客群( TA)主動瀏覽,認同內容、增加停留時間,再透過 Call To Action 吸引點擊,繼續瀏覽更多頁面,做進一步的行銷,這樣才能正確發揮行動呼籲的功能。
〈延伸閱讀:實用內容系統是什麼? 對SEO有什麼影響?〉
〈延伸閱讀:內容行銷是什麼?不用推銷就能帶來訂單的行銷術〉
〈延伸閱讀:文案怎麼寫?文案範例一次學會!〉
提升或改善轉換率
「轉換率」是指消費者達成轉換網站目標後的機率。轉換過程可以用行銷漏斗來理解,上層( 曝光層)利用網頁內容來大量曝光;中層( 發現、思考)讓消費者在瀏覽過程中深入認識品牌,並思考是否要購買產品和服務等;下層( 轉換)透過CTA點擊,減少猶豫的機會;底層運用策略行銷方式,將這些一般客戶變成忠實客戶。
〈延伸閱讀:轉換率是什麼?如何提昇轉換率(CVR)?〉
〈延伸閱讀:行銷漏斗是什麼? Spotify 的行銷漏斗〉
觀察使用者點擊數據
點擊數據可以評估行銷活動的成效,能夠了解消費者對哪些內容比較有興趣,哪些內容需要進行優化調整,熱門點擊時段是什麼時候…等。透過數據成效,規劃、調整出適合的CTA設計和擺放位置,能夠幫助行動呼籲互動率、轉換提升。
〈延伸閱讀:提昇網路銷售的三個重要流程〉
建立網站內部連結
內部連結是讓網站內部頁面之間做串連,消費者可以透過內部連結深入進行站內閱覽,帶動整個網站的瀏覽量、提升訂單轉換機會。對SEO來說也很重要,爬蟲可以藉由內部連結了解網站結構,讓網頁進行權重傳遞。設置連結時,別忘記測試CTA是不是有正確導向到你要的頁面!
〈延伸閱讀:網站連結優化怎麼做?讓Google看懂你的SEO〉
〈延伸閱讀:SEO入門知識,簡單說讓你聽得懂〉
〈延伸閱讀:SEO是什麼?SEO怎麼做?2024 重點教學〉
CTA製作要點有哪些?
CTA目標設定
設計CTA前,可以利用SWOT、STP、4P做品牌初步定位和走向,在定位基礎、數據觀察下設定精準的目標,再透過關鍵績效標( KPI )檢視在達成目標的過程中,需要調整的環節有哪些,是否穩定朝著目標前進。
〈延伸閱讀:KPI是什麼?網站KPI指標怎麼擬定?〉
〈延伸閱讀:行銷4P是什麼?必勝客的4P分析〉
〈延伸閱讀:STP是什麼? 星巴克的STP分析〉
〈延伸閱讀:SWOT是什麼? 麥當勞的SWOT分析〉
清楚傳達內容
根據行動呼籲的績效指標,搭配精準的文字,可以幫助消費者快速了解內容、被文字吸引,提升點擊意願。按鈕CTA的文字通常不多,需要搭配簡潔有力的內容來引導做出行動 ;圖片Call To Action有比較大的排版空間,可以加入slogan增強行動誘因,例如:強檔新品推出,期間限定8折超值優惠,錯過不再有!
下面舉出幾項常用的字詞,可以用它們來延伸更多高吸引力的文字內容:
-
立即諮詢
-
立即申請
-
下載檔案
-
馬上購買
-
點我查看更多
-
與我們聯繫
-
閱讀更多
決定適合的尺寸
行動呼籲的尺寸會影響使用者體驗。底下將Call To Action分兩種樣式做介紹,可以依照使用需求、頁面排版進行尺寸設定:
按鈕形式
按鈕CTA適合寬度約文字區塊尺寸的1/2~1/3,高度約文字的2倍。尺寸設定得宜,可以快速理解執行行動的目的。按鈕行動呼籲能容納的字數較少,所以通常會搭配一段服務、產品特色或活動大綱內容,並藉由按鈕上的立即參加、馬上購買等文字,以及顯眼的色彩,來吸引使用者點擊。
圖片按鈕形式
圖片Call To Action的尺寸可以使用細長型banner,既不會太大搶走頁面重點,也不會小到讓消費者不好閱讀。圖片寬度盡可能與網頁版面切齊,這個做法可以幫助視覺上更加協調美觀,提高吸引力和加強使用者體驗。
〈延伸閱讀:img alt 是什麼? 對於SEO來說很重要嗎?〉
〈延伸閱讀:部落格(BLOG)-執行SEO最重要的工具〉
選擇適合的字體
字體的選擇相當重要,它會影響整個CTA給人的感受,以下介紹四種常見的字體類型,會更清楚要怎麼選擇才能讓Call To Action的視覺升級!
黑體
黑體最大特色是方正、規矩,筆劃寬度接近等寬,具備視覺平衡、安心穩定的效果。不論在書籍雜誌、公共場所指標、網頁用字都很常使用,是最百搭、使用上最安全保守的字型,大部分產業的CTA都適合使用黑體!
圓體
圓體和黑體相似度很高,同樣具有方正穩重感,筆劃寬度也幾乎一致。唯一不同的地方是圓體筆劃末端和轉角有做導角設計,可以讓CTA流露出比較圓潤、柔和的感覺,適合用在嬰幼兒、寵物等相關產業使用。
明體
如果CTA想呈現高級、經典又氣質的感覺可以使用明體。它的筆劃具粗細變化、稜角分明,結構組成也比較嚴謹,閱讀時有舒適、醒目的感覺。相當適合高消費目標客群,以及美容、醫療、時尚等相關產業使用。
手寫體
手寫體是最不受限的字型。它具有鮮明的個性,帶有隨性、自由,又不失質感的特色,適合用在個性化的設計需求。從事文創產品開發等產業,可以使用手寫字來作為 CTA 的主要字型。
色彩搭配技巧
色彩搭配沒有標準答案,要搭出好看的顏色更是一大學問!下面提供3種常見又安全的搭配技巧,讓你可以不再為顏色搭配煩惱:
-
品牌識別標準色:這個方式既可以讓Call To Action與網站版面色彩統一,貼近品牌意象以外,也可以透過顏色來加深消費者對品牌的印象。
-
同色系:如果想追求溫和、平穩的感覺,可以用同色調做搭配,並加入無彩色(黑、白、灰)來做輔助,讓同色系版面增添一份留白的效果。
-
撞色系:撞色通常是以對比色做搭配,常見的搭法有:藍配橘、紅配綠、紫配黃。這種方式能夠凸顯重點,讓行動呼籲營造出比較強烈、活潑熱鬧的視覺效果。
〈延伸閱讀:網站設計最重要的11個設計原則〉
〈延伸閱讀:網頁設計重點在設計內容,不是版型〉
超連結設置
Call To Action透過網站內頁互相串連,可以讓消費者在瀏覽頁面過程中,達到立即點擊後導向其他頁面,深入了解產品、服務、訂單詢問的目的,而內部連結也能加強SEO優化效益。
通常會使用程式碼來編寫導向網址,需要多加留意程式碼有沒有寫正確,網址是否有設定錯誤,避免使用者點擊後連結到錯誤的頁面。
按鈕、圖片CTA會放在連結程式碼中間,綠色字體部分超連結程式碼寫法,可以複製並修改成想要的內容。
範例:<a href=”(網頁網址)”><img alt="..." src="..."></a>
〈延伸閱讀:SEO文章要怎麼寫才符合SEO架構?〉
CTA擺放位置
除了掌握設計要點,Call To Action的擺放位置也要顯眼、留意閱讀流暢度。接下來要帶你了解,CTA 在不同位置擺放下有什麼效果,思考頁面比較適合的擺法,才能更有效吸引消費者點擊!
〈延伸閱讀:架設網站前必須先思考的三件事〉
頁籤上方
放在頁籤上方的CTA可以馬上被消費者看見。這個做法時常會用在購物網站,並考量手機用戶使用體驗,文字內容通常會放優惠活動、免運資訊,按鈕尺寸會與網頁介面同寬。
頁面上段部分
CTA 常常被放在網頁上方,不但醒目且可以增加更多的點擊。官網首頁「服務細節了解」、「立即購買」、「好康優惠」等行動呼籲按鈕,通常會搭配一段敘述文字,或是輪播的banner做呈現,可以幫助消費者到達網頁,被引導到網站內部瞭解更多資訊。
頁面中段部分
CTA放在頁面中段,可以讓消費者看完段落內容後直接點擊。它的內容需要與上下文有關聯性,適合在企業形象網站首頁以「更多詳情」按鈕搭配服務說明,或是在EDM中使用。
〈延伸閱讀:數位行銷是什麼?2024網路行銷方法〉
〈延伸閱讀:什麼是EDM?如何寫一封行銷Email?〉
頁面下段部分
Call To Action 置於頁面下方,可以幫助消費者在閱讀完部落格文章或是EDM內容後,採取點擊行動、導到新頁面進行服務了解、產品購買或是檔案下載。
〈延伸閱讀:提高EDM成效的五大要點〉
頁面側面
人的閱讀方式是由上而下、由左而右的,CTA固定放在側面,不論滑動到哪個位置都能看到,減少消費者尋找行動呼籲的時間,還能夠隨時進行點擊。常見內容設計例如:商品限時特價活動、訂閱電子報、立即免費使用等。
彈跳視窗
彈跳視窗行動呼籲適合用在「詢問訂閱電子報」、「下載檔案」、「活動參與」等使用情境,內容大多會搭配一句slogan,或是一段簡練的文字敘述加一顆按鈕做呈現。
CTA 建置後需要做什麼?
CTA 點擊數據追蹤
衡量點擊成效最直接的方式,就是透過數據追蹤工具(如:Google analytics)來觀察,成效好的 Call To Action 可以繼續觀察後續點擊狀況,能夠悉知消費者對於內容的喜好是什麼、放置在哪邊比較容易被發現;成效下降的 CTA,會需要透過前面說明的製作要點,來檢視哪個部分需要加強,並擬定新策略,做出調整。
利用 A/B 測試決定更適合的CTA
A/B測試是運用A和B兩種版本,了解使用者對各別行動呼籲的反應差異,並藉由數據得知哪個版本比較適合使用。測試前可以在 Call To Action 的尺寸、文字內容、擺放位置、顏色、字體中,挑一項做出差異。例如:店家想要推動超值肉品組合銷售,以提高銷售額為目標,兩者皆使用圖片 CTA 並放置在同一個位置,A版本文字內容可以訂為「小資超值系列,任選3件以上享8折優惠!」,B版本文字為「小資優惠活動,3件以上8折!」,最後再透過一段時間的數據,觀察哪個成效較佳。
〈延伸閱讀:A/B測試 -行銷不能憑感覺得靠數據〉
適時調整CTA內容
每個企業都有不一樣的發展階段,不同階段會有不同的目標,行動呼籲的內容需與 KPI 指標呼應,讓Call To Action作為達標的輔助角色,時常觀察數據成效並做出有效調整,可以獲得更加接近目標的機會!
〈延伸閱讀:網頁設計公司不會告訴你的5個真相〉
結論
透過這篇文章一定讓你更加了解 CTA 的重要性與製作要點,並經過全方位的考量和數據觀察,才能讓行動呼籲的價值得以發揮。網站中只有好的CTA還不夠,需要網站、內容行銷、數據觀察…等同步優化、執行,才能讓網站成效成長。達文西具備多年SEO與網站設計服務經驗,針對客戶網站內容規劃、版面呈現,提供最周到的策略建議,致力提升客戶網站使用者體驗、SEO成效,透過專業洞察、找出有力數據,幫助網站發揮更多轉換功效!
〈延伸閱讀:2024 網頁設計指南〉
〈延伸閱讀:SEO排名因素有哪些? 45個要點一次看完!〉
(本文為達文西數位科技所有,轉載文圖請註明出處)