Daily UI#02 | Credit card付款介面分析
完成結帳流程的最後一哩路💰💰
前言
為什麼需要信用卡付款頁面?
信用卡付款介面核心價值
信用卡付款介面的UX改善細節
參考資料前言
接下來是 Credit card payment 的部分了，因為性質跟上一個 Daily UI(Sign up) 很相像，都是表格 (form) 屬性，所以很多UX細節會很類似，類似的地方我就簡單寫過，那麼就繼續看下去吧！
為什麼需要信用卡付款頁面?
讓有意願付款的客戶付款
當使用者有意願進付款流程的時候，產品為了讓使用者高機率繼續進行付款流程，須提供多元的付款方式，以滿足消費者不同的支付方式。
增加收入主要方式之一
就是讓💰💰💰💰進帳的聲音變得響亮喔齁齁🤩
信用卡付款介面核心價值
提供付款的方式
隨著科技日新月異，現在有很多種的付款方式，例：貨到付款、ATM 轉帳、超商ibon付款、Apple pay，而信用卡就是其中一種付款方式，越多的付款方式，越能提高越多成交率。
流暢的付款方式
從選物到結帳完成，整個購買流程都是一個大沙漏，只要中間有環節讓使用者感受不佳，都會讓轉換率下降，因此能帶給使用者流暢和無縫的體驗是相當重要的。
信用卡付款介面的UX改善細節
表單易用性
表單易用性的細節，在上一次有提到「即時回饋」、「預設行動」、「給予有幫助的資訊」、「協助減少失誤」。
1.給予有幫助的資訊，解除疑惑
使用者在使用信用卡付款時，通常第一時間會想知道可以用那些卡，就和我們實際旅行去商店的時候都會和店員確認某家信用卡能不能用，因為是第一時間就想獲得的資訊，所以把能使用的信用卡公司 icon 放在最一開始是最為合理的。
或是也很常看到信用卡付款介面說明 CVV 在哪裡，給予提示方便理解，以及在輸入卡號和有效日期時，也都需要一些有用的提示，暗示使用者如何填寫，所以在資訊呈現上皆盡量呈現和信用卡本身一樣，盡量讓使用者不要感到困惑，例如下圖的橘色信用卡提示 CVV 位置，卡號欄位和信用卡一樣 16 碼， 4 組數字分別隔開，提示卡號號碼的樣貌以免和卡片背面的帳號搞錯，有效月年也呈現和信用卡一樣的日期形式，畢竟他跟一般年月日形式不一樣。
不過我覺得「設計大舌頭」設計展示的信用卡介面和 Agoda 的介面更為直覺，把輸入資訊和實體物去做相關性的連結，更容易讓使用者認知 text field 應該填寫什麼，讓整個流程更為顯而易見且一目了然，當產品幫助使用者省略思考的時候，就是非常有幫助的資訊。😊
2.即時回饋
和登入註冊的注意點一樣，在使用者輸入資訊的時候，給予立即的警語回饋,讓使用者可以馬上修改資料。
我在一些信用卡付款介面也有看到即時顯示卡片種類的功能，因為信用卡卡號可藉由前面幾碼辨認使用者正在輸入的是哪一種信用卡，這樣子的即時回饋，不僅可以讓使用者再次確認自己使用的信用卡，也可以給不知情的使用者(Me)一種系統很智慧的印象。😂
https://www.mypay.com.tw/tip2.htm
3.預設行動
為了方便使用者在下一次購買時使用信用卡付款，因此會預設記憶信用卡資料，下次結帳時僅需要授權就好，加速購買流程，也為使用者分擔輸入資料的負擔。
避免脫離的連結
在使用者進行付款的時候，避免會讓使用者分心的資訊出現在頁面上，進行最小化干擾，減少頁面跳轉的機率，比如博客來在購物車介面時，因為進到最終決策階段，使用者有時為了湊單，會跳轉頁面去選購商品去湊折扣或免運，同樣也是避免脫離介面，所以會在購物車介面加入折扣、免運商品，讓使用者直接選購，在下一步付款介面時，又因為是已經下決定購買，所以基於相同理由，拿掉了這些多餘的商品資訊。
降低所有恐懼或不安的想像
在信用卡付款的時後,我們都會擔心「卡片資訊有沒有key錯？」「剛剛結帳的商品價格視是不是正確的哇？」、「我有些擔心個資問題。」，這些都很可能會讓使用者產生恐懼不安的情緒，進而和負面的相關經驗產生連結，產品要做的就是讓使用者降低或消彌這些引發強烈情緒因素，比如:
1.在信用卡結帳介面中，依舊顯示花費金額，方便使用者確認自己前後金額是否正確。
2.通常有 Key 錯相關問題，比較多都是指 Key 錯卡片資訊位置，像我以前就常把卡號打成卡片後面的帳號😂，上面 Agoda 的解決方式是當使用者在輸入資料時，會在右側信用卡圖示標註應該要輸入卡面哪個位置的資訊，把資訊視覺化，提高使用者的認知，我覺得蠻不錯的。
3.如果產品不是有相當聲譽的品牌，否則使用者一定會對信用卡付款產生不確定感，畢竟這就是差不多等於把自己帳戶交給對方，所以個資相關問題就必須在介面上向使用者呼籲付款的安全性，至於相關內容該放到哪裡，才好讓使用者理解及放心，這時候視覺層次就可以起到很好的作用，比如像 Agoda 將「安全付款」的重點放在整個信用卡付款內容的結構之上，表述內容之間的關係，讓使用者理解整個輸入內容皆有保障（雖然他在 button 和text field都有暗示資訊加密的訊息拉），或像蝦皮在使用者輸入資訊結束後，給予訊息加密的相關內容。
適時考慮不同情況
在資料填寫完畢之後，付款結果會根據不同的狀況有不同的結果，可能成功付款，也可能失敗，這些最終結果都要讓使用者了解，讓使用者能夠清楚自己處在什麼情況，方便判斷該如何做出應對。
在成功的情況下，給予明確的成功圖示和字樣，並引導使用者到其他頁面，比如:訂單確認頁面或首頁。
如果是付款失敗，基本上有兩種情況，一個是使用者的信用卡的問題，另一個是服務系統端的問題。
1.服務系統端的問題
- 網路斷線問題，與伺服器失去連結，導致資料無法傳輸，可能原因為網路本身問題，或是產品設定為倒數繳款 (比如 Agoda )，為了讓使用者促使再次付款，所以在返回輸入介面後，產品保留已經填寫過的 text field ，避免試用者感到麻煩，進而更有意願重新嘗試付款。
2.客戶端的問題
- 無效或錯誤的資料，這個問題基本上可以用「即時回饋」來解決，降低使用者輸入錯誤的可能性，也避免在資料輸入完畢後，才告知有誤。
- 付款流程因為信用卡本身的問題遭到拒絕，具體上有很多原因，例如:有不良交易紀錄、單筆金額超過上限、信用卡過期、有可疑交易活動，這部分因為有太多不確定因素，甚至有詐騙的疑慮，所以會將使用者輸入的資料清空，增加操作的困難度，以便過濾詐騙的可能。
若是向使用者顯示付款錯誤，也必須引導使用者再次付款，當然也保留回到其他頁面的選項。
第二篇生出來拉!!🥰這篇最煩的應該是要把我的個資全部刪掉，然後才能截圖，還有一直不小心跑題，喜歡這篇的話，記得幫我拍個手收👏👏👏,鼓勵我一下嘿!
下一篇是 Daily UI03-single product page ，中秋連假就懶懶寫文了，下禮拜見囉!!!🖖