會員 APP 導入行動支付的介面 UX 設計要點（上）
2018 年號稱台灣「行動支付元年」，是行動支付跨越技術障礙與法規限制蓬勃發展的一年。在百家爭鳴的發展期，各大企業無不搶佔行動支付市場，不過有別於 2015 年 Apple Pay、Samsung Pay、LINE Pay、街口支付等主流支付管道的興起，這次各大百貨零售業者，像 7–11 與全家便利商店、家樂福、屈臣氏、新光三越及微風廣場等都紛紛加入了戰局。
將「信用卡行動支付」導入原有的會員 APP，是許多百貨零售業 2018 年的重大改版目標。
延伸閱讀：
都是行動支付，電子支付與第三方支付在法律上，有什麼不同與相同的地方？
『工商時報』行動支付來襲 大型零售店掀會員戰然而，導入的過程必須經歷 POS 系統與會員系統的更新、結帳與服務流程的再設計、以及消費周邊功能的線上整合等挑戰，軟硬體的建置成本相當可觀。為了讓如此龐大的支出發揮實質效益，「如何在符合系統限制與法規要求的前提下設計出快速、順暢、高整合力的行動支付體驗」，將是這一波改版浪潮中相當重要的課題。
這是我在設計過程中做的一些整理，文長分成上下篇，針對會員 APP 導入「信用卡電子支付」，分享一些觀點，還有設計師在實務上可以注意的地方。
本文目錄上篇：
一、會員 APP 導入行動支付之商業目標
二、確認支付方式與硬體系統下篇：
三、設計支付介面的基本要點
四、提升易用性的設計小技巧
一、會員 APP 導入行動支付之商業目標
如果你的客戶說他們的 APP 要導入行動支付，你必須先瞭解他導入的目的，還有導入時需要克服的障礙。
自從台灣法規鬆綁，行動支付成為很明確的趨勢。減輕錢包的重量、省去找零的麻煩、減少多人分帳的困擾、不必印電子發票……行動支付的便捷眾所皆知。不難想像在市場還沒被瓜分殆盡之前，人人都想分一杯羹。
不過，零售業要使用者在「會員 APP 」上綁定信用卡進行支付，卻比一般支付平台有著更大的阻力需要克服。
使用零售業專屬行動支付的阻力
- 使用場域限制
與通用性支付平台不同，百貨零售業鎖定的場域是自家事業體旗下的商家。以新光 skm pay 為例，只支援新光三越、新光影城與旗下線上商城的消費，除非你是經常光顧的常客，否則能打開使用的頻率並不高。
- 特定銀行與卡種限制
礙於合作銀行或支付技術來源的限制，許多會員 APP 在卡種與發卡銀行上的支援都較通用性支付平台來得少。例如「全家 My FamiPay」使用國泰世華銀行開發的系統，而企業原本就與台新銀行合作，因此只能綁定「國泰」與「台新」兩間銀行的信用卡。更不用說還沒取得電子支付執照之前，不能綁定金融卡或銀行帳戶進行支付，消費者對支付方式的選擇將非常侷限。
- 已經有其他更便利的行動支付可以使用
根據資策會資深產業分析師胡自立指出，「九成的民眾只會安裝 3 種支付 App，最多不超過 5 種」。許多商家本來就有支援 Apple Pay、Google Pay 跟街口支付等常見的支付工具，如果顧客已經有慣用的支付方式，尤其當支付工具有轉帳、繳費等多元消費功能時，更不會傾向為了少用的場域特地綁定新的、功能比較限縮的支付工具。
站在顧客的立場，綁定一個新的行動支付是一趟麻煩的用戶旅程，需要建立一組新的消費密碼、重新認證身份、輸入卡號、驗證卡片……如果沒有足夠的誘因，繁複的流程將會大幅降低綁定的動機。
零售企業願意建置自家行動支付的原因
不過，既然知道顧客存在著這麼多阻力，為什麼企業還是願意大手筆建置自家的行動支付呢？我認為可以從以下幾個觀點切入分析。
- 更新企業形象
隨著行動應用的普及，台灣各大零售企業也面臨了「數位轉型」的挑戰，然而許多企業的 APP 已經上架數年未見更新，格狀的功能架構也早已脫離現今的應用趨勢。導入行動支付正是一個改版的契機，能讓品牌跟上時代的腳步，在狹窄的消費市場創造領先同行的話題。
- 提高購物便利性
使用通用平台如 Apple Pay、Google Pay 時，如果加上會員集點甚至電子發票歸戶，必須掃描 2~3 個條碼，還有固定順序不能刷錯。APP 導入行動支付能整合會員的集點功能，減少顧客在場域內「刷條碼」的次數，加快結帳速度，提高顧客購物時便捷的感受。
- 培養顧客忠誠度
配合原本的會員系統，可以透過導入行動支付，增加行銷活動的可操作變因，豐富自家場域內的優惠種類，提供會員更便利、更多樣的消費回饋，以培養消費者對品牌的黏著度。透過與會員 APP 的結合，增加「促使消費者轉化為會員的誘因」。
- 降低手續費支出
零售商家使用現行的行動支付平台必須與平台供應商拆帳，手續費甚至高過銀行刷卡手續費。導入自家的行動支付，就算使用特定銀行的系統，依據品牌規模、合作效益等，或許能談到相對優惠的手續費，減少損失的毛利。
不過，目前沒有還沒有企業提出過具體數據佐證，所以這個出發點純粹是個人推測。
綜合以上原因，可以預期已經展開的零售業行動支付卡位戰，勢必會越來越激烈。
二、確認支付方式與硬體系統
行動支付設計不只是軟體的範圍，更大的限制在於「硬體 POS 系統能不能配合」。因此在設計之前，要先確認要導入的支付方式，還有目標場域內的硬體限制，以免設計出來的流程簡潔快速，卻不能實際落地。
了解支付方式
市面上有兩種現存的支付方式：「NFC 感應支付」與「掃碼支付」。
由於 Apple 並不開放第三方軟體使用 NFC 晶片開發相關應用，因此除了 Apple Pay 之外，iOS 系統無法使用 NFC 感應支付。Android 方面，雖然有開放 NFC 晶片的應用，不過考量到開發與建置成本較高，還有雙平台的體驗一致性，會員 APP 通常都是導入「掃碼式」支付 — 掃描 Barcode 或是 QR Code 來完成結帳。所以設計時其實可以直接考慮掃碼支付的使用情境。
硬體系統支援度
由於行動支付很大部分會受到硬體 POS 系統的限制，因此在導入之前，要先確認好三件事：「事件、次數、順序」。
【事件】指的是行動支付當下可以執行的行為，目前常見的行為包含「支付、會員集點、電子發票儲存」。
通常會員 APP 導入行動支付時一定會將「會員集點」考慮進去，不過電子發票就不是必然。如果有要導入，就要決定導入的是「手機載具條碼」、「信用卡載具」或是兩者並行。
其中，「手機條碼載具」只要店家的 POS 機可以開立電子發票，就可以支援；不過「信用卡載具」就要需要 POS 機同時支援電子發票與信用卡載具歸戶。
目前支援信用卡載具的銀行有：
台灣銀行、台北富邦銀行、台新銀行、國泰世華銀行、玉山銀行、聯邦銀行、第一銀行、華南銀行、中國信託銀行、新光銀行、永豐銀行……24餘家銀行的信用卡。
若非這24家銀行的信用卡，就算 POS 機支援信用卡載具，消費者也無法直接存取電子發票。【次數】是店員要掃條碼的次數。最理想的狀態當然是讓三個動作在一次掃碼之內完成。但這一樣受到 POS 系統的限制。行動支付剛上路時，許多系統還沒進行整合，導致會員得要掃碼三次才能完成所有動作。隨著系統更新，有的支付 QR Code 已經可以同時搭載三段不同的字串，再由 POS 機解讀成「付款」、「集點」、「發票歸戶」三個動作分別執行。
最後是【順序】 — 掃描條碼的順序，這也是由 POS 機處理的先後順序來決定。通常「支付條碼」掃瞄完後 POS 機就會完成結帳，所以用戶必須在出示支付條碼之前先出示會員條碼跟發票條碼，才能在結帳同時完成集點與歸戶。設計時需要注意依照正確順序安排頁面，避免讓使用者因為順序錯誤造成前述「事件」無法完成；也要同時考慮「使用者這次消費不要會員集點」、「使用者臨時要印發票」等狀況發生時的操作方法。
『重點整理』設計之前必須先確認的事項：一、支付方式：
同時支援 iOS 跟 Android 雙平台的 APP 通常選擇條碼掃描二、支付當下的行為：
【事件】付款、會員集點、電子發票載具
【次數】掃描條碼的次數
【順序】多於一個條碼時的掃碼順序
請接續看下篇：
我是果思設計的 UX 設計師 Tina，我們專注在 App 設計與 App 開發，創造真正有價值的數位產品。如果你喜歡我的文章，歡迎幫我拍手；有任何想法或想補充的事項，也歡迎在留言區留下你的足跡，期待我們能教學相長，分享看法：）
