マウスを使用せずに注釈を確認する
キーボードを使用してアイコンに移動し、タッチ スクリーンで試してください。キャプションは適切な方法で開くことができなければなりません。意思決定に必要な情報はインターフェースに直接表示される必要があります。
ツールチップ デザインシステム
必要な情報を隠さずに説明を追加します。
チェックリストの内容
確認の進捗
01
構造と意味
使用状況に応じて情報とプレゼンテーションを比較します。
02
インタラクションとユーザビリティ
操作を試し、ステータスを変更して作業を続行します。
進捗はこのブラウザーに自動保存されます。
ガイド
確認方法
使用例
使用例
インデックスの解釈
「完了率」の横にあるアイコンを使用すると、フォーカスすると短い説明が開きます。キャプションを閉じても、インデックス ラベルと値は読み取り可能なままです。
バリエーションと利用場面
ヒントの開き方
必要に応じてホバーとフォーカスを合わせて開きます。重要な情報は、ツールチップに隠れるのではなく、すぐに表示される必要があります。
キーボードのみ、タッチのみを使用してみてください。行動の意味はまだ分かります。
例 ユーザー名の付いたアイコンボタン。ツールチップはショートカットを追加しますが、名前は変更されません。
詳細情報操作を説明し、内容を隠さないでください。
追加情報
ツールチップは詳細を簡単に説明し、ラベルの繰り返しや複雑なタスクを避けます。
ラベルを読んでからツールチップを読んでください。サプリメントは、ユーザーがまだ知らないことに答える必要があります。
例 データ ツールチップには、「収益」を繰り返す代わりに更新日が記載されています。
詳細情報操作を説明し、内容を隠さないでください。操作を説明し、内容を隠さないでください。
読み取る幅
長さに合わせて幅を制限し、ツールチップが狭すぎる列にならないように改行を入れます。
長い翻訳と小さな画面を試してください。ツールチップが水平方向にオーバーフローしません。
例 指示文は 2 行までのコンパクトなフレームに収めることができます。
詳細情報操作を説明し、内容を隠さないでください。操作を説明し、内容を隠さないでください。
オブジェクトに対する相対的な位置
ツールチップを説明されている部分の近くに置き、端に到達したら方向を変え、読まなければならない部分を覆わないようにしてください。
ウィンドウの端に近いアイコンにフォーカスします。ヒントは完全に視野内に残ります。
例 右端のツールチップがボタンの左側に移動します。
詳細情報情報情報詳細情報
適合するケース
追加のヘルプについてはツールチップを使用してください。エラー、入力要求、および重要な警告には、別の表示スペースが必要です。
ツールチップをオフにします。ユーザーは、必要な条件を逃すことなくタスクを完了できます。
例 パスワード要求は入力ボックスの下に表示され、ボタンのショートカットはツールチップに表示されます。
情報
通知をオンにする詳細情報操作を説明し、内容を隠さないでください。