起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識那些讓客戶輕松掏錢買單的支付表單，都是怎么設計出來的？
支付表單就像是數字化的收銀臺，驗證用戶的信息并授權在線支付，最后完成支付。支付表單的設計好壞嚴重影響著用戶的支付體驗，一份流暢的支付表單極為重要。
“購物車里 70% 的商品最后都不會被買下來，而這其中 28% 的商品是因為結賬過程耗時太久而被顧客放棄的。”
企業希望人們花錢。
這意味著為某樣東西付費應該是整個用戶體驗中最簡單的部分。否則，企業會因為糟糕的支付系統損失數十億美元。
一次成功的支付體驗需要有一個清晰的路徑引導用戶順利付款。畢竟，支付表單就像是商店或餐館中實體銷售的最后一步。
因此，支付表單的流暢高效就顯得尤為重要：不需要排隊等待，不能有任何障礙和錯誤。
設計支付表單曾是一項繁瑣的任務，尤其是對初創公司和小型企業來說。
但現在的工具能讓用戶在幾分鐘內就制作出一份功能強大、設計美觀的支付表單——你都不需要會編輯代碼。而且,你也不用為交易額外付費。
首先——什么是支付表單？支付表單就像是數字化的收銀臺，它驗證用戶的信息并授權在線支付，最后確保你能收到付款。
一份一體化的支付表單能做什么？一體化的支付表單能做到很多事情。首先，你可以用它銷售產品或服務。你還可以對這些銷售加以復雜的計算，比如加上稅金和運費或減去優惠折扣等。
你也可以為你的產品提供有用的描述，如添加圖片、數量、顏色和尺寸選項等。
支付表單有多種類型。
你可以為單個或多個產品創建訂單，也可以用訂單收取固定金額的付款。你也可以用訂閱服務的方式，不斷重現這些支付行為。
使用 JotForm卡片模板制作的訂閱單的示例
支付表單也可以用于收集捐款。
捐款單——卡片式表單布局
一、如何設計更智能的支付表單？
我總結了我所工作的在線賬單制作公司 JotForm 的 420 萬用戶的支付表單設計案例，得出了以下 5 條有用建議。
1. 設計簡單
大量研究結論表示，復雜的視覺設計通常是沒有吸引力的。并且，在心理上我們也更偏好空白較多的頁面。
支付表單的長度也很重要。例如，JotForm 的經典表單在一個頁面上顯示所有的選項和付款部分。這種設計尤其適合用戶制作較短的表單。
JotForm——經典表單
但是當細節內容很多的時候，在一張頁面上顯示過多信息會讓人應接不暇。
所以我們又設計了 JotForm 卡片格式來替換經典表單。它的布局是每頁只顯示一個問題：除了問題和命令之外，頁面上沒有其他任何內容。
用戶填完表單就可以順利進入付款頁面。
這兩種類型的表單適用于不同的情況。無論你選擇哪種類型的表單，你都應該留出足夠的空白區域，不要添加不必要的內容。
2. 提供多種付款方式
你有沒有經歷過在餐廳吃完飯才知道它只接受現金的情況？你不得不出門尋找最近的自動取款機取錢，或者你只能找朋友借錢。太讓人掃興了！人類一直在追求輕松和便利，特別是在決定是否購買某樣東西的時候。
而選擇——無論我們是否需要——它的存在在我們的潛意識里是很重要的。人類非常重視自主抉擇的能力，這就是我們要優先考慮靈活性的原因。
同樣，在為客戶提供可選的訂單付款方式時也是如此。
大多數在線表單制作軟件都能提供多種支付的集成。
每一個付錢的人都應該能夠自由地從多種支付方式中選擇。要在支付表單上實現這一點真的不難。
3. 減少障礙
支付表單有點像障礙訓練。每一個需要越過的障礙都會減慢用戶的速度，讓他們逐漸失去完成的興趣。有一些障礙是可以避免的，比如任意格式規則或密碼要求。有些障礙是不容易避免的，比如拼寫錯誤。
JotForm的卡片表單在嘗試減少這些意外的障礙。例如，它可以自動修正用戶輸入錯誤的電子郵件地址，像把john@gnail.com修正為john@gmail.com。
當出現一般性錯誤時——比如漏掉了字詞或錯誤的輸入——它會向用戶發送抖動提示。
另一個可以避免的障礙是語意不明的表達。不要讓用戶去“破譯”你的語言，你要確保你的表達是清晰明確、易于理解的。
用戶到達最后一張付款頁面的速度越快，他們就越有可能完成付款。
更少的障礙 = 更快完成的表單；更快完成的表單 = 更多的轉化。雙贏！
4. 詢問較少信息
選填字段是轉化率的敵人。Baymard Institute 分析了賬單，發現結賬過程太長是用戶放棄購買的最重要原因之一。平均每份賬單包含了15處要選填的字段。
而且，大約 50% 的網站會讓顧客把相同的信息填兩遍，這樣絕對會消耗他們的注意力和購買熱情。
一種有效的做法是，在選填信息的部分使用易于理解的詞塊來組織你的問題。
5. 安全優先
我們希望掏出錢包付款的時候是安全的。因此，聰明的企業會竭盡全力讓客戶從走進大門的那一刻起就感到放心。支付表單也不例外。當用戶需要輸入信用卡詳細信息等敏感信息時，他們對任何看似可疑的信息都非常警惕：
最近的一項研究顯示，出于安全問題，17%的消費者在付款前就離開了。
清晰、高效且專業的支付表單能讓用戶更放心。相反，任何看起來像是 DIY 的東西都會產生反面效果。
所以，從一開始設計支付表單就要格外小心——微小的錯誤或者不一致就會引起用戶的警惕并退出付款。我們要讓用戶放心。
在表單上使用 SSL 來幫助保護數據也是很有效的。訪客如果知道所有互動都是加密的，他們會感到非常放心。
二、設計一份支付表單
如果你對用 JotForm 設計支付表單很感興趣，你可以選擇一種我們的模板來使用，或者從頭開始設計一份新的表單。我們提供兩種表單布局：
（1）經典表單：
經典表單提供更傳統的布局方式，所有的問題都顯示在同一頁面上。
（2）卡片式表單：
卡片式表單提供類似網站的購物體驗，用戶在每一頁只用回答一個問題，就可以順暢地進行購買流程。
添加到購物車、地址、銀行卡信息和產品等步驟分別顯示在單獨的卡片上。消費者可以直接查看和編輯購物車。
這是它的外觀：
（1）消費者選擇他們要的商品。
產品列表和我的購物車按鈕
（2）消費者可以根據需要刪除或增添商品，然后繼續下一步。
編輯購物車
你可以通過加入品牌 logo、選擇背景顏色和圖片來配合品牌形象，輕松定制你的表單。
三、如何添加一體化支付表單
第一步：添加字段并選擇你的支付接口。
第二步：使用鏈接按鈕導入支付集成憑據，或直接輸入。
第三步：添加產品圖像和詳細信息，如數量、顏色、尺寸。
第四步：計算優惠券、稅金和運費。
你可以使用一體化購買訂單來檢查創建通用支付字段的詳細信息和選項是否正確。（這樣做不需要任何憑據，因為它并不會創建真實的交易）
你還可以查看 Sofort 一體化指南的案例，以了解整個付款流程。
第五步：編輯個性化感謝信息——自動回復郵件。
這樣就完成了！現在，你可以使用智能嵌入功能，把支付表單添加到網站、博客或社交媒體上，輕松地完成產品的出售。
原作者：Dilem Ak?ner Ak???k
原文鏈接：https://medium.com/swlh/how-to-design-a-payment-form-your-customers-will-actually-complete-55a986fe3ada
翻譯：即能，公眾號：即能學習
本文由 @即能 翻譯發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議。
真心對國外軟件的UI無感
我也是，長期使用習慣的差異吧。
哈哈哈哈是嗎？那么可以分享一下好感UI的軟件是什么嗎~？
知乎、虎撲、微信這幾個大眾的都挺好。另外還有像扇貝、滴滴這些也不錯。