次の方法で共有


バルーン

Note

この設計ガイドは Windows 7 用に作成されたものであり、新しいバージョンの Windows 用には更新されていません。 ガイダンスの多くは引き続き原則として適用されますが、プレゼンテーションと例には現在の設計ガイダンスは反映されていません。

バルーンは、コントロール内の重大でない問題や特殊な状態をユーザーに通知する小さなポップアップ ウィンドウです。

CapsLock がオンになっていることを示すバルーンを示すスクリーンショット。

一般的なバルーン。

バルーンにはアイコン、タイトル、本文が含まれており、これらはすべて省略可能です。 ツールヒントや情報ヒントとは異なり、バルーンにはソースを識別するテールもあります。 通常、ソースはコントロールであり、存在する場合は所有者コントロールと呼ばれます。

バルーンはユーザーに重大ではない問題を通知しますが、所有者のコントロールが問題を防ぐことができるとしても、問題を防ぐことはできません。 未処理の問題は、ユーザーがアクションをコミットしようとしたときに、所有者のユーザー インターフェイス (UI) によって処理される必要があります。

バルーンは通常、テキスト ボックス、またはコンボ ボックス、リスト ビュー、ツリー ビューなど、値を変更するためにテキスト ボックスを使用するコントロールで使用されます。 他の種類のコントロールは十分に制約されており、バルーンが提供する追加のフィードバックは必要ありません。 さらに、他の種類のコントロールに問題がある場合、複数のコントロール間の不一致が発生することが多く、バルーンは適さない状況になります。 テキスト入力コントロールのみ制約がなく、単一ポイント エラーの一般的な原因となります。

通知は、通知領域アイコンによって表示される特定の種類のバルーンです。

注: 通知ツールヒントと情報ヒントエラー メッセージに関連するガイドラインは、別の記事で紹介されています。

これは適切なコントロールですか?

それを判断するには、以下の質問を考えます。

  • この情報は、問題または特別な条件を説明していますか。 そうでない場合、別のコントロールを使用します。 コントロールの補足情報を表示する場合はバルーンを使用しないでください。代わりに、静的テキスト情報ヒント段階的表示、またはプロンプトの使用を検討してください。
  • 問題または特別な条件は、入力時、または所有者コントロールが入力フォーカスを失ったときにすぐに検出できますか。 そうでない場合、タスク ダイアログまたはメッセージ ボックスに表示されるエラー メッセージを使用します。
  • 問題の場合、問題は重要ですか。 その場合、タスク ダイアログまたはメッセージ ボックスに表示されるエラー メッセージを使用します。 このようなエラー メッセージには相互作用が必要ですが (重大なエラーに適しています)、バルーンは必要ありません。
  • 特別な条件の場合、条件は有効ですが、意図しないものになる可能性がありますか。 その場合、バルーンが適切です。 条件が無効な場合、最初にそれらをなくすことをお勧めします。 想定される条件の場合、何もする必要はありません。
  • 問題や特別な条件を簡潔に表現できますか。 そうでない場合、別のコントロールを使用します。 バルーンに詳細な説明や補足情報を提供することはできません。
  • 情報は、現在マウス ポインターを置いているコントロールを示していますか。 その場合、ユーザーがメッセージを操作する必要がある場合を除き、代わりにヒントを使用してください。
  • 情報は、ユーザーの現在のアクティビティに関連していますか。 そうでない場合、代わりに通知またはダイアログ ボックスを使用することを検討してください。 ユーザーは、現在のアクティビティ以外のバルーンを見落とす可能性があり、既定では、バルーンは 10 秒後にタイムアウトします。
  • 情報は単一の特定のソースから取得されますか。 問題または条件に複数のソースがある場合、または特定のソースがない場合、代わりにインプレース メッセージまたはダイアログ ボックスを使用します。

正しくない: バルーンのスクリーンショット: ログオンに失敗しました

この例では、問題はユーザー名またはパスワードにある可能性がありますが、バルーンで問題を報告すると、問題はパスワードのみであることが視覚的に示されます。 その結果、間違ったユーザー名を入力した場合のフィードバックは誤解を招くものになります。

バルーンは、情報ヒント、ダイアログ ボックス、インプレース メッセージの代わりに使用できます。 ツールヒントや情報ヒントとは、以下の点が異なります。

  • バルーンは現在のポインターの位置とは関係なく表示できるため、バルーンのソースを示すテールが付いています。
  • バルーンには、タイトル、本文テキスト、アイコンがあります。
  • バルーンはインタラクティブですが、ヒントはクリックすることができません。

モーダル ダイアログ ボックスとは、以下の点が異なります。

  • バルーンは入力フォーカスを奪ったり、操作を必要としたりすることはありしません。
  • バルーンは、1 つの特定のソースを識別します。 モーダル ダイアログには、複数のソースを含めたり、特定のソースを指定したりすることはできません。

インプレース メッセージとは、以下の点が異なります。

  • バルーンの方が目立ちます。
  • インプレース メッセージを表示するには、画面に使用可能な領域や動的レイアウトが必要ですが、バルーンには必要ありません。
  • バルーンは、タイムアウト後に自動的に削除されます。

使用パターン

バルーンには、次の使用パターンがあります。

使用方法
入力の問題 1 つの所有者コントロール (通常はテキスト ボックス) からの重大でないユーザーによる入力の問題。
エラー メッセージにバルーンを使用すると入力フォーカスが奪われることはありませんが、所有者コントロールに入力フォーカスがある場合は依然として非常に目立ちます。 問題を修正するには、ユーザーが入力内容を変更または再入力する必要が生じることががありますが、所有者コントロールが誤った入力を無視する場合、ユーザーはまったく変更する必要がないことがあります。 問題は重大ではないため、エラー アイコンは必要ありません。
正しくない文字を示すバルーンを示すスクリーンショット。
重要でないユーザーによる入力の問題を報告するために使用されるバルーン。
特別な条件 所有者コントロールが入力に影響を与える状態です。 この状態は意図しないものである可能性があり、ユーザーは入力が影響を受けていることに気付かない可能性があります。
特別な条件が発生するとすぐにバルーンを使用してユーザーに警告し、ユーザーのイライラを防ぎます (たとえば、最大入力サイズを超えた場合や、誤って CapsLock をオンにした場合など)。 これらの条件は意図的な可能性があるため、入力フォーカスを奪ったり、インタラクションを強制したりせずに、このようなフィードバックを提供することが重要です。 これらのバルーンは、ユーザーが最小限のフィードバックで作業しているパスワード ボックスと PIN ボックスにとって特に重要です。 これらのバルーンには、警告アイコンがあります。
CapsLock がオンで、正しくない文字が入力されていることを示すバルーンを示すスクリーンショット。
特別な条件を報告するために使用されるバルーン。

ガイドライン

表示するタイミング

  • 問題または特別な条件が検出されるとすぐに、たとえ繰り返しても、顕著な遅延なくバルーンを表示してください。
    • 個々の文字または最大入力サイズに関する問題の場合、入力時にバルーンをすぐに表示します。
    • 入力値に関する問題 (空白以外の値を要求する場合を含む) の場合、所有者コントロールが入力フォーカスを失ったときにバルーンを表示します。 そうでない場合、ユーザーが有効な可能性がある入力をしているときにバルーンが表示されると、気が散って煩わしくなる可能性があります。
  • 一度に 1 つのバルーンのみ表示します。 複数のバルーンを表示すると、圧倒される可能性があります。 1 つのイベントで複数の問題が発生する場合、すべての問題を一度に表示するか、最も重要な問題のみ報告します。

正しくない: 1 つのボックスをポイントする 2 つのバルーンのスクリーンショット

この例では、2 つの問題が同時に正しく表示されていません。

表示する時間の長さ

  • 次の場合、バルーンを削除します。
    • 問題が解決されたか、特別な条件が解消された。
    • ユーザーが有効なデータを入力した (入力の問題の場合)。
    • バルーンがタイムアウトした。既定では、バルーンは 10 秒後に自動的に削除されますが、ユーザーは SPI_MESSAGEDURATION システム パラメーターを変更することでこれを変更できます。
  • 問題が解決するまでユーザーが続行できない場合は、タイムアウトを削除します。開発者: Win32 では、TTM_SETDELAYTIME メッセージを使用して表示時間を設定できます。

表示方法

  • バルーンは、所有者コントロールの下に表示します。 これにより、ユーザーは所有者コントロールとそのラベルを含むコンテキストを表示できます。 Microsoft Windows では、バルーンの位置が画面に完全に表示されるよう自動的に調整されます。 既定の動作では、通知の場合と同様、所有者のコントロールの上にバルーンが表示されます。

正しい: コントロールの下に表示されるバルーンのスクリーンショット

正しくない: コントロールの上に表示されるバルーンのスクリーンショット

正しくない例では、バルーンは所有者コントロールの上にぎこちなく表示されています。

パスワードと PIN テキスト ボックス

  • 次の例のテキストを使用し、バルーンを使用して Caps Lock がオンになっていることを示します

CapsLock がオンになっていることを示すバルーンのスクリーンショット

この例では、バルーンは PIN テキスト ボックスで CapsLock がオンになっていることを示しています。

  • バルーンを使用して、ユーザーが最大入力サイズを超えようとしたタイミングを示します。 パスワードや PIN のテキスト ボックスでは、通常のテキスト ボックスに比べて、最大入力サイズに達したことがはるかにわかりにくくなります。

PIN コードの制限を示すバルーンのスクリーンショット

この例では、バルーンは、ユーザーが最大入力サイズを超えようとしていることを示しています。

  • バルーンを使用して、ユーザーが不適切な文字を入力したことを示します。 ただし、パスワードや PIN のセキュリティが低下するため、このような制限を設けないことをお勧めします。 情報漏えいを防ぐため、バルーンには、有効なパスワードまたは PIN に関するドキュメント化された事実のみを記載してください。

不適切な入力を示すバルーンのスクリーンショット

この例では、バルーンは PIN に数字が必要であることを示しています。

その他のテキスト ボックス

  • 初心者ユーザー向けの重要な短いテキスト ボックスでは、ユーザーが最大入力サイズを超えようとしたときにバルーンを使用して通知することを検討してください。 例として、ユーザー名とアカウント名があります。 テキスト ボックスは、ユーザーが最大入力を超えようとしたときにビープ音を鳴らしますが、初心者ユーザーはビープ音の意味を理解していない可能性があります。

文字制限を示すバルーンのスクリーンショット

この例では、バルーンは、ユーザーが最大入力サイズを超えようとしたことを示しています。

操作

  • ユーザーがバルーンをクリックしたら、他の UI を表示したり、その他の副作用を発生させたりせずに、バルーンをそのまま閉じます。 通知とは異なり、バルーンには閉じるボタンを含めることはできません。

アイコン

  • 使用パターンに基づいてアイコンを選択します。

    パターン アイコン
    入力の問題 アイコンなし。 ここでエラー アイコンを使用しないことは、Windows トーン ガイドラインに準拠しています。
    特別な条件 標準の 16 x 16 ピクセル警告アイコン

アクセシビリティ

適切に使用すると、バルーンによってアクセシビリティが向上します。 バルーンによってアクセシビリティを高める場合:

  • ユーザーの現在のアクティビティに関連するバルーンのみを表示します。
  • バルーンのテキストは簡潔にしてください。 そうすることで、視力の弱いユーザーにとってバルーン テキストが読みやすくなり、スクリーン リーダーによる読み取り時の中断が最小限に抑えられます。
  • 問題または条件が繰り返されるたびにバルーンを再表示します。

テキスト

タイトルのテキスト

  • 入力の問題または特別な条件を、明確で平易、簡潔、具体的な言語で簡単に要約したタイトル テキストを使用します。 ユーザーは、バルーンの目的を最小限の労力ですばやく理解できなければなりません。
  • 句読点を使わずにテキストの断片または完全な文を使用します。
  • 文スタイルで大文字化します。 詳しくは、用語集をご覧ください。
  • ローカライズに対応するには、48 文字以下 (英語の場合) を使用します。 タイトルの最大長は 63 文字で、ローカライズに対応するには少なくとも 30% 拡張できる必要があります。

本文テキスト

  • 本文テキストの最初の文を使用し、明確にユーザーに関連する方法で問題または条件を示します。 タイトルの情報を繰り返さないでください。 これ以上追加する必要がない場合は、省略します。
  • 2 番目の文を使用して、ユーザーが問題を解決したり条件を元に戻したりするために実行できる操作を示します。 スタイルとトーンのガイドラインに従い、この文では "お願いします" という単語を使用する必要はありません。 1 番目と 2 番目の文の間に 2 つの改行を配置します。

タイトルと本文のバルーンのスクリーンショット

この例は、標準のバルーン テキスト レイアウトを示しています。

  • 説明が明白な場合でも、問題を解決する方法や条件を元に戻す方法を示しますが、問題の説明と解決策の間の冗長性は省きます。 例外:
    • 簡潔に表現できない場合、または大幅な冗長性なしに表現できない場合は、解決策を省略します。
    • 誤った文字が無視される場合など、ユーザーが行う必要がない場合は解決策を省略します。
  • 末尾に句読点を付けた完全な文を使用します。
  • 文スタイルの大文字を使用します。
  • ローカライズに対応するには、200 文字以下 (英語の場合) を使用します。 本文の最大長は 255 文字で、ローカライズに対応するには少なくとも 30% 拡張できる必要があります。

ドキュメント

バルーンを参照する場合:

  • 大文字/小文字を含む正確なタイトル テキストを使用します。
  • 通知やアラートとしてではなく、コンポーネントをバルーンとして参照します。
  • 可能な場合は、太字のテキストを使用してタイトルのテキストの書式を設定します。 それ以外の場合は、混乱を防ぐために必要な場合にのみ、タイトルを引用符で囲みます。