web-dev-qa-db-ja.com

何かにツールチップが添付されていることをユーザーに確実に知らせるにはどうすればよいですか?

私は読んだ 実際にツールチップを使用していますか? 、そこにはさまざまな答えがあります-多くの人がツールチップを使用していますが、まだたくさんあります私の意見では、ツールチップを使用しない人たち。

設計の観点から、特定の要素をロールオーバーして詳細を確認できることをユーザー(特にWebサイトの新規ユーザー)にどのように伝えますか?

その要素を点滅させますか?それとも強すぎるでしょうか?

12
ᔕᖺᘎᕊ

観察

  1. ツールチップのブラウザー実装は予測できません。一部のブラウザはすぐにツールチップを表示し、一部は遅延後に表示します。ツールチップの位置とスタイルは、異なるブラウザー間では予測できません。

  2. ユーザーはネイティブブラウザーのツールチップを見落とすことがよくあります。 (2)ほとんどのブラウザでは、ツールチップが表示される前に、要素の上にカーソルを置く必要があるため、ユーザーが要素の上でマウスを動かすと、ツールチップが表示されない場合があります。遅延後に表示される典型的なブラウザツールチップを次に示します。

    enter image description here


現代のアプローチ

ブラウザーのツールチップに依存しないようにするために、最近の多くのアプリはカスタムツールチップを実装しています。これにより、UXデザイナーはツールチップの配置、スタイル設定、およびマイクロインタラクションをより適切に制御できます。

ここに例があります ツールチップへの最新のアプローチの例。

これらのアプローチはさまざまに使用されます。

  • 遅延後ではなく、すぐにツールチップを表示します。これにより、ツールチップが表示される前にカーソルを一時停止するという厄介なアフォーダンスを回避できます。これは今日では非常に一般的です(たとえば、Gmailで使用されています)。ユーザーが要素上でカーソルをすばやく移動しているときに「フラッシュ」効果を回避するために、制御された遅延が必要になる場合があることに注意してください。

  • ツールチップを明るくします。色付きの背景、大きなフォント、ドロップシャドウ、または不規則なボックススタイル(たとえば、吹き出し)を使用して、ツールチップをより太く/目立たせます。アニメーションも効果的です(上記のライブ例を参照)。

  • 要素の相互作用性をより適切に示します。上記の@DvirAdlerが提案するように、プレースホルダーを使用できます。ただし、初心者ではないので、常に見ることに飽き飽きしている場合は、邪魔になることがあります。色または点線の下線の規則を使用して、要素にツールチップがある(または少なくとも操作可能であること)ことを示すこともできます。表示のいくつかの代替案を次に示します。

    enter image description here

どのアプローチの組み合わせがサイトに最適かを判断する必要があります。

16
tohster

これにはシンプルでクラシックな解決策があります。

小さなアイコンを追加するだけで、便利なツールチップがあることを知らせます。

enter image description here

初めてまたはまれなユーザーを支援したい場合がたくさんありますが、長い説明で画面を乱雑にしたくありません。ツールチップは素晴らしいソリューションですが、あなたが述べたように、多くの人はツールチップがそこにあることに気づいていません。したがって、この小さなインジケーターは、ユーザーが必要なときにだけヘルプを探すようにユーザーに促します。

これらのアイコンを点滅させることさえ考えないでください。それらは微妙であるべきであり、それらを無視する権利を持つ人々の邪魔になってはいけません。

9
Dvir Adler

私がより多くのWebサイトで実行しているのを見た1つのことは、マウスカーソルを「ヘルプ」スタイルに変更することです。

enter image description here
試してみてください W3Schools

このリアルタイムの変更は、マウスのある領域が特別であることをユーザーに知らせるため、非常に役立ちます。これは、ユーザーの状況を検出し、画面上やブラウザーなどで機能するようにツールチップを表示する冗長な表示オプションと組み合わせるのが最適です。

6

ここにはいくつかの適切な答えがありますが、ツールチップの内容を読んでいるユーザーに依存している場合は、ツールチップに属すべきではなく、ユーザーにすでに表示されているはずであると付け加えておきます。

2

これに取り組むにはいくつかの方法があります。ユーザーがアプリケーションを初めて操作するときのイントロチュートリアルを検討してください。それは彼らが何ができるか、そしてどのようにそれを行うかを彼らに素早く示すことができました。 togglをチェックしてください。新しいユーザーには、すべてを行う方法に関するチュートリアルが提供されます。

もちろん、これの欠点は、アプリケーションが複雑すぎる可能性があり、解決しようとしている問題の解決策を再考する必要があることを意味する場合があります。しかし、しばしばそれはより示唆に富むガイドです。

別のオプションは、ユーザーが要素を操作する方法のバリアントをテストして、アクションが引き起こす質問と課題を確認することです。 usabilityhubまたはtrymyuiをチェックして、b/bテストやクレイジーエッグ2などのヒートマップ追跡ツールを使用することもできます。

1
CarterMan

個人的にはIDMツールチップが好きです。 enter image description here

最初のツールチップを自動的に表示させることができます。その後、矢印またはボタンで移動できます。ただし、バックアップする方法とツールヒントからの終了が必要です。アプリケーションの経験豊富なユーザーにとってはイライラするかもしれないからです。そして今日、新しく更新されたFirefoxブラウザーは、このタイプの自動化されたツールチップと新しいユーザーのためのナビゲーションを使用しています。実際、初心者にとって優れたユーザーエクスペリエンスを提供します。

0
Miller