マイクロインタラクションによるQRコード決済の改善
QRコード決済でのUI改善のアイディアとして、先日以下のようなプロトタイプを作成しました。
https://www.behance.net/gallery/77099891/Payment-Interaction-Concept-Adobe-XD-Auto-animate
QRコードを表示してから支払いが完了するまでのインタラクションの試作です。この記事ではデザインの意図や目的、前提としたQRコード決済での課題点について説明します。
QRコード決済への心理的な壁
2019年現在、大規模な割引キャンペーンの実施や対応店舗の拡大によって、QRコード決済を中心としたスマホでのキャッシュレス決済の利用が急速に広がっています。しかし様々な理由で抵抗を感じている人も少なくないようです。MMD研究所の調査によると、QRコード決済を利用しない理由として、以下のような点があげられています。
QRコード決済サービスを利用しない理由
・クレジットカードで十分だから 43.1%
・現金で十分だから 23.6%
・個人情報や決済情報が漏洩しないか不安だから 21.6%
・お金を使いすぎてしまいそうだから 19.9%
出典：2019年2月 QRコード決済サービスの利用に関する調査
今回は「お金を使いすぎてしまいそうだから」という理由に注目し、デザインによってその印象を軽減できないかを検討します。
現金は直感的に把握できる？
なぜQRコード決済は「お金を使いすぎてしまいそう」なのか？ QRコード決済と比較して現金には以下のような特徴があります。
現金は使ったら物理的に減る
軽くなる、薄くなる → どのくらい減ったかを直感的に把握できる
現金は商品と直接交換できる
相手へ手渡しできる → 自分が支払ったことを直感的に把握できる
つまり、現金は物質的で直接性があるために直感的な性質を持っていると言えそうです。ここでの「直感的」は「思考に頼らずとも瞬時に感じ取れる」と言い換えることができます。
一方、QRコード決済には物理量の変化や直接的な交換は伴いません。支払いは商品を受け取るレジで発生するのではなく、ネットワークを介して複数のデータベースでの値の変更として間接的に生じます。こうした処理は目に見えず感触もないため、利用者がお金を使っている実感が生まれず、「お金を使いすぎてしまいそう」という印象に繋がっているのではないかと推測しました。
よって、物質性のない間接的な支払い行為に対して「思考に頼らずとも瞬時に感じ取れる」性質を与えることをデザインする上での課題としました。
直感的に感じ取れる支払いのデザイン
冒頭のプロトタイプの動きを順に見ていきます。
01. 画面の中央にカードの形状をしたウォレット。ウォレットには残高が表示される。
02. タップするとウォレットが開き、中からチケットが表示される。
03. チケットにはQRコードが表示されている。
04. 店員がQRコードが読み取るとチケットが切り取られ、画面外の店員がいる方向に移動する。
05. チケットが消えた後に決済情報（店舗・代金）を表示。
06. 一定時間経過するとウォレットが閉じて元画面に戻る。
デザインモチーフとしてチケットの形状を採用しました。QRコード決済では支払いが完了までアプリ内で金額が確定せず、現金そのものはモチーフとして扱いづらかったためです。支払いのためにカードの形状をしたウォレットを選択すると中からチケットが取り出されます。QRコードが読み込まれて決済処理が完了すると、代金が店員に手渡されたことを直感的に把握できるように、チケットが切り取られ画面外の店員がいる方向へ移動するアニメーションを設けています。
チケットのモチーフで物質的な印象を、支払い時のアニメーションで相手に直接手渡された印象を与えることで、支払いをしている実感を持たせられないかと考えました。
他にもこうしたプロトタイプをBehanceに投稿しています。
https://www.behance.net/shingo2000
今後もマイクロインタラクションを活用した、こうしたプロトタイプづくりを続けていこうと思います。
-----
👉 つみきでは、アプリやWebサービスのUIをデザインしています。遊びごころとアイディアでユーザーの愛着を生むデザインを得意としています。アプリやWebサービスの立ち上げや改善をお考えの際は是非ご相談ください。
-----
👉 TwitterでもインタラクションデザインやUIデザインについて発信しています。
Twitter (@shingo2000)