なぜ多くの情報ヒントは不適切なのか （そして、どう改善すればいいのか）
情報ヒントは複雑なUIをわかりやすくすることができる。ただし、情報ヒントによって、不可欠な情報を隠したり、重複した情報を表示したり、現在のワークフローを妨げたりしてはならない。
情報ヒント（クエスチョンマークアイコン（?）や情報アイコン（i）をタップしたり、マウスオーバーしたりすると表示される、あの小さくて役立つメッセージ）は、ユーザーがより迅速に意思決定するのに役立ち、UI要素を理解しやすくすることができる。しかし実際には、過剰に使用されたり、不適切に用いられたり、不要なコンテンツで肥大化していることが多い。情報ヒントが不可欠な指示を隠したり、同じ内容を繰り返し説明したりすると、明確さをもたらすどころか、かえって混乱を招くことになる。
情報ヒントとは
情報ヒント（information tip）とは、特定のインタフェース要素やワークフロー内のステップに関する補足情報を提供するための、コンテキストに即した短いメッセージのことである。
通常、小さなアイコン（多くの場合、小文字の「i」やクエスチョンマーク）にマウスオーバーしたりクリックしたりすることで表示され、インタフェース内の特定の要素（テキストフィールド、アイコン、ボタン、ラベルなど）に関連づけられている。
情報ヒントの表示方法には、主に次の2つのパターンがある：
- ツールチップ：デスクトップサイトで、マウスオーバーまたはキーボードフォーカスによって表示されるもの
- ポップアップチップ：ツールチップと似ているが、その要素に関連づけられたアイコンをクリックまたはタップすることで表示されるもの
どちらのタイプも、インタフェースをテキストであふれさせることなく、さらなる説明やガイダンスを必要とする人々にコンテキストを追加提供することが中核的な目的である。
ユーザーインタフェースにおける情報ヒントの表し方
「i」アイコン：一般的な情報
丸で囲まれた小文字の「i」アイコンは、任意で参照できる役立つ情報を示すものとして広く理解されている。
我々が実施したアイコンに関する調査では、参加者は「i」アイコンを主に「詳細情報」を表示する選択肢と解釈し、次のような補足情報が表示されることを期待していた：
- 定義
- 追加の詳細情報や簡潔な説明
- キャンペーンの条件
このため、「i」アイコンは一般的な情報や知っておくと便利なガイダンスには適しているが、緊急性のあるコンテンツやエラー関連のコンテンツには適していない。作業の流れを妨げることなく、ユーザーの理解を支援する情報ヒントを表すには、適切な選択肢である。
「?」アイコン：ヘルプとサポート
丸で囲まれたクエスチョンマークアイコン（?）も、情報ヒントを表示するために頻繁に使用される。我々の調査では、このアイコンは一般的な補足情報よりも、ヘルプやサポートに強く関連づけられていた。
参加者はこのアイコンから次のような情報にアクセスできることを期待していた：
- よくある質問（FAQ）
- カスタマーサポートの連絡先情報
- ヘルプコンテンツやチュートリアル
しかし、特定のインタフェース要素（上記の例でいうフォームフィールドのラベルなど）のすぐ隣に配置された場合、「?」アイコンは、その要素に関するコンテキストヘルプを表示するための効果的なトリガーにもなる。重要なのは近接性だ。アイコンが参照対象の近くにあると、ユーザーはそのヘルプを、全般的または一般的なものではなく、その箇所だけに関連するものとして解釈する。
情報ヒントの問題点
残念ながら、情報ヒントはインタフェース内でその場しのぎの対策として乱用され、次のようなことに用いられることがよくある：
- 本来はUIに組み込むべき説明を無理やり詰め込む
- 「すっきりした」インタフェースという名目で、重要な指示を隠す
- 不適切なラベルづけやUXコピーの解釈をユーザー任せにする
情報ヒントは、不可欠なコンテンツを非表示のレイヤーに押し込むことでインタフェースをすっきりさせるための万能な解決策ではない。また、表示されるとユーザーの作業の流れを妨げるような大量の情報を隠すために用いるべきでもない。これは我々が「ジャンプスケア」（jump scare）と呼ぶ状況で、ユーザーは短いヒントを期待しているのに、代わりにモーダルウィンドウや画面全体を占める表示が現れる。
しかし、情報ヒント自体が悪いわけではない。適切に実装すれば、インタフェースを煩雑にすることなく、簡潔で役立ち、コンテキストに即した情報を提供し、ユーザビリティを向上させることができる。
適切に作られた情報ヒントは、次のようなことができる：
- 専門用語や技術用語の意味を明確にする
- 特定のデータが求められる理由を説明する
- ユーザーが必要な情報を見つけられるよう案内する
- データの利用についてユーザーを安心させる
ただし、ほとんどのユーザーは情報ヒントを目にしないものと想定しておくのがよい。わざわざ情報ヒントを探すのは、混乱していたり、行き詰まっていたり、明確な説明や安心材料を必要としていたりする人たちだ。だからこそ、情報ヒントは、ユーザーが現在行っているタスクを直接支援する、そのときに必要としている明確なガイダンスを提供すべきなのである。
不適切な情報ヒントの落とし穴
情報ヒントの誤用は、一般的に次の3つのカテゴリーに分類される：
- ユーザーの時間を無駄にする：自明な情報、重複している情報、無関係な情報を表示する
- 重要な情報を隠す：ほとんどのユーザーが最初に必要とする不可欠なガイダンスや制約を埋もれさせてしまう
- タスクフローを中断させる：モーダルやオーバーレイといった、ユーザーを現在取り組んでいるタスクから引き離す、作業に割り込むパターンを用いる
落とし穴1：ユーザーの時間を無駄にする
情報ヒントを操作するたびに（ほんの1回クリックしたりマウスオーバーしたりするだけでも）、わずかではあるが、実際にインタラクションコストが生じる。情報が重複している、あるいはその内容が自明である情報ヒントはユーザーの時間を無駄にし、信頼を損なう。
情報ヒントを次の用途に使用してはならない：
- 中身のない宣伝文句
- 画面上に表示されているコンテンツや指示の繰り返し
- 自明なことの再説明
「i」や「?」といった情報ヒントのアイコンは、何かわかりにくい点があるかもしれないこと、あるいはさらに説明が必要な点があることをユーザーに示唆する。それなのに、ありきたりで中身のない宣伝文句が表示されると、ユーザーは期待を裏切られたように感じ、苛立つ可能性がある。
また、インタフェース上ですでに十分に明確なことを、情報ヒントで言い直すのも時間の無駄になる。こうした情報ヒントは、さらなる説明があるかのような錯覚を与えるが、実際には画面上の内容を繰り返しているだけである。
落とし穴2：タスクの遂行を支援する重要な情報を隠す
情報ヒントは、不可欠な指示や制約、法的免責事項を埋もれさせるために用いるべきではない。そうしてしまうと、重要なガイダンスをまるでかくれんぼのように探さなければならなくなる。場合によっては、こうしたやり方が欺瞞的なパターンにすらなりかねない。
情報ヒントには次のような内容を入れないようにしよう：
- 制約やルール
- フォームフィールドの制限（例：文字数制限）
- 法的合意事項や免責事項
- 複雑な指示や説明
ユーザーの意思決定に役立つ複雑な指示は表示しておくべきであり、情報ヒントの中に隠すべきではない。ユーザーがタスクを遂行しながらこれらの説明を参照でき、ガイダンスを探すために作業の流れを中断したり、現在の画面から離れたりしなくても済むようにする必要がある。
複雑な指示を情報ヒントに隠すのではなく、重要な情報をインタフェース上に直接表示するほうが効果的だ。ユーザーが複数の選択肢を比較検討したり、細かな違いを踏まえて選択したりする必要がある場合、そのガイダンスを最初から提示しておけば、タスクフローを妨げずに選択肢を迅速に比較することができる。
さらに、入力に関する制約、ルール、制限事項は、画面上に直接表示すべきである。
落とし穴3：タスクフローを中断させる
情報アイコンをクリックしたときにユーザーが期待しているのは、現在のワークフローの中で参照できる、簡潔で役立つメッセージが表示されることであって、モーダルウィンドウやページ全体を覆い尽くすような長文が表示されることではない。
次のようなものを表示してユーザーを驚かせてはならない：
- 過度に複雑で冗長なコンテンツ
- タスクの進行を妨げるモーダルウィンドウやオーバーレイ
- ユーザーを現在のワークフローから離れさせてしまう別のページ
できるかぎり、情報ヒントはインラインで、または関連する要素の隣に表示するようにしよう。現在のステップやインタフェースの表示内容を遮ってしまうと、ユーザーはガイダンスと現在取り組んでいるタスクを結びつけることが難しくなる。
情報ヒントとしてモーダルやページ全体を覆うオーバーレイを用いると、ユーザーに強い違和感を与える。ガイダンスをその対象となる要素のすぐ隣に配置することで、ユーザーはコンテキストを保ったまま、情報の関連性をよりよく理解することができる。
タスクフローのさらに妨げになるのが、単なる情報ヒントアイコンに見えるものをクリックすると、まったく新しいページが開いてしまうケースだ。このやり方は、コンテキストをわかりにくくするだけでなく、ユーザーにタスクを断念させる。
結論：情報ヒントを賢く使う
情報ヒントは、必要なタイミングで、現在のワークフローのコンテキストに即した補足的なガイダンスを提供することで、わかりやすさを高めることができる。
すべきこと：
- 補足的なコンテンツとして情報ヒントを活用する
- 短く、コンテキストに即した内容にし、容易に閉じられるようにする
- お馴染みのアイコン（「i」や「?」）で表す
- 情報ヒントを表示するユーザーは、その場ですぐに役立つガイダンスを必要としていると想定する
してはいけないこと：
- 不可欠な情報や頻繁に必要な情報を隠す
- 不適切なラベルづけや情報を詰め込みすぎたレイアウトの、その場しのぎの対策として情報ヒントを用いる
- ユーザーの注意を奪ったり、作業の流れに割り込んだりするポップアップやオーバーレイを表示する
よく考えて実装すれば、情報ヒントは混乱を軽減し、ユーザーの自信を高める。しかし、情報ヒントは常にユーザーの目標達成に役立つものであるべきであり、何としても画面をすっきりさせたいというデザイナーの欲求に応えるものであってはならない。
記事で述べられている意見・見解は執筆者等のものであり、株式会社イードの公式な立場・方針を示すものではありません。
