用網(wǎng)頁(yè)按鈕形式提高網(wǎng)頁(yè)轉(zhuǎn)換率
想像你在網(wǎng)路商店上看到了喜歡的商品,卻因?yàn)榫W(wǎng)頁(yè)上沒(méi)有購(gòu)買按鈕,只好帶著無(wú)奈又不滿的情緒,投向其他網(wǎng)站的懷抱。許多電商業(yè)者的網(wǎng)站雖然成功吸引大批流量,但成交率卻不高,為什么?很多時(shí)候就是少了有效的支付按鈕(Call to Action, CTA)。
不論是下載檔案、訂購(gòu)商品,或?qū)б狡渌W(wǎng)頁(yè),只要一個(gè)按鈕,就能讓消費(fèi)者完成你期望的動(dòng)作。當(dāng)消費(fèi)者來(lái)到門口,按鈕就是關(guān)鍵的臨門一腳。按鈕的設(shè)計(jì)沒(méi)有規(guī)定的標(biāo)準(zhǔn),最好能配合網(wǎng)站內(nèi)容與整體設(shè)計(jì),不過(guò)電子商務(wù)資訊網(wǎng)站 Econsultancy 和 Shopify 提供了一些重要的基本原則。
強(qiáng)烈對(duì)比的顏色
使用對(duì)比色或明亮顏色(如下圖),讓按鈕跳脫背景色。由于不同色彩有不同聯(lián)想,例如紅色會(huì)制造緊張感、藍(lán)色讓人冷靜,所以色彩的運(yùn)用也須考量其關(guān)聯(lián)性,并與網(wǎng)頁(yè)色彩搭配。記住,吸睛不代表使用夸張的色彩和干擾閱讀的動(dòng)畫(huà)。
資料來(lái)源:Shopify
具動(dòng)作性的用詞
在按鈕中使用簡(jiǎn)單明了的動(dòng)詞,讓消費(fèi)者明確知道點(diǎn)這個(gè)鏈接的作用。最常見(jiàn)的包括「購(gòu)買」、「加到購(gòu)物車」或「下載」等用語(yǔ)。記住,簡(jiǎn)單明了就夠了。
一眼就看到的大小
按鈕要多大才算夠看? Econsultancy 認(rèn)為愈大愈好,不過(guò)最好還是搭配頁(yè)面設(shè)計(jì),才不會(huì)壞了整個(gè)畫(huà)面協(xié)調(diào)度。不過(guò)也有例外情況,必要時(shí)即使多占些版面也沒(méi)關(guān)系。瞧瞧下圖 Firefox 的按鈕,是不是不去看到都不行?
資料來(lái)源:Econsultancy
放在顯眼的位置
人人都知道按鈕應(yīng)該放在顯眼的地方,但哪里才夠顯眼呢?價(jià)格下方或產(chǎn)品清單右邊是最常見(jiàn)的位置。由于消費(fèi)者已經(jīng)習(xí)慣在固定位置看到按鈕,所以不要為了標(biāo)新立異而把按鈕擺在奇怪的地方,以免聰明反被聰明誤。
當(dāng)頁(yè)面內(nèi)容很繁雜時(shí),即使按鈕的設(shè)計(jì)再好,也可能被內(nèi)容淹沒(méi)。在按鈕周圍放些留白可以改善這個(gè)問(wèn)題。
可以的話,盡量讓消費(fèi)者不須下拉網(wǎng)頁(yè)就能獲得必要資訊,方便使用者直接點(diǎn)旁邊的按鈕。如果網(wǎng)頁(yè)內(nèi)容又多又長(zhǎng),可以在網(wǎng)頁(yè)上、下方都置入按鈕。千萬(wàn)別讓消費(fèi)者為了一個(gè)按鈕拉來(lái)拉去。
突顯按鈕的重要性
網(wǎng)頁(yè)上有多個(gè)不同用途的按鈕時(shí),例如「立即購(gòu)買」、「下載試用版」等,可以依按鈕重要性來(lái)設(shè)計(jì),以突顯主要與次要的按鈕。例如 AVG 使用亮橘色呈現(xiàn)最重要的「立即購(gòu)買」鈕,跟其他按鈕做區(qū)隔(下圖)。消費(fèi)者不僅能一眼就看到,還能持續(xù)保持注意力。
資料來(lái)源:Econsultancy
制造急迫性
所謂物以稀為貴,「限時(shí)搶購(gòu)」、「庫(kù)存有限」或「立即下單即享免運(yùn)費(fèi)服務(wù)」等文字會(huì)挑起消費(fèi)者的購(gòu)買欲。 ConversionXL 研究發(fā)現(xiàn),營(yíng)造急迫性可以讓成交率提升332%。將這類型文案搭配上述設(shè)計(jì)的按鈕,將會(huì)有意想不到的效果。
資料來(lái)源:Shopify
適用各種裝置
在多螢時(shí)代,網(wǎng)絡(luò)營(yíng)銷必須通盤考量各種平臺(tái)。因此,不論是pc版或移動(dòng)版網(wǎng)頁(yè)上的按鈕,都必須一樣醒目、好操作。英國(guó)保險(xiǎn)公司 Direct Line 的 iPad 網(wǎng)頁(yè),就讓按鈕以平板裝置消費(fèi)者習(xí)慣的滑動(dòng)方式來(lái)運(yùn)作(如下圖)。
資料來(lái)源:Econsultancy
看似微不足道的按鈕,若能掌握上述設(shè)計(jì)原則,把使用者介面 (UI) 最優(yōu)化,將能把成交率發(fā)揮最大化效果,因此每一個(gè)按鈕都值得被細(xì)心對(duì)待。
- 基于用戶創(chuàng)新
界面設(shè)計(jì)日新月異,夢(mèng)創(chuàng)義堅(jiān)持基于用戶需求的界面創(chuàng)新設(shè)計(jì)……
- 服務(wù)設(shè)計(jì)思維
互聯(lián)網(wǎng)的格局發(fā)生的改變,在我們進(jìn)行設(shè)計(jì)服務(wù)時(shí)更是考慮不同用戶、不同……
- 洞察用戶心理
洞察用戶有意識(shí)和無(wú)意識(shí)的行為以及心理特征通過(guò)構(gòu)造一系列的服務(wù)來(lái)促進(jìn)……
- 查看更多 >>
最新新聞Latest News
- 中小型企業(yè)網(wǎng)站建設(shè)完應(yīng)該如何營(yíng)銷
- 很多中小型企業(yè)往往糾結(jié)于以下10個(gè)問(wèn)題:一、我們起步比別人晚,我們的……
- 做企業(yè)網(wǎng)站到底做給誰(shuí)看?
- 設(shè)計(jì)經(jīng)常時(shí)不時(shí)的遇到一些企業(yè)客戶,常常搞不清楚誰(shuí)會(huì)真正看你的企業(yè)網(wǎng)……
- 傳統(tǒng)企業(yè)進(jìn)軍移動(dòng)互聯(lián)網(wǎng),從移動(dòng)云網(wǎng)站開(kāi)始
- 移動(dòng)互聯(lián)網(wǎng)是移動(dòng)通信和互聯(lián)網(wǎng)融合的產(chǎn)物,其發(fā)展的重要基礎(chǔ)便是智能手……
- 網(wǎng)站建設(shè)和運(yùn)營(yíng)五大細(xì)節(jié)決定用戶黏性
- 網(wǎng)站的成功離不開(kāi)搜索引擎優(yōu)化,更離不開(kāi)最基礎(chǔ)最根本的用戶群體,如何……
- 2015年值得關(guān)注的電子商務(wù)5大趨勢(shì)
- 線上線下銷售的界線正在變得越來(lái)越模糊。在2015年,這一趨勢(shì)仍將繼續(xù)!