【UX教室】什麼是CTA?好的CTA把路人變顧客

網站知識

【UX教室】什麼是CTA?好的CTA把路人變顧客

從生活中的CTA,玻璃門上的指示「推」或「拉」,到網路行為的CTA「加入購物車」或「訂閱」,這些銜接在每一步中間的轉換動作,除了引導我們空間或網站的動線外,還有什麼隱藏的功能嗎?如何設計才能讓使用者更容易找到並且按下按鈕呢?

一、CTA定義

CTA為英文 Call To Action 的縮寫,中文譯為「行動呼籲」或「行動喚起」。

通常為Banner、EDM或網站中的一張圖片、一行字、一句短文或一個按鈕,用以引導造訪者對當前頁面做出行動,最簡單的例子像是:下一頁、提交表單等。

二、CTA目的

網站動線引導

購物網站中的「放入購物車」、「結帳」、「繼續購物」等按鈕所扮演的就是動線引導的角色,讓消費者從瀏覽到購物的動線清晰、結帳順暢,才不會流失任何一顆想下單的心。

化被動為主動

「超美長腿神靴特價中」

此頁面中,若將下單按鈕的文字改成「把握限時優惠,立刻擁有美腿」,聽起來是否就比單純的「放入購物車」更具吸引力呢?

優化點擊率

我寄了一封部落格文章通知到已訂閱的使用者手裡,信中,文章只寫了一半,並附上「看完整文章」的按鈕,藉此誘導讀者點進我的部落格來閱讀此篇文章,因為點擊率的多寡也會影響網站的SEO排名。

三、CTA類型範例

當有制定CTA需求,請以當前頁面的內容或目的去選擇CTA的類型,而這些類型不外乎三種,「刺激購買欲」、「接觸群眾」以及「進一步了解」。

類型一:刺激購買

此種網站目標簡單,就是買賣,因此賣家只需要想出能讓造訪者下定決心購買的CTA即可,最常見的範例如「立即下單」、「放入購物車」、一個購物袋或購物車的圖示,也有「搶購去」這種,以「搶」這種有競爭性的字眼刺激造訪者點擊的做法。

類型二:接觸群眾

通常在第一次造訪網站時出現,推動網站主與造訪者「建立連結」,進一步蒐集造訪者訊息,以便下次主動推播通知,是一個把路人轉換成潛在客戶的「過程」。

類型三:進一步了解

通常出現在販售知識型的網站,當造訪者點擊某一內容,即表示對於此話題有興趣,此時,網站主僅需聚焦在如何讓對此話題有興趣的過路客留下或激起造訪者點擊其他話題的興趣,進一步把單次的點擊變成深度閱讀,甚至升級為長期的訂閱。

四、CTA設計要點

位置

顯眼,CTA就是要引導造訪者做出網站主期望他們做的決定,若沒有人看到、沒有人點擊,那麼這個CTA也就沒有意義。

不要太顯眼,大部分時間,CTA為引導角色,不是主角,使用時請避免喧賓奪主。

文字

再次強調,「引導」,讓造訪者「點下去」,是我們的目的,不要給予太多的壓力,而是創造誘因,把點下去後會帶來的好處具象化是一個不錯的方式,就像上面靴子的例子,「把握限時優惠,立刻擁有美腿」。

顏色

顏色可以很跳,但不要跳離網站主色系,否則容易導致網站質感下降,若同時出現正反選項,例如「續費會員」、「取消會員」,則可以使用顏色的深淺、灰階來凸顯其中一個選項。

 

注意,多利用AB test!

有時使用者的喜好出乎意料,不一定會照著我們寫好的劇本走,要驗證CTA最有效的方式,就是用AB測試。以同一個目的,制定不同位置、文字、顏色、大小的CTA,追蹤他們的點擊率,來測試使用者真正的喜歡的設計。

五、真實CTA設計案例與練習

練習一:遊戲決策

遊戲中,設定角色名稱、外觀時,通常會出現「ok」或「重新選擇」這類CTA。假如你今天是遊戲設計人員,為了讓遊戲能夠順利進行,除了「ok」以外,會為它填上什麼呢?

(圖片出處:https://gnn.gamer.com.tw/detail.php?sn=194385

練習二:購物網站

練習二的案例是購物網站,在Loading與Landing page之間出現的Pop-up,主要是為了吸引目光與引發點擊,通常內容不外乎「領券去」、「搶購去」,這些都是購物網站CTA中常見的套路,如果你是購物網站的行銷人員,會為它填上什麼呢?

練習三:金融商品行銷

金融商品活動網頁中出現的CTA,是希望可以取得造訪者資訊,讓理財專員得以將更多資訊傳達給造訪者,最終讓造訪者成為客戶。除了「瞭解更多」這種基本款,如果你是金融業行銷人員,會為它填上什麼呢?

結語

CTA的設定一直都是網頁設計界的百慕達三角洲,沒有人能準確摸透每位造訪者究竟喜歡什麼,只能透過反覆的驗證與調整,才能創造更好的效益。

最後再告訴你一個最簡單的驗證方式—「換位思考」

如果我是這個網站的目標客群,這樣的內容搭配什麼樣的CTA,會讓我更想下單、更想點進去呢?

想讓你的網站獨一無二?現在就聯繫 夏木樂

夏木樂,品牌網頁設計專家,讓我們從網頁設計開始,提供您最優質、有效率的服務。

Ask Simular