如何提高CTA按鈕的點擊率?

2 評論 10218 瀏覽 52 收藏 8 分鐘

本文主要向大家介紹了什么CTA按鈕及其作用,并分析說明了設計CTA按鈕需要注意些什么,通過什么方法增強CTA的點擊?

目錄:

  1. 定義:什么是 CTA 按鈕
  2. 作用:CTA?按鈕在界面中的作用
  3. 設計CTA按鈕需要注意些什么,通過什么方法增強CTA的點擊
  4. 總結

1. 定義

CTA 是英文?“call-to-action”的簡寫,又名行為召喚按鈕。是 Web 和移動軟件應用中最常用的交互元素,其主要作用就是引導人們做出某些特定操作,從而提高產品的轉化率。

2. 作用

簡而言之,就是設計師通過設計手法,視覺上突出按鈕,讓用戶自然而然的產生點擊按鈕的行為,例如留下聯系方式或者產生購買行為,都算是行為召喚。

行為召喚這一 UX 設計手段的主要目的就是催生交互、行為,提升轉化,達成業務目標。

目前的主流電商 APP 在促銷模塊的購買按鈕都在往大的面積,高飽和度,高層級的方向做。主要也是為了引導用戶點擊按鈕并產生之后的一系列購買可能。

3. 怎樣設計 CTA 按鈕,能夠增加點擊率和轉化率呢?

3.1 樣式上

1)按鈕在樣式是必須看起像是按鈕,符合用戶對以往按鈕的認知,提高可辨識度,降低用戶的學習認知成本 。純文本按鈕會讓用戶遲疑到底是按鈕還是內容,從而造成混淆,這種不確定性可能會導致他們直接跳過這些按鈕。

如上圖,在按鈕在這個頁面層級比較低,而且并不重要的時候可以是直接使用鏈接文字這樣的按鈕形式,一般的按鈕根據在頁面是視覺層級可以選擇后面 2 種,無論是點擊區域還是樣式上更加容易吸引用戶點擊。

2)使用漸變、陰影、圓角讓按鈕樣式看上去更加的逼真,引導用戶點擊 。這些樣式的應用會讓按鈕看起來更加立體,模擬現實生活中的按鈕樣式,比如,開關燈、鍵盤按鈕等。用戶在現實生活也需要對這些按鈕進行點擊和交互,如此用戶看到這些按鈕時,就直接知道如何去操作

3)正確的設計按鈕的大小,?按鈕的大小要符合拇指原則(44pt,同時按鈕上下左右有足夠的留白空間。需要一個頁面相同位置的按鈕組,必須有明確的層級區分,引導用戶進行正確的操作,降低用戶思考和選擇的時間

例如 上圖的蝦米、京東、網易云音樂app的登錄頁面,除了最重要的登錄按鈕最大,最突出外;其他的第三方登錄以及賬號密碼登錄等按鈕都根據不同的層級重要性進行了樣式區分。讓用戶可是直接進行正確(或者是你希望)的操作行為,降低用戶的選擇時間。

2. 文案上

1)行為召喚按鈕 ,顧名思義按鈕對于用戶的行為有一定召喚,指示作用。所以按鈕上的文案可以使用緊迫感和即時性的文字提示。比如:立即、馬上、開搶等。這些文字會給用戶營造一種緊張、興奮、刺激的感覺,刺激用戶進行點擊和消費。

2)按鈕文案應該表述明確,告知用戶按鈕的代表的意思,以及點擊交互后會發生什么。通過清晰的文案給予用戶操作預知,降低用戶的使用成本和防備心態。同時文案也可以是利益點,促進用戶點擊,并產生消費。

圖1 是蘇寧易購購物車左劃時效果,3個按鈕文案分別是表述清楚了不同的操作以及給予用戶相應的操作預期。同時不同的按鈕背景顏色表述了不同的操作層級,刪除按鈕是不可逆的操作,所以紅色示警。

圖2 是芒果臺tv充值會員會員頁面,按鈕文案明確的說明:確認支付¥9,以及副文案開通會員后用戶可以得到的利益點。用戶可以很清楚的從按鈕中的文案 知道點擊操作后,需要支付的¥9元金額,以及可以得到的好處,排除了用戶的疑惑,告知了用戶好處,更有利于提高點擊。

3. 交互上

按鈕在操作后需要及時給出用戶不同狀態的反饋,告知用戶你的操作生效了,做到所見即所得,給用戶安全感。例如:網頁上的按鈕鼠標懸停時,可以按鈕變色,提示并吸引用戶點擊。最起碼按鈕上的光標會變成小手;一些小游戲界面中需要引導用戶點擊按鈕時,也會做各種動效果,或是指引手勢。

4. 總結

  1. CTA 是英文 “call-to-action”的簡寫,又名行為召喚按鈕
  2. 按鈕在樣式是必須看起像是按鈕,符合用戶對以往按鈕的認知,大小要符合拇指原則(44pt
  3. 按鈕文案上有清晰簡潔,可以使用帶有緊迫感、即時性、利益點的文案
  4. 頁面中按鈕過多時,需要根據層級作出明確區分,減少用戶決策時間
  5. 按鈕在操作后需要及時給出用戶不同狀態的反饋

 

本文由 @ Sevenmoon原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 道理、知識點比較豐富實用。不過錯別字有點多。

    來自河北 回復
  2. 感謝分享~

    來自北京 回復