はじめに
モバイルヘルス アプリを使用するほとんどの医療従事者にとって、アンケートへの回答は主要なタスクです。
データ入力は難しく、エラーが発生することがあります。構造化データ キャプチャ(SDC)ライブラリと設計ガイドラインの目的は、ユーザーがデータ入力のユーザー エクスペリエンスとキャプチャしたデータの品質を改善できるようにすることです。
このセクションでは次の 4 つのテーマを取り上げます。
レイアウトとナビゲーション
長いスクロールとページ分けされたレイアウト
![長いスクロールとページ分けされたレイアウトの比較長いスクロールでは 1 ページに 3 つの質問が表示されますが、ページ分けされた質問は 1 つです。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/comparinglayouts.png?hl=ja)
Android FHIR SDK には、次の 2 つのレイアウト オプションがあります。
- 長スクロール(デフォルト)
- ページ分けあり
長スクロールのアンケートでは、1 ページにすべての質問が表示され、ユーザーはスクロールして各質問に移動します。
ページ分けされたアンケートでは、コンテンツが複数のページにわたって表示されます。関連する質問や入力フィールドを 1 つのページにグループ化できます。ページ間を移動するために、[戻る] ボタンと [次へ] ボタンはページの下部に固定されています。
GitHub でページ分けされたアンケートを作成する方法をご確認ください
次のうち、どのレイアウトを選択すればよいですか。
各レイアウト オプションには長所と短所があります。以下では、使用するレイアウトを選択する際に考慮すべきレイアウト タイプの属性をいくつか示します。
長スクロール | ページ分けあり | |
---|---|---|
ナビゲーションのスピード | 移動速度の向上 | 移動が遅い |
ナビゲーションの精度 | 精度の低いナビゲーション | ナビゲーションの精度が向上 |
タスクの切り替え後に質問に戻る | 中断後に方向を確認しにくい | 中断後の方向への移動が容易 |
訪問後にデジタル アンケートに記入する(紙からコピーする) | 紙からコピーする方が簡単 | 紙からコピーするときがより困難 |
小画面 | 画面が小さい場合はやや悪い | 小さい画面に最適 |
ユーザー補助 | アクセシビリティの面で劣ります。操作しにくい。 | ユーザー補助を強化。スクリーン リーダー、テキスト読み上げなどのテクノロジーで処理できる個別の画面。 |
手順と説明のためのスペース | ガイダンスや手順に劣る | ガイダンスと手順のほうがよい |
長スクロール
![質問のタイトルの前に数字が表示されているアンケート。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/numberedquestionnaire.png?hl=ja)
単一ページ レイアウトで簡単に移動できるよう、質問に番号を付けます。
![質問のタイトルのフォントサイズを比較しています。長いスクロールは 16 ピクセルです。ページネーションは 28 px です。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/adjustfont.png?hl=ja)
長いスクロールを使用するときは、質問のタイトルのフォントサイズを小さくして、画面上により多くのコンテンツが表示されるようにします。例: 長いスクロールは 16 ピクセル。 ページネーションは 28 px です。
ページネーション
![プルダウンで選択可能なページ分けされた質問「彼らはどの州に住んでいますか」。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/onequestion.png?hl=ja)
キーボード、プルダウン、その他のコンポーネントはページ上のスペースを占有するため、1 ページにつき 1 つの質問を設定するようにしてください。
![ページ分けされた住所フィールドで、下部のフィールドが画面に表示されない。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/hidecontent.png?hl=ja)
コンテンツはスクロールせずに見える範囲に表示されるようにする必要があります。
![複数のテキスト フィールドが 1 つの質問としてグループ化されています。質問のタイトルは代替の連絡先担当者で、名前、関係、電話番号が入力フィールドとして表示されます。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/groupcontent.png?hl=ja)
例: これら 3 つのテキスト フィールドはすべて代替の連絡先担当者情報に関連しているので、1 つのページにグループ化されます。
![同じページ上に無関係な質問がある。最初の質問は保険の保障内容で、2 番目の質問は以前の健康状態についてです。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/unrelatedgroup.png?hl=ja)
混乱を避けるため、1 つのページに関係のないコンテンツをグループ化することは避けてください。
進行状況インジケーター
進行状況インジケーターには、アンケートでの進捗状況が表示されます。
長いアンケートに進行状況インジケーターを含めると、ユーザーが操作しやすくなり、進行状況を確認しやすくなります。進行状況インジケーターには、アンケート内の場所と、完了までの残り時間が表示されます。
![アンケートのタイトルの下に表示される進行状況インジケーター。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/progress-scroll.png?hl=ja)
質問とアンカーを上部に配置して、スクロールしても常に表示されるようにします。
![下部、ナビゲーション ボタンの上に表示される進行状況インジケーター。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/progress-paginated.png?hl=ja)
代わりに下部に配置し、[戻る] ボタンや [次へ] ボタンの上に配置することもできます。このレイアウトを使用して、ユーザーが閲覧しているページを表示することもできます。
ナビゲーション ボタン
ナビゲーション ボタン(戻る、次へ)は質問票の下部に固定されています。無限スクロールを使用している場合、またはページ分けされた質問票の最後のページでは、[次へ] ボタンに [送信] というラベルが表示されます。
ボタンを一貫した場所に配置し、「戻る」や「次へ」など、その操作がラベル付けされたアクティブなボタンを常に使用するようにしてください。
![ナビゲーション ボタンがアクティブになっています。青色で塗りつぶされた次のボタン。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/active-buttons.png?hl=ja)
フォームが不完全な場合でも、アクティブなボタンが常に表示されます。[次へ] をタップすると、不足しているフィールドの入力手順や検証エラーの手順がポップアップ ダイアログに表示されます。
![[次へ] ボタンは無効になっています。グレーで塗りつぶされた次のボタン。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/inactive-buttons.png?hl=ja)
ボタンが無効な場合、ユーザーが問題の解決方法を把握するのが難しくなります。
![[次へ] ボタンには矢印アイコンのみが表示され、テキストの説明はありません。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/icon-buttons.png?hl=ja)
アイコンのみのボタンは使用しないでください。ボタンには、必ずわかりやすい操作のラベルを付ける。
質問と手順
![質問と手順のコンポーネントを示す、ページ分けされたアノテーション付きのアンケート。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/question-banner.png?hl=ja)
- アンケートのタイトル。
- 進行状況インジケーター。
- グループ ヘッダー。
- 質問のタイトル。
- 指示事項。
- 入力フィールド。
- エントリの形式。
- 必須項目です。
- ヘルプを選択します。
グループ ヘッダー
グループ ヘッダーは、質問のタイトルの上に表示されるテキスト ヘッダーです。
グループ ヘッダーを使って、類似した質問をグループ化します。グループ ヘッダーは、役立つ情報を追加する場合にのみ使用してください。
![グループ ヘッダーは患者の履歴です。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/group-short.png?hl=ja)
短いタイトルを使用して、似たような質問をグループ化します。例: 患者の病歴に関連するすべての質問がグループ化されます。
![グループ ヘッダーは個人情報とライフスタイルに関する情報です。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/group-long.png?hl=ja)
複雑なタイトルや 1 行を超える長いタイトルは避けてください。
質問のタイトル
質問のタイトルには、要求される情報を簡潔に記述します。質問のタイトルは、ユーザーの目を質問に引き付けるために、ページ上で最も大きいフォントサイズを使用します。
すべてのページまたは質問に質問のタイトルを付けます。質問のタイトルは簡潔にするか、質問として表現します。
![質問のタイトルが生年月日です。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-short.png?hl=ja)
タイトルを短くすると読みやすくなります。
![質問のタイトル: 生年月日を入力してくださいどちらの都市で生まれましたか。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-long.png?hl=ja)
非常に長い質問や、2 つの質問をネストすることは避けてください。
![質問のタイトルがありません。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/title-none.png?hl=ja)
ユーザーが入力する必要がある情報を簡単に把握できるように、質問のタイトルを必ず含めます。
手順
[手順] は、質問のタイトルの下に表示されるオプションのテキスト フィールドです。
[instructions] フィールドを使用して、質問が必要かどうか、選択できる数(1 つまたは複数)、すべての情報を完了できない場合や質問に回答できない場合のユーザーの対処方法など、関連する手順を説明します。
![手順: 1 つ選択してください。必須の質問。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-required.png?hl=ja)
手順フィールドを使用して、質問が必要かどうかと、選択肢の数を通知します。
![手順: 正確な生年月日が不明な場合は、[不明な生年月日] チェックボックスをオンにします。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-edge.png?hl=ja)
手順を使用して、すべてのフィールドに入力できないなどのシナリオが発生した場合の対処方法をユーザーに伝えます。
![手順: 緊急事態の場合に、近親者(パートナー、母親、兄弟など)の連絡先を使用できます。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/instructions-definitions.png?hl=ja)
指示を使用して、質問のタイトルで使用されている用語の追加のコンテキストや定義を提供します。
テキストのラベル付け
ラベルテキストは、テキスト フィールドまたはプルダウンに必要な情報をユーザーに伝えます。フィールドを選択すると、ラベルテキストがテキスト フィールドの中央から上に移動します。
すべてのテキスト フィールドとプルダウン ボックスにラベルが必要です。ラベルテキストは、短く、明確で、全体的に見えるようにします。
![ラベルテキスト: 名。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-short.png?hl=ja)
ラベルのテキストは短く、明確で、完全に見えるようにします。
![ラベルテキスト: クライアントの名前を入力します。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-long.png?hl=ja)
ラベルのテキストは長すぎたり、切り捨てたり、複数行に渡ったりしないでください。
![ラベルテキストなし。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/label-none.png?hl=ja)
ユーザーが入力すべき情報を把握できるように、必ずテキスト フィールドにラベルを付けてください。
エントリの形式
EntryFormat は、特定の形式のデータを入力する必要があることをユーザーに示すために、テキスト フィールドの下に表示されています。EntryFormat フィールドにエラー メッセージが表示され、既存の EntryFormat 手順が置き換えられます。
日付、電話番号、単位、整数には、EntryFormat を使用します。
![日付の形式: dd/mm/yyyy](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-do.png?hl=ja)
フィールドの下に日付形式を表示し、わかりやすいフレーズを含めます。
![日付形式がありません。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-none.png?hl=ja)
データ形式を表示しないと、データが正しく入力されない場合があります。
![[心拍数] テキスト フィールドの下に、[入力形式] に「通常範囲: 60-100 bpm」と表示されます。[血中酸素飽和度] テキスト フィールドの下に [入力形式] に「正常範囲: 95-100%」と表示されます。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/entry-range.png?hl=ja)
医療の範囲を入力する場合は、正常範囲の例を提供します。これは、範囲外のエラーや数値を見つけるのに役立ちます。
必須項目
必須項目は、ユーザーが各項目に入力する必要があることを示します。入力を完了するまで次に進めません。
フィールドが必須であることを示すには、質問タイトルの末尾にアスタリスク(*)を表示します。アスタリスク(*)が示す内容が明確ではないため、手順の項目には「必須の質問」と記載してください。質問のタイトルがない場合は、ラベルテキストにアスタリスク(*)を表示します。
![以下の手順の中で、質問のタイトルと必須の質問の後にアスタリスクをつけます。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-explanation.png?hl=ja)
フィールドにアスタリスク(*)を付けて、「必須の質問」を示す手書きメモを含めます。多くのユーザーはアスタリスク(*)の意味がよくわからず、説明からメリットを得られるでしょう。
![質問のタイトルの後にアスタリスクをつけますが、アスタリスクの意味を説明した説明は付けません。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-noexplanation.png?hl=ja)
アスタリスク(*)のみを表示するのは避け、その意味を説明してください。
![以下の手順で、質問のタイトルと必須の質問の後にアスタリスクをつけます。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-localize.png?hl=ja)
ユーザーにとって最も身近な用語を使用します。たとえば、「必須」のほうがより身近な用語であり、一部の国では「必須」ではなく「必須」が使用されます。
![アスタリスクがありません。手順にオプションの質問が表示されます。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-optional.png?hl=ja)
ほとんどの質問が必須の場合、どの質問が必須かを代わりに明示します。
![ラベルテキストの後にアスタリスクをつけます。[入力形式] フィールドに必須の質問が表示されています。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/required-label.png?hl=ja)
質問のタイトルがない場合は、ラベルテキストにアスタリスクを表示します。
ヘルプ
質問のタイトルの横にヘルプアイコンが表示されます。このアイコンをタップすると、追加情報が記載されたヘルプ情報ボックスが表示されます。アイコンをもう一度タップすると ヘルプ情報ボックスが閉じます
これは省略可能なコンポーネントです。常に表示する必要がない追加情報の表示に役立つ場合にのみ使用します。
![ヘルプ: 季節に応じたインフルエンザ ワクチンは、インフルエンザ予防接種とも呼ばれます。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/help-do.png?hl=ja)
ユーザーが一度しか確認する必要がない情報や、追加情報が記載された情報にヘルプを使用します。
![ヘルプ: 1 つ選択してください。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/help-dont.png?hl=ja)
ヘルプボックスに手順を隠して、すべてのユーザーに表示されるようにします。
データ キャプチャ
![8 つのデータ キャプチャ コンポーネント(テキスト フィールド、日付選択ツール、プルダウン、スライダー、単一選択、ブール値選択、多肢選択式、自由選択)。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datacapture-banner.png?hl=ja)
どのコンポーネントを使用すべきですか?
データ入力のタイプ | ブール値選択 | 単一選択 | 多肢選択式 | 自由選択 | プルダウン | 日付選択ツール | テキスト フィールド | スライダー | オートコンプリート |
---|---|---|---|---|---|---|---|---|---|
[Yes] または [No] を選択 | |||||||||
オプションを 1 つ選んでください | 注意 |
||||||||
複数のオプションを選択 | 注意 |
||||||||
テキスト | |||||||||
日付 | |||||||||
数字 | 注意 |
テキスト フィールド
テキスト フィールドは、ユーザーが情報を入力できることを示します。
アンケートに名前、電話番号、住所などのテキストを入力する必要がある場合は、テキスト フィールドを使用します。事前入力された選択(多肢選択式または単一選択)を代わりに使用できる場合は、テキスト(キーボード)入力が必要なデータ入力を制限します。
![質問のタイトル: 新しい人を登録します。テキスト フィールド 1: 名前。テキスト フィールド 2: 電話番号。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/text-do.png?hl=ja)
一意の単語や数字を入力する必要があるデータ入力にはテキスト フィールドを使用する。
![Question title: 訪問の理由テキスト フィールド: 理由の説明](https://developers.google.cn/static/open-health-stack/design/images/data-capture/text-dont.png?hl=ja)
多肢選択式、プルダウン、または単一選択式の回答になる可能性がある場合は、自由形式の回答を使用しないでください。
単一選択、ブール値
単一選択とブール値選択は、ユーザーが選択肢から 1 つを選択するよう求められたときにラジオボタンとして表示される選択コントロールです。
「はい」または「いいえ」の二者選択がある場合は、boolean choiceを使用します。それ以外の場合は、単一選択コンポーネントを使用してください。リスト内にオプションが 10 個以上ある場合は、単一選択肢ではなくプルダウンを使用します。オプションが多い場合、プルダウンは密度が高く、操作しやすくなります。
![Question title: 今回が初めてですか?ブール値の選択オプションは、yes または no です。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-boolean.png?hl=ja)
オプションが「yes」または「no」の場合は、ブール値選択を使用します。
![Question title: 最終学歴を教えてください。
単一選択による選択肢は次のとおりです。1. わからない 2. 説明なし
3. 小学校 4 中学校。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-single.png?hl=ja)
ユーザーがリストから選択肢を 1 つ選択できる場合は、単一選択を使用します。
![非常に長い状態のリストを示す単一選択リスト。状態 23 ~ 27 が表示されます。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/singlechoice-dont.png?hl=ja)
非常に長いリスト(10 以上)に 1 つの選択を選択することは避けてください。代わりにプルダウンを使用してください。
日付選択ツール
日付選択ツールを使用すると、カレンダーの日付選択ツールとキーボードの両方を使用して日付を入力できます。カレンダー アイコンをタップすると、カレンダーの日付選択ツールが有効になります。
カレンダーの日付選択ツールは、前回の月経や次回の訪問など、今日の日付に近い日付にのみ使用します。それ以外の場合は、生年月日などの日付のキーボード入力を優先します。
![生年月日。キーボードの日付入力が有効です。テキスト フィールド ボックスの右側にあるカレンダー アイコン。チェックボックスがオンになって、日付がおおよその日付であることを示しています。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datepicker-do.png?hl=ja)
日付の入力では、キーボード入力(テキスト ボックスをタップ)とカレンダーの日付選択ツール(アイコンをタップ)の両方を有効にします。
![日付選択ツールのカレンダー ビュー。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/datepicker-dont.png?hl=ja)
生年月日の唯一の入力方法として、カレンダーの日付選択ツールを有効にしないでください。月や年に移動するのは困難です。
プルダウン
プルダウン メニューでは、複数のオプションから選択できます。ユーザーが入力を開始すると、入力内容に基づいてオプションがフィルタされます。これにより、ユーザーは大規模なリストから適切なオプションをすぐに見つけることができます。
プルダウン メニュー は 1 つの選択肢 に代わる選択肢としておすすめです。選択肢の数が 10 以上あると表示されるスペースが少なくて済みます。
![州のリストの状態(A ~ F)のプルダウン。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/dropdown-do.png?hl=ja)
選択肢が非常に長いリストで 1 つのオプション(州や都市など)を選択する場合はプルダウンを使用します。
![年齢のプルダウンには、1 ~ 6 の数字が表示されています。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/dropdown-dont.png?hl=ja)
年齢などのすべてのオプションをスクロールするよりも、コンテンツを入力しやすい場合は、プルダウンの使用を避けてください。
多肢選択式
多肢選択式は、ユーザーがオプションのリストから複数のセクションを作成できる場合に、チェックボックスとして表示される選択コントロールです。
ユーザーが既定の選択肢リストからのみ選択できる場合は、多肢選択式を使用します。ユーザーが独自の自由回答を追加できる場合は、代わりに自由選択コンポーネントを使用します。instructions フィールドに「該当するものをすべて選択してください」と記入して、ユーザーが複数のオプションを選択できることを理解します。
![Question title: 今日の訪問の理由を教えてください。4 つのチェックボックスとオプションが、各行に 1 つずつ表示されています。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/multiple-do.png?hl=ja)
デフォルトでは、チェックボックスを囲むコンテナがタップ可能な領域をわかりやすくするコンテナになっています。
![Question title: 今日の訪問の理由を教えてください。6 つのチェックボックスとオプションが、各行に 2 つずつ表示されています。2 つのオプションのテキストの一部が切り捨てられています。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/multiple-dont.png?hl=ja)
1 行に複数のオプションを表示することは避けてください。スマートフォンの画面サイズやテキストサイズが異なると、テキストが途切れる可能性があります。
自由選択
自由選択は、多肢選択式と似ていますが、ユーザーが [その他] を選択して自由にテキストを入力できます。
選択肢のリストが事前に設定されているが、ユーザーが他の選択肢も追加できる場合は、自由選択を使用します。大部分の選択肢がわかっているが、指定されたオプションのいずれも該当しないため、一部のユーザーが [その他] を選択することが予想される場合は、自由選択を使用します。
![その他が選択されています。自由テキストを追加するためのテキスト フィールドがアクティブです。
キーボードが表示されています。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/openchoice-do.png?hl=ja)
正確なデータを収集することが重要であり、事前定義されたオプションのいずれも該当しない場合に使用します。例: 職業。
![Question title: 追加情報があればご記入ください[はい]、[いいえ]、[その他] の 3 つのオプションから選択できます。その他が選択されています。自由形式のテキストを追加するためのテキスト フィールドがアクティブです。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/openchoice-dont.png?hl=ja)
回答の大部分で [その他] を選択する必要がある場合は、使用しないでください。そのような場合は、代わりにテキスト フィールドまたは段落フィールドを使用してください。
スライダー
スライダーを使用すると、ユーザーは複数の値から値を選択できます。Android FHIR SDK のスライダーは、独立したスライダーです。個別のスライダーを使用すると、ユーザーは事前に定義された範囲から特定の値を選択できます。使用可能な値を示すためにチェックマークを使用できます。数値データ入力にはスライダーを使用しないでください。代わりに、テキスト フィールドまたはプルダウン メニューを使用してください。
![質問のタイトル: クライアントの子供は何人いますか?数字 4 のスライダーが選択されます。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/slider-dont.png?hl=ja)
範囲が大きい場合は、特定の値にスライダーを使用することは避けてください。代わりに、キーボード入力でテキスト フィールドを使用してください。
データの検証とエラー
データの検証
データの検証では、テキスト フィールドに入力できるデータの種類や値が制約されます。データの検証により、収集されるデータの品質を向上させることができます。
形式または値の制限を表示するには、EntryFormat フィールドを使用します。意味のあるデータ検証エラー メッセージをインラインですぐに表示し、ユーザーがエラーを修正できるようにします。
![ラベルテキスト: 電話番号。入力形式: 8 桁](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-show.png?hl=ja)
データの検証制限を事前に示し、ユーザーがデータの入力方法を理解できるようにします。
![ラベルテキスト: 電話番号。入力形式: なし](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-hide.png?hl=ja)
電話番号の桁数を表示しないと、ユーザーにエラーが発生して完了までの時間が長くなります。
![入力日は 22/33/4444 です。エラー メッセージ: 日付形式が正しくありません。dd/mm/yyyy 形式で指定してください。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-timely.png?hl=ja)
フィールドに入力した直後に有意なデータ検証エラーを表示する。既存のエントリ形式のテキストがエラー メッセージに置き換えられます。
![ダイアログ。次のエラーを修正してください。1. 電話番号2. 生年月日
ボタン 1: このまま送信。ボタン 2: エラーを修正する。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/validation-dontwait.png?hl=ja)
ユーザーが [送信] を押して検証エラーが初めて表示されるまで待たないでください。
エラー
エラー メッセージは、問題が発生したときにユーザーに警告し、問題の解決方法を伝えます。
色、アイコン、テキストを使用してエラーを伝えます。
![「必須の質問。1 つ選択してください。」](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-howtofix.png?hl=ja)
エラーが生じた理由(必須の質問)と解決方法について説明する(1 つ選択)
![エラー メッセージは「エラー」です。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-noexplanation.png?hl=ja)
「error」とだけ記載されたエラー メッセージは、ユーザーがエラーの修正方法を知るうえで役に立ちません。
![生年月日。入力日は 22/33/4444 です。エラー メッセージは日付形式が正しくありません。dd/mm/yyyy の形式で指定してください。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-noblame.png?hl=ja)
例: 「日付の形式が正しくありません。dd/mm/yyyy の形式で指定してください。
![生年月日。入力日は 22/33/4444 です。「入力した日付形式が正しくありません」というエラー メッセージが表示されます。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-dontblame.png?hl=ja)
「あなた」を含むエラー メッセージでユーザーを責めない。例: 「入力した日付形式が間違っている」
![赤色のテキストの前に「必須の質問。オプションを 1 つ以上選択してください。チェックボックス コンテナには赤い枠線が表示されます。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-combo.png?hl=ja)
色、アイコン、テキストを使用して、エラーがあることをユーザーに伝えます。
![エラー メッセージまたはアイコンは表示されません。チェックボックス コンテナには、エラーがあることを示す唯一の赤い枠線が表示されます。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-onlycolor.png?hl=ja)
赤緑の色覚障害のような一般的な視覚障がいをサポートするには、色のみに頼ってエラーを伝えないようにします。
![チェックボックス コンテナでは、赤い枠線と 1 つのエラーアイコンが各コンテナの背後に表示されます。3 つのアイコンが表示されています。](https://developers.google.cn/static/open-health-stack/design/images/data-capture/error-icons.png?hl=ja)
多くの場合、アイコンは 1 つで十分です。エラーを伝えるためにアイコンを使いすぎないでください。