コントロール/オブジェクトの移動に関するツールチップをどのように処理しますか？
私の会社は、移動するオブジェクト（車両）と静的なオブジェクト（バス停）を表示するオンラインマップを構築しています。
ユーザーがアイテムの上にカーソルを置くと、カーソルの下にあるすべてのオブジェクトに関する追加情報を示すツールチップが表示されます。
車両が動いているので、カーソルの下のオブジェクトは動的に変化します。手元にあるUXの問題は次のとおりです。
- マウスポインターの下にあるオブジェクトのセットで変更します。 使いやすさの問題：ユーザーは、興味のあるすべての情報が消える前に読む時間がない場合があります。
- マウスが移動するまで、ツールチップを変更しないでください。 使いやすさの問題：ツールチップは、マウスが実際にホバーしているものと一致しない場合があります。
- ツールチップが安定している間のタイムアウトを使用します。 使いやすさの問題：タイムアウトは常に一部のユーザー/ユースケースに不適切です。
追加の問題は、ツールチップに表示される基礎データも動的に変化する可能性があることです。バスの偏差（スケジュールに対する遅延）は変化する可能性があります。バスは現在のトリップを終了し、新しいトリップを開始する可能性があります。ツールチップがこれらの値を最新に保つか、または単に表示する場合は、オプション2と3を考慮してください。マウスが最初にツールチップをトリガーしたときのスナップショット？
私の直感は、ツールチップのデータを動的に更新するオプション3を使用することですが、研究からの本当の証拠や、逸話的な証拠でさえ、いずれかの方法で進むことはできません。
編集：多くの回答は、ユーザーがクリック/選択した車両の情報を表示するプロパティウィンドウを優先して、ツールチップをドロップする必要があることを示唆しています。
UIで既にそれを行うことができますが、私の意見では、これはツールチップの適切な代用ではありません。クリックはホバリングほど簡単ではありません。また、別の目的（つまり、ユーザーが選択したオブジェクトを何らかの方法で使用することを望んでいる）で、ホバリングは「見ているだけで、触れないでください」であり、関与が少ないためです。
UIでの車両の選択は次のようになります。
ただし、クリックした場所で多くのオブジェクトが重なっている場合、ユーザーはもう一度クリックして重なりを解決し、関心のある車両を選択する必要があります。
ユーザーがその車両を使用して一連のコマンドの実行を開始した場合、正確な車両を選択するために1回または2回クリックしてもかまいません。ただし、適切に作成されたツールチップを使用すると、情報を簡単にちらりと見るための軽量な対話が可能になります。
これが状況に影響を与え、利用可能なホバリングインタラクションが非常に必要である理由を動機づけることを願っています。
興味深い問題。
ツールチップを使用しているため、複数のツールチップを同時に表示する必要はないと想定しています。これが必要な場合、ツールチップは適切なコントロールではありません。
したがって、私の答えは、一度に複数のツールチップを必要としないことに集中しています。
私は自分自身に尋ねていました：なぜユーザーはこのポップアップを見たいのですか？おそらく彼/彼女はオブジェクトのより詳細な情報に興味があるからです。彼/彼女はオブジェクトを「検査」したいと考えています。
それでは、ユーザーがオブジェクトの上にカーソルを置いたら、オブジェクトをもう動かさないのはどうですか。代わりに、オブジェクトの下にマップを移動します。ユーザーがオブジェクトから離れると、元の動作に戻ります。
OPの説明に照らして、私の回答にいくつかの変更を加えました。彼らは一目で情報を提供する軽量のツールチップを望み、このツールチップはカーソルに留まります。
ツールチップには2種類の情報が表示されます。
- オブジェクトのセット
- オブジェクトに関するいくつかの追加データ
静的オブジェクトは定義上移動しないため、カーソルの下に静的オブジェクトのセットを表示しても問題はありません。
移動するオブジェクトはOPの問題の1つを引き起こします。これは、移動するオブジェクトが、ユーザーが情報を見ているときにカーソルの下から離れる可能性があることです。 これが最初の問題です
OPが直面しているもう1つの問題は、静的か移動かに関わらず、オブジェクトに関連付けられた追加データです。スクリーンショットでは、OPは静的オブジェクトの横に追加データを示していませんが、オブジェクトの移動性に関係なく、追加データの問題と解決策は同じです。 これは2番目の問題です
カーソルの下から移動するオブジェクト
オブジェクトの上にカーソルを置くと、カーソルの下のすべてのオブジェクトが強調表示されるか、アイコンのサイズが少し大きくなり、ツールチップに表示されるデータとマップ上のオブジェクトが視覚的に関連付けられます。移動するオブジェクトがカーソルの下から移動する場合は、アイコンのハイライトを解除したり、サイズを元に戻したり、ツールチップから行を削除したりしないでください。
考慮事項：カーソルの下に移動するオブジェクト
カーソルの下に移動するオブジェクトがある場合は、ツールチップに移動するオブジェクトを追加する（そしてそれを強調表示する）ことを検討できます。ただし、ユーザーが忙しい場所に長時間カーソルを置いたままにすると、ツールチップが非常に大きくなる可能性があります。
通常のユースケースではないかもしれませんが、おそらくそれでも対処する必要があります。オブジェクトの制限を設定して、カーソルの下にないオブジェクトの削除を開始できます。
追加のオブジェクトデータの更新
OPのスクリーンショットでは、動くオブジェクトに非常に重要な追加データがあります。このデータを静的に保つことによって日付の情報を見ると、ユーザーに害を及ぼします。したがって、このデータは定期的に、たとえば5秒ごとに更新する必要があります。
このソリューションは、カーソルが移動されていない間、ツールチップで移動オブジェクトの行をそのまま維持することにより、ユーザーが移動オブジェクトの後にスクランブルしないことを保証します。また、ユーザーが表示しているデータが最新のものであることを確認します。
最初の2つのオプションは不可能です
最初のオプションでは、ユーザーが読み取る時間を最小限に抑えることができるため、ユーザーが制御することはできません。さらに悪いことに、データを適切に表示するにはカーソルを移動する必要があります。 2番目のオプションは、一貫性がないため不適切です。さらに、mousemoveイベントが頻繁にトリガーされます。
概念的な問題と解決策
これらの情報をホバーに表示することは、すでに設計上の問題だと思います。ツールチップにclick eventとfixed positionを使用すると、すべての問題を解決できます。ただし、このロジックに固執したい場合は、3番目のオプションを使用する必要があります。さらに、私はあなたの3番目のソリューションの修正バージョンを提案します。
- 固定位置（左上隅または右上隅）にツールチップを表示し、別のツールチップが開いているか、ツールチップが手動で閉じられている場合は、表示を変更します。
- マウスの位置（固定）にツールチップを表示し、mouseleaveでフェード効果を開始します。ツールチップはアイコンの横にある場合があり、ホバー領域もアイコンを覆います。この方法でも、ユーザーはツールチップを読みたい時間を制御できます。それでも、手動で閉じるオプションを提供します。
オプション2の問題は、短期間に多くのオブジェクト、おそらく同じオブジェクトを複数回ホバーした場合に何が起こるかということに注意してください。
複数のオブジェクトを同時にホバーする場合（まだ数を制限することをお勧めします）、選択したオブジェクトを強調表示し、参照（たとえば、同じ色）で複数のツールチップを表示できます。
私はあなたのジレンマを完全に理解しています。 UXの課題にもかかわらず、ホバーに関する情報は、ユーザーにとって直感的で期待どおりの便利なUIです。壊れない限り;-)
情報をトリガーする前にわずかな遅延を使用します（200〜300ミリ秒）。物事が非常に速く動いていて、これが実行できない場合、ホバーボックスもどちらでもありません。アクティブになると、ホバーボックスは
- ユーザーは、カーソルを情報またはオブジェクトから指定された距離だけ移動します。動かされていないカーソルはこれを引き起こすべきではありません。
- オブジェクトがビューの外を通過します（したがって、接続を適切に維持できません）。
情報はおそらく読む価値があるので、移動したくないので、問題のオブジェクトから切断される問題が発生します。これには、以下に示すように、単純なコネクターを使用できます。オブジェクトは選択に応じて移動し、情報はその初期位置にとどまり、コネクタは関係を維持します。
関連するオブジェクトにリンクする動的な矢印または線（または他の何らかの形の表示）を持つ静的なツールチップ。ツールチップはそのままですが、オブジェクトが移動すると、表示も一緒に移動するため、常にツールチップにリンクされたままになります。
ただし、ユーザーがカーソルでオブジェクトを追跡する必要をなくすために、カーソルがオブジェクト上になくなったときにツールチップをアクティブにしておく必要があります。それ以外の場合、ツールチップのトリガーはホバーではなくクリックである可能性があります。
ツールチップに問題がある場合は、使用しないでください。
ツールチップは、関心のあるオブジェクトの隣に状況に応じて小さな情報を表示する場合に適しています。あなたのケースでは、表示する情報はかなりの量であり、アイテムの更新を以下のマップに表示することも重要です。したがって、情報を表示する他の方法を検討する必要があります...
詳細ペインがより良い解決策である可能性があります
選択したアイテムを強調表示して、側面の詳細ペインをスライドして開きます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
注：これは、マップと詳細の両方を同時に表示するのに十分な大きさの画面領域を持つインターフェースを扱っていることを前提としています。ただし、モバイルデバイスを使用している場合、ツールチップのアイデアはとにかくうまく機能しません。
1つのアイデアは、バスの位置をロックし、代わりにバスのドットにカーソルを合わせたときにバスの周りでマップを移動することです。このようにして、ツールチップの位置を固定できます。
IMOこれはツールチップではなく、フローティングプロパティパネルです。これは、1つの情報を一目で確認するためではなく、関連するデータのセットをユーザーに提示するためのものです。
これは間違いではなく、違いだけです。攻撃する前に問題を特徴づけることが役立つと思います。
更新されたデータを固定位置に表示し、動的に更新されたコネクタを使用して移動バスを固定ペインにバインドします。