起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識譯文 | Web端購物結算流程的可用性設計建議
每個電子商務網站都有自己的結帳流程，來將用戶從挑選商品的環節帶到購買的環節上。結賬流程的細節會因為用戶購買的商品以及其目的而有所不同，但是，最終付款的環節都同樣重要 。
我們設計的結賬流程要讓用戶保持一種參與感，并且并鼓勵他們完成結帳過程。 我想分享一些可用性設計的建議，以便改進帳單表單的設計，并提高用戶結帳轉化率。
澄清意圖
我們的目標是設計能夠鼓勵用戶購買的表單形式。 所以你要讓這個過程盡可能的簡單，特別是在付款階段。我們如果無法一下子闡明整個結算流程，那么只需要保持每個環節的清晰和簡明，永遠不要讓用戶對他的行為感到困惑或不確定而退出結算。
有一些你應該牢記在心的技巧會讓你的工作做的更好：
- 更大的字體
- 易讀的標簽
- 字段間的間隔
- 更易用的導航
此外還可以添加適量的icon來突出視覺效果。
Threadless的結帳頁面提供了一個很好的例子。
信用卡圖標的使用，讓用戶對自己選擇的支付方式清晰明了。
同樣，下方的圖標也清晰明了地展示了CVV驗證碼的位置。
你要做的就是盡你所能讓用戶在付款的每一個階段準確地知道他們在做什么。
不應該有模糊的術語，不明確的方向，并且在整個流程中應該有大量提示 / 圖標等等來解答用戶使用過程中可能會遇到的問題。
定義文本格式
有些數據需要一定的文本格式，如電話號碼和信用卡號。
這種動態的間隔可以地使用JavaScript生成，這是您可以添加到網站的最佳技術之一。
定義間隔讓用戶知道在填寫表單字段時處于正確的路線上。
比如在在表單中，當用戶輸入了正確的郵政編碼時，表單自動切換到下一個字段。
同樣的電話號碼，你可以自動的匹配的電話號碼的數字。
你可以在易趣網的結賬單上看到這個。
但最有用的是信用卡的4位間隔格式。
信用卡號碼很長，很容易出錯了。一個不正確的信用卡號給用戶帶來的挫折感可能會讓用戶會否定你其他所有的設計。
這個自定義的信用卡號數字間距在您的帳單字段中，使客戶更容易輸入他們的數字，并再次檢查他們是否正確。
你可以參考BodyBuilding的設計，其中還包括錯誤信息的反饋。
簡化操作路徑
因為結算流程的長短不一，所以每個網站的處理過程總是不同的。這可能會讓許多訪問者感到困惑，這也是為什么電子商務在2000年代初期停滯不前的原因之一。
但是，無論表單長短，無非圍繞以下原則來進行設計：
- 為了簡潔，內容較少的結算流程盡量在一頁處理
- 較復雜的流程應該進入步驟以面包屑來進行導航
例如，semrush的結算流程是美妙的。
很快使用，容易閱讀，你需要知道的一切都清楚可見在頁面上。
但我不介意再結帳過程中要有面包屑導航。
這些提供了一個清楚的指示器，說明用戶在結賬過程中走了多遠，以及還有多少內容需要進行完善。
這使每個人在每個步驟中更容易完善和提交內容。如果他們不知道結賬過程什么時候結束，他們可能會感到困惑，焦慮，或者只是生氣和離開。
Wiggle的結帳使用清晰的面包屑在每個頁面的頂部。
兩種不同的形式可以同時嘗試，運用一些A/B測試并且看看哪種風格的表現更好。你可能會對結果感到驚訝。
概括購買
用戶輸入他們的賬單信息之后，要點擊“提交”按鈕是最難的。
猶豫對于轉化率而言是致命的。
概括的訂單的基本信息，展示給客戶，他們可以看到一切從他們購買的項目的總費用（加加工），甚至交貨日期（如果適用的話）。
GitHub的Pro升級計費領域的廣告購買都在同一頁上。它闡明了你要多久付款，最后的費用是什么，以及何時你可以期待下一個費用。大多數字段都是從你的個人資料中填寫的，所以如果你有一個帳戶，這個過程非常快。
另一個例子是亞馬遜，電子商務商店之母。
一旦你進入付款的環節，訂單相關的所有的細節，如：送貨地址和付款信息等都將以一屏的形式進行呈現，以確保你真的了解你的采購。這減少了錯誤項目的退貨率，并且能夠減少用戶在點擊“購買”按鈕時的猶豫不決。
我們需要公開透明與客戶分享盡可能多的關于訂單的細節。
結束
結算行為是將潛在客戶轉化為付費客戶關鍵的一步。這就是為什么形式優化如此重要。
我希望這些趨勢可以幫助你制作可用的和令人鼓舞的賬單形式，為你的商店和所有客戶帶來更多的收入。優化是一個持續的過程，但如果你不斷測試新的想法，你將永遠領先于競爭對手。
總結：
- 內容易讀；
- 智能輸入；
- 流程清晰；
- 展示到位。
編譯作者：張大俠，公眾號：「俠俠說」
本文由 @張大俠 翻譯發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
- 目前還沒評論，等你發揮！
