call to action 設計原則

1. CTA
UX
Ruby

2. “What call to action is a primary thing that you want that
user to do“
「行為招喚」讓使用者做你想要他做的事
UX

3. 設計原則
UX
Mastering The Call To Action – Words, Color, Size & Location
http://conversionxl.com/everything-cta-size-location-color-works/

4. Canopy Labs 對 CTA 的位置進行的研究
how to structure a call to action https://goo.gl/fxZZve
短篇內容中 CTA 位置最好的為內容下方
• 一個 CTA 無法與其他內容隔離並單獨存在，因此大部分時候把 CTA 放在文
章的最上方是不適當的。
• 用戶由左到右的閱讀習慣，也讓左方的 CTA 較右方的更容易被注意到。
• 如果你的內容能成功地傳達給讀者，他們會有更高的機會點擊，所以下方的
CTA 會有較高的點擊率。

5. 強烈對比的顏色
使用對比色或明亮顏色，讓按鈕跳脫背景色
一般網頁按鈕紅色會讓用戶緊張、
藍色讓情緒較為冷靜，所以色彩的
運用須考量其關聯性，CTA 按鈕多
半避免紅、藍這兩種顏色
現行市場測試結果中，橘黃色的CTA按鈕配以藍色背景成效最佳
Which Color Converts The Best? http://goo.gl/WpoJx

6. 具動作導向的字詞
使用簡單明瞭，觸發動作的動詞
瀏覽者掃動資訊的速度很快
字詞越簡單越是動作導向，在瀏覽者大腦中產生
激發的反應就越迅速
參 加 試 用
Pchome 逛現貨

7. 大小需一眼即可看到
但不能影響頁面設計比例協調性
大到可以引人註意，但是不要太大以至於轉移瀏
覽者閱讀頁面上其它有價值內容的注意力
http://www.paulolyslager.com/call-to-action-
buttons-shape-size/

8. The Squint Test 瞇眼測試
http://templates.mailchimp.com/design/calls-to-action/
A quick way to determine whether or not your email’s main call to action is obvious is
to perform the good ol' ‘squint test’. If you or anyone else can pick out the call to
action while squinting at the email, then it’s unlikely your readers will miss it either.
把畫面弄糊，讓自己或周遭的人試試能否馬上辨
識 CTA

9. 放在顯眼的位置
不要為了標新立異而把按鈕擺在奇怪的地方
不同的情境與內容擺放下行為不同，需要通過測試找到在整體
頁面設計中有機結合的最佳CTA位置
如果沒有時間測試，瀏覽者通常習慣在固定位置看到按
鈕，可以遵循標準最佳實踐來最為一開始的位置設計(不
用翻頁的第一屏右下角位置、文章內容最下方)

10. 突顯按鈕的重要性
X
有多個不同用途的CTA時，依按鈕重要性來設計，
以突顯主要與次要的按鈕，不要貪心讓所有按鈕都
顯得重要

11. 不論是桌機版或行動版網頁上的行動鈕，都必須一
樣醒目、方便操作
適用各種裝置

12. 製造急迫性
急迫性文案可作為短期活動CTA，但長期的按鈕設計不適用
ConversionXL研究發現，營造急
迫性可以讓成交率提升332%
http://goo.gl/hcZC