金融アプリのUI設計：お金に関する操作を分かりやすく、安心できるものに

残高を文脈とともに読みやすくする

大きな数値だけでは意味が伝わりません。どの口座の金額かを示し、なじみのある記号やコードで通貨を表示します。プロダクトが現在残高、利用可能額、保留中の額、投資額を区別するなら、それぞれを直接ラベルで示し、必要に応じて説明しましょう。異なる種類の残高を、ほぼ同じ見た目で定義もなく並べるのは避けます。

文脈には、金額の最終更新時刻や保留中の取引も含まれます。飾りの数字を増やすのではなく、画面の解釈に役立つ詳細を選びましょう。数字、小数点の区切り、マイナス記号を見分けやすくするため、一貫した数値形式と十分な間隔を使います。口座名が長い場合は、色やアイコンだけに頼らず、口座を区別できるだけの文字を残してください。

• 金額の近くに、明示的な口座ラベルと通貨を表示する。
• 「利用可能」や「保留中」などの専門用語は、平易な言葉で説明する。
• 文字を大きくした場合や支援技術を使う場合も、金額と状態を理解できるようにする。

取引状況を変化する状態として示す

取引は履歴一覧の一行ではなく、過程です。適切な場合は、各項目に簡潔な状態、日付、金額、取引相手または送金先を示します。状態はテキストで見えるようにします。色やアイコンで補強してもかまいませんが、それだけに意味を担わせないでください。プロダクトの実際の状態に従い、待機中、完了、拒否、対応が必要な取引を区別します。

例えば、Alexへの45.00 EURの仮想的な送金は、最初に「11月4日に予定」、次に「処理中」、その後「完了」と示せます。送信後に接続がタイムアウトした場合、証拠がないのに成功や失敗を断言してはいけません。状態がまだ確認できないこと、再確認の方法、再試行で別のリクエストが作られる可能性があるかを明確にします。正確な文言と利用可能な操作は、プロダクトの実際の取引動作によって異なります。

避けられる混乱を防ぐ金融フォームを設計する

タスクに必要なときに情報を求め、関連する欄をまとめて、フォームが自然な順序で読めるようにします。「受取人」「金額」のようなラベルを常に表示しましょう。プレースホルダーは入力例であり、ラベルの代わりにはなりません。特定の形式が必要な欄では、入力前にそれを示します。例えば、金額に小数単位を入力できるか、どの識別子を入れるべきかなどです。Appleのデータ入力ガイドは、求める情報を明確にし、不要な入力を減らし、入力に応じて値を検証することを勧めています。

情報に合った入力コントロールを選び、修正できるようにします。任意の欄は任意と分かるようにし、必須の欄も明示します。選択に影響がある場合は、短いコードから意味を推測させるのではなく、選択肢を平易な言葉で説明します。画面が折り返されたり拡大されたりしても分かるよう、入力欄の説明をコントロールの近くに置いてください。

役立つ確認・確定手順を用意する

重大な操作の前に、送信する情報を要約します。出金元、送金先、金額、日付、フローに関係する表示済みの手数料や所要時間などです。判断に最も重要な詳細をまとめ、編集する経路を見つけやすくします。主要ボタンは曖昧な「続ける」ではなく、「送金を予約する」のように操作を表すべきです。

確認画面は「何が起きたか」「今何ができるか」に答えるべきです。照会番号や領収書の表示は、後から確認する際に役立ちます。ボタンを押したことを、その裏で行われた処理の成功の証拠としないでください。インターフェースには、プロダクトから返された実際の結果を反映します。

• 要約を入力値と選択した項目に一致させる。
• 実用上可能な範囲で、「戻る」と「編集」により利用者の作業を保つ。
• 送信後、リクエストを受け取ったのか、処理中なのか、結果が確定したのかを示す。
• 応答が不確かな場合は、再送信を促す前に現在の状態の確認方法を説明する。

エラーと更新をアクセシブルにする

入力エラーを検出したら、対象の欄を示し、問題をテキストで説明します。「無効な金額」より、使える形式や不足している値を説明する文言のほうが役立ちます。正しい入力は保持し、一つの問題を直すために最初からやり直さなくて済むようにします。W3CのWCAG 2.2のガイドは、検出された入力エラーを特定して説明すること、入力が必要なときはラベルや指示を用意することを求めています。

状態の更新も重要です。フォーカスを動かさずに画面が「処理中」から「完了」に変わる場合、支援技術にも判別できる形で更新を伝えましょう。WCAG 2.2は、文脈を変えずに結果、待機、進捗、エラーを伝える変化をステータスメッセージとして説明しています。警告は重要度に合わせ、視覚表示が更新されるたびに遮ることなく、意味のある変化を知らせます。

実装されたインターフェースで、コントラスト、文字サイズの変更、キーボードやスイッチによる操作、スクリーンリーダー用の名前を確認します。明確な見出しとコントロールのラベルを使い、成功、エラー、取引の方向を色だけで示さないでください。Appleの設計原則は、明確なフィードバックと失敗からの復旧支援を重視しています。これらは有用な目標ですが、実際のアクセシビリティはプロダクト全体を評価する必要があります。

金融インターフェースのレビューチェックリスト

一般的なタスクを、最初に表示される残高から最終的な状態までたどります。通常の経路、入力修正、接続遅延などの中断を確認します。ライブラリ内の関連するモバイル画面を比較して、各インターフェースが情報や操作をどう配置しているかを見たうえで、自分たちのフローを実際のプロダクトの動作に照らして評価します。

• 残高がどの口座と通貨を表すか分かるか。
• 保留中と完了の状態は明確な名前が付き、テキストで示されているか。
• すべての入力欄に見えるラベルがあり、必要な形式の説明があるか。
• 送信前に送金先、金額、タイミングを確認できるか。
• エラーは問題を特定し、実行できる修正方法を示すか。
• 色、精密な視力、フォーカスの移動に頼らず、更新を知覚できるか。
• 結果が不確かな場合、再試行前の確認方法が説明されているか。