會員 APP 導入行動支付的介面 UX 設計要點(上)

了解企業導入行動支付的「商業目標」與「系統限制」

Tina Tzan
Tina Tzan
Jan 25 · 8 min read

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 開發,創造真正有價值的數位產品。如果你喜歡我的文章,歡迎幫我拍手;有任何想法或想補充的事項,也歡迎在留言區留下你的足跡,期待我們能教學相長,分享看法:)

Goons

各種新鮮與心酸的觀點,都記錄在這裡

Thanks to 吳致賢(Jhih-Sian Wu)

Tina Tzan

Written by

Tina Tzan

「想太多的偏執狂」

Goons

Goons

各種新鮮與心酸的觀點,都記錄在這裡

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade