ツールチップ

ツールチップとは

ツールチップは、ユーザーがプロダクト内で、特定のエリアに移動したり、特定のアクションを実行したりしたときに表示されるアプリ内メッセージです。最も一般的なタイプのツールチップは「ホバー」です。これは、ユーザーがカーソルをナビゲーションメニュー、インタラクティブ要素、あるいは事前に定義された「ホットスポット」の上に移動させたときに表示されるメッセージです。

ツールチップを使用する理由

ツールチップは、通常は画面領域の一部しか使用しないため、最も広く適用でき、混乱を最小限に抑えることができるアプリ内メッセージです。特に、名前だけでは理解しにくい機能を説明する際や、よくある質問に対してコンテキストを加えながら回答することに役立ちます。また、マルチステップツールチップは、プロダクトの新規または変更されたワークフローをユーザーに説明するために使用できます。

一例を挙げます。理学療法実践のための電子医療記録プラットフォームであるWebPTは、ユーザーがオンライン保険フォームに記入するのに苦労していることを知りました。彼らはツールチップを使用して、最も混乱を引き起こしていたフィールドの記入方法を説明し、プラットフォームのこの領域に関連するサポートチケットを半分に減らすことができました。

ツールチップを使用するタイミング

ツールチップは主に、常時表示するとUIが煩雑になるような、機能に関する補足説明を提供するために使用されます。マルチステップのツールチップガイドは、新機能や変更された機能をユーザーに案内する場合にのみ使用し、ツールチップの各ステップは、そのワークフロー内の特定の機能に固定される必要があります。

効果的なツールチップの作成方法

最も重要なことは、ツールチップは意図されたユーザーのワークフローに追加的なコンテキストを提供するものであるということです。ここでは、ツールチップを効果的に使用するための方法をいくつか紹介します。

• テストが重要：ツールチップを有効にする前に必ずテストを行い、ユーザー体験を損なったり、気を散らしたりするのではなく、むしろ向上させることを確認してください。
• 簡潔に保つ：最後に注意が必要なのは、ツールチップでユーザーをさらに混乱させることです。ツールチップの文言は、わかりやすく、ポイントを押さえて、できるだけ短くするようにしてください。このような場合、UXライター（またはマイクロコピーの専門家）がいると、ツールチップがユーザーのことを考えて書かれていることを確認できます。
• デザインを通して考える：ツールチップのデザインは、常に周囲の画像やテキストとの関連性を考慮してください。例えば、背景色とコントラストをつける、関連するテキストをツールチップで遮らないようにする、などです。