成都網(wǎng)站建設結帳頁面設計：終極指南

產(chǎn)品頁面的轉(zhuǎn)換效果如何都沒關系。如果您的結帳頁面漏水，您就不會賺錢。

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

（這意味著他們正在損失成千上萬的利潤。）

在本指南中，您將學習如何重新設計您的結帳頁面以減少購物車放棄，吸引更多客戶并增加電子商務商店的收入。

繼續(xù)閱讀。

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

在本章中，您將學習觸發(fā)購物行為的因素，并看到一些電子商務網(wǎng)站的示例，它們在鼓勵購物者購物方面做得很好。

霧行為模型

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

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

讓我們使用此模型來說明人們?nèi)绾瓮ㄟ^結帳進行進度。

T霧行為模型為 B=MAT。當動機和能力高到足以引發(fā)火災時，就會發(fā)生行為。

積極性很高但耗時或艱苦的活動通常會導致無所作為。

同樣，容易進行的活動（具有較高的能力）但不是很積極地導致沮喪和無聊。

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

這是交易。

如果人們不感興趣，那么大量的營銷或文案寫作都不會使他們感興趣。

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

就是這樣。

霧與電子商務

讓我們看一下電子商務買家的旅程。

首先，有人加載您的產(chǎn)品頁面。您可以假設他們有購買產(chǎn)品的動力-他們正在研究產(chǎn)品。

購物者可能會在這里下車的原因很多。他們中的大多數(shù)人可以追溯到動力或能力。

動機

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

能力

：成本太高，太大/太小，或者他們對自己對購買的滿意程度有疑問。

T該觸發(fā)器

是"加入購物車"按鈕。

有時還有其他激勵因素：

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

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

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

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

讓我們再次遵循模型。

這開始有意義嗎？如果仍有不清楚的地方，請在評論中告知我們。

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

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

所以他們再次添加了...

否則他們會感到困惑...

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

在本章中，您將學習如何優(yōu)化"添加到購物車"體驗。

顯示明確的確認

的方法是使用動畫。

但是哪些動畫呢？

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

動畫購物車 設置"添加到購物車"按鈕的動畫 在購物車上或CTA下方顯示確認消息

讓我們來看一下。

購物車動畫

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

CTA 動畫

鼓勵購物者單擊帶有小動畫的"添加到購物車"按鈕（即，提高他們的能力）。

確認訊息

當有人將商品添加到購物車時，提供正面的反饋。

在此示例中，Oui Shave使用動畫顯示購物車內(nèi)容。

但這不是唯一的方法。您可以在購物車圖標上顯示一條通知，然后將其攪動以達到相同的效果。

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

那取決于你的目標。

您應該 始終向他們顯示購物車中的物品。

從那里，您有2個選擇。

目標A：獲得更多的首次客戶

鼓勵此人盡快結帳。一旦從購物者轉(zhuǎn)變?yōu)橘徺I者，他們更有可能再次購買。

目標B：提高平均訂單價值

如果您有大量使用小推車結帳的回頭客，這是的選擇。

向他們展示追加銷售和交叉銷售，以鼓勵他們以更大的購物車價值結賬。

下一個重要步驟是顯示購物車中的物品。

毫無疑問，購物者會對他們的購物車中的東西或花費多少錢感到懷疑。畢竟，出人意料的成本是促使人們放棄購物車的巨大誘因。

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

同樣，對于他們來說，更改數(shù)量或從購物車中完全刪除物品應該不費吹灰之力。

在本章中，您將學習如何創(chuàng)建出色的購物車體驗。

清晰度設計

您需要在購物車頁面上顯示的內(nèi)容是：

購物車中的產(chǎn)品 每種產(chǎn)品的數(shù)量 每個產(chǎn)品的成本+倍數(shù) 運費+費用 總計花費

讓我們簡要地看一下。

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

包括一切。

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

您應該顯示購物車中每種產(chǎn)品的數(shù)量。

如果沒有產(chǎn)品，請不要顯示。

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

即使某人擁有某件商品的2件，您仍應顯示每件商品的費用。

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

例如$ 19.99 x 2 = $ 39.98。

Baymard Research發(fā)現(xiàn)，有53％的購物者放棄了購物車，因為額外的費用（運輸，稅金和費用）過高。

您不希望在付款信息之前隱藏這些費用。

相反，請先顯示它們。

也就是說，額外的費用會降低購物者的 動機 和完成訂單的能力。

您需要盡一切努力來彌補這一點。（提供超過一定門檻的免費送貨，包括商品價格中的稅費等）

驚喜費用導致廢棄的購物車！

您需要準確告知購物者在點擊"結帳"并轉(zhuǎn)到結帳頁面之前，他們要為結帳支付多少費用。

購物車控制

不要強迫人們使用"更改"按鈕來確認他們的更改。

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

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

視覺層次結構：引導他們簽出

您的一行動應該是繼續(xù)結帳。

購物車頁面或彈出窗口上的"結帳"按鈕應突出顯示。

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

Away Travel做得很好：

"簽出"按鈕的顏色與頁面其余部分的顏色不同，周圍有很多空白，并且為粗體。

優(yōu)惠券難題

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

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

解決方案？

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

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

堅持購物車內(nèi)容

并非所有人都會在他們一次訪問您的網(wǎng)站時購買商品。

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

您也不會去尋找它，對嗎？

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

堅持購物車中的物品以解決此問題。

開設帳戶是購物者的主要落腳點。

實際上，由于強制注冊，有31％的購物者放棄了購物車。

但是注冊對于您的業(yè)務仍然很重要；創(chuàng)建帳戶的客戶將來會擁有更流暢的結帳頁面體驗。

在本章中，您將學習如何充分利用這兩個方面：創(chuàng)建帳戶和降低購買放棄率的客戶。

繼續(xù)閱讀。

不要強行注冊

需要重復。

認真地，停止這樣做。

您應該改用以下方法：

您在此處使用的語言會產(chǎn)生影響。不要強迫人們在"登錄"和"注冊"之間進行選擇。讓他們在"回頭客"和"新客戶"之間進行選擇。

更好的是：假設他們沒有帳戶，但可以給他們選擇登錄結帳頁面的選項。

與前面的技巧相似。

如果用戶沒有帳戶，將用戶定向到登錄頁面會浪費時間。

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

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

為什么?

因為現(xiàn)在，即使他們沒有結帳，您仍然可以向他們發(fā)送市場營銷電子郵件。換句話說，您可以向他們發(fā)送提醒以進行結帳。

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

為什么？

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

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

買家有賬戶。

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

他們剛剛完成購買。他們在您的確認/謝謝頁面上。

這是設置下一次購買的好機會。在下次購買時提供折扣或免費送貨。如果他們創(chuàng)建了一個帳戶，可以向他們當前購買的東西免費贈送（或添加免費贈品）。

即使您進行了上述所有操作，如果您的結帳頁面過于令人生畏，那么人們將趁機保釋。

您所做的所有工作都是浪費。

幸運的是，我們可以使用心理學研究和好實踐來盡可能減少這種情況的發(fā)生。

繼續(xù)閱讀。

在結帳頁面上最后詢問帳單信息

先大問小問。

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

您的結帳表格上要求高的是什么？

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

使用多步驟表單

對于某些人來說，即使看到"難題"也會導致他們跳船。

對于其他人，這是表格長度的問題?？吹剿麄冃枰顚懙娜績?nèi)容太嚇人了，或者是他們保釋的借口。

但是，如果您使用多步驟表單，則可以完全避開這種擔心。

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

如果您將付款表的結構看起來像一張卡片，則可以使您的付款表的威脅程度降低。

這對您的客戶來說是一個有用的視覺幫助：字段上的卡號告訴他們在卡上的哪里看。

它消除了一個步驟，即使它很小。

這是我們的一位設計師模擬的示例。隨意使用它作為起點。

在結帳頁面上確保付款安全

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

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

（按照福格的說法，您會扼殺他們繼續(xù)結帳的動力。）

如何使付款字段看起來安全？

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

圖片來自Baymard

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

顯然，第二個并不比一個安全—視覺設計對交易的安全性沒有影響。但感覺更安全給客戶。

壓出結帳頁面上的可視錯誤

尤其是在結帳過程中，如果看起來有些腥，人們會認為是。

不要讓化妝錯誤破壞您的銷售機會。

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

對于回頭客-通過將他們的運送和賬單信息存儲在系統(tǒng)中，使結帳頁面的使用過程輕松自如。

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

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

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

在吸引人們結賬時，移動平臺面臨著一系列獨特的挑戰(zhàn)。

首先，移動用戶更有可能保釋。

由于需要額外的點擊，因此表單也很難填寫。

在本章中，您將學習如何創(chuàng)建一個可轉(zhuǎn)換的移動結帳頁面。

購物車好做法

移動設備上大的體驗障礙歸結為加載時間。

這是移動設備比臺式機具有更少的處理能力。更少的處理能力意味著點擊和操作之間的延遲更多。

如果您讓人們點擊很多，那會讓他們等待很多。

（而且我們討厭等待。）

給購物車添加反饋

就像在臺式機上一樣，當有人將產(chǎn)品添加到購物車中時，請使其清晰。

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

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

這些是對UX的小改進，可以大有幫助，尤其是在移動設備上。

提供對購物車的快速訪問

不要讓您的客戶加載新頁面來查看他們的購物車。

在移動設備上使用下拉菜單或滑出按鈕更為重要。

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

輕松更新購物車內(nèi)容

如果購物者必須努力更新其購物車中的物品，則可能會完全疏遠他們。

不要刷新頁面。

不要讓他們使用"更新"按鈕來提交更改。

在每個使用AJAX更改其購物車內(nèi)容的商品旁邊實現(xiàn)一個"刪除"按鈕（因此不會強制刷新頁面）。

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

支持切換設備的能力

有些人會在手機上購物，但要等到他們到達計算機后才能實際結帳。

蘋果具有出色的切換功能。但是Android用戶無權訪問。

相反，您應該讓人們有機會登錄以跨設備同步他們的購物。

表單字段和輸入好實踐 顯示正確的鍵盤

您想知道什么煩人嗎？

當您的客戶輸入他們的信用卡號時，您會使用標準鍵盤出示他們。

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

同樣，在電子郵件字段中使用特殊的電子郵件關鍵字。

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

如果某人在您的帳戶中有一個帳戶，則您應保存其信息，并在下次結帳時預先填寫表格。

這使得后續(xù)購買更加無縫。它減少了點擊次數(shù)（總是在移動設備上獲得獎勵），并降低了完成結帳流程所需的花費。

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

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

為什么?

因為瀏覽器自動填充功能可為購物者節(jié)省大量時間和精力。（這增加了他們完成結帳過程的能力。

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

長時間下拉列表對移動用戶不利。

它們需要過多的滾動，并且通常比簡單鍵入花費更多的時間。

讓您的購物者在這些字段中輸入。

我們知道選擇令人沮喪。

我們還知道，當您強迫某人做出選擇時，就是在稀釋他們的某些智力。

看看Vineyard Vines的作用：

他們有三種不同的結帳CTA。

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

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

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

您只需要在設置上激活它即可。

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