林克威專欄

【林克威專欄】關於電商 CTA (Call To Action) 行動呼籲按鈕設計的 7個建議

關於電商 CTA (Call To Action) 行動呼籲按鈕設計的 7條建議

電商的設計通常包含很多UI 設計,這些設計是由不同的元素組成,它們中的每一個元素都在用戶體驗的效率提升以及電商的轉換方面扮演著重要作用。即使像按鈕這樣的小部件也需要得到關注,以便它能夠實現預期目標。

什麽是 CTA (Call To Action) 行動呼籲按鈕?

CTA 是英文 Call To Action 的簡稱,中文翻譯通常多以「行動呼籲」、「召喚行動」來做解釋,它是電商或是和 App 上的關鍵的按鈕元素,例如購買,聯繫我們,訂閱等,其主要目的是引導用戶採取某些行動,使頁面提升轉化。

用戶的引導和轉化是 CTA 按鈕的核心目的,當一個按鈕足以引起潛在用戶的注意時,它才可以吸引用戶點擊並進入下一個流程。我們設計一個功能強大的 CTA 按鈕比較重要的方面包括但不限於尺寸、顏色、形狀、位置等。

按鈕就有更高的機會來完成它的目標和任務,但是如何在這些方面變得更加強大?今天和大家分享一下關於 CTA 按鈕設計的實用技巧。

  1. 讓按鈕看起來方便點擊

任何 CTA 的先前任務就是讓用戶點擊它,所以他們的設計應與目標一致,我們的用戶不想一上來就得先弄清哪些元素是可點擊和互動的。這就是為什麽確保所有交互式元素都可以點擊是很重要的原因。

什麽可以使按鈕看起來可點擊?首先,它是一個視覺表現形式,當 UI 設計師添加一些 3D 效果時,按鈕看起來更容易點擊。

知名的電商會把按鈕增加輕微漸變或小陰影的 CTA 通常會帶來點擊慾望,因為它看起來更加突出。如果具有 3D 效果的按鈕不適合所選風格,例如平面設計,則可以通過按鈕的圓邊來強調可點擊性。

  1. 選擇合適的尺寸

尺寸的大小是幫助根據其重要性安排優先與即時是最常用的工具之一,元素越大,它變得越明顯。前面說過由於 CTA 的先前目標是吸引用戶的注意力,因此我們通常會試圖讓它們在螢幕上在所有其他按鈕中脫穎而出,特別是通過明顯的尺寸。

大按鈕有很高的機會被發現和點擊,但你必須保持一些限制:一個引人註目的引導性按鈕通常足夠大,可以快速找到,但又不會太大,以免布局的視覺構圖和層次結構受到損害。

市場領導者通常會在其準則中提供有關按鈕有效大小的建議。 例如,蘋果電腦表示:移動用戶界面中的 CTA 應至少為 44×44 Pixels,而微軟建議34×26 Pixels。

  1. 應用對比色

顏色的選擇非常重要,如主視覺色以及目標受眾的潛在偏好和心理特徵,在為 CTA 按鈕選擇顏色時有一個條件非常重要:按鈕和背景顏色應該足夠反差,以便 CTA 能夠從其他 網站元素中脫穎而出。

例如,如果設計師在電商網站中使用藍色調色板,那麽為CTA按鈕使用紅色或黃色會是一個可以突出按鈕的配色方法。

  1. 更少的文字

CTA 按鈕的引導文案會提示用戶如果點擊他們將獲得什麽收益,文案必須迅速吸引用戶的注意力,並引導他們正確行動。

所以要給出有效的引導性文案,您需要將按鈕文字保持在最低限度,少數適當選擇的單詞比長描述性短語的要高效。

  1. 符合用戶的心理預期

大尺寸和鮮艷的色彩是吸引用戶注意力的有效方法,但在操作流程中(用戶在產品中完成特定任務的路徑),恰當的位置可以增加更多關注 CTA 按鈕的機會。

例如,建立產品頁面的時候,您需要確保用戶在閱讀有關優惠或服務的訊息後馬上就能找到“註冊” CTA 按鈕,這樣用戶就能理解他們正在註冊的內容以及他們是否需要它。 如果人們在閱讀訊息之前看到這樣的 CTA 按鈕,他們很可能會忽略它。

  1. 多使用留白設計

設計有句話叫做留白就是美,是設計構圖中元素之間的區域配色。我們通常不會意識到這個空間的重要作用,但做為設計師需要注意它。

白色空間不僅僅是視覺構圖的背景,它經常被用作強調用戶界面元素的有力工具。如果用戶界面包含許多可視組件,則 CTA 按鈕可能會在頁面或螢幕上丟失,按鈕周圍的適當留白空間有助於吸引用戶的注意力,因為它變得更加明顯。

另外,空白區域映射了 UI 元素之間的連接,各組件之間的空白區越少,它們看起來就越連接緊密。因此,如果有些元素可以帶有引導性的文案,例如項目說明或照片,請嘗試減小它們與按鈕之間的空間,以便為用戶的操作提供雙重效果。

  1. 添加一些額外有效訊息

正如我們上面所說的:保持 CTA 訊息的短小是非常重要的,這樣可以很快引起用戶的注意。但是當用戶注意到引導文案時,提供一些額外的數據可能也是有用的。

它可以是一小部分訊息,解釋下一階段的情況。例如,您可以澄清註冊過程不會超過15秒或提醒註冊是免費的,一小句話可以增加用戶的興趣並鼓勵他們採取行動。

其實最重要的還是需要做 A/B Testing 測試如果你想確保一切正常,你需要測試它。這個黃金法則是包括 UI 設計在內的各個領域的必備條件,用戶研究和分析有助於設計人員定義目標受眾的具體情況,但很難準確知道設計決策是否最好。這就是為什麽測試可以成為幫助消除疑慮的充分解決方案。

A/B Testing測試是最有效的 CTA 測試方法之一,它通過數據比較產品的兩個版本,以找出哪一個更好。比如我們將用戶分成兩組,每組都顯示不同的內容, 一半看到 A 版本,另一半看到 B ,這種方法有助於確定更有利的解決方案。

為了獲得更準確的結果,建議每次測試一個方面,例如,只有一個按鈕的顏色, 這樣我們就可以區分哪個因素最終會有所作用。

在網路行銷的時代,CTA 為電商創造更大的轉換率 (產品購買、下載次數或會員申請數等)。到站的訪客通常都很被動,你需要透過提醒、催促等方式來引導他們完成行動,CTA就是你最好的方式,你可以透過引導使用者讓使用者幫你完成行動,為你創造更大的轉換率!

原文來自:林克威的電商老闆創業誌
更多科學與科技新聞都可以直接上 明日科學網站 www.tomorrowsci.com