SEM.tw
到達頁優化 · · 8 分鐘閱讀 · 4 次閱讀

電商網站結帳頁面設計:降低棄單率的 7 個技巧

從使用者行為的角度拆解電商結帳頁面的設計技巧,提供 7 個經過驗證的方法來降低棄單率,讓更多人完成結帳。

購物車裡的東西有 70% 不會被結帳

這個數字來自 Baymard Institute 對 49 項棄單率研究的綜合分析:全球電商的平均棄單率是 70.19%。

換算一下:如果你的電商網站每天有 100 個人把商品加入購物車,其中 70 個人會在結帳之前離開。他們已經看了你的商品、決定要買了、把東西放進購物車了——然後就走了。

這 70% 裡面有一部分是「只是逛逛」的,你救不回來。但根據同一份研究,有 48% 的棄單是因為結帳流程的問題——額外費用、帳號註冊、流程太複雜、不信任網站、付款選項不夠——這些都是你可以透過設計來改善的。

假設你解決了其中一半的問題,棄單率從 70% 降到 53%,你的營收就增加了 57%。不需要多花一毛錢買流量。

這篇會分享 7 個經過驗證的結帳頁面設計技巧,每一個都直接針對棄單的原因。

技巧一:費用透明——不要在最後才加價

棄單的第一大原因是「額外費用太高」(佔所有棄單原因的 48%)。

訪客看到商品頁上寫 1,500 元,放進購物車,進到結帳頁面,突然變成 1,850 元——運費 150 元、包裝費 50 元、平台服務費 150 元。他覺得被騙了,直接離開。

解決方式很直接:從商品頁就把所有費用說清楚。

商品頁面上標示「運費 150 元,滿 2,000 免運」。購物車頁面即時計算並顯示運費。結帳頁面的金額跟購物車的金額一致,不要在這裡才冒出新的費用。

如果你有免運門檻,在購物車裡面加一個進度條:「再買 500 元就免運費!」這個小設計不只降低棄單率,還能提高客單價。

更好的做法是把運費內含在商品價格裡面(如果商業模式允許的話)。「全站免運」四個字的轉換效果比任何設計技巧都強。

技巧二:允許訪客結帳——不要逼他註冊帳號

棄單的第二大原因是「被要求創建帳號」(佔 26%)。

一個新訪客第一次在你的網站買東西,他只是想買一個充電線。你逼他填 Email、設密碼、驗證 Email、填個人資料——他覺得太麻煩了,去 PChome 買了。

訪客結帳(Guest Checkout)是降低棄單率最有效的單一改動之一。讓訪客在不註冊帳號的情況下完成購買,只需要填寫收件資訊和付款資訊。

「但我想收集客戶資料啊!」

可以。在他完成結帳之後,在確認頁面上提供一個選項:「設定密碼,建立帳號方便下次購物。」這時候他已經完成了購買,沒有「還沒買到東西就被要求註冊」的挫折感,願意建立帳號的比率反而更高。

或者更簡單:用他填的 Email 發一封訂單確認信,同時附上「一鍵建立帳號」的連結。不需要重新填任何資料。

技巧三:簡化流程——步驟越少越好

結帳流程的每多一個步驟,就多流失一批人。

最理想的結帳流程是:購物車 → 收件資訊 → 付款 → 完成。四步。如果能壓縮到三步甚至兩步更好。

單頁結帳 vs 多步驟結帳

單頁結帳把所有資訊(收件、付款、確認)放在同一個頁面。好處是使用者可以一眼看到所有要填的東西,心理上比較有安全感。壞處是頁面很長、看起來很複雜。

多步驟結帳把資訊分成幾個頁面或步驟。好處是每一步看起來很簡單。壞處是使用者不知道後面還有多少步。

實務上,兩種方式都可以做到很好的效果。關鍵不在於形式,而在於每一步是不是真的只問了必要的資訊。

哪些欄位可以省略?

傳真號碼:已經是 2026 年了,不需要這個。公司名稱:除非是 B2B 電商,否則不需要。地址的第二行:大部分台灣地址一行就寫完了。性別和生日:結帳不需要這些,後續行銷再收集。

自動帶入

如果使用者是會員,自動帶入上次的收件地址和付款方式。回購客戶的結帳應該在 30 秒內完成。

電商結帳流程簡化對比:7 步驟 vs 3 步驟的棄單率差異

技巧四:信任元素——讓人願意掏出信用卡

在網路上輸入信用卡號碼是一件需要信任的事。如果你的結帳頁面看起來不夠安全,很多人會猶豫。

SSL 鎖頭和安全標誌

在信用卡輸入欄位旁邊放上 SSL 安全連線的標誌。很多使用者不知道 SSL 是什麼,但他們看到那個鎖頭圖示就覺得安心。

付款方式 Logo

把你支援的付款方式的 Logo 清楚地列出來:Visa、Mastercard、JCB、LINE Pay、Apple Pay。知名的付款品牌標誌可以增加信任感。

退換貨政策

在結帳頁面的某個位置(不需要很顯眼,但要找得到)放上退換貨政策的摘要:「7 天內不滿意可退換」「免費退貨」。消除「買了後悔怎麼辦」的疑慮。

客服聯繫方式

在結帳頁面的底部放上客服電話或 Line 帳號。「結帳遇到問題?聯繫客服 0800-xxx-xxx。」有些使用者在付款的時候會有疑問,如果找不到人問,他就不買了。

技巧五:提供多種付款方式

不同的客群偏好不同的付款方式。如果你只提供信用卡付款,你就流失了不用信用卡的客群。

台灣市場常見的付款方式和使用情境:

信用卡/金融卡:最基本的,必須有。 超商取貨付款:對年輕客群和不想留信用卡資料的人很重要。 ATM 虛擬帳號轉帳:對不用信用卡的客群很重要。 LINE Pay / 街口支付:行動支付越來越普及,特別是手機端的結帳。 Apple Pay / Google Pay:一鍵完成付款,轉換率最高的付款方式之一。 分期付款:高單價商品必備。

根據台灣電商產業的數據,提供 3 種以上付款方式的電商,棄單率比只提供 1 種的低 23%。

不是說你要把所有付款方式都加上去,而是要覆蓋你主要客群的偏好。如果你的主要客群是 20-30 歲的年輕人,行動支付(LINE Pay、Apple Pay)可能比 ATM 轉帳更重要。

技巧六:挽回即將離開的訪客

有些訪客已經準備放棄結帳了,但你還有最後一次機會把他拉回來。

離開意圖偵測(Exit Intent)

當桌機版的使用者滑鼠移向瀏覽器的關閉按鈕或上一頁按鈕時,彈出一個挽留視窗:「等等!現在結帳輸入折扣碼 SAVE10 享 9 折!」或「你的購物車裡還有商品,需要幫忙嗎?」

這個功能不適合過度使用(每個訪客最多觸發一次),但用得好可以挽回 5-10% 的即將離開的訪客。

購物車放棄 Email

如果訪客在結帳過程中填了 Email 但沒完成付款,在 1 小時後發一封提醒 Email:「你的購物車裡還有 xxx,我們幫你保留了!」三天後如果還沒回來,發第二封加上一個小優惠。

根據 SaleCycle 的數據,購物車放棄 Email 的平均開啟率高達 45%,其中有 21% 的人會點擊回到結帳頁面,最終有 10.7% 的人完成購買。這是非常高的投資報酬率。

儲存購物車狀態

使用者離開後回來,購物車裡的東西要還在。用 Cookie 或會員帳號保存購物車狀態。很多使用者是因為「現在不方便結帳」而離開(比如正在通勤),他晚上回家想繼續買的時候,如果購物車被清空了,他就懶得重新加一次。

技巧七:行動端結帳要特別處理

超過 60% 的電商流量來自手機,但手機的結帳轉換率比桌機低了將近一半。差距在哪裡?在結帳體驗。

減少手動輸入

手機上打字很慢。盡量減少需要手動輸入的內容。地址可以用下拉選單選縣市區域,然後只需要輸入詳細地址。手機號碼用 type="tel" 讓手機自動出現數字鍵盤。自動偵測信用卡類型(Visa 開頭 4、Mastercard 開頭 5),不要讓使用者另外選。

大按鈕、大字體

結帳按鈕的高度至少 48px,寬度盡量接近滿版。表單欄位的字體不要小於 16px(iOS 在字體小於 16px 的時候會自動放大頁面,造成使用體驗很差)。更多關於表單設計優化的技巧也能幫助提升結帳完成率。

行動支付優先

手機端結帳的時候,Apple Pay 和 Google Pay 要放在最顯眼的位置。一個按鈕就完成付款,不需要打任何字。這是手機端轉換率最高的付款方式。

固定的結帳摘要

手機螢幕很小,使用者在填表單的時候可能忘了自己買了什麼。在頁面底部固定一個摘要列:「2 件商品 | 合計 NT$3,200 | 免運費」。讓使用者隨時知道自己在買什麼。

案例分析:一間服飾電商的結帳頁面改版

一間台灣的女裝電商,每月營收約 350 萬,網站月流量約 12 萬人次。GA4 數據顯示他們的購物車棄單率是 78%,比行業平均(70%)還高。

他們用 Hotjar 的錄影回放功能觀察了 200 段使用者在結帳頁面的行為,找出了幾個主要問題:

結帳流程有 5 個步驟,而且沒有進度指示。使用者不知道還要填多久。運費在最後一步才顯示,很多人看到運費就離開了。只提供信用卡付款,沒有行動支付選項。手機版的按鈕太小,經常誤觸。

他們做了以下改動:

結帳流程從 5 步壓縮到 3 步(收件資訊 → 付款 → 確認),加上進度條。商品頁和購物車頁面就顯示運費和免運門檻(「滿 1,500 免運」)。加入 LINE Pay 和超商取貨付款。手機版全面重新設計——大按鈕、大字體、簡化欄位。新增購物車放棄 Email,在離開後 1 小時和 3 天分別發送。

三個月後的成果:棄單率從 78% 降到 61%。月營收從 350 萬增加到 490 萬。轉換率提升了 40%。

最大的功臣是兩個改動:費用透明(降低了「結帳才發現有額外費用」的問題)和新增行動支付(讓不想輸入信用卡號的手機使用者也能輕鬆結帳)。

服飾電商結帳改版成果:棄單率與月營收的變化對比

結帳頁面是最值得投資的頁面

整個電商網站中,結帳頁面的投資報酬率最高。因為來到結帳頁面的人已經通過了所有的篩選——他對你的商品有興趣、他決定了要買、他把東西放進購物車了。他是整個漏斗中最接近成交的人。

你在首頁投入的設計改善,影響的是所有訪客。但結帳頁面的設計改善,影響的是那群最有價值的訪客——已經準備要掏錢的人。

把這 7 個技巧一個一個實施,每個都做 A/B 測試驗證效果。不需要一次全部改完,每個月改善一個點,半年後的棄單率就會有明顯的下降。

如果你需要專業的技術團隊來實作結帳流程的優化和轉換追蹤的埋設,從 UI 設計到後端邏輯一條龍處理,找專業的人做專業的事會讓你省下很多摸索的時間。

7 個降低棄單率技巧的優先順序與預期影響程度