このエントリーをはてなブックマークに追加

Design UI UX

DailyUIシリーズの第2回です。
※ 第1回はやりましたが、ブログ化できていないので後日ブログ化したいと思います。
 
第2回のお題は「Credit Card Checkout」。クレジットカードの情報入力ページです。
 
私は自称UXプログラマーなので仕様とユーザー体験にフォーカスして調査&手書きでUIを作っていきます。
流れは下記です。

では、やっていきましょう。
 

支払い情報入力が必要な理由

有料のサービスを提供しているから。
無料のサービスだったら、いらないですね。ビジネスモデル的にユーザーから支払いが発生する時点でなにかしらの支払い情報の登録が必要になります。今回はクレジットカードに縛られているのでクレジットカード情報を調べるのですが、まぁ、機能でいったら、別にクレジットカードじゃなくても良くね?という感じ。未成年対象のサービスならクレジットカード決済ではなくキャリア決済だったり、iTunesカードで支払う機能を作るかもしれない。

理想の支払い情報入力・・・?

なにも入力しないでも決済したければ決済できることではないだろうか・・・?iPhoneの指紋認証・顔認証ぐらいで済ませたい。とりあえず、情報入力するのが本当にめんどくさい。  
これだと話が進まないので、情報は入力しないといけないとする。
人によっては、登録している1PasswordやGoogleの自動入力機能を使うとかの入力補助という方法は楽だし間違いもないのでありだと思う。実際に私が考えた最強のUIには入力補助ではないが、クレジットカード登録ができるPayPalを入れた。
 
入力補助のサービスも登録していない場合を考えてみる。
この場合は、いちいち入力しないといけないので、できる限り入力補助があったり差し戻しがないほうが良い。あるサービスでカード情報を入力したときに、カード情報を全て記載してから、カードが対応していない旨のエラー表示が出たことがあった。もちろん、最初から入力し直した。必要だったので仕方なくやり直したが、ユーザーによってはここで離脱してしまうユーザーもいると思う。時々フォームでも全ての情報を入力させてからエラーメッセージを出すものがあるが、できる限り1つの入力欄でエラー表示を完結させた方がユーザーにとって優しいと思う。入力項目数が多いと、正直どこのことを言っているのかすら分からない上に、修正漏れが発生しやすくなる。
 
ちょっと話がごちゃごちゃしたが、結論としては「入力が楽で差し戻しがないフォーム」が良さそう。

色々なサービスを調査してみた

今回はクレジットカード情報ということもあって、そもそも私がユーザー登録しているサイトじゃないと見られないことが多かったのとユーザー課金が発生するサービスじゃないといけないので調査対象は少なめになった。

【調査対象】
DMM, Note, Wantedly, Amazon, メルカリ, Netflix, Niconico, Reddit, Youtube Music, ZOZOTOWN, Medium, GitHub, Hatena
 
ざっくり分けると対応しているカードを表示しているサービスとそうでないサービスがあった。  

  • 対応カードを表示しているサービス
    DMM, Note, Wantedly, Amazon, メルカリ, Netflix, Niconico, Reddit, Youtube Music, ZOZOTOWN

    Note
    ※ 画像はNoteのもの

 

  • 対応カードを表示しないサービス
    Medium, GitHub, Hatena

    Medium
    ※ 画像はMedumのもの

 
対応しているカードを表示するかしないかだと個人的には表示した方がていねいだなと思っている。表示していないサービスがなにをやっているかというと、はてなに関してはその前のページで登録できるカードを明示してから遷移させるようにしている。MediumとGitHubについては、カード番号を入力している途中でカードのアイコンがカード会社のブランドに変わる。ただ、問題となるのが対応していないカード会社のカード番号を入力したときの挙動である。GitHubはカード会社のロゴが表示されない・・・。多分、対応していないのだろう・・・。ただ、最初に入力したカードが未対応カードだと対応していないことが分からないのでないかと思っている。Meduimについては未確認だが、世界レベルで使われるサービスだとこういうことは頻発しそう。だからこそPayPalを用意しているんだと思う。   カードを判定している仕組みはクレジットカード番号のプレフィックスを判定しているっぽい。

気になったのは、カードの名義の入力欄がないサービス。
例えば、メルカリ。

YoutubeMusic

他の情報で補填しているのかもしれないが、あって当たり前のものがないとどうやっているのかは気になるところ。

 
動きでおもしろかったのはYoutube。
この入力欄がカード情報を入れようとした瞬間に

YoutubeMusic2

こうなる!!!

Mercari

項目が動的に増える上に、カードの判定もついているというリッチな仕様。ここまでする必要があるのかはよくわからないが、今まで見たフォームの中で圧倒的こだわりを感じる。
 

思った以上に種類があって結構びっくりしている。
対応カードが書かれていないサービスは絶対あると思っていたが、自動判定の仕組みまで知ることができたのは勉強になった。
Pinterestに撮ったスクショをまとめたいのですが、アップロードがめんどくさいのでどなたか良い方法を教えてください・・・。

私が考えた最強のクレジットカード情報入力フォーム

完全におまけみたいな感じですが、最強のクレジットカード情報入力フォームを作ってみた。
フォームなのでシンプルにしたくて仕方がない。気をつけた点は下記。

  • 基本的にフォームのみでおかしい入力値のときにそれぞれのフォームの下にエラー表記を出す形にした
  • 支払い可能なクレジットカードをしっかり明記
  • セキュリティコードがなにか分からない人が結構いると思われるので説明導線をつけた
  • 海外ユーザーでも使いやすいようにPayPalをつけてみた(クレジットカード入力めんどくさいので)

DailyUI002

手書きだと動きをあまり考えられていない感じで見落としがありそうなのが難点・・・。

レビューお待ちしております!

色々ご意見いただけると嬉しいです。こんな例もあったとかあれば教えてください!

次は第3回です。
(書いたらリンク載せます)
書きました!

このエントリーをはてなブックマークに追加

© 2018, Udayan28