【決定版】フィンテックアプリのデザイン実践ガイド

DESIGNER

金融系アプリは、細心の注意を払って設計されるべきものです。私たちYDNは、フィンテックの分野に長年関わるなかで、金融系アプリを開発するデザイナーが直面する問題を多く学んできました。この記事では、私たちの経験をもとに、素晴らしい金融系アプリをデザインするための実践的アドバイスをまとめていきます。

オンボーディング

ユーザーへ与える第一印象はよく考えよう

UXにとって、シンプルでわかりやすいことが重要視されるのはいうまでもありません。オンボーディングは素早くシームレスに行われる必要があります。登録フォームはシンプルにし、ユーザーへの質問は出来るだけ少なく、それでいてきちんと情報は提示する必要があります。

しかし実際の金融サービスにおいては多くの制限があり、顧客確認(KYC :Know Your Customer)やマネーローンダリング対策(AML:Anti-Money Laundering)の規則を満たすために、多くのユーザー情報を集める必要があります。ユーザーにサービスを使ってもらうために、非常に多くのユーザーデータが必要なのです。

まず、第一印象を意識しましょう。過去に行なったユーザーリサーチのひとつで、ユーザーはアプリを使う前から、個人情報を入力するのを嫌がる傾向にあるということがわかりました。一方で、事前にアプリの信用性や有用性を確信してもらえれば、ユーザーは面倒な個人情報入力もいとわずに行なってくれるでしょう。

フォームを再び偉大なものにしよう

フィンテックのアプリでは、どこかのタイミングでユーザー情報は必ず入力してもらう必要があるでしょう。フォームのデザインや使いやすさは、コンバージョンレートに大きな影響を及ぼすため、ここはカッコよく決めたいところです。

インライン型のバリデーションを使うことで、エラーを即座にキャッチしましょう。進捗状況を表すプログレスバーを使うのも忘れないようにしてください。このことで、ユーザーは自身の進捗を確認し、達成感を感じられます。また途中で保存を可能にし、後から記入できるようにすることも重要です。

なぜデータが必要なのかを説明しよう

ちょっとした説明を入れるのは良いアイデアです。ユーザーの住所や生年月日が必要であるのならば、それらの情報が必要なのはユーザー確認のためであるということを説明してあげるのが良いでしょう。ときに人は年齢を偽ることがありますが、その情報がユーザー確認のためだということを理解してもらえれば、正しい情報を入力してくれるでしょう。

▲Robinhoodのアプリは、なぜ住所の情報が必要なのかを簡潔に説明してくれます。また、住所検索やマップの表示を使うことで、ユーザーは素早く情報を打ち込むことができ、エラーを防げます

セキュリティ

適切な認証システムを設計しよう

金融に関わる上で、セキュリティは主要なトピックです。認証システムは重要ですが、うまくデザインされていない認証システムは、以下の2点において失敗しています。

  • ひとつめは、適切ではない人々を招き寄せ、肝心のターゲットユーザーがサービスにアクセスできていない状態です。SMSやマジックリンクによる認証システムは、スマートフォンを持っている人なら誰でも使用できてしまうため、あまり有効ではありません。
  • ふたつめは、認証システムが複数用意されていない状態です。モバイルアプリの利点は、Androidであれば指紋認証、iOSであればTouch IDやFace IDなど、生体認証を使用できることにあります。しかし、このような生体認証が使用できない場合のバックアップとして、他のオプションを用意しておくことも忘れないようにしましょう。

”脅威モデル”対策をしっかり行おう

脅威モデルとは、強固な認証が求められる送金などの処理や、リスクのある操作に対して作動するものです。ユーザーがログインしている場合、リスクの少ない操作には簡単にアクセス出来るようにし、それと同時に詐欺行為からユーザーを守る必要があります。

良い事例として、Amazonの脅威モデルが挙げられます。認証なしでワンクリック購入が行える一方で、新しい住所への発送にはクレジットカード情報を入力し直す必要があります。

▲新しい住所に発送する際、Amazonプライムではクレジットカード情報を再入力する必要があります。

ロックアウトの設計は慎重に

追加のセキュリティ対策として、ログインに何度か失敗した場合はロックが掛かる仕組み(ロックアウト機能)を導入することも検討されます。アカウントが乗っ取られている場合はこの方法は有効ですが、ログインIDやパスワードの情報を覚えられないユーザーにとっては厄介な機能でもあります。ロックアウト機能を使用する際は、以下の3点に気をつけましょう。

  • 「あと2回間違えたら自動的にロックが掛かります」など、必ず”事前に”ユーザーに警告をだす
  • ロックアウトまでの回数をユーザー側で設定できるようにする
  • 5分間のみロックアウトするなど、一時的なロックアウト処置に止める
  • ロックアウトにより締め出された際、他の方法で認証を行えるようにするか、すぐに対応できるカスタマーセンターへのリンクを提供する。金融機関に問い合わせて、問題の解決まで数日間待たなければいけないことほど、苛だたしいものはありません

マスクをかけるか、かけないか?

クレジットカード番号やセキュリテイコードを表示することは、自分の裸を晒すことと同じくらい繊細なものです。ユーザーがクレジットカード番号を記載している最中は、マスクをかけることなく番号全てを表示することで、記入ミスが防げます。一方で、表示の必要のないタイミングでは、クレジットカード番号はマスキングして見えないようにしましょう。

全てを分かりやすくする

データをビジュアライズしよう

多くの人にとって、金融はつまらなく理解が難しいものです。データをビジュアライズすることは、この理解のバリアを取り除く素晴らしい方法といえます。ユーザーに価値のあるインサイトを提供したり、ユーザー自身に自分の出費額や貯金額、投資額などをより理解してもらうことで、彼らも自身のお金を把握できます。

ただし、いきなりチャートをデザインする前に、ユーザーに何を、なぜ見てもらう必要があるかは理解しておきましょう。また伝えるポイントをおさえた、正しいグラフのタイプを選ぶのも重要です。

▲Revolutは、トランザクションがトータルバランスのどれほどの割合をしめるのかビジュアルで表示してくれます

ホワイトスペースを有効活用しよう

金融系アプリはどうしても情報が詰め込まれがちですが、ユーザーの使いやすさを考慮し、賢く情報提示を行いましょう。以下のポイントが重要です。

  • フォントサイズ、太さ、カラーなどで情報の優先度がわかるようにする
  • レイアウトエレメント間にはホワイトスペースを使い、ページの重要ポイントが一目でユーザーにわかるようにする

▲もちろん、ホワイトスペースが白である必要はありません。Coinbaseの青いホワイトスペースが参考になります。

アクセシビリティのルールに従おう

お金は誰でも使うものです。金融系アプリも同じように、誰にでも使えるものであるべきです。デザインプロセスにおいて、障害がある人々のことを考慮に入れるのは大切です。

アクセシビリティのルールに従うことで、あなたのプロダクトは全ての人々にとってより使いやすいものになります。読みやすいフォントを使用するほか、コントラストの強いカラーを意識するとさらに読みやすさがアップします。ただし、人口の約10%が何らかの色盲を抱えているといわれているため、カラーのみに頼るのは良いアイデアではありません。

ユーザーの身になって言葉を選ぼう

もしあなたに金融に関する知見が少しでもあれば、恐らくいくつかのジャーゴンや複雑な言葉遣いを覚えてしまっているでしょう。あなたの作るアプリのターゲットがその道の専門家でない限り、多くのユーザーにとってそれらの言葉遣いは分かりにくいものです。

アプリの言葉遣いはあくまでもシンプルで簡潔にし、誰にでも理解できるように心がけましょう。フィンテックは慎重に扱うべき分野ですが、だからと言って必要以上に堅苦しくすることはやめましょう。

デジット番号について

国際的にサポートされているフォントを選ぼう

フォントに関しては、通貨記号が国際的にサポートされているフォントを選択しましょう。多くのフォントには、この国際的なサポートがついていません。もし他のフォントを既に購入してしまった場合は、EUR、USD、GBPなどのISOコードを代りに使用するのが安全です。

数字や日時のフォーマットを確認しよう

コンセントの形状や交通ルールが世界中で異なるように、数字の表記方法も国や地域によってさまざまです。例えばあなたがアメリカにいるかフランスにいるかによって、「2,000」と「2.000」の違いは、2とも2000にもなりますし、日付にしても同じことです。デザイン上はきちんとひとつの方針に統一するようにし、ローカライゼーションの際にはディベロッパーとも確認を取りましょう。そうすることで、ユーザーのブラウザーやiPhoneの設定によって番号の表示方法を変えられます。

▲Transferwiseはスマートフォンの通貨設定に合わせて金額を計算します。

数字のレイアウトに気を配ろう

通貨価値や数字量はさまざまです。例えば、100アメリカドルは約287.493コロンビアペソです。このため、全ての数字がすっきりと収まるようにレイアウトやスペースに気を配りましょう。

数字の最後に2桁のゼロを2つ(例えば287.493,00など)つけるのも忘れないようにしましょう。このルールが適用されないのは為替と仮想通貨で、この場合は小数点の後により多くの数字が必要なこともあります(例えば100アメリカドルは0.0122 BTCとなります)。

赤色の使用には注意する

消費者バンクでは多くの場合、入金よりも出金処理が多いものです。出金額が入金額より多いのはただでさえ嫌なことなので、出金をマイナスサインや赤色の数字で表示するのは避けましょう。ユーザーが貯金額について落ち着かない気持ちになってしまうからです。

出入のみ色付きの数字で表示することで、デザイン上もすっきりとしたものになります。赤色の使用は、他の重要なエラーの際にとっておきましょう。

▲Paypalは入金処理を緑色で表示することで、他の処理との区別がつきやすくなっています。また、便利な「入金」「出金」フィルターもあります。

まとめ

デザインをするにあたって、金融というトピックは馴染みがないものかもしれませんが、この記事のアドバイスが役にたてば幸いです。夕食の支払いを簡単かつ誰にも見られないように行える、私たちが開発したdine+goのアプリも良ければチェックして見てくださいね。

(著者:YND 翻訳:Mariko Sugita)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ