如何設計可轉換的電子商務結賬流程

已發表: 2021-07-22

您的電子商務結賬流程就是資金所在。 想想看。隨機訪問者在進入結賬漏斗之前就離開了網站。有動力的買家來這裡完成他們的訂單。

結帳用戶體驗中的任何小設計改進通常都會直接影響您網站的收入。

我最近分析的一個電子商務網站有一個支付頁面，其中 84.7% 的流量用於購買。我計算出，如果我們能將其提高到 90%，這將增加 461 個訂單和每月額外的 87,175 美元——收入增長 23.9%。 “小”收益可以是巨大的。

所以，問題是，“我們如何讓更多的人通過我們的結賬流程並完成購買？具體策略取決於您的網站，但提出答案的原則是通用的。

考慮電子商務結賬的框架：Fogg 行為模型

底線是這樣的：行為 = 動機 x 能力 x 觸發。

這是模型：

你想瞄準圖表的右上角——積極性高、容易做、觸發就位。如果你有高動機和低能力（很難做到），你會得到的是挫折。如果動機不強但容易做（例如倒垃圾），你會很煩惱。

亞馬遜如何使用 Fogg 行為模型

當亞馬遜向您發送一封包含產品促銷信息的電子郵件時，這就是動機和触發因素。人們點擊鏈接並進入產品頁面。他們閱讀副本和評論，並查看圖片，所有這些都增加了動力。 “添加到購物車”是啟動結帳過程的觸發器。

能力呢？完成結帳過程有多容易？這就是亞馬遜踢屁股的地方。您只需要輸入密碼並單擊幾次。結賬流程無摩擦。

以下是亞馬遜移動商務應用程序的實際工作流程：

大功告成。讓我們一步一步地完成整個結賬流程，看看什麼才是好的結賬流程。

注意：您可以從我們的綜合電子商務指南報告（專門針對電子商務的 247 項指南）中獲得大量其他電子商務提示。

如何設計“加入購物車”功能和購物車頁面

這一切都始於人們向購物車添加一些東西。訪問者將第一件商品添加到購物車的那一刻，他們不是在瀏覽，而是在購物。

“加入購物車”應該是什麼樣子的？

當人們在您的產品頁面上向購物車添加商品時，會發生什麼？

我不應該愚蠢地明顯他們已經向購物車添加了一些東西。 清除確認。荒謬的是，有多少網站通過不顯示正確的確認或通過顯示難以注意到的微小動畫或確認文本來搞砸這一點。

您不能錯過 Bonobos 中的購物車添加。單擊“添加到購物車”後，購物車會出現一個小動畫，這很好，因為人眼會對運動做出反應。這是一個微妙的視覺提示，表明從訪客到買家的轉變。

倭黑猩猩購物車添加動畫 — 當您單擊“添加到購物車”時，Bonobos 會使用動畫將您的注意力吸引到您的購物車上，然後將您推向結帳處。

購物車內容和“結賬”按鈕也保持可見，直到用戶點擊其他地方。那挺好的。我會將“Checkout”按鈕顏色更改為藍色以外的顏色——它不夠醒目。視覺層次結構中的主要內容是“添加到購物車”按鈕，但產品已經在購物車中。

ASOS 也顯示了一個小動畫。他們打開購物車的內容，然後在幾秒鐘後將其折疊起來。 “添加到購物袋”按鈕也會變為“已添加”，這對買家來說是一個很好的確認：

ASOS結賬動畫 — ASOS 上的下拉菜單不是持久的，它使主要的號召性用語（結賬）遠離購物者的視線。

我會一直打開購物車內容，直到用戶通過單擊某處來做出選擇。這樣，“結帳”按鈕就會一直盯著他們看。

雖然我們總是希望他們購買更多東西，但改進購買一件商品的流程也能帶來巨大的改進。將他們推向結賬處總是一個好主意。

一旦產品進入購物車，然後呢？

主要有兩種方法：

顯示“購物車添加”確認並使用戶保持在同一頁面上。 優點：人們沒有要求移動到另一個頁面，所以沒有驚喜。他們也可能會考慮在結賬前將更多商品添加到購物車中。缺點：他們已經在購物車中擁有他們現在正在關注的產品。如果他們看看他們可能想買的其他東西，那對你會更有用。
將用戶轉移到購物車頁面。 優點：您使他們離付款更近了一步。這也是進行追加銷售的絕佳機會。缺點：您可能會失去最大化“每個購物車的物品”的機會。

亞馬遜將您帶到購物車頁面，確認您已將產品添加到購物車，並向您顯示追加銷售。亞馬遜做得好的是縮小購物車內容，因此加售脫穎而出：

潛在策略的正確平衡取決於您的行業和目標，您肯定想對此進行測試。

要記住的指標：

平均交易價值；
每筆交易的平均數量。

我們不想單獨增加交易數量，也不想增加每筆交易的花費。

很好地顯示購物車內容

有效顯示購物車內容的關鍵原則是清晰和可控。

明晰。 了解購物車中的物品和最終成本（包括運費和稅費）非常容易且顯而易見。線下的驚喜成本使人們放棄購物車。
控制：很容易進行更改，例如更新數量或刪除產品。

ASOS 對購物車頁面有很好的理解：

他們做對了什麼：

產品照片；
產品名稱及價格；
能夠刪除、保存以備後用或更改大小等細節；
顯示他們接受的付款類型；
顯示總價並確認免費送貨；
清除“結帳”號召性用語；
通過突出“輕鬆回報”來減少不確定性。

Indochino 以令人愉悅的極簡主義方式呈現購物車內容。也就是說，該頁面仍然存在一些問題，例如突出的優惠券盒和無法更改數量：

獲得正確的視覺層次結構

視覺層次結構中的第一件事應該是繼續結賬。（測試不同的 CTA。）。應該有兩個號召性用語：一個在購物車上方，一個在購物車下方。

像這樣——兩個結賬按鈕很明顯：

自我們上次審查以來，Modcloth 已經改進了此頁面。以前，更新數量需要打字。現在，您可以使用步進器來增加或減少數量。

請注意，Modcloth 還提供了 PayPal 選項。雖然大多數人更喜歡用信用卡支付，但提供 1-2 種替代支付方式（例如 PayPal、亞馬遜）是一個好主意，並且已被證明有助於轉化。然而，太多的選擇是有害的。

Modcloth 還提醒您，訂單超過 75 美元，他們可以免費退貨和免費送貨。

不要讓優惠券顯眼

當人們看到“在此處輸入優惠券代碼”字段時，他們會覺得不那麼特別。 “我怎麼沒有？” 許多人去谷歌尋找優惠券；許多人永遠不會回來。離開網站尋找優惠券是購物車放棄的常見原因。

所以，這不是一個好主意：

相反，有一個文本鏈接，上面寫著“有優惠券嗎？” 或類似的東西。當有人單擊鏈接時，會出現一個輸入字段 - 就像上面的那樣 - 出現。文字鏈接不那麼突出，所以很少有人會關注它們。

已經擁有優惠券代碼的客戶將尋找一種輸入方法。除非你把它隱藏得很好，否則他們會找到它並能夠應用他們的優惠券代碼。

提醒購物者註意好東西：運輸、退貨和安全

他們什麼時候能收到他們的貨物？運費是多少。是免費的嗎？交易會安全嗎？ 提醒人們。

這是一個示例，顯示了結帳按鈕下方的三個關鍵消息，其中還顯示了“立即安全支付”：

持久推車 FTW

當人們向購物車添加東西時，不要讓購物車內容過期。使用放棄購物車的電子郵件和重新定位的廣告，讓人們在下週或下個月回來，以便他們可以從上次中斷的地方繼續。

註冊過程：要創建一個帳戶或不？

許多電子商務網站都希望買家在購買前先註冊。有些甚至強制註冊（即不註冊就無法購買）。長話短說：不要這樣做。它傷害了轉換。很多。

由於強制註冊，四分之一放棄在線購買。強制註冊是“貪婪營銷者綜合症”的一部分。很容易理解為什麼電子商務營銷人員想要這樣做——他們希望用戶被“鎖定”並會因為他們有一個帳戶而購物更多。

真的是這樣嗎？哦拜託。您在多少個網站上註冊了帳戶？出於這個原因，你現在對他們忠誠嗎？我敢打賭，您沒有多次登錄其中的大多數。

這是一個關於強制註冊的好故事，由可用性大師 Jared Spool 講述：

很難想像一個表單可以更簡單：兩個字段、兩個按鈕和一個鏈接。然而，事實證明，這種形式阻止客戶從主要電子商務網站購買產品，每年高達 300,000,000 美元。更糟糕的是：網站的設計者甚至不知道存在問題。
表格很簡單。這些字段是電子郵件地址和密碼。 按鈕是登錄和註冊。 鏈接是忘記密碼。 它是該站點的登錄表單。這是用戶經常遇到的一種形式。他們怎麼會有問題呢？
問題不在於表單的佈局，而在於表單所在的位置。用戶在他們的購物車中裝滿他們想要購買的產品並按下結賬按鈕後會遇到它。在他們實際輸入信息以支付產品費用之前。

該團隊認為這種形式可以讓回頭客更快地購買。首次購買者不會介意註冊的額外努力，因為畢竟，他們會回來購買更多產品，並且他們會欣賞後續購買的權宜之計。每個人都贏了，對吧？
我們對需要從網站購買產品的人進行了可用性測試。我們讓他們帶上他們的購物清單，我們給了他們購買的錢。他們所需要做的就是完成購買。
我們對首次購物者的看法是錯誤的。他們確實介意註冊。他們對遇到該頁面時不得不註冊感到不滿。正如一位購物者告訴我們的那樣， “我來這裡不是為了建立關係。 我只是想買點東西。”