如何用CTA的14大關鍵-悄悄影響消費者,提升電商平台轉換率

先前文章提及 教你只用五招讓消費者吸睛,快速提升轉換率! 我們再更深入講解行動號召按鈕(call to action),簡稱CTA按鈕,在各網站以各種不同方式呈現的樣貌,對轉換率有什麼樣的影響。

CTA按鈕設計設計的好就如同你進入實體賣場,有顯眼且鈴聲響亮的服務鈴,只要消費者輕輕按下,他們就可以馬上享受到你最親切專業的服務。而實體賣場的標價卡、POP、活動DM等,就等同於電商平台各式各樣的CTA按鈕,它會因為顏色、大小、字型、位置、動畫等,間接影響消費者的行為模式,像是在提醒他們:「你是不是該買點什麼呢?」

以下將介紹 種,介紹CTA各種樣貌型態:

1. CTA按鈕 要出現在任何載具的第一個網頁畫面中

(電腦、手機、行動裝置等)

你可以先想像消費者在點擊進入某電商平台產品介紹頁面時,該頁面顯示的第一個畫面中(不論PC或行動裝置)沒有任何CTA按鈕的情況下,會多麼讓消費者無所適從,當他想購買這項產品卻不知道該怎麼結帳,很容易讓消費者失去耐心,更別說使用滑鼠滾輪往下慢慢找其他CTA按鈕的位置。

接下來我們來看看擁有各式CTA按鈕的情況,透過上圖我們可以看到除了「我要購買」最基本的CTA按鈕之外、右上方有「社群軟體訂閱分享」按鈕、以及「加入收藏清單」按鈕、左下方有「促銷活動」按鈕等。

只要盡量排版將網頁呈現的第一個畫面中置入適當CTA按鈕,盡可能讓消費者以最迅速直覺的方式,幫助他們進入你的電商平台了解你的產品及服務,並快速完成購物流程、表單填寫等,這組CTA按鈕就完成它的目的。

2. CTA按鈕周圍要有選擇產品規格選項

承續上一點,一在電子商務平台中,通常在「我要購買」、「加入購物車」等CTA按鈕附近,都會有尺寸、顏色等產品規格的選項,並且讓這些規格能夠順利加入購物車中,而不是選了規格之後,進入購買結帳頁面後,還要再重新選擇規格。

3. 標準簡潔的CTA按鈕

由上圖就可以很明顯的比較出兩組CTA按鈕,光是字體大小,呈現出的效果就有相當大的不同,很明顯右邊的的CTA按鈕很難一眼就看出它所想表達的內容,這是設計CTA按鈕時,必須注意的細節。

CTA按鈕中的內文讓消費者淺顯易懂連結上消費者第一直覺相當重要,這與上一篇教你只用五招讓消費者吸睛,快速提升轉換率! 內文中提到文案標題不易過長是一樣的道理。

通常電商平台常使用的標準CTA按鈕有「加入購物車」、「馬上購買」、「立刻購買」、「我想訂閱」等,只要內文辨識度高,若再巧妙配合版面、顏色,那這組CTA按鈕的效果通常會很好。

4. 盡量以單一顏色背景呈現CTA按鈕

如同上圖所提到 簡潔標準的CTA按鈕,素色單一的背景色,有時候更能襯托CTA按鈕的重要性與即時性,提高該CTA按鈕的點擊機率。

網頁背景花色過多就會如同上方網頁的樣式,很難讓消費者一眼就看出圖中的黃色CTA按鈕所要表達的意思。

雖然全球還是有公司使用此種CTA按鈕設計,當中也有少數成功案例,但此種網頁設計方式大多適合設計產業,以及積極表達活潑性質的公司,此種大膽的設計在電商購物平台中須審慎思考使用時機。

花色過多的成功案例也不是沒有,Airbnb透過主頁背景影片切換的方式,展現你在全球任何一個角落居住時,美好的想像,加上「歡迎回家」這句slogan,即使你是第一次來到Airbnb首頁,也會因為這種感動點下「如何使用Airbnb」這樣的CTA按鈕。

5. 避免邊框太花俏的CTA按鈕

有些CTA按鈕設計的太過浮誇,在邊框加上浮雕、陰影樣式,對於消費者而言同樣是種擾人的設計,重點還是讓消費者能一目了然知道CTA按鈕的內文,以及他們接下來點擊後可以進入到網站的哪一個行動階段。

6. CTA按鈕顏色要和網站設計調性相同

這點就會牽扯到設計概念與色彩學延伸,對比顏色必須符合網站色彩整體調性,但又不可以過度喧賓奪主,搶了背景、內文、CTA按鈕間彼此的風采,主要還是要著重在「整體網頁設計協調性」。

像上圖右方的CTA按鈕設計就是過於融入背景,已經失去CTA按鈕該有的意義了,有些消費者甚至可能不知道這是一組CTA按鈕,左方的設計才是配合整體網頁設計,又不會過度搶眼的CTA按鈕設計。

7. 不要將CTA按鈕置於網頁內文、產品介紹之前

許多電子商務網站透過數據研究,只要是將CTA按鈕放在網頁內文、產品介紹前方,通常銷量不會太好,這其實可以透過直覺思考去理解,一般消費者通常在還未了解你的產品和服務之前,很難想也不想、二話不說就把他們荷包的錢掏出來送到你面前。

因此你的CTA按鈕通常會放在顯眼處,或是放在讓消費者感動的位置之後,會是相對比較適當的做法,也有搭配以上方式,在網頁多處都放置CTA按鈕。

但是以上方式是在不擾亂消費者購物體驗為前提,例如: 一個產品網頁放置超過10個以上CTA按鈕,幾乎產品內文每段都放CTA按鈕,那消費者不堪其擾之下,就跳出你的網頁,轉到其他網頁購買類似的商品,而這樣的CTA按鈕則毫無意義。

8. 行動裝置的CTA按鈕必須與PC相同

網頁設計者在設計應用程式介面API (Application Programming Interface)時,必須注意手機或行動裝置的切版,還有CTA按鈕是否可以使用且沿用PC版本的功能及畫面等。

在行動裝置購物崛起的時代,網頁設計者必須測試多種版本、載具的API設計是否順暢,唯獨如此才能創造消費者美好的購物體驗,而資策會MIC針對台灣消費者網購行為進行調查,顯示有64.9%的人曾經以智慧型手機或平板電腦進行網購。但是調查也指出,不論是瀏覽商品資訊或是完成交易,有近7成的台灣消費者還是以PC為主要的線上購物載具。

9. 主次要CTA按鈕

教你只用五招讓消費者吸睛,快速提升轉換率! 這篇文章中同樣有提及主要、次要CTA搭配應用,有時CTA按鈕不一定只有一個選項,也會有多個CTA按鈕供消費者選擇,等於多次曝光你的產品/服務/文章等,形式可以透過了解消費者行為,設計網頁適合的位置。

次要CTA按鈕就是輔助主要CTA按鈕在消費者尚未決定購物時,促使消費者導向其他產品頁面、社群連結、文章介紹、電子報訂閱、問與答、表單填寫等頁面。

如果一個網站沒有次要CTA按鈕,等同於消費者在還未決定是否購買的同時,沒有其他選擇,也就等同消費者離開你電子商務的平台,因此把握時機、位置,適當露出有關你品牌的CTA相當重要。

以下列出次要CTA按鈕的型式給讀者參考,除了以下當然還可以創造更多樣次樣CTA按鈕型式,給消費者全新的體驗。

次要CTA型式:

■ 導流相關產品頁面

■ 倒流相關產品配件頁面

■ 加入購物車的之後再買清單

■ 透過社群媒體、email分享給朋友

■ 前往其他服務頁面

■ 前往問與答頁面

■ 下載產品/服務相關表單

■ 試用產品/工具/網頁功能

10. 產品/服務/文章等,相互連結相當重要

如果很常網購、爬文的讀者,就會發現其實很多電子商務平台、部落格、網路購物商城、自建官網購物頁面等,都會有相關產品相互連結的特性,這樣作一方面加強SEO關鍵字搜尋的優化,也讓消費者在萌起想要找相關產品配件/服務內容/相關文章/軟體工具的那剎那,誘使他們點擊更多網頁內容/行動方向,除了讓消費者更了解你的產品,也消減消費者的疑問,提升轉換率。

國際知名分析版面轉換率效益網站HubSpot曾表示: 「透過內文相互連結的方式,提高120%的轉換率。」

11. 帳戶/結帳頁面的CTA按鈕可使用自稱方式增加親密感

無論從消費者在你的電商平台、自建官網中建立帳戶,成為你的會員,到消費者查詢自己的會員狀態,還是查詢購物車內容,其CTA按鈕常使用「創立我的帳號」、「我的會員狀態」、「我的購物車」,這簡單的改變都可以讓消費者對於你的網站有更深層的記憶印象與情感連結。

12. 關鍵字搜尋欄分類CTA按鈕

Zillow將網站內關鍵字搜尋欄做分類,簡化消費者搜尋文章的時間,讓消費者增加機率找到需要的網頁內容,減少消費者的顧慮,提升轉換率只是時間上的問題。

13. 顏色/形狀CTA按鈕分類

CTA按鈕樣式百百種,但很少有人注意到CTA按鈕的色彩/形狀所代表的意義,以下列出幾點供讀者們參考,相信未來大家也可以適時放在你的電商平台中,巧妙增加轉換率。

CTA按鈕的顏色分類:

■ 紅色: 自信、熱情、力量、青春

■ 橙色: 精力充沛、友善

■ 黃色: 快樂、樂觀、溫暖、忠誠、警告

■ 綠色: 和平、自然、成長、健康

■ 藍色: 信任、合作、安全、穩定

■ 紫色: 高雅、創意、神秘、智慧

■ 黑色: 專業、可靠、高貴、複雜

■ 白色: 簡約、冷靜、純粹、純潔

CTA按鈕的形狀分類:

■ 方形/矩形: 力量、紀律、安全、可靠、勇氣

■ 三角形: 平衡、穩定、興奮、風險

■ 圓形/橢圓: 女性化、宇宙、永恆、魔法、神秘

■ 抽象圖形: 唯一性、精心製作、魔法、神秘

14. 互動式板塊CTA

如上圖,該網站是屬於小額貸款的網站,透過創意式landing page(登入頁面),消費者可以透過調整CTA的金額,進行首次小額貸款,會比「我想貸款」、「加入會員,即可貸款」來的更有趣生動,讓消費者印象深刻。

介紹完大致現有的CTA按鈕後,相信你也可以從設計標準簡潔的CTA按鈕開始,在傾聽客戶需求的過程中,適時適地的置入CTA按鈕,同時常常注意「整體網頁設計協調性」,透過A/B testing分析每一次CTA按鈕更改對你的網站轉換率的改變,甚至是創造全新的CTA模式,為進入你網站的消費者帶來全新體驗。未來我也將分享如何透過A/B testing進行各項分析。

跨境電商-關鍵知識:如何選擇跨境電商代營運公司? 台灣品牌10大選擇關鍵eBay與Amazon如何比較和選擇? |你的產品適合在跨境電商賣嗎? |教你如何快速進軍海外市場打造品牌|該如何選擇比較Amazon亞馬遜-Rakuten樂天? |兩家跨境電商平台的8大差異如何調查品牌在Amazon亞馬遜-eBay-樂天Rakuten的電商市場需求? –9大產品銷售潛力的調查技巧-什麼是亞馬遜賣家一定要會知識?|什麼是FBA 與FBM |有效交互使用節省成本進軍海外市場Amazon亞馬遜物流FBA是什麼? |亞馬遜FBA賣家實用技巧-費用計算教學Amazon亞馬遜台灣/美國賣家註冊常見9大問題-FDA法規-UPC及EAN是什麼-亞馬遜可以賣什麼? 快速掌握關鍵進軍海外市場-Amazon亞馬遜SEO|產品標題最佳化的7大技巧-提升亞馬遜站內排名-產品轉換率什麼是Amazon亞馬遜站內廣告? 亞馬遜站內廣告投放的5大要點什麼是品牌定義? 實用品牌定位策略7步驟,找到你的產品市場定位策略,打造知名品牌Amazon亞馬遜品牌註冊(Amazon Brand Registry)是什麼? 申請亞馬遜品牌註冊的6大優勢Amazon亞馬遜品牌商店(Amazon Store)是什麼? 亞馬遜品牌商店的5大優勢-提升產品刊登自然流量與銷售-Amazon亞馬遜客戶滿意度-8大技巧提升客戶服務Amazon亞馬遜品牌數據分析工具(ABA) -6大功能|提升品牌電商賣家產品銷售-降低廣告費用Amazon亞馬遜產品攝影優化的8大技巧-提升跨境電商消費者購買率-工具推薦:eBay官方推薦跨境電商第三方大數據智能工具-Viewider-搭上跨境電商潮流-服務推薦:亞馬遜代營運諮詢服務

-

【本文作者:Erian-Viewider 行銷部經理我是資深品牌/產品/電子商務/網頁行銷企劃,在此分享電商|行銷|社群|網頁設計|設計、品牌經營等,未來預計將分享職場工作術、各類書評/影評等議題,致力讓各種行銷走入人們的生活,樂於享受自己的工作與學習。【官方網站網址】Viewider跨境電商整合專家【官方粉絲專頁】Viewider跨境電商整合專家 | Wiser亞馬遜代營運管理師【官方合作方式】service@viewider.com.tw(跨境電商免費健檢/代營運/行銷企劃/文案/社群經營/廣告投放/SEO規劃/異業合作等)

台灣視宇 ViewEC | 跨境電商整合專家

台灣第一家整合電商平台數據並發展大數據人工智能工具的代營運服務商。擁有eBay官方認證之推介導師企業及第三方大數據及刊登…

台灣視宇 ViewEC | 跨境電商整合專家

台灣第一家整合電商平台數據並發展大數據人工智能工具的代營運服務商。擁有eBay官方認證之推介導師企業及第三方大數據及刊登軟體工具認證,同時為日本及台灣樂天市場獨家跨境電商合作執行通路。合作請洽:service@viewider.com.tw。

台灣視宇 ViewEC | 跨境電商整合專家

Written by

台灣第一家整合電商平台數據並發展大數據人工智能工具的代營運服務商。擁有eBay官方認證之推介導師企業及第三方大數據及刊登軟體工具認證,同時為日本及台灣樂天市場獨家跨境電商合作執行通路。合作請洽:service@viewec.tw

台灣視宇 ViewEC | 跨境電商整合專家

台灣第一家整合電商平台數據並發展大數據人工智能工具的代營運服務商。擁有eBay官方認證之推介導師企業及第三方大數據及刊登軟體工具認證,同時為日本及台灣樂天市場獨家跨境電商合作執行通路。合作請洽:service@viewider.com.tw。

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store