Related Posts with Thumbnails

2017年4月1日 星期六

關於 Call to Action 優化,也許你可嘗試的地方

每一張名單收集頁都不斷面臨著除了 "點入頁面的標題吸晴程度如何、頁面內文案公式的鋪陳流暢感 / 合理性等顧慮" 外,最後的 Call to Action 則扮演著是否能成交的最後關鍵命運

也因此,在下方教學我將提供你優化 Call to Action 按鈕的各個面向,像文案、顏色、形狀、大小和位置 ... 除此之外還附上測試提示,以確保按鈕獲得應有的點擊

畢竟,沒點擊就別想有成交的可能 ... 所以 "力道能強化到何種程度" 便是你該關注的焦點

文案 
之所以先從文案開始,是因為顏色、設計在人們的潛意識中被告之 "你該往那邊瞧甚至點擊的視覺引誘";但文案才是人們是否作出決定的核心關鍵

也就是說 "為何要點擊的理由"?
事實上有許多可調整的方式,但你必須注意的是 "在論述上一定要清晰",而且是採取 "動詞" 為佳 → 一旦你擬好欲傳送的價值,你就該用 "動詞" 包裝 “點擊後可得到啥價值” 的明示

而且說實在地,一樣常用的詞彙卻是 "力道有別"
"點擊下載心得報告、 馬上試用推薦軟體" ... 如果和 "付費課程限時免費大放送"
雖然後者很傷,但你覺得那個 CP 值最高呢?

所以在情況允許的情況下 "詞彙上的使用需與價值相匹配" ... 而這也該是你要注意的!


以上圖來說,你覺得 WordPress 有什麼缺乏溝通的地方?
事實上,對於不知道這是啥的人來說,可能會有 "這是免費,還是需要付費" 的疑慮
但你若能在詞彙中加上 "澄清" 的話,增加點擊的機會就多一些了

( 光光改變說明方式,CTR 就爆增了 ... 神奇吧?)

接下來,假設你想在按鈕旁附上額外的說明文字的話,該怎麼辦呢?
我會建議放在按鈕的 "上下方" 最具 "視覺連結、不被其它網頁元素干擾導致分散注意力" 的效果

( 在 Marketing Resources: Free Lead Gen Courses & Resources 中有許多免費教學都附上極小的說明文字,有興趣者可入內查看 & 下載觀看! )

對於這種附加說明的文字,你可以管它叫「點擊觸發器」好當作記住它算是增加點擊率的作用

顏色 
相信許多人一定想知道該怎麼挑才是最棒的,請先看下方 "精簡版" 圖表說明

 ( 欲見 "完整版" 說明者 ... 請右鍵點擊 How do colors affect purchases? 放大查看 )

註:亦或見 Color Emotion Guide ( 右鍵點擊放大查看,原文詳見 The Psychology Of Color In Logo Design )

請記住:「不同群體的人對不同的顏色做出不同反應 - 從上圖可以看到,紅橙色吸引衝動的購物者 & 茶綠色會讓人們從即有預算去回推思考」
因此你的買家搜索什麼,而什麼顏色會吸引這些類型的人? 在構建 CTA 之前請先行研究

而在「品牌認知」這檔事上,除了可增加形象外,更會影體消費者對你的信心
 
( 大家都吃過的 Pizza Hut,看到頁面的當下你有什麼感覺呢? )

只要你的 Call to Action 在頁面中看上去非常突出,剩下的其它元素就絕不能搶鏡頭
就算你想試圖追求對比效果打中消費者的心,也不能發生衝突

( 追求色彩合諧、不因落差過大導致反感的同時,亦能突顯視覺效果 )

當然,也許你不知何者對你最好,因此如果情況允許的話按鈕、文案描述請交叉測試即知囉

形狀 
對於大多數人來說它們常見或即有認知都覺得應該是「帶有圓角的矩形方框」
所以我們就先從這個開始來討論為何會用它的原因吧
  • 圓形邊緣向內通常指向按鈕上的文案;而直邊則向外指向名單收集頁的其它部份
  • 圓形邊緣在認知處理上可花費較少時間
  • 人們本能地認為過於尖銳的型體需要圓潤來修飾
當然還有最重要的原因就是「它已被延用許多,所以被當作一種標準規格
使得一旦出現它,即為 "按我,然後繼續下一步" 的明示」

就算你今天不想用「帶有圓角的矩形方框」,也需讓人們覺得這具有引導之用


( 在 Basecamp 裡,你會看到嘗試利用詼諧逗趣的視覺引導取代傳統生冷的按鈕與文字描述;但是這樣的風險在於 "如果它看起來毫無任何引誘點擊的樣子,人們就不會點擊它" )

( 畫面採 "極簡風" 的 Tinder,不用找老半天就直接知道要點那裡 )

而如果你想來點什麼不同的好增加吸引效果的話,可以在按鈕上放上箭頭試試

( 少了箭頭轉換率就掉下來了 - 如果按鈕看上去不明顯,用戶就可能不會意識到需要去按它。因此在按鈕中添加箭頭好提醒用戶注意,同時仍然在保留傳統形狀的情況下,讓用戶確切地知道在哪裡點擊 )

註:更多帶有轉換效果的設計規範請見 How to Design Call to Action Buttons that Convert



尺寸
太小易被忽略,但太大又令人感到壓迫,因此力求平衡是首推需遵守的鐵則

( 就頁面編排的角度來看,各元素平均置放、距離算拿捏得當 )

另外,亦需考慮背景色的對比

( 以 Cubicle Ninjas 來說,在 "色系接近、比說明文字小許多、動態 GIF 背景" 的情況下其實按鈕蠻容易視而不見的 )

因此我建議與一個不那麼寬的按鈕相比,若使用垂直形式的表單,使它整體看上去像一個按鈕,則可在看起來更像視覺漏斗的情況下增加轉化率

位置
擺放的位置和大小同樣重要,一旦搞錯就會讓訪客覺得不自然,當然也會影響轉換率

對此,在 Why Users Click Right Call to Actions More Than Left Ones 這篇文章告訴你:「人們視覺熱點通常對先往左上方瞧,再以橫向方式向右瀏覽查看右上方是否有異於平常所見的物體?而左下方最易被忽略不看,因此 "右下" 方才是你該著重的終極位置」→ 確認是否掃瞄完壁,所以別輕易放棄最後的引人注目機會

而有種情況不曉得你是否有見過?
當你向下捲動頁面時,在最上方的工具列仍舊保持在畫面最上方完全不會消失或隱藏
這樣作的目的自然是確保有提醒訪客可隨時點擊,而不用強迫慢慢捲回滾軸少了很多麻煩

但不管如何切記一定要在按鈕附近保持整潔不雜亂,如有必要也要分隔區別其它按鈕以利辨別

 ( 城邦會員登入頁面,將登入方式分開由訪客自行選擇 )

另外,針對智慧型手機的用戶更是不能忽略,特別電子商務網站想讓人們便於瀏覽
如果還沒作好適當優化,就等同放棄商業大餅 ...

( 即便是登入頁面,也得記得作好該作的功課,更別說像購物車等按鈕了 )

測試再測試
剛剛你在上面看到我所講的方式不一定 100% 適用在各種情況,唯有多方嘗試才知何者效益最佳

首先,請先從 "謎謎眼" 開始 - 假設在 "看似可視範圍減小且模糊不清" 的情況下 Call to Action 仍清晰可見才算 OK,否則就交叉測試上述的顏色等指標

如果你仍抓不出個頭緒,就請用 Crazy EggTobii ProUserTesting 來幫你作 "熱圖分析" - 藉由訪客行為來觀查該怎樣作才是最科學的

最後,調查、詢問你現有客戶它們是否還有印象當初為何、註冊的理由
藉由它們的反饋亦是修正缺失並將效益最大化的良方

最後的提醒
當然,再怎麼作也比不上你是否有正確將流量導向目標受眾,以及你的提案吸晴程度如何
會遠比你作了老半天的工作,但根本不對盤搞錯最初方向,導致無法成交等狀況還慘

總之,在你立即開始嘗試所有提示之前請記住:「你要專注於用戶將收到的價值以及將 CTA 放在人們很容易找到的地方 - 我相信只要作完好這些事,想完成增加點擊率等夢想就不是難事!」

電子書填表下載:7 Tips for a Killer Call-to-Action