如何在一天內改善賬單表單的用戶體驗

已發表: 2022-03-10
快速總結↬改進您的計費表單可以使用戶體驗更加直觀，從而確保用戶方便並增加對您產品的信心。 它是 Web 應用程序的重要組成部分。

結帳頁面是用戶最終決定在您的網站上完成購買之前訪問的最後一頁。 這是櫥窗購物者變成付費客戶的地方。 如果您想留下良好的印象，您應該提供賬單表單的最佳可用性並儘可能改進它。

在不到一天的時間裡，您就可以為您的項目添加一些簡單實用的功能，使您的計費表單用戶友好且易於填寫。下面提供了包含所有功能的演示。 您可以在 GitHub 存儲庫中找到它的代碼。

關於 SmashingMag 的進一步閱讀：

  • 減少電子商務中的廢棄購物車
  • 表單字段驗證：僅錯誤方法
  • 電子商務結帳設計的基本指南
  • Web 表單可用性的詳盡指南

信用卡詳細信息是表單中最常更正的字段之一。 幸運的是，現在幾乎所有流行的瀏覽器都有自動填充功能，允許用戶將卡片數據存儲在瀏覽器中並更快地填寫表單字段。 此外，從 iOS 8 開始，移動 Safari 用戶可以使用 iPhone 的攝像頭掃描他們的卡信息，並自動填寫他們的卡號、到期日期和名稱字段。 自動完成簡單、清晰並且內置在 HTML5 中，所以我們首先將它添加到我們的表單中。

自動填充和卡片掃描都只適用於具有特殊屬性的表單：現代瀏覽器的autocomplete （在 HTML5 標準中列出）和不支持 HTML5 的瀏覽器的name 。

注意：提供了包含以下所有功能的演示。 您可以在 GitHub 存儲庫中找到它的代碼。

信用卡具有特定的自動填充屬性。 對於autocomplete ：

  • cc-name
  • cc-number
  • cc-csc
  • cc-exp-month
  • cc-exp-year
  • cc-exp
  • cc-type
  • cc-csc

對於name ：

  • ccname
  • cardnumber
  • cvc
  • ccmonth
  • ccyear
  • expdate
  • card-type
  • cvc
跳躍後更多！ 繼續往下看↓

要使用自動填充，您應該在index.html文件中為輸入元素添加相關的autocomplete和name屬性：

 <input type="text" class="card__input card__input_number" placeholder="XXXX XXXX XXXX XXXX" pattern="[0-9]{14,23}" required autofocus autocomplete="cc-number" name="cardnumber"> <input type="text" class="card__input card__input_date card__input_month" placeholder="MM" pattern="[0-9]{1,2}" required autocomplete="cc-exp-month" name="ccmonth"> <input type="text" class="card__input card__input_date card__input_year" placeholder="YYYY" pattern="[0-9]{2,4}" required autocomplete="cc-exp-year" name="ccyear"> <input type="text" class="card__input card__input_cardholder" placeholder="CARDHOLDER NAME" required autocomplete="cc-name" name="ccname">

不要忘記在輸入字段中使用placeholder來幫助用戶理解所需的數據格式。 我們可以使用 HTML5 屬性提供輸入驗證： pattern （基於 JavaScript 正則表達式）和required 。 例如，在字段中使用pattern=”[0-9\s]{14,23}” required屬性，如果字段為空、非數字或非數字，用戶將無法提交表單- 空格符號，或短於 14 個符號或長於 23 個符號。

一旦用戶在瀏覽器中保存了他們的卡數據，我們就可以看到它是如何工作的：

Chrome 自動完成示例。
Google Chrome 瀏覽器中的自動完成示例

請注意，不建議使用一個字段作為到期日期 ( MM/YYYY )，因為 Safari 需要單獨的月份和年份字段來自動完成。

當然，自動完成和自動填充屬性不僅廣泛用於計費表單，還廣泛用於姓名、電子郵件和郵政地址以及密碼。 通過在表單中正確使用這些屬性，您可以節省用戶時間並使他們更加快樂。

儘管我們現在擁有自動完成功能、Google Payments 和 Apple Wallet，但許多用戶仍然喜歡手動輸入他們的信用卡詳細信息，而且沒有人可以避免使用 16 位數字輸入錯誤信息。 長數字很難閱讀，寫起來更痛苦，幾乎不可能驗證。

為了幫助用戶對長卡號感到滿意，我們可以通過將 BankFacil 的簡單 VanillaMasker 庫添加到我們的項目中來將其分成四位組。 輸入的數據將被轉換為掩碼字符串。 因此，我們可以在卡號的每四位數字後添加一個帶有空格的自定義模式，到期月份的兩位數模式和到期年份的四位模式。 VanillaMasker 還可以驗證數據格式：如果我們只向 ID 傳遞了“9”（掩碼的默認數字），那麼輸入後所有非數字字符都將被刪除。

 npm install vanilla-masker --save

在我們的index.js文件中，讓我們導入庫並為每個字段使用一個字符串：

 import masker from 'vanilla-masker'; const cardNumber = document.getElementById('card__input_number'); const cardMonth = document.getElementById('card__input_month'); const cardYear = document.getElementById('card__input_year'); masker(cardNumber).maskPattern('9999 9999 9999 9999 99'); masker(cardMonth).maskPattern('99'); masker(cardYear).maskPattern('9999');

因此，我們表格中的卡號數字將被分開，就像在真實卡上一樣：

VanillaMasker 示例
VanillaMasker 在行動

掩碼器會刪除值類型或長度不正確的字符，儘管我們的 HTML 驗證只會在表單提交後通知用戶無效數據。 但我們也可以在填寫時檢查卡號的正確性。您知道所有塑料信用卡號都是根據簡單有效的 Luhn 算法生成的嗎？ 它由 Hans Peter Luhn 於 1954 年創建，隨後被設定為國際標準。 我們可以包含 Luhn 算法來預先驗證卡號的輸入字段並警告用戶輸入錯誤。

為此，我們可以使用改編自 Shirtless Kirk 的 gist 的小型 fast-luhn npm 包。 我們需要將它添加到我們項目的依賴項中：

 npm install fast-luhn --save

要使用 fast-luhn，我們將在模塊中導入它，然後在輸入事件上調用luhn(number)來檢查數字是否正確。 例如，讓我們添加card__input_invalid類來在用戶出現意外錯誤且檢查未通過時更改outline和字段的文本color 。 請注意，VanillaMasker 在每個四位數組之後添加一個空格，因此我們需要在調用lunh之前使用split和join方法將輸入的值轉換為沒有空格的純數字。

結果是如下所示的代碼：

 import luhn from 'fast-luhn'; const cardNumber = document.getElementById('card-number'); cardNumber.addEventListener('input', (event) => { const number = event.target.value; if (number.length >= 14) { const isLuhnCheckPassed = luhn(number.split(' ').join('')); cardNumber.classList.toggle('card__input_invalid', !isLuhnCheckPassed); cardNumber.classList.toggle('card__input_valid', isLuhnCheckPassed); } else { cardNumber.classList.remove('card__input_invalid', 'card__input_valid'); } });

為了防止luhn在用戶輸入時被調用，我們只在輸入的數字與帶空格的最小長度（14 個字符，包括 12 位）或更長時調用它，或者刪除card__input_invalid類。

以下是實際的驗證示例：

快速魯恩示例
使用 fast-luhn 的驗證示例

Luhn 算法還用於一些折扣卡號碼、IMEI 號碼、美國的國家提供者標識符號碼和加拿大的社會保險號碼。 因此，此套餐不僅限於信用卡。

許多用戶想要親眼檢查他們的卡詳細信息，即使他們知道表單正在被驗證。 但是人類感知事物的方式使得不同風格的數字的比較有點令人困惑。 由於我們希望界面簡單直觀，因此我們可以通過顯示與他們在真實卡片上找到的字體相似的字體來幫助用戶。 此外，字體將使我們的卡片式輸入表單看起來更逼真和合適。

有幾種免費的信用卡字體可用：

  • Halter，撇號實驗室
  • Kredit, Typodermic 字體
  • 信用卡，K-Type（個人免費使用）

我們將使用 Halter。 首先，下載字體，將其放在項目文件夾中，並在style.css中創建 CSS3 @font-face規則：

 @font-face { font-family: Halter; src: url(font/HALTER__.ttf); }

然後，只需將其添加到.card-input類的font-family規則中：

 .card-input { color: #777; font-family: Halter, monospace; }

不要忘記，如果你在 webpack 包中的 JavaScript 文件中輸入 CSS，你需要添加file-loader ：

 npm install file-loader --save

並為webpack.config.js中的字體文件類型添加file-loader ：

 module: { loaders: [ { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file', }], },

結果看起來很不錯：

掛脖示例
卡片表格上的掛脖字體

如果您願意，可以使用雙text-shadow和半透明文本color的浮雕效果使其更加精美：

 .card-input { color: rgba(84,110,122,0.5); text-shadow: -0.75px -0.75px white, 0.75px 0.75px 0 black; font-family: Halter, monospace; }
雙陰影吊帶背心示例
帶有text-shadow掛脖字體

最後但並非最不重要的一點是，您可以通過在表單中添加著色功能來給客戶帶來驚喜。 每家銀行都有自己的品牌顏色，通常在該銀行的卡片上占主導地位。 為了使賬單表單更加用戶友好，我們可以使用這種顏色並在表單字段上方打印銀行名稱（對應於它出現在真實卡上的位置）。 這也將幫助用戶避免打錯號碼，並確保他們選擇了正確的卡片。

我們可以通過前六位數字來識別每個用戶卡的銀行，其中包含發卡行標識號（IIN）或銀行標識號（BIN）。 Ramoona 的 Banks DB 是一個從該前綴獲取銀行名稱和品牌顏色的數據庫。 作者搭建了一個 Banks DB 的演示。

這個數據庫是社區驅動的，所以它不包含世界上所有的銀行。 如果未顯示用戶的銀行，則銀行名稱的空間將為空，並且背景將顯示默認顏色 ( #fafafa )。

Banks DB 假定使用它的兩種方式之一：使用 PostCSS 或使用 JavaScript 中的 CSS。 我們將它與 PostCSS 一起使用。 如果您是 PostCSS 新手，這是開始使用它的好理由。 您可以在官方文檔或 Drew Minns 的文章“PostCSS 簡介”中了解有關 PostCSS 的更多信息。

我們需要安裝 PostCSS Banks DB 插件來設置 Banks DB 的 CSS 模板，並安裝 PostCSS Contrast 插件來提高銀行名稱的可讀性：

 npm install banks-db postcss-banks-db postcss-contrast --save

之後，我們將根據模塊捆綁器和項目中使用的加載配置將這些新插件添加到我們的 PostCSS 進程中。 例如，使用 Webpack 和 postcss-load-config，只需將新插件添加到.postcssrc文件即可。

然後，在我們的style.css文件中，我們需要使用 postcss-contrast 插件為 Banks DB 添加一個新的類規則模板：

 @banks-db-template { .card_bank-%code% { background-color: %color%; color: contrast(%color%); } }

我們還可以在整個.card類上設置一個長transition ，以平滑淡入和淡出背景和文本顏色，以免突然變化嚇到用戶：

 .card { … transition: background 0.6s, color 0.6s; }

現在，在index.js中導入 Banks DB，並在input事件監聽器中使用它。 如果 BIN 在數據庫中表示，我們將包含銀行名稱的類添加到表單中，以便插入名稱並更改表單的背景。

 import banksDB from 'banks-db'; const billingForm = document.querySelector('.card'); const bankName = document.querySelector('.card__bank-name'); const cardNumber = document.getElementById('card__input_number'); cardNumber.addEventListener('input', (event) => { const number = event.target.value; const bank = banksDB(number); if (bank.code) { billingForm.classList.add(`card_bank-${(bank.code || 'other')}`); bankName.innerText = bank.country === 'ru' ? bank.localTitle : bank.engTitle; } else { billingForm.className = 'card'; bankName.innerText = ''; } });

如果您使用 webpack，請將.json文件擴展名的 json-loader 添加到 webpack 的配置中，以便正確輸入 bundle 中的數據庫。

這是銀行數據庫的一個工作示例：

銀行數據庫示例
使用 Banks DB 進行表格著色

如果您發現您的銀行卡沒有任何影響，您可以打開一個問題或將您的銀行添加到數據庫中。

結論

改進您的計費表單可以使用戶體驗更加直觀，從而確保用戶方便並增加對您產品的信心。 它是 Web 應用程序的重要組成部分。 我們可以使用這些簡單的功能快速輕鬆地改進它：

  • 適合autocomplete的自動完成和name屬性，
  • placeholder屬性通知用戶輸入格式，
  • pattern和require屬性以防止錯誤提交表單，
  • VanillaMasker 用於分隔卡位，
  • fast-luhn 驗證卡號，
  • Halter 字體便於比較，
  • Banks DB 可以更好地呈現顏色。

請注意，只有 Banks DB 需要模塊捆綁器； 您可以在簡單腳本中使用其他的。 將所有這些功能添加到您的結帳頁面很可能需要不到一天的時間。