邪魔にならないように説明するツールチップ

ツールチップとは

Nielsen Norman Group は、ツールヒントを、ユーザーがマウス ホバーまたはキーボード ホバー (キーボード フォーカスを要素に置いたままにする) によって開始されて要素を操作するときに表示される短い有益なメッセージとして定義します。ツールチップはホバーに依存しているため、通常はタッチスクリーンでは使用できません。

補足的であり、決して必須ではありません

NN/g は明らかな間違いの例を挙げています。それは、パスワード要件をツールチップに記載しているサイトです。ユーザーがタスクを完了するために必要な情報は画面上に表示される必要があります。ツールチップは、定義、フィールドが要求される理由の説明、およびアイコンのみのボタンのラベルに適しています。

アクセシビリティ

ツールチップを誰でも使用できるようにします。

• ホバーだけでなくキーボードのフォーカスでも開きます。
• フォーカスを移動せずに Escape で無視してもらいましょう。
• ポインタがその上に移動する間、開いたままにしてください。
• トリガーに接続すると、スクリーン リーダーがそれを読み上げます。
• インタラクティブなコンテンツを中に入れないでください。代わりにポップオーバーを使用してください。

タッチデバイスのツールチップ

タッチではホバーは存在しません。タップすると小さなポップオーバーが開く表示情報アイコンを使用するか、インラインで説明を表示します。複雑なエンタープライズ メトリクスの場合、ラベルの横にある情報アイコンは、すべてのデバイスでよく使われるパターンです。

動きとタイミング

表示する前に少し遅延させることで、ポインターが要素の上を通過するときにツールチップが点滅するのを防ぎます。ツールチップを開くと、すぐに隣接するツールチップが表示されます。トリガーからの素早いフェードや小さなスケールは、どこから来たのかを理解するのに役立ちます。約 150 ミリ秒未満に抑えてください。