如何設計出一款出色的結帳表單

如下內容由Mockplus（摹客）團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。

毫無疑問，結帳體驗是全部網上商店最重要的一部分，表單的設計直接關係着電子商務網站的轉換率 – 更快，更方便用戶填寫的表單，就意味着將得到更高的轉換率。

做爲用戶體驗設計師，而你的工做就是確保用戶有一個無縫且高效的結帳體驗。在本文中，我將分享十個很是實用的小技巧來幫助你設計出一款出色的結賬表單。

1. 不要強迫用戶建立賬戶

據Baymard研究所稱，強制性要求用戶建立帳戶是人們放棄購買流程的首要緣由之一。不要犯這樣的錯誤！容許用戶不須要建立帳戶便可購買商品。重要的是，你不只要提供客人的結賬選項，還要使其清晰可見。Baymard 研究院發現，88％的移動支付表單未能使訪客結帳選項達到清晰可見的效果，所以用戶常常忽略它。

eBay爲用戶提供了一個訪客選項

2. 減小用戶註冊所需的信息

談到信息收集時，最重要的原則即是「少便是多」。Baymard的一項研究發現，近三分之一的美國在線購物者因「太長/太複雜的結帳流程」而放棄了他們的購買。同一項研究發現，平均付款的時間是有可能縮短20-60％的。所以，做爲設計師，你應該儘可能減小用戶的信息量。例如，若是你並不打算打電話給你的客戶，則無須要求他們的電話號碼。

經過減小所填字段，不只能夠提升完成時間，還可讓此過程進行的更加順暢。字段數越少意味着用戶的認知負擔越小，所以潛在錯誤就會減小。

提示：清楚標記全部可選字段。若是你有可選字段，則應該用單詞「optional（可選）」或「*」符號進行標記。這將讓那些想要儘快填寫完表單的用戶快速的跳過這些字段。

3. 不要使用字段標籤做爲佔位符

帶標籤的主要目的不是在用戶輸入數據時隱藏它們。字段標籤應始終保持可見; 理想狀況下，他們應該位於字段的頂部或左側。若是你設計的移動端而且屏幕空間有限，則可使用浮動標籤技術。當用戶激活一個字段時，佔位符文本會淡出，而且跳出顯示在頂部。

標籤應始終展示給用戶 圖片來源：MDS

4. 設計單列表格

在多列形式下，眼睛會遵循曲線型瀏覽，這使得用戶更難專一於某些元素（眼睛不會注意到某些特定的元素）。所以，多列表格會增長完成時間。當表格由單列組成時，用戶會更容易進行瀏覽 – 由於眼睛會遵循垂直掃描模式。

5.將大量相關信息分在一塊兒

一次性顯示出太多的信息，會讓用戶感到有些不知所措。分層技術能夠幫助你提供相同數量的信息而無需過載。有兩種類型的組塊：

• 頁面上的分組。你能夠將相關信息分組在一塊兒，並按邏輯順序排列。

左：字段之間沒有可視的劃分。右圖：相同數量的字段在視覺上被分紅3個部分。圖片：NNGroup

• 建立多步結賬過程。你能夠將結賬過程分解爲多個單獨的步驟。例如，典型的結帳流程能夠分爲四個步驟 - 客戶信息，運送方式，付款，訂單彙總。將大任務分解爲幾個較小的任務可讓用戶專一於一種特定類型的輸入。可是若是你使用這種方法，請確保你的結賬過程是易於操做和理解的。用戶須要瞭解他們花費多少時間來完成付款。若是你能夠提供一個易於用戶填寫和操做的表單，這就太棒了。

多步結賬流程：表單清楚代表用戶當前處於哪一個階段。

提示：對於多步驟結賬流程，確保後退按鈕操做與用戶指望保持一致很是重要。用戶指望後退按鈕能讓他們退後一步（到他們認爲是他們上一頁的地方），而不是回到產品頁面。第二種行爲一般伴隨着用戶數據丟失，所以可能會致使用戶放棄結帳流程。

6.幫助用戶填寫地址

儘可能減小用戶打字的需求。當用戶開始輸入地址時，你可使用自動建議和自動完成機制。諸如Google地理定位搜索之類的服務， 在用戶輸入前幾個字是就可自動匹配地址。同時，你應該使預填充字段可編輯，以便用戶能夠更改其中的信息。

自動匹配地址功能。圖片來源： Eric Nguyen

提示：在手機上填寫地址的步驟可能會更加直接。你能夠要求訪問用戶的當前位置並根據當前位置進行填充。

7.提供不一樣的付款選項並建立一張完美信用卡表格

提供儘量多的支付選項，這樣用戶能夠選擇他們最喜歡的方法。

沃爾瑪容許使用信用卡，禮品卡和許多其餘受歡迎的支付方式（如PayPal）進行支付。

在許多支付選項中，信用卡仍然是最經常使用的支付方式之一。這一點很是重要：確保結帳表單已針對使用信用卡購物進行了優化，這裏有幾件事要記住：

• 告知用戶可接受的卡片類型。你能夠將此信息和支持卡發行商的圖標放在一塊兒。若是你的支付系統不支持某種類型的卡片，請在用戶輸入卡號時告訴他們。

• 根據輸入的第一個數字顯示卡類型。前六位數字標識用戶卡的確切發行者。將卡發行者的標誌顯示出來更好，這樣用戶能夠看到系統已經識別了他/她的卡。

• 使用卡片有效期的佔位符文本。幫助用戶進行有效格式的輸入。

• 當詢問「安全碼」時，請提示客戶在哪裏能夠找到它。這可能與字段旁邊的'？'圖標相似，當用戶點擊它時會彈出顯示信息。請記住，「安全代碼」不統一 - 不一樣的髮卡機構使用不一樣的命名，位置和長度（例如，VISA的安全代碼位於卡的背面，由三位數字組成，而對於AMEX，安全代碼在前面幷包含四位數字）。

Visa / MasterCard，JCB和American Express的安全碼

銀行卡信息格式知足上述全部要求

8.提供訂單彙總

在購買前提供訂單彙總相當重要。此功能容許用戶查看訂單詳細信息和選定的交貨選項，再次確認費用以及送貨信息是否正確，並在必要時進行更改。

Asos提供訂單彙總：用戶能夠查看和修改他們的訂單

9.設計「快速購買」功能

「快速購買」是使客戶回買的一個優點功能。若是你的數據庫包含有關客戶的信息，那就沒必要要求他們從新執行全部的付款步驟。此功能可以讓用戶直接跳轉到訂單彙總界面，可以使用以前購買的結算和運送信息。

亞馬遜的一鍵式購買功能可實現當即購買產品。這將從客戶購買數據中獲取有關首選運輸方法、地址和付款細節的信息。

10. 提供在另外一設備上完成購買的選項

一個比較典型的狀況是，用戶會在移動設備上瀏覽商品，但在填寫結帳表單時，他們會切換到桌面端。當用戶切換到桌面時，經過給他們提供一個「經過電子郵件發送到購物車」這樣的選項，讓用戶可以按照以前在手機上的步驟繼續進行操做。

結論

當談到結帳過程時，你最終目標是提升成功率（用戶轉換率）並減小完成時間（更快地完成）。對於客戶來講，購買東西的流程越容易，他們就越容易進行購買。

原文地址：https://www.mockplus.com/blog/post/design-checkout-form

原文做者：Nick Babich