アプリには、「求める前にまずは与えよ（Give before you take）」という原則があります。ユーザーにアプリのレビューや通知の許可、商品の購入などをして欲しいときは、まず自分の価値を示すべきです。アプリの中でこの原則がもっとも重要な場所の１つはどこでしょうか？ 答えは支払い画面です。
ユーザーにクレジットカード番号を入力し購入してもらうためには、商品を欲しいと思うだけでは不十分です。それは単なる最初のきっかけに過ぎません。クレジットカード情報が安全に管理され、セキュアな接続が保証され、お金を盗むことがないアプリだと信用される必要があるのです。
なによりも、パフォーマンスやユーザビリティに問題がなく、一貫したスムーズな体験でなければなりません。さもなくば、ユーザーはアプリの使用をやめてしまうでしょう。苦労してユーザーを支払い画面まで導いたのに、最後の支払い画面でユーザーに離脱されるのはなんとしても避けたいところです。そこで、完璧な支払い画面を作るために重要な取り組みをいくつか紹介します。
バグやクラッシュをなくす
支払い画面でもっとも不快な不具合は、画面のローディングが終わらないことや、エラーメッセージが何度も表示され続けることです。ユーザーを苛立たせるバグは完全になくす必要があります。
では、どのタイミングでバグやクラッシュの対策をすると良いでしょうか？ この疑問には、２つの答えがあります。１つ目はアプリのローンチ前、２つ目は常にです。購入を阻害するバグを発見し対処するするためには、アプリのアナリティクスツールを使うと便利です。AppStoreの審査に通るかどうかも判断材料になるでしょう。アプリ公開後は、クラッシュアラートツールを実装しておくことで、支払い画面において予期しない問題が生じたとき、すぐに気づくことができるでしょう。
画像元：Appsee
ヒント：eBayにいるような優秀な開発者は、ユーザーセッションレコーディングを使ってクラッシュの原因となったイベントを視覚的に保存し、クラッシュを再現しています。
ユーザーを安全に保つ
アプリへの送金や取引に、モバイル決済システムを使用している方もいるかもしれません。おそらくもっとも有名なのはPayPalで、ほかにもShopifyなどがあります。
こういったツールは、慎重に選ぶことが重要です。どの決済システムを選択しても、その会社がすべてのユーザーのクレジットカード情報を知ることになります。支払い機能のSDKを提供する会社が信頼でき、かつ「決済処理が早い」ことを確かめておく必要があります。ユーザーの支払いを処理する時間は、数秒で終わるべきなのです。
ユーザーが安全に感じられる
少し考えてみれば、クレジットカード情報をインターネット上で渡すのはまともではありません。非常に優秀なハッカーが１人でもいれば、ユーザーの銀行口座は空っぽになってしまうかもしれません。そのため、支払い機能のSDKが安全かつプライバシーを保護できるようにすることは前提として必要です。
それに加えて、ユーザージャーニーの重要な段階で、ユーザーがアプリの安全性を知ることができるようにしましょう。緑のチェックマークやURLバーの鍵アイコンといった、安全な接続であることを示すアイコンを表示するだけでも可能です。これによって、ユーザーの安心感をより高められるでしょう。
ユーザーの立場になって考える
ユーザーが支払い画面でどのような体験をしているかを知らなければ、体験をどのように改善すべきかわかるはずがありません。共感やUX調査、ユーザーからのフィードバック、アプリ分析を組み合わせれば、ユーザーの行動を理解し体験を改善するのに役立ちます。そして、支払い画面の改善において情報に基づいた意思決定をすることができるようになるでしょう。
定性分析は、支払い画面のユーザビリティとユーザー満足度を把握する最善の方法です。定性分析は、分析結果を結び付け、実際にユーザーが複雑な画面をどのように操作しているかを示してくれます。定性分析にセッションレコーディングを使うことで、ユーザー行動についての数値データが得られるだけでなく、ユーザーのアプリ体験をリアルタイムに観察することができます。それによって、支払い画面におけるあらゆるユーザビリティの問題が瞬時に明らかになり、自信を持って問題に対処できるでしょう。
すべてのデバイスでテストする
デバイスが異なれば、画面サイズも異なるため、ユーザビリティの問題が潜んでいるかもしれません。多種多様なデバイスや画面サイズがあるため、UX上の問題点はたくさん出現します。画面サイズの違いによって、ボタンやテキストフィールドが画面の外に隠れてしまうこともあるでしょう。スクロールに問題が生じたり、そもそもスクロール自体ができなくなったりするかもしれません。
画像元：Appsee
この問題は、完成品を使った厳格なテストを実施することで解決できます。すべてのデバイスにおいて、支払い画面が適切に表示できることを確かめましょう。ユーザーテストやタッチヒートマップなどのアプリ分析によって、要素が消えたり画面外で読めなくなったりするユーザビリティの問題点を簡単に見つけることができます。ユーザーが支払い完了に不可欠なボタンをタップできているかどうか、できていないとしたらどこをタップしているのかを明らかにする必要があるでしょう。
簡単にする
アプリでクレジットカード情報を入力する作業は、２分以内に達成されるべきです。入力に時間がかかるとユーザーがトラブルに直面しやすくなり、モバイルのショッピング体験に嫌気が差し、購入をやめてしまう可能性が高くなります。クレジットカードの支払いフォームを素早く記入するために簡単に修正できる点がいくつかあります。
たとえば、クレジットカード番号や有効期限（月/年）を自動的にフォーマットに合わせると良いでしょう。また、カード番号では数字のタッチパッド、日付ではスクロール、カードの名義人ではキーボードといったように、それぞれの欄に適したキーボードを表示しましょう。タップする回数を省くために、ユーザーがひとつの欄を記入し終えたら、自動的に次の欄へ移動する設定もおすすめです。
常に支払いの内訳を見せる
支払いにおいてもっとも厄介な間違いは、合計金額を間違えていることです。ユーザーは間違えて同じ製品の購入ボタンを２回押しているかもしれません。あるいは、注文を確定する前に配送料を確認しておらず、想定より大きい金額が口座から引かれて驚くこともあるでしょう。ヒューマンエラーはどんなときにも起こり得ます。こういった問題を防ぐ適切な方法は、注文詳細や配送先の住所、総額をいつでも画面に表示しておくことです。これによって、ユーザーはなにがカートに入っていて、どこで品物を受け取ることになるのかを把握し、「確定」ボタンを押す前に注文を編集できるようになるのです。次のWaveの例を参考にしてください。
まとめ
支払い画面は、会社の収益に大きく関わってきます。ユーザーが購入意思を持って支払い画面に到達するまでに、優れた体験と魅力的な商品を提供し、ユーザーに購入意欲を高めてきたとします。しかし、支払い画面が崩壊していると、すべての努力が水泡に帰してしまいます。幸運なことに、少しの調査とたくさんのテスト、十分なユーザー視点の分析があれば、ユーザーにとってもあなたにとっても望ましいアプリの支払い画面を作ることができるでしょう。
