會員 APP 導入行動支付的介面 UX 設計要點（下）
這是我在設計過程中做的一些整理，文長分成上下篇，針對會員 APP 導入「信用卡電子支付」，分享一些觀點，還有設計師在實務上可以注意的地方。
還沒看過上篇的讀者，建議先從上篇看起。
本文目錄上篇：
一、會員 APP 導入行動支付之商業目標
二、確認支付方式與硬體系統下篇：
三、設計支付介面的基本要點
四、提升易用性的設計小技巧
三、支付介面的必要條件
對設計師而言，想設計出良好的行動支付流程，無非是要降低使用者在綁定卡片以及支付場景當下的麻煩。然而行動支付受到金管會「 電子支付機構業務管理規則」與相關法律的規範，所以流程必須符合一定的條件。下面列出了設計時「不能被省略」的欄位跟條件。
綁定的必要條件：
1.實名認證：
過去如果要在會員 APP 上綁定信用卡支付，會員資料必須包含「身分證字號」或「出生年月日」，以進行信用卡持有人身份比對。不過金管會已經在 2018 年 11 月 28 日公布未來可以透過手機號碼的「Mobile ID」向電信商比對個人資料作為認證依據，代替實名認證。
2. 初次登入設定付款密碼：
金管會規定初次使用必須設置「四位或六位數付款密碼」。不過目前已經修正「電子支付機構資訊系統標準及安全控管作業基準辦法」，放寬電子支付機構採用「以間接方式驗證生物特徵」的交易安全設計，也就是說初次設定完密碼之後，就可以開啟 Touch ID、Face ID 或虹膜辨識等生物辨識替代密碼輸入。
3. 需同意服務條款與個資法定告知事項：
根據「電子支付機構管理條例」規定，使用者綁定時必須同意「服務條款」與「個資法定告知事項」等，才能開始使用支付服務。所以這一步不能被省略，但是條款可以收合。
4. 綁定信用卡：
持卡人必須填入信用卡號、有效日期與卡片驗證碼，且經發卡銀行進行 OTP (One Time Password) 簡訊認證，確認持卡人身份。
支付的必要條件：
1.支付密碼：
使用者每次支付都必須用支付密碼開啟支付條碼，但可以用生物辨識作為替代的驗證依據。
2. 支付條碼：
支付條碼必須符合「金融機構提供 QR Code 掃描支付應用安全控管規範」，在一定時間區間內自動更新 QR Code，避免有人將支付條碼截圖或照相後盜用。
3. 掃碼手動輸入支付金額：
如果是使用者用相機掃碼確認支付對象的情境，則確認付款的當下必須再次驗證支付密碼或生物辨識。
安全性規範：
依照「 金融機構辦理行動金融卡安全控管作業規範」規定，卡號、到期日與驗證碼等支付資料在所有傳輸過程都必須被加密，但儲存在手機端時可以截取末四碼讓使用者作為不同卡片的判斷依據。
後端系統在收到卡片資訊以後要產生一組 token 儲存在手機中，供未來支付時比對使用。簡單來說，只有在綁定卡號的當下能在手機上呈現信用卡完整資訊，之後都是透過 token 在手機與後端系統之間溝通，這是為了讓使用者不必擔心在存在手機的資料會被駭，降低卡片被盜刷的風險。
四、提升易用性的設計技巧
看完上面的敘述後，你或許會覺得「要遵守這麼多制式規範，哪還有什麼設計彈性？」事實上大方向的流程的確沒有太多彈性，但設計師還是可以在細節上多用點心，從小地方累積良好的使用觀感。
增加認證與綁卡時的順暢度
綁卡是使用者進到行動支付的第一步，但由於步驟繁雜，過程中發生任何問題，像卡面辨識沒有結果、找不到可支援的卡片、不斷點進點出的欄位，都有可能造成使用者放棄綁定。因此，無論是欄位切換或頁面之間的跳轉都要盡可能順暢，並提供足夠訊息反饋，讓使用者能順利完成任務。
首先，設置付款密碼時，應該清楚提示密碼的設定規範，並且「主動詢問」使用者要不要開啟生物辨識加速未來的驗證流程。
而在綁定信用卡時，可以考慮使用「信用卡辨識套件」，並畫出參考線告知信用卡的對焦範圍，讓使用者用相機辨識卡號取代手動輸入。辨識時要提供操作提示，並在感應到卡片後「明確告知辨識狀態成功或錯誤」，以及發生錯誤時如何排除（例如建議改用手動輸入）。
以國泰世華銀行的卡片掃描套件為例，卡片完成對焦後如果沒有辨識出卡號，會停在下圖右邊的畫面，卻沒有任何提示文字，這時使用這並不知道現在發生什麼事、為什麼沒有進到下一步。這樣的設計很容易讓使用者卡關（掃描國泰自家的 KOKO 卡就會卡關），是個不太好的體驗。
同時，綁定的畫面也要明確告訴使用者可以綁定哪些「銀行」與「卡種（VISA、Master Card…）」，避免讓使用者不斷收到「不支援此卡片」的錯誤訊息，卻不知道錢包中到底哪張卡才能用。
另外，雖然有設計相機辨識的功能，但市面上的信用卡面設計千變萬化，很多配置方式難以被辨識，所以手動輸入卡號還是必要的。手動輸入時如果每個欄位都要手動點擊才能輸入，使用者就得不斷看到鍵盤升起、下降的畫面。為了減少鍵盤上下的次數與秒數，可以使用「確認鍵（return鍵）」自動切換欄位，或是將信用卡資訊放在同一格輸入。
不過綁卡頁面的調整，是建立在設計師有設計權限的前提下。目前許多會員 APP 都傾向使用「合作銀行提供的綁卡套件」，如果銀行套件的安全綁卡頁面頁面已經設計好，可能就無法更改了。
用更快捷的方式開啟支付條碼
使用行動支付最令人難為情的，就是當你卡在結帳櫃檯導致後方結帳人潮大排長龍的時候。為了讓使用者快速開啟結帳畫面，設計時要將開啟付款碼的按鈕，設置在介面上「顯眼而且方便點擊的區域」，讓使用者一打開 APP 就能立刻找到、點開使用。
另外，也可以設置桌面捷徑、 3D touch 或 Widget 等快速工具，透過捷徑直接開啟驗證跟付款條碼的頁面，節省打開 APP 再點擊按鈕所花的時間。在櫃檯結帳時，時間就是金錢，設計師要盡量幫使用者縮短結帳時間，降低尷尬的機會。
至於除了按鈕位置跟桌面小工具外，還有沒有其他操作方法可以幫助使用者快速開啟支付頁面呢？我相信一定有，就等待設計師們一起來創新囉！
設計容易辨識的支付介面
如果你設計的 APP 可以支援多張信用卡綁定，請記得在「付款頁面」給使用者一個容易辨識卡別與切換卡片的介面，因為配合不同的優惠活動切換卡片，是許多信用卡用戶習慣的使用方式。如果還要離開付款頁面、更換卡別再回到支付頁面，就會造成使用者的困擾，帶來負面的印象。
除此之外，為了讓掃碼機能在一定的距離與角度下辨識支付條碼，請確保畫面上有夠大而且高對比度的條碼，並在使用者開啟支付介面時將螢幕亮度自動調到最亮。
如果 APP 也支援相機掃碼付款，就要記得放上參考線幫助使用者對付款 QR Code 進行對焦。
讓付款結合點數折抵
在第一段內容有提到，結合會員點數應用是會員 APP 導入行動支付很大的優勢，除了消費可以同時集點，也能運用點數折抵消費。如何方便使用者付款時用點數折抵金額？就是設計師要考慮的範疇。
我會建議使用「一鍵折抵」使用者只能選擇全用或不用，不能決定使用的「數量」。這是為了避免輸入折抵金額時，發生折抵金額超過價格、輸入的點數小於擁有的點數等等的問題。降低使用彈性，除了加快付款速度，也能減少 APP 運算的複雜度。
結帳後顯示支付狀態與內容
掃碼支付有一個常見的問題，就是當櫃檯掃完條碼發出「嗶」一聲之後，使用者就以為完成結帳了。但那聲「嗶」其實只是代表 POS 機感應到條碼了而已。所以為了讓使用者清楚知道自己現在的付款狀態，在 POS 機完成結帳時，應該立即顯示付款成功的狀態，還有消費商家／品項／卡別／付款金額等等的資訊。
如果付款被拒，或是等待時間太長需要更新條碼，也應該主動跳出資訊告知使用者。
個人化卡片編輯
有在使用 Apple Pay 的人應該知道，付款時它會顯示卡面樣式，讓切換卡片就像在錢包裡挑卡一樣。然而一般的支付工具只能顯示發卡銀行跟卡種（ VISA、Master Card 等），並沒有這麼容易跟銀行取得卡片樣式，所以要怎麼讓使用者透過 UI 辨識不同卡別就變得很重要。建議可以讓使用者編輯信用卡名稱甚至卡面顏色，以加速判斷要切換哪一張卡片。
清楚的消費明細
最後，只要是與「金流消費」有關的產品，都應該有明確的消費明細紀錄。APP 上應該要有區塊清楚記錄「消費日期、金額、品項、商家、卡號、是否折抵、點數回饋」等等資訊，讓使用者能更全面的掌握自己在 APP 上的消費。
『重點整理』提升易用性的設計技巧1. 增加認證與綁卡時的順暢度
2. 用更快捷的方式開啟支付條碼
3. 設計容易辨識的支付介面
4. 讓付款結合點數折抵
5. 結帳後顯示支付狀態與內容
6. 個人化卡片編輯
7. 清楚的消費明細
結語
行動支付的設計重點不外乎「快速、清楚、安全」：
快速 — 快速綁定卡片與開啟支付條碼
清楚 — 清楚的操作狀態、提示與反饋
安全 — 安全的資料儲存、傳輸與付款
在了解「系統限制」與「法規規範」之下，如何掌握以上三點，設計出有助於提升會員消費便利性的產品，進而增加用戶的黏著度，幫助業主達成商業目標，是設計師非常重要的任務。
支付技術會不斷更新，未來也會持續演變出更便利的流程減少使用痛點，而良好的使用體驗，就要靠產品設計師們一起努力了！以上提供一點技巧給大家參考，如果你有機會碰到行動支付設計，希望這篇文章能夠幫的上忙：）
我是果思設計的 UX 設計師 Tina，我們專注在 App 設計與 App 開發，創造真正有價值的數位產品。如果你喜歡我的文章，歡迎幫我拍手；有任何想法或想補充的事項，也歡迎在留言區留下你的足跡，期待我們能教學相長，分享看法：）
