成都網(wǎng)站建設(shè)結(jié)帳頁(yè)面設(shè)計(jì)：終極指南

產(chǎn)品頁(yè)面的轉(zhuǎn)換效果如何都沒(méi)關(guān)系。如果您的結(jié)帳頁(yè)面漏水，您就不會(huì)賺錢(qián)。

許多公司在優(yōu)化電子商務(wù)網(wǎng)站上浪費(fèi)了數(shù)千 美元，卻在結(jié)帳頁(yè)面上留下了明顯的錯(cuò)誤。

（這意味著他們正在損失成千上萬(wàn)的利潤(rùn)。）

在本指南中，您將學(xué)習(xí)如何重新設(shè)計(jì)您的結(jié)帳頁(yè)面以減少購(gòu)物車(chē)放棄，吸引更多客戶并增加電子商務(wù)商店的收入。

繼續(xù)閱讀。

您必須先理解人們?yōu)槭裁礇Q定購(gòu)買(mǎi)，然后才能鼓勵(lì)他們購(gòu)買(mǎi)更多產(chǎn)品。

在本章中，您將學(xué)習(xí)觸發(fā)購(gòu)物行為的因素，并看到一些電子商務(wù)網(wǎng)站的示例，它們?cè)诠膭?lì)購(gòu)物者購(gòu)物方面做得很好。

霧行為模型

斯坦福大學(xué)一位名叫BJ Fogg的教授研究決策。

他將他的發(fā)現(xiàn)濃縮到了福格行為模型中。

讓我們使用此模型來(lái)說(shuō)明人們?nèi)绾瓮ㄟ^(guò)結(jié)帳進(jìn)行進(jìn)度。

T霧行為模型為 B=MAT。當(dāng)動(dòng)機(jī)和能力高到足以引發(fā)火災(zāi)時(shí)，就會(huì)發(fā)生行為。

積極性很高但耗時(shí)或艱苦的活動(dòng)通常會(huì)導(dǎo)致無(wú)所作為。

同樣，容易進(jìn)行的活動(dòng)（具有較高的能力）但不是很積極地導(dǎo)致沮喪和無(wú)聊。

最重要的是，當(dāng)動(dòng)機(jī)或能力不足時(shí)，觸發(fā)器（例如收到有關(guān)您感興趣的產(chǎn)品的電子郵件）將失敗。

這是交易。

如果人們不感興趣，那么大量的營(yíng)銷或文案寫(xiě)作都不會(huì)使他們感興趣。

但是，那些仍然擁有欲望核心的人可以變成買(mǎi)家。

就是這樣。

霧與電子商務(wù)

讓我們看一下電子商務(wù)買(mǎi)家的旅程。

首先，有人加載您的產(chǎn)品頁(yè)面。您可以假設(shè)他們有購(gòu)買(mǎi)產(chǎn)品的動(dòng)力-他們正在研究產(chǎn)品。

購(gòu)物者可能會(huì)在這里下車(chē)的原因很多。他們中的大多數(shù)人可以追溯到動(dòng)力或能力。

動(dòng)機(jī)

：他們對(duì)它的作用不感興趣，似乎不能解決問(wèn)題，或者收益還不夠清楚。

能力

：成本太高，太大/太小，或者他們對(duì)自己對(duì)購(gòu)買(mǎi)的滿意程度有疑問(wèn)。

T該觸發(fā)器

是"加入購(gòu)物車(chē)"按鈕。

有時(shí)還有其他激勵(lì)因素：

訂單金額超過(guò)$ <免運(yùn)費(fèi)> 在<重要日期>之前交貨（如果您在接下來(lái)的<少量>小時(shí)內(nèi)購(gòu)買(mǎi)），或者 看到其他人只是實(shí)時(shí)購(gòu)買(mǎi)了類似產(chǎn)品

我們已經(jīng)討論了很多如何提高產(chǎn)品頁(yè)面轉(zhuǎn)換率。

假設(shè)觸發(fā)了觸發(fā)器，他們將產(chǎn)品添加到了購(gòu)物車(chē)中。恭喜你！

現(xiàn)在，下一步：讓他們結(jié)帳。

讓我們?cè)俅巫裱Ｐ汀?p>

這開(kāi)始有意義嗎？如果仍有不清楚的地方，請(qǐng)?jiān)谠u(píng)論中告知我們。

根據(jù)Baymard的研究，有69.57％的購(gòu)物者放棄了購(gòu)物車(chē)。

這似乎很愚蠢，但有時(shí)人們不知道您的網(wǎng)站是否確實(shí)將產(chǎn)品添加到了購(gòu)物車(chē)中。

所以他們?cè)俅翁砑恿?..

否則他們會(huì)感到困惑...

無(wú)論哪種方式，您都無(wú)法使他們的生活更輕松。

在本章中，您將學(xué)習(xí)如何優(yōu)化"添加到購(gòu)物車(chē)"體驗(yàn)。

顯示明確的確認(rèn)

的方法是使用動(dòng)畫(huà)。

但是哪些動(dòng)畫(huà)呢？

我們已經(jīng)看到了一些技巧：

動(dòng)畫(huà)購(gòu)物車(chē) 設(shè)置"添加到購(gòu)物車(chē)"按鈕的動(dòng)畫(huà) 在購(gòu)物車(chē)上或CTA下方顯示確認(rèn)消息

讓我們來(lái)看一下。

購(gòu)物車(chē)動(dòng)畫(huà)

使用動(dòng)畫(huà)顯示購(gòu)物者的購(gòu)物車(chē)內(nèi)容，而不是加載新頁(yè)面。人們通常會(huì)先檢查購(gòu)物車(chē)中的內(nèi)容，然后再添加更多內(nèi)容。這樣一來(lái)，他們就可以留在您的產(chǎn)品頁(yè)面上。

CTA 動(dòng)畫(huà)

鼓勵(lì)購(gòu)物者單擊帶有小動(dòng)畫(huà)的"添加到購(gòu)物車(chē)"按鈕（即，提高他們的能力）。

確認(rèn)訊息

當(dāng)有人將商品添加到購(gòu)物車(chē)時(shí)，提供正面的反饋。

在此示例中，Oui Shave使用動(dòng)畫(huà)顯示購(gòu)物車(chē)內(nèi)容。

但這不是唯一的方法。您可以在購(gòu)物車(chē)圖標(biāo)上顯示一條通知，然后將其攪動(dòng)以達(dá)到相同的效果。

接下來(lái)發(fā)生什么？

那取決于你的目標(biāo)。

您應(yīng)該 始終向他們顯示購(gòu)物車(chē)中的物品。

從那里，您有2個(gè)選擇。

目標(biāo)A：獲得更多的首次客戶

鼓勵(lì)此人盡快結(jié)帳。一旦從購(gòu)物者轉(zhuǎn)變?yōu)橘?gòu)買(mǎi)者，他們更有可能再次購(gòu)買(mǎi)。

目標(biāo)B：提高平均訂單價(jià)值

如果您有大量使用小推車(chē)結(jié)帳的回頭客，這是的選擇。

向他們展示追加銷售和交叉銷售，以鼓勵(lì)他們以更大的購(gòu)物車(chē)價(jià)值結(jié)賬。

下一個(gè)重要步驟是顯示購(gòu)物車(chē)中的物品。

毫無(wú)疑問(wèn)，購(gòu)物者會(huì)對(duì)他們的購(gòu)物車(chē)中的東西或花費(fèi)多少錢(qián)感到懷疑。畢竟，出人意料的成本是促使人們放棄購(gòu)物車(chē)的巨大誘因。

（是的，B = MAT也適用！）

同樣，對(duì)于他們來(lái)說(shuō)，更改數(shù)量或從購(gòu)物車(chē)中完全刪除物品應(yīng)該不費(fèi)吹灰之力。

在本章中，您將學(xué)習(xí)如何創(chuàng)建出色的購(gòu)物車(chē)體驗(yàn)。

清晰度設(shè)計(jì)

您需要在購(gòu)物車(chē)頁(yè)面上顯示的內(nèi)容是：

購(gòu)物車(chē)中的產(chǎn)品 每種產(chǎn)品的數(shù)量 每個(gè)產(chǎn)品的成本+倍數(shù) 運(yùn)費(fèi)+費(fèi)用 總計(jì)花費(fèi)

讓我們簡(jiǎn)要地看一下。

顯然，您需要向客戶顯示他們購(gòu)物車(chē)中的內(nèi)容。

包括一切。

甚至免費(fèi)的產(chǎn)品。

您應(yīng)該顯示購(gòu)物車(chē)中每種產(chǎn)品的數(shù)量。

如果沒(méi)有產(chǎn)品，請(qǐng)不要顯示。

如果該產(chǎn)品有2，則表明有2。

即使某人擁有某件商品的2件，您仍應(yīng)顯示每件商品的費(fèi)用。

然后顯示該項(xiàng)目的數(shù)量和總成本。

例如$ 19.99 x 2 = $ 39.98。

Baymard Research發(fā)現(xiàn)，有53％的購(gòu)物者放棄了購(gòu)物車(chē)，因?yàn)轭~外的費(fèi)用（運(yùn)輸，稅金和費(fèi)用）過(guò)高。

您不希望在付款信息之前隱藏這些費(fèi)用。

相反，請(qǐng)先顯示它們。

也就是說(shuō)，額外的費(fèi)用會(huì)降低購(gòu)物者的 動(dòng)機(jī) 和完成訂單的能力。

您需要盡一切努力來(lái)彌補(bǔ)這一點(diǎn)。（提供超過(guò)一定門(mén)檻的免費(fèi)送貨，包括商品價(jià)格中的稅費(fèi)等）

驚喜費(fèi)用導(dǎo)致廢棄的購(gòu)物車(chē)！

您需要準(zhǔn)確告知購(gòu)物者在點(diǎn)擊"結(jié)帳"并轉(zhuǎn)到結(jié)帳頁(yè)面之前，他們要為結(jié)帳支付多少費(fèi)用。

購(gòu)物車(chē)控制

不要強(qiáng)迫人們使用"更改"按鈕來(lái)確認(rèn)他們的更改。

相反，只需接受他們所做的修改。

如果他們刪除商品或?qū)①|(zhì)量更改為0，則您的商店應(yīng)將該更改保存在購(gòu)物車(chē)中。

視覺(jué)層次結(jié)構(gòu)：引導(dǎo)他們簽出

您的一行動(dòng)應(yīng)該是繼續(xù)結(jié)帳。

購(gòu)物車(chē)頁(yè)面或彈出窗口上的"結(jié)帳"按鈕應(yīng)突出顯示。

使用大膽的顏色和空白來(lái)創(chuàng)建對(duì)比度（使其突出）。

Away Travel做得很好：

"簽出"按鈕的顏色與頁(yè)面其余部分的顏色不同，周?chē)泻芏嗫瞻?，并且為粗體。

優(yōu)惠券難題

優(yōu)惠券是降低首次購(gòu)買(mǎi)門(mén)檻的好方法（因此可以提高他們成為客戶的能力）。它們也是加強(qiáng)您與現(xiàn)有客戶關(guān)系的好方法。

但是優(yōu)惠券表格可以驅(qū)走（沒(méi)有折扣）沒(méi)有優(yōu)惠券的客戶。

解決方案？

早在2009年，Jakob Nielsen建議將優(yōu)惠券嵌入到電子郵件的鏈接中。當(dāng)購(gòu)物者單擊鏈接時(shí)，該優(yōu)惠券將自動(dòng)應(yīng)用。

從結(jié)帳表格中刪除優(yōu)惠券代碼。

堅(jiān)持購(gòu)物車(chē)內(nèi)容

并非所有人都會(huì)在他們一次訪問(wèn)您的網(wǎng)站時(shí)購(gòu)買(mǎi)商品。

但是，如果有人將商品添加到他們的購(gòu)物車(chē)中，離開(kāi)您的商店，回來(lái)，然后發(fā)現(xiàn)該商品不再在他們的購(gòu)物車(chē)中...？

您也不會(huì)去尋找它，對(duì)嗎？

這相當(dāng)于您的計(jì)算機(jī)崩潰并吃掉未保存的工作的電子商務(wù)。真令人沮喪！有了選擇，大多數(shù)人都會(huì)走開(kāi)。

堅(jiān)持購(gòu)物車(chē)中的物品以解決此問(wèn)題。

開(kāi)設(shè)帳戶是購(gòu)物者的主要落腳點(diǎn)。

實(shí)際上，由于強(qiáng)制注冊(cè)，有31％的購(gòu)物者放棄了購(gòu)物車(chē)。

但是注冊(cè)對(duì)于您的業(yè)務(wù)仍然很重要；創(chuàng)建帳戶的客戶將來(lái)會(huì)擁有更流暢的結(jié)帳頁(yè)面體驗(yàn)。

在本章中，您將學(xué)習(xí)如何充分利用這兩個(gè)方面：創(chuàng)建帳戶和降低購(gòu)買(mǎi)放棄率的客戶。

繼續(xù)閱讀。

不要強(qiáng)行注冊(cè)

需要重復(fù)。

認(rèn)真地，停止這樣做。

您應(yīng)該改用以下方法：

您在此處使用的語(yǔ)言會(huì)產(chǎn)生影響。不要強(qiáng)迫人們?cè)?quot;登錄"和"注冊(cè)"之間進(jìn)行選擇。讓他們?cè)?quot;回頭客"和"新客戶"之間進(jìn)行選擇。

更好的是：假設(shè)他們沒(méi)有帳戶，但可以給他們選擇登錄結(jié)帳頁(yè)面的選項(xiàng)。

與前面的技巧相似。

如果用戶沒(méi)有帳戶，將用戶定向到登錄頁(yè)面會(huì)浪費(fèi)時(shí)間。

而是在"回頭客"和"新客戶"之間選擇，僅將回頭客發(fā)送到登錄頁(yè)面。

您應(yīng)該為新客戶做的一件事就是索要他們的電子郵件。

為什么?

因?yàn)楝F(xiàn)在，即使他們沒(méi)有結(jié)帳，您仍然可以向他們發(fā)送市場(chǎng)營(yíng)銷電子郵件。換句話說(shuō)，您可以向他們發(fā)送提醒以進(jìn)行結(jié)帳。

現(xiàn)在，客戶已經(jīng)確認(rèn)了他們的訂單，是時(shí)候提示他們進(jìn)行帳戶了。

為什么？

好吧，一方面，還有什么要做？

但更重要的是：他們已經(jīng)做了大事。他們購(gòu)買(mǎi)了商品。他們已經(jīng)從"購(gòu)物者"轉(zhuǎn)變?yōu)?quot;買(mǎi)方"。

買(mǎi)家有賬戶。

流程的最后是向某人提供創(chuàng)建帳戶的動(dòng)力的好時(shí)機(jī)。

他們剛剛完成購(gòu)買(mǎi)。他們?cè)谀拇_認(rèn)/謝謝頁(yè)面上。

這是設(shè)置下一次購(gòu)買(mǎi)的好機(jī)會(huì)。在下次購(gòu)買(mǎi)時(shí)提供折扣或免費(fèi)送貨。如果他們創(chuàng)建了一個(gè)帳戶，可以向他們當(dāng)前購(gòu)買(mǎi)的東西免費(fèi)贈(zèng)送（或添加免費(fèi)贈(zèng)品）。

即使您進(jìn)行了上述所有操作，如果您的結(jié)帳頁(yè)面過(guò)于令人生畏，那么人們將趁機(jī)保釋。

您所做的所有工作都是浪費(fèi)。

幸運(yùn)的是，我們可以使用心理學(xué)研究和好實(shí)踐來(lái)盡可能減少這種情況的發(fā)生。

繼續(xù)閱讀。

在結(jié)帳頁(yè)面上最后詢問(wèn)帳單信息

先大問(wèn)小問(wèn)。

遵守小要求的人更有可能也遵守大要求。（這被稱為"踩腳技術(shù)"。）

您的結(jié)帳表格上要求高的是什么？

它的帳單信息-他們必須找到他們的錢(qián)包，掏出他們的卡，然后打成一堆不同的號(hào)碼。這比鍵入他們的名字需要更多的投入。

使用多步驟表單

對(duì)于某些人來(lái)說(shuō)，即使看到"難題"也會(huì)導(dǎo)致他們跳船。

對(duì)于其他人，這是表格長(zhǎng)度的問(wèn)題?？吹剿麄冃枰顚?xiě)的全部?jī)?nèi)容太嚇人了，或者是他們保釋的借口。

但是，如果您使用多步驟表單，則可以完全避開(kāi)這種擔(dān)心。

使用擬態(tài)付款表格（使您的付款表格看起來(lái)像卡一樣）

如果您將付款表的結(jié)構(gòu)看起來(lái)像一張卡片，則可以使您的付款表的威脅程度降低。

這對(duì)您的客戶來(lái)說(shuō)是一個(gè)有用的視覺(jué)幫助：字段上的卡號(hào)告訴他們?cè)诳ㄉ系哪睦锟础?p>

它消除了一個(gè)步驟，即使它很小。

這是我們的一位設(shè)計(jì)師模擬的示例。隨意使用它作為起點(diǎn)。

在結(jié)帳頁(yè)面上確保付款安全

人們提防信用卡信息盜竊。

如果您的付款網(wǎng)關(guān)看起來(lái)不安全，則將觸發(fā)該保護(hù)措施。

（按照福格的說(shuō)法，您會(huì)扼殺他們繼續(xù)結(jié)帳的動(dòng)力。）

如何使付款字段看起來(lái)安全？

創(chuàng)建視覺(jué)顯著性

圖片來(lái)自Baymard

Baymard模擬了2個(gè)付款表格版本。一個(gè)（A）在付款信息和其他信息之間沒(méi)有區(qū)別。第二個(gè)專門(mén)列出付款表格。

顯然，第二個(gè)并不比一個(gè)安全—視覺(jué)設(shè)計(jì)對(duì)交易的安全性沒(méi)有影響。但感覺(jué)更安全給客戶。

壓出結(jié)帳頁(yè)面上的可視錯(cuò)誤

尤其是在結(jié)帳過(guò)程中，如果看起來(lái)有些腥，人們會(huì)認(rèn)為是。

不要讓化妝錯(cuò)誤破壞您的銷售機(jī)會(huì)。

將卡存儲(chǔ)在系統(tǒng)中

對(duì)于回頭客-通過(guò)將他們的運(yùn)送和賬單信息存儲(chǔ)在系統(tǒng)中，使結(jié)帳頁(yè)面的使用過(guò)程輕松自如。

這大大減少了他們需要進(jìn)行的點(diǎn)擊和操作的數(shù)量。

（這意味著您已經(jīng)提高了他們完成結(jié)帳流程的能力?。?p>

如果您只能對(duì)擁有帳戶的購(gòu)物者執(zhí)行此操作，則可以將其設(shè)置為帳戶創(chuàng)建要求的一部分。

在吸引人們結(jié)賬時(shí)，移動(dòng)平臺(tái)面臨著一系列獨(dú)特的挑戰(zhàn)。

首先，移動(dòng)用戶更有可能保釋。

由于需要額外的點(diǎn)擊，因此表單也很難填寫(xiě)。

在本章中，您將學(xué)習(xí)如何創(chuàng)建一個(gè)可轉(zhuǎn)換的移動(dòng)結(jié)帳頁(yè)面。

購(gòu)物車(chē)好做法

移動(dòng)設(shè)備上大的體驗(yàn)障礙歸結(jié)為加載時(shí)間。

這是移動(dòng)設(shè)備比臺(tái)式機(jī)具有更少的處理能力。更少的處理能力意味著點(diǎn)擊和操作之間的延遲更多。

如果您讓人們點(diǎn)擊很多，那會(huì)讓他們等待很多。

（而且我們討厭等待。）

給購(gòu)物車(chē)添加反饋

就像在臺(tái)式機(jī)上一樣，當(dāng)有人將產(chǎn)品添加到購(gòu)物車(chē)中時(shí)，請(qǐng)使其清晰。

在這里，赫歇爾做了兩件事：

他們顯示一個(gè)模型，向購(gòu)物者確認(rèn)他們已將產(chǎn)品添加到購(gòu)物車(chē)中 他們更改了CTA文字，以確認(rèn)購(gòu)物者已將產(chǎn)品添加到購(gòu)物車(chē)中

這些是對(duì)UX的小改進(jìn)，可以大有幫助，尤其是在移動(dòng)設(shè)備上。

提供對(duì)購(gòu)物車(chē)的快速訪問(wèn)

不要讓您的客戶加載新頁(yè)面來(lái)查看他們的購(gòu)物車(chē)。

在移動(dòng)設(shè)備上使用下拉菜單或滑出按鈕更為重要。

Herschel在他們的工作上做得很好。

輕松更新購(gòu)物車(chē)內(nèi)容

如果購(gòu)物者必須努力更新其購(gòu)物車(chē)中的物品，則可能會(huì)完全疏遠(yuǎn)他們。

不要刷新頁(yè)面。

不要讓他們使用"更新"按鈕來(lái)提交更改。

在每個(gè)使用AJAX更改其購(gòu)物車(chē)內(nèi)容的商品旁邊實(shí)現(xiàn)一個(gè)"刪除"按鈕（因此不會(huì)強(qiáng)制刷新頁(yè)面）。

（這里，在EOS的情況下，我們不確定如果單擊"刪除"而不是"更新購(gòu)物車(chē)"會(huì)發(fā)生什么—該產(chǎn)品確實(shí)被刪除了嗎？）

支持切換設(shè)備的能力

有些人會(huì)在手機(jī)上購(gòu)物，但要等到他們到達(dá)計(jì)算機(jī)后才能實(shí)際結(jié)帳。

蘋(píng)果具有出色的切換功能。但是Android用戶無(wú)權(quán)訪問(wèn)。

相反，您應(yīng)該讓人們有機(jī)會(huì)登錄以跨設(shè)備同步他們的購(gòu)物。

表單字段和輸入好實(shí)踐 顯示正確的鍵盤(pán)

您想知道什么煩人嗎？

當(dāng)您的客戶輸入他們的信用卡號(hào)時(shí)，您會(huì)使用標(biāo)準(zhǔn)鍵盤(pán)出示他們。

如果有人在數(shù)字字段（信用卡信息，電話號(hào)碼等）中輸入內(nèi)容，請(qǐng)給他們一個(gè)號(hào)碼頁(yè)。

同樣，在電子郵件字段中使用特殊的電子郵件關(guān)鍵字。

根據(jù)先前的輸入來(lái)預(yù)填充字段（用于回頭客）

如果某人在您的帳戶中有一個(gè)帳戶，則您應(yīng)保存其信息，并在下次結(jié)帳時(shí)預(yù)先填寫(xiě)表格。

這使得后續(xù)購(gòu)買(mǎi)更加無(wú)縫。它減少了點(diǎn)擊次數(shù)（總是在移動(dòng)設(shè)備上獲得獎(jiǎng)勵(lì)），并降低了完成結(jié)帳流程所需的花費(fèi)。

使用瀏覽器自動(dòng)填充名稱，地址，電子郵件，電話，密碼和信用卡信息

您要確保您的商店與Safari和Chrome瀏覽器自動(dòng)填充兼容。

為什么?

因?yàn)闉g覽器自動(dòng)填充功能可為購(gòu)物者節(jié)省大量時(shí)間和精力。（這增加了他們完成結(jié)帳過(guò)程的能力。

為狀態(tài)和付款到期日期設(shè)置長(zhǎng)下拉菜單

長(zhǎng)時(shí)間下拉列表對(duì)移動(dòng)用戶不利。

它們需要過(guò)多的滾動(dòng)，并且通常比簡(jiǎn)單鍵入花費(fèi)更多的時(shí)間。

讓您的購(gòu)物者在這些字段中輸入。

我們知道選擇令人沮喪。

我們還知道，當(dāng)您強(qiáng)迫某人做出選擇時(shí)，就是在稀釋他們的某些智力。

看看Vineyard Vines的作用：

他們有三種不同的結(jié)帳CTA。

不要這樣 擁有一個(gè)CTA（結(jié)帳），然后讓人們可以選擇要付款的方式。

Apple Pay可讓Apple用戶快速結(jié)帳。Google Pay對(duì)Android用戶也是如此。它消除了最困難的步驟：輸入信用卡信息。

幸運(yùn)的是，Shopify和WooCommerce都具有內(nèi)置的Apple and Google Pay功能。

您只需要在設(shè)置上激活它即可。

這是低掛的水果，但很容易忽略。再檢查一遍！