web-dev-qa-db-ja.com

ツールチップが表示されるまでの遅延時間はどれくらいですか?

マウスがメインメニュー項目の1つに触れるとすぐに「リボン」サブメニューがポップアップするWebサイトで作業しています。カーソルがメニュー項目の上に置かれるまで待機し、マウスがたまたまメニュー項目の上を通過したときにポップアップしないようにする必要があることをデザイナーに説明しようとしています。待機時間(ミリ秒単位)がどれくらいになるかわかりません。

問題のWebサイトにリンクできませんが、同じ原理が標準のツールヒントに当てはまると思います。ツールヒントが表示されるまでにはどのくらいの時間がかかりますか?

21

このテーマに関する更新された回答をまだ探している人がいる場合、ニールセンノーマンはこのテーマに関する素晴らしい記事を持っています: https://www.nngroup.com/articles/timing-exposing-content/

  1. マウスカーソルがターゲット領域に入る:0.1秒以内に視覚的なフィードバックを表示します。
  2. 0.3〜0.5秒待ちます。
  3. カーソルがターゲット領域内で停止したままの場合、対応する非表示のコンテンツを0.1秒以内に表示します。
  4. カーソルがトリガーのターゲット領域または露出したコンテンツから0.5秒以上離れるまで、露出したコンテンツ要素を表示し続けます。

300〜500ミリ秒の一時停止は、ユーザーの意図がメニューまたはツールチップの背後にあるものを確認することであり、何か他の場所に移動するときにマウスを動かすことではないことを確認することです。

13
bentheben

この問題に関する規則は見つかりませんでしたが、ツールチップがデフォルトの500msに設定されているように見えるライブラリがいくつか見つかりました。かなり合理的なようです。

とにかく、あなたはそこから行って、それが正しいと感じるまでそれを微調整するべきだと思います。数人のユーザーで試して、フィードバックを評価できます。

http://msdn.Microsoft.com/en-us/library/ms531435%28VS.85%29.aspx

http://www.jinsight.com/jetchart/api/com/jinsight/jetchart/ToolTip.html

https://www.Adobe.com/livedocs/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=tooltips_074_10.html

13
Nacho

ツールチップをゆっくりとフェードインさせると、マウスがホットスポット上に置かれるとすぐに開始できます。マウスが1秒以上スライドするだけでツールチップが表示されず、ユーザーが停止した後に移動した場合、マウスがそのように移動したときにアニメーションをキャンセルすることを忘れないでください。ページの一部。

5
Sruly

それは本当にあなたのツールチップが何のためにあるかに依存します。

テキストなしで Material Design Icon set を使用するだけのツールバーコントロールとボタンがたくさんあります。これらのほとんどは自明ですが、利用可能な場合はキーボードショートカットも表示する説明付きのツールチップを追加しました。

遅延がなかったときは、ソフトウェアを習得してツールチップを必要としなくなったユーザーにとっては非常に煩わしいものでした。マウスをいくつかのボタンの上に移動すると、すぐにツールチップが表示されます。

これは通常の使用では表示されないほど遅く、ボタンの内容を確認したいときに少し待つため、1秒の遅延で解決しました。

4
Tim

ツールチップを使用する決定がよく考えられており、ツールチップが有用かつ重要である場合。 遅延させないでください。

遅延により混乱が生じる可能性があります。ユーザーがサイトまたはアプリを使用しているときに、ユーザーがここで尋ねているのと同じ質問をすることは望ましくありません。

ツールチップ情報は必須ではないが、行き詰まった場合にユーザーを助ける可能性があると思われる場合は、小さな疑問符アイコンを使用し、さらに情報が必要な場合はそのアイコンをクリックしてもらいます。

2
Jason

もちろん、クリックベースにするオプションは常にあります。私はそれが実際にうまく機能し、アプリケーションが普遍的に使用できるようになると思います(モバイルとタブレット)。

JavaScriptには、この分野でインスピレーションを得られるプロジェクトhoverIntentプロジェクトもあります。

http://cherne.net/brian/resources/jquery.hoverIntent.html

HTH

2
mare

@Nachoの回答に加えて、ツールチップで非常に短い遅延または瞬間的な外観を回避する必要がある理由を引用しました。

ツールチップ、エキスパンド広告、リストアイテムの上に表示される行動を促すフレーズや情報ボックス(製品一覧ページのサムネイルのクイックビューボックスなど)は、トリガーされた場合にユーザーに迷惑をかける可能性があるホバー操作を伴う一般的な要素の他の例です敏感に。

ツールチップが適切な表示コンテキストと見なされている場合、オプションの情報であるはずの瞬間的な応答は望ましくありません。この記事では、タイミングのガイドラインも示しています。

対応する非表示コンテンツを公開するユーザーの意図は、クリックまたはタップ直後、またはマウスカーソルが動きを一時停止してターゲット領域に約0.3〜0.5秒間留まった後、非表示コンテンツを安全にアニメーション化できると想定できます。ページ

出典: NNGroup

1
Remy