ツールヒントと情報ヒント

適切なコントロールかどうかの判断基準
 デザインコンセプト
 使用パターン
 ガイドライン
    タイムアウト
    配置
    ツールヒント
    情報ヒント
    スタートメニューの情報ヒント
    クイック起動のツールヒント
    コントロールパネルの情報ヒント
    アイコン
 ドキュメント

"ツールヒント" とは、ラベルのないツールバーのコントロールやコマンドボタンなど、ラベルのないコントロールをポイントしたときに表示される小さなポップアップウィンドウのことです。

ツールヒントが表示された [印刷] ボタンのスクリーンショット

ツールバーのボタンに表示される典型的なツールヒント

ツールヒントはとても便利なので、関連コントロールとして、ツールヒント以上に詳細なテキストを示すことができる情報ヒントというコントロールもあります。

"情報ヒント" とは、ポイントされたオブジェクトの簡潔な説明を表示する小さなポップアップウィンドウのことです。説明が表示されるオブジェクトには、ツールバーのコントロール、アイコン、グラフィック、リンク、Windows® エクスプローラーのオブジェクト、スタートメニューのアイテム、タスクバーのボタンなどがあります。情報ヒントは段階的表示の形式で表示されるため、情報ヒントを使用すると、画面上に常に説明テキストを表示しておく必要がなくなります。

情報ヒントが表示された [共有] ボタンのスクリーンショット

典型的な情報ヒント

ここでは、説明の目的上、ツールヒントと情報ヒントをまとめて "ヒント" と呼びます。

ヒントは、知られていないかなじみのないオブジェクトについて、ユーザーインターフェイス (UI) で直接説明が表示されない場合に、ユーザーの理解を助けるものです。ヒントは、ユーザーがオブジェクトをポイントすると自動的に表示され、ユーザーがコントロールをクリックするか、マウスを動かすか、ヒントのタイムアウトになったときに画面から消えます。

開発者向け情報: 情報ヒントのコントロールはありません。情報ヒントは、ツールヒントのコントロールで実装されます。この 2 つの違いは、実装方法ではなく使用方法にあります。

注: バルーン、ツールバー、ヘルプに関するガイドラインは、それぞれ別の項目として記載しています。

適切なコントロールかどうかの判断基準

以下の点に基づいて判断します。

ポイント時に表示する情報かどうか。該当しない場合は、別のコントロールを使用します。ヒントは、ユーザー操作の結果として表示するもので、一方的に表示するものではありません。これとは対照的に、バルーンは、通知と同様に一方的に表示できます。バルーンには、ソースを示す吹き出しが付いています。
コントロールにテキストラベルがあるかどうか。該当しない場合は、ツールヒントでラベルを提供します。ほとんどのコントロールには、ツールヒントではなくラベルを付ける必要があることに注意してください。ツールバーのコントロールと、グラフィックラベルが付いたコマンドボタンには、ツールヒントを付けます。
オブジェクトについて補足説明や詳細情報が得られると便利かどうか。該当する場合は、情報ヒントを使用します。ただしヒントのテキストは、主要タスクに不可欠なものではなく補足的なものである必要があります。不可欠なテキストは、ユーザーがわざわざ見つけ出さなくても済むように、UI に直接表示します。
補足情報がエラー、警告、状態についての情報かどうか。該当する場合は、バルーン、エラーメッセージ、またはステータスバーなど別の UI を使用します。例外として通知領域アイコンには、情報ヒントで状態情報を表示できます。
ユーザーがヒントに対して対話操作を行う必要があるかどうか。該当する場合は、バルーンなど別のコントロールを使用します。ヒントはマウスを動かすと消えるため、ユーザーが対話操作を行うことはできません。
ユーザーが補足情報を印刷するかどうか。該当する場合は、静的なコメントフィールドなど別のコントロールを使用します。ただし、より直接的に情報を表示するために、情報ヒントを使用することもできます。

この例では、Microsoft Word で静的なコメントフィールドが使用されており、ユーザーはコメントを印刷できます。
ユーザーがヒントをわずわらしく感じるようなコンテキストかどうか。該当する場合は、何もしないことも含めて別の解決策を検討します。どうしてもヒントを使用する場合は、ユーザーがヒントの非表示を選択できるようにします。

ヒントを適切に使用すると、ユーザーとのコミュニケーションを向上できます。設計を改良して対処できる場合にヒントで代用することは避けます。グラフィック、ボタン、またはその他のオブジェクトを理解するために、ユーザーがいつもヒントを確認しなければならないのであれば、設計自体に問題があると判断し、修正してください。

デザインコンセプト

ヒントは、ユーザーインターフェイスを簡略化する優れた方法です。ヒントが用意されていると、ユーザーは必要なときに最小限の努力で情報を得ることができます。また、ヒントでは画面領域を効率的に使用できるので、画面がすっきりします。しかし、うまく設計されていないヒントは、ユーザーの役に立つどころか邪魔になります。このようなヒントにならないようにするには、以下に示すデザインコンセプトに従います。

見つけやすさ

ヒントは、ユーザーが一定時間オブジェクトをポイントすると自動的に表示されます。この少し時間を置いて表示されるしくみは、ヒントを便利にする一方で、気付かれにくくしてしまうこともあります。

ある程度ユーザーが慣れてくると、ユーザーは、ツールバーのボタン、グラフィックボタン、スタートメニューのアイテム、通知領域アイコンなどの特定の標準オブジェクトにヒントが表示されることに、自然と気付くようになります。

標準的ではない場所では、ユーザーがヒントに気付くまでにもっと時間がかかります。ホットスポットやポインタの変更など、オブジェクトにヒントがあることを示す視覚的なヒントはありません。さらに悪いことに、UI を使い始めたばかりのユーザーなどは、マウスポインターをあちこち移動させることが考えられます。オブジェクトにヒントがあることをユーザーが知るには、過去の経験か試行錯誤のどちらかが必要になります。

一貫した方法で使用することにより、ヒントは見つけやすく、予測しやすいものになります。いくつかのオブジェクトにヒントを用意した場合は、ユーザーが補足情報を必要とする類似のオブジェクトにもすべてヒントを用意します。ただし、有益かつ自明でないヒントを提供することを考えると、これは難しい場合があります。

見つけやすく一貫して役に立つヒントを提供することが難しい場合は、ヒントがなくても理解できるコントロールラベルを使用する、インプレースの補足テキストを付けるなど、別の設計を考慮してください。

適切な情報

ヒントとして適切な情報には次の特徴があります。

簡潔。ヒントに使用されるポップアップウィンドウは、短い文または語句のテキストを書式付きで表示するのに適しています。書式が設定されていない長いテキストは、読みづらく、煩雑になります。
有益。ヒントのテキストには、参考になる情報が書かれている必要があります。明らかにわかっていることや、画面上に既にあるものの繰り返しであってはなりません。
補足的。ヒントのテキストは、常にユーザーが目にするとは限らないため、必ずしも読む必要のない補足情報にとどめます。重要な情報は、ヒントがなくても理解できるコントロールラベルやインプレースの補足テキストを使用して伝えるようにします。
不変。ユーザーは一度確認したヒントが次回変わっているとは考えないため、状態情報などの動的なコンテンツの変化には気付かない可能性があります。ただし通知領域アイコンに表示されるヒントは例外です。これらのアイコンは状態を示すことが主な目的であるため、ユーザーはヒント情報の変化に気付きやすいといえます。

適切なタイムアウト

適切なタイミングでヒントが自動表示され消去されることは、ユーザーが各自の UI 環境をコントロールするうえで欠かせない条件です。ヒントには、次の 3 つのタイムアウト値があります。

初回表示。ポイントした状態でヒントが表示されるまでの時間です。既定値は 0.5 秒です。
再表示。ターゲット間を移動中に、1 つのターゲットをポイントした状態でヒントが表示されるまでの時間です。既定値は 0.1 秒です。
消去。ヒントが自動的に消去されるまでの時間です。既定値は 5 秒です。

初回表示と再表示の値が小さすぎると、意図しないときにヒントが表示されることが多くなり、ユーザーの邪魔になります。逆に値が大きすぎると、ヒントの表示が遅いと感じられたり、ヒントが発見されない場合があります。消去までの既定の時間は、ツールヒントに使用されているような短いヒントテキストに適した時間になっています。情報ヒントのテキストはもう少し長いため、表示時間も長くする必要があります。

適切な配置

ヒントは、ポイントされるオブジェクトの近くに配置します。通常はポインターの後方か、可能であればポインターの前方に配置し、ユーザーのオブジェクト操作の邪魔になる位置には配置しないようにします。ヒントがオブジェクトを隠してしまう場合は、ヒントをポインターから離し、オブジェクトに隣接する位置に配置します。オブジェクトとヒントとの関係性が明らかである限り、この配置でも問題はありません。ユーザーがプログラムのヒントを消すためだけにポインターを移動することがないようにします。

アクセシビリティ

ヒントは、アクセシビリティに関しては特殊な効果を持ちます。ヒントは、通常、オブジェクトをポイントすることにより表示されますが、キーボードでアクセスできるコントロールに付いているヒントであれば、スクリーンリーダーにも対応します。簡潔、有益、不変かつ補足的な情報を示す適切なヒントは、アクセシビリティ全般の向上につながります。事実、代替テキストとしてのヒントパターンは、グラフィックのアクセシビリティに推奨される方法です。ただし、ヒントが不適切に使用されると、重要な情報や動的な情報を取得するのが難しくなり、アクセシビリティの障害になります。

キーボードでアクセスできないコントロールにヒントが必要な場合は、コントロールへのアクセス方法を複数提供します。

ツールヒントが表示された [印刷] ボタンのスクリーンショット

この例では、ツールバーのボタンを使用しても、キーボードでアクセスできないツールバーのボタンの代わりに [印刷] コマンドのキーボードショートカットを使用しても、印刷を実行できます。

最も重要な点
適切な位置に適切なタイミングで、簡潔、有益、不変かつ補足的な情報を表示する、見つけやすいヒントを設計します。

使用パターン

ヒントにはいくつかの使用パターンがあります。

ツールヒントラベルのないコントロールまたはグリフに対してラベルを表示します。	このパターンのヒントはラベルとして機能するため、対象コントロールに応じて、ラベルのガイドラインに従ったテキストを使用します。この例では、ツールヒントがコマンドのラベルになっています。この例では、ツールヒントがグラフィックボタンのラベルになっています。この例では、ツールヒントがグリフのラベルになっています。
情報ヒントオブジェクトまたはコントロールの補足説明を表示します。	情報ヒントは、ツールバーのコントロール、アイコン (アイコンオーバーレイも含む)、リンク、タブ、段階的表示コントロール、カスタムコントロールなどのオブジェクトやコントロールについて説明するときに使用します。この例では、情報ヒントでコントロールとオブジェクトについての補足情報が提供されています。
代替テキストとしての情報ヒントアクセシビリティのため、グラフィックに説明を提供します。	このパターンは、視力に障碍を持ち、スクリーンリーダーを使用すると考えられるユーザーを主な対象にしています。この例では、情報ヒントでスタートメニューのグラフィックが説明されています。
サムネイルアイテムの縮小画像を表示します。	サムネイルを使用すると、ウィンドウやドキュメントが、簡単に認識できるグラフィックで表示されます。この例では、Windows® タスクバーのアイテムにサムネイルヒントが表示されています。この例では、Windows フォトギャラリーのアイテムにサムネイルヒントが表示されています。
詳細な情報ヒントオブジェクトに関する詳細情報を表示します。	情報ヒントは、オブジェクトに関する詳細情報を表示したり、データを提供するのに効果的な方法です。この例では、情報ヒントでオブジェクトに関する詳細情報とデータが提供されています。
スタートメニューの情報ヒントスタートメニューのアイテムを説明します。	スタートメニューには、プログラム名のほか、[ドキュメント]、[ピクチャ]、[コントロールパネル] などの Windows の重要なアクセス先が表示されます。このパターンのヒントは、スタートメニューのアイテムを説明します。ヒントの内容は、通常、プログラムやアクセス先の短い説明、ユーザーが実行できる主なタスクなどです。この説明は、スタートメニューの検索ボックス用にもインデックス登録され、ユーザーが必要なプログラムを検索するときの助けとなります。この例では、情報ヒントでスタートメニューのプログラムが説明されています。
コントロールパネルの情報ヒントコントロールパネルのカテゴリまたはタスクを説明します。	このパターンのヒントでは、コントロールパネルのカテゴリやアイテムをユーザーが間違いなく選択できるようにするための補足情報が提供されます。この例では、情報ヒントで、コントロールパネルの [ユーザーアカウント] カテゴリが説明されています。
完全な名前を表示する情報ヒントアイテムの名前が省略されていたりすべて表示されない場合に、完全な名前を表示します。	このパターンのヒントを使用すると、より小さい領域にアイテムを表示でき、水平スクロールも不要です。長さが不明な動的コンテンツには特に、このヒントが重要になります。他のパターンとは違い、リストやツリーでは、このヒントはソースオブジェクトに直接覆いかぶさるように表示されます。この例では、ポイントしたアイテムの完全な名前が情報ヒントで表示されています。
状態の情報ヒント通知領域のアイコンに状態情報を表示します。	ユーザーは一度確認したヒントが次回変わっているとは考えないため、ヒントは、通常、不変である必要があります。ただし通知領域のアイコンは例外です。これらのアイコンは状態を示すことが目的であり、また、状態テキストに使用できる画面領域はありません。この例では、情報ヒントで通知領域のアイコンに状態情報が表示されています。

ガイドライン

タイムアウト

初回表示と再表示のタイムアウトには、既定値を使用します。次の場合は例外です。
- オブジェクトの横に、大きすぎない関連サムネイルを、間を置くことなくすぐに表示できる場合。ただし、大きすぎるサムネイル (小さいグラフィックオブジェクトに対する大きいサムネイルヒントなど) や、関連オブジェクトを覆うサムネイルの場合は、初回表示のタイムアウトには既定値を使用します。
ツールヒントの場合、消去タイムアウトには、5 秒の既定値を使用します。
情報ヒントの場合、消去タイムアウトは無効にします。開発者向け情報: 技術的には消去タイムアウトを無効にすることはできないので、最大値に設定します。
アクセシビリティの観点から、タイムアウト値を最大値以外の値に設定する必要がある場合は、固定の時間にする代わりに SPI_GETMOUSEHOVERTIME および SPI_GETMESSAGEDURATION システムパラメーターの倍数を使用します。この方法を使用すると、ユーザーの速度に合わせてタイムアウトを調節できます。

配置

ユーザーが確認または操作しようとするオブジェクトがヒントで隠れないようにします。ポインターとヒントが離れることになっても、ヒントは常にオブジェクトの脇に配置します。オブジェクトとヒントとの関係性が明らかである限り、多少離れても問題はありません。
- 例外: リストやツリーで使用される、完全な名前を表示するツールヒント。
間違った例:

正しい例:

正しい例では、情報ヒントはキャレットから離れていますが、検索ボックスを隠さないように配置されています。

間違った例:

正しい例:

正しい例では、下にあるテキストの方がずっと有用であるため、情報ヒントはテキストの邪魔にならないように配置されています。
アイテムコレクションにヒントを表示する場合、ユーザーが次に確認または操作する可能性があるオブジェクトを隠さないようにします。水平にアイテムが並んでいる場合は、右にヒントを配置しないようにし、垂直にアイテムが並んでいる場合は、下にヒントを配置しないようにします。
間違った例:

正しい例:

間違った例では、ユーザーが次に操作する可能性の最も高いオブジェクトが、ヒントによって隠れています。
ユーザーの妨げとなる可能性のある大きなヒントなどを使用する場合は、その情報が大多数のユーザーにとって有益であることを確認します。大多数のユーザーに有益とは言えない、邪魔になる可能性のあるヒントは、オプションにするか削除します。このようなヒントが表示されると、大多数のユーザーは、ヒントを消すためにターゲットオブジェクトからポインターを離さなくてはならなくなります。