【フィンテックデザイン】プロダクトデザイナー向けUXのヒント
フィンテック （FinTech：金融機関に関するテック）はどの分野にとっても一筋縄ではいかない業界ですが、特にUXデザイナーにとってはそうでしょう。 フィンテック のデザインにおいて、デザイナーは州や国によって異なる金融規制を勉強しなければならず、その金融規制は詳細かつ広範であることが多いです。ということは、デザイナーはプロジェクトの始動前に多くの読み物が必要であるということです。
本記事では、 フィンテック 製品デザインの基本について、製品がユーザーに優しく、コンプライアンスに適合し、顧客に最大限の価値を提供するためのベストプラクティスを含めてお話します。
UXPinは、暗号通貨製品をデザインするフィンテックスタートアップ企業でも、モバイルバンキングアプリに革命を起こそうとしている既存の多国籍企業でも、より高い忠実度と機能を備えたプロトタイプとテストのための洗練されたコードベースデザインツールをUXデザイナーに提供します。無料トライアルにぜひサインアップして、UXPinの高度なコードベースの機能をぜひすべてご体験ください。
フィンテック とは
フィンテック（Financial Technology）とは、金融テクノロジーの製品やサービスを生み出す市場部門を指し、このような金融商品には、業界の革新と改善を目指すアプリケーション、API、あるいはアルゴリズムが含まれます。
フィンテック の例
以下は、フィンテックの例です：
- ネットバンキング（ネオバンクとも呼ばれる）：Monzo (イギリス)、Chime (アメリカ)
- デジタルお財布： Payoneer、Skrill、Revolut
- 決済サービス：PayPal、Venmo、Cash App、Stripe
- 投資サービス：Robinhood、Betterment
- 暗号化商品:：Coinbase、Ripple
フィンテックの事例については、Insider Intelligenceのフィンテックスタートアップの記事をご覧ください。
フィンテック のUXデザインの課題
1. コンプライアンスへの挑戦
企業コンプライアンスは、フィンテックデザインの最大の課題の1つです。複数の国や世界中のユーザーを対象に製品をデザインする場合、異なった法律に準拠するために市場ごとにデザインを変更することがあります。
例えば、AML（マネーロンダリング防止）やKYC（顧客情報保護）などの規制には、オンボーディングやユーザーフローに影響を与える詳細なプロトコルがあり、こういった規制には、ユーザーの識別、プライバシー、不正防止、アクセシビリティ、さらにはテロリズムなどに関する複雑なレイヤーが追加されています。
さらに複雑なことに、州や国がこのような法律を定期的に更新したり、新しい法律を導入したりするため、UX研究者やデザイナーは、コンプライアンスの維持のためにデザインを修正しなければならず、それによって製品のロードマップやUX戦略がぐちゃぐちゃになってしまう可能性があります。
2. 顧客の期待に応える
規制とは別に、UXデザイナーは、レガシー（旧式）バンキングや金融サービスからの顧客の期待も乗り越えなければなりません。例えば、多くのネオバンクは顧客のために実店舗を持たないので、アプリは対面での体験を再現するツールや機能を提供しなければなりません。
3. 製品の複雑さへの対応
フィンテックデザインのもう一つの課題は、製品の複雑さと、UXデザイナーがまとまりのあるエコシステムをどのように作るかであり、フォーブス誌では、それを「断片化から生態系への転換 」と表現しています。
従来の銀行や金融機関は、クレジット、小切手、預金、住宅ローン、ローンなど、商品ごとに異なる部門が担当しています。デザインチームは、適切な連絡と連携がなければ、シームレスな顧客体験を提供する全体的なエコシステムではなく、断片的な製品をデザインしてしまう危険性があります。
セキュリティプロトコル
フィンテックのセキュリティプロトコルは、UXのワークフローや、デザイナーがリサーチを実施、共有、保存、分析する方法に影響を及ぼします。UXチームは、ISO-27001（ISMSの要求事項などをまとめた規格）やISO-27002（実践規範の規格）など、さまざまなセキュリティプロトコルに準拠する必要があります。
また、UXデザイナーは、安全なパスワード、OTP（ワンタイムピン）の共有、テキストや電子メールのリンクに注意するなど、安全な習慣を採用するようユーザーに促す必要があります。
フィンテック アプリデザインの8つのヒント
1. クリーンなUIデザイン
クリーンでミニマルなUIはあらゆるデジタル製品に不可欠ですが、免責事項やポリシーへのリンク、その他の必要な情報を掲載するスペースを確保しなければならないことが多いフィンテックのデザインだとなおさらです。
段階的開示は、複雑なフィンテック UIをデザインする際によく使われる戦略です。UXデザイナーは、重要かつ必要なコンテンツのみをユーザーに表示し、その他の情報はツールチップ、ドロップダウン、アコーディオン、モーダル、その他のUXパターンの背後に「隠す」のです。
段階的開示のアプローチにより、デザイナーはきれいなUIを作りながら、ユーザーが必要なときにコンテンツを提供することができます。
2. 明確でシンプルな言語
金融商品・サービスは、その条件が長く複雑で、多くの人が理解できないことで知られています。
言葉を簡素化し、ユーザーに明確な予測を持たせることは、フィンテック製品のデザインにおいて非常に重要です。また、それによって金融の専門用語やその意味を理解していないユーザーとの信頼関係も構築できるのです。
例えば、クレジットの申し込みは、ユーザーのクレジットスコアに影響を与える可能性があります。UXデザイナーは、モバイル画面の制約がある中で、このような重要な情報を通常は数個の箇条書きで説明をしなければいけません。
3. アクセシビリティ
アクセシビリティはあらゆるデジタル製品に不可欠ですが、フィンテックのデザインには特に重要です。ノルウェーやオーストラリアなどの国では、製品はウェブコンテンツのアクセシビリティに関するガイドライン (WCAG) 2.0 レベルAA基準を満たさなければいけません。
こちらのPowerMapperの記事には、国とその関連するアクセシビリティ要件の一覧があります。
4. 有益な可視化
データを視覚化することで、ユーザーは情報を素早く消化し、理解することができます。UXデザイナーは、例えば収入と支出のように、数字を分けるのに色を使うこともできます。
5. 適切なキーパッドの使用
モバイル端末でフォームを入力する場合、ユーザーは数字、文字、特殊記号を切り替えて入力する必要があります。フィンテックのフォームは、一般的に他のデジタル製品よりも長く、ユーザーが入力する項目も多くなっています。
UXデザイナーは、モバイル機器に以下のようなどのキーパッドを使用するかを指示することで、このプロセスを効率化することができます：
- 数字優先のキーパッド
- 日付ピッカー
- 電子メールフィールド（デフォルトで@と.comが表示されるようにする。）
6. 説明的で有益なCTA（Call To Action）の使用
CTAをクリックすると何が起こるかについて、ユーザーに誤解があってはいけません。例えば、誰かがローンの申し込みをする場合、フォームのCTAは通常の 【送る】や【送信 】ではなく【適用 】でなければなりません。
7. 助ける、妨げない
しかし残念なことに、デジタル製品では、顧客がサービスをキャンセルしたりダウングレードしたりするための機能が隠されていることがまだよくあります。UXデザイナーは、顧客の購読終了やオプトアウトを可能にするものも含めて、ユーザーがタスクを完了できるよう、常にサポートしなければいけません。
管轄区域によっては、有料サービスのオプトアウトに関する明確なガイドラインがある場合もありますので、デザインが規制やベストプラクティスを満たしていることを常に確認しましょう。
8. モバイル向けの最適化
多くのユーザー（特に30代以下）は、モバイルアプリやブラウザーを通じて、モバイルでタスクを完了したいと考えています。フィンテック製品にモバイルアプリがない場合、ウェブサイトやウェブアプリがモバイルユーザー向けに最適化され、デスクトップと同じ体験が提供されるようにしましょう。
モバイルアプリの場合、ユーザーが確実にデスクトップと同じタスクを実行できるようにしておく必要があります。多くの製品では、モバイルアプリでできることが制限されており、これが不満の原因になったり、サービスのダウングレードや定期的な支払いのキャンセルができないなど、マイナスの影響を与えることがあります。
フィンテックのユーザビリティに関するよくある課題の克服
ここでは、フィンテック UXの一般的なシナリオとその克服方法をご紹介します。この例は、GoogleのUX Playbook for Financeから引用しています。
ユーザーへの教育とコンバージョン
デザイナーが直面する課題の1つは、複雑な金融商品についてユーザーを教育しながら、コンバージョンさせることです。ここでは、典型的なモバイルオンボーディングフローの推奨例を紹介します：
- 箇条書きで提供品と規制情報をまとめる
- スクロールを減らし、コンバージョンの可能性を高めるために、価値提案をCTAとともにフォールドの上に配置する
- オンボーディングフォームの冒頭に価値提案を繰り返す
- 信用と信頼を築くために、TrustPilotウィジェットなどのソーシャルプルーフを含める。
- 「サインアップして見積もりを入手する 」など、明確なCTAを使用する
- 既存ユーザーが新しい製品やサービスを申し込む際に、フォームのフィールドを予め埋めておく
- プログレスバーを使用して、ユーザーがプロセスのどの段階にいるのかを表示する
大容量データの表示
フィンテック製品は、多くのデータを1つの画面に表示しなければならないことが多く、特に面積の限られたモバイルデバイスでは困難です。ここでは、スペースを最大限に活用し、認知負荷を軽減するための推奨事項をご紹介します：
- メインのCTAは説明的なラベルで確実に目立たせる
- 二次的CTAにはアウトラインボタンやゴーストボタンを使う
- コンテンツの区切りには、色と一定の間隔を使う
- 見出しと本文の区別を明確にする
- 読みやすく、読みやすい書体を使用する
- 二次的コンテンツはカルーセル、アコーディオン、ツールチップの後ろに隠す
長文フォームの効率化
フィンテック製品は、法律の準拠のために多くの個人情報の収集が必要なことがよくあります。このようなフォームには長い時間がかかり、ユーザーにとっては圧倒されるように見えるかもしれません。そこで、長いフォームを効率化するためのヒントをご紹介します：
- 期待に応えるべく、フォームの入力にかかると思われる時間を最初にユーザーに伝える
- フォームをセクションに分割し、ステップに分け、ユーザーがいつでも簡単に前後に移動できるようにする
- ユーザーがあとどれくらい完了しなければならないかを示すために、進捗状況を示すインジケータを使用する
- 申し込みに必要な情報のみを尋ね、本人の肩書きや性別、人種など、金融機関にとって無関係な余計な項目は避ける
- 選択肢が3つ以下の場合は、ドロップダウンメニューを使用せずラジオやチェックボックスを使用して、素早い選択を可能にする
- ユーザーが時間のあるときに戻れるように、進捗状況を保存できるようにする
- 生年月日、連絡先番号、米国の郵便番号、クレジットカード番号などの適切なフィールドには、テンキーを使用する
- ユーザーを案内するプレースホルダとエラーメッセージを提供し、エラーメッセージには、ユーザーが問題を解決するための明確で実行可能な指示を必ず付ける
PayPalがUXPin Mergeを使用して製品を8倍速く構築する方法
PayPalは、200カ国以上、25通貨をサポートする世界最大級の決済プラットフォームです。2019年、PayPalの社内製品開発チームはUXPin Mergeの使用を開始し、デザインの拡張と製品の提供を8倍速く行えるようになりました。
Mergeとは
Mergeは、コンポーネントライブラリをUXPinのエディタに同期させるデザイン技術で、デベロッパーが製品段階で使用するUI要素を完全にコード化し、デザイナーがプロトタイプを作成できるようにします。
PayPalのMergeはどのように機能したか
PayPal は Merge を使用して、Microsoft の Fluent デザインシステムと UI コントロールを同期させています。各 React コンポーネントのプロップを通じてすべてが事前に設定されているため、PayPal の製品デザイナーはそのコンポーネントをドラッグ＆ドロップして新しいユーザーインターフェースの構築ができるのです。
PayPalのUXチームは、デザイン、プロトタイプ、およびテストの90%をデザインハンドオフ前に完了する製品チームに指導とサポートを提供していますが、UXデザイナーが丸一日かけて行っていた作業を、プロダクトマネージャーは10分以内で、しかも忠実度や機能性を大幅に向上させながら完了させることができるのです。
このプロトタイプには、完全に機能するグラフやデータの可視化、ソートフィルター、実データ、動的なユーザー体験など、画像ベースのプロトタイプでは実現できなかった機能が含まれています。
MergeのプロトタイプはPayPalのユーザビリティテストの改善だけでなく、ステークホルダーがガイドや説明なしにプロトタイプに関与することができます。
「UXPin Mergeの大きな影響の1つは、より忠実度の高いプロトタイプを作成できるようになったことです。最終製品がどのように見えるか、UX、インタラクティブ性に関して、デザイナー、経営陣、ディレクター、デベロッパーを含む全員がより確信を持っており、ステークホルダーからより質の高いフィードバックが得られます。」エリカ・ライダー氏（ペイパル、デベロッパーツールおよびプラットフォームエクスペリエンス、UX担当シニアマネジャー
UXPin Merge が世界最大の フィンテック企業のワークフローに革命をもたらすことができるとしたら、このコードベースのテクノロジーがあなたのビジネスに何をもたらすか想像してみてください! 無料トライアルにサインアップし、MUI React ライブラリ統合を通じて UXPin Merge をぜひお試しください。
