クリックできることをユーザーに説明する方法
Githubなどの周りに多くの豊富なツールチッププラグインやスクリプトが浮かんでいることは知っていますが、教育上の理由から自分で作成することにしました。私はコードが今どこにあるかにかなり満足しており、何人かのユーザーにそれを試すように誘っています。
ユーザーがクリックしてツールチップを「ロック」しない限り、ツールチップはカーソルに追従し、カーソルがツールチップのコンテンツ（リンクやズーム機能付きの画像など）と対話できるようにします。
私は、大多数のユーザーが使いやすく理解しやすく、実際にこれらのツールチップの使用を楽しんでいることに気づきました。ただし、半分以上のケースでは、ユーザーは指示なしにクリックしてツールチップをロックできることを考えていません。
説明なしで、ユーザーがクリックするとツールチップが位置をロックすることをより明確にするにはどうすればよいですか？
カーソルの変更を検討しましたが、デフォルトのカーソルは一般にクリック可能なものの上にあることに関連しているため、ユーザーは別のカーソルを必要とする親の何かの上にカーソルを置くことができます。
ツールチップ自体にある「クリックしてロックする」という非常に小さなテキストも考えましたが、私にとって明らかな主な問題は、ツールチップ自体を邪魔しないように十分に小さくするには、テキストを非常に小さくする必要があるということです。おそらく読めなくなるほどです。それに続いて、クリックする必要があるのはツールチップ自体ではないことを適切に伝える表現は考えられません。これ以上人を混乱させたくない。
ここで実際に動作を確認したい場合の動作例があります http://fbvm.co.uk/tooltip
また、コードはここcodereview.SEにあります https://codereview.stackexchange.com/questions/159017/javascript-jquery-tooltip-management/15902
これは境界を越えたクロスポストであることは承知していますが、質問は十分に異なっていると思います。同意しない場合は、この質問の改善または変更を手伝ってください。
ユーザーが一般的に慣れているものと、プロトタイプで得ているものとの間に不一致が生じるため、これはトリッキーです。
標準的なポップアップは、相互作用の点で歴史的に非常に「低タッチ」の要素です。それらは一度に1つずつ出入りし、通常は慎重に調整された動的な遅延とフェードにより、ユーザーのコンテンツに役立つかどうかわからない追加のコンテキスト情報が表示されます。ユーザーのメンタルモデルでは、通常、コンテンツや他のUIから完全に分離された独自の「レイヤー」に存在します。それらは無視するのが非常に簡単であり、それによってユーザーがどれほど意識していなければならないかに関して非常に低い「精神的プロファイル」が与えられます。そして、その大部分は、非常に少数の例外を除いて、クリックを要求したり招待したりすることはないためです。
あなたは本質的にハイブリッド要素を作っています：それはlooks風船スタイルのポップアップのようですが、それはworksクリックして個別に展開/折りたたむ一連のフライアウト/展開要素に似ています。あなたは現在の毎日の経験の流れに逆らって泳いでいて、ユーザーに同じことをするように頼んでいるので、それは挑戦になるでしょう。
また、現在の設計では、それぞれを手動で開閉する必要があるため、ツールチップとしては少し面倒です。複数のバブルが一度に開かれると、それらは互いに重なり合い、おそらくさらに重要なことに、それらが「ポップアップしている」基礎となる主要な情報を不明瞭にし始めます。カスタムポップアップintを実行可能でスケーラブルなソリューションにするには、これらの問題に対処して解決する必要があることがわかりました。
一般的に言って、ユーザーがいる場所に（ユーザーを移動させるのではなく）対話型アフォーダンスを追加することは、UIの問題を解決するための非常に優れたアプローチです。また、ポップアップは、呼び出し時にカーソルの既存の位置の近くに表示されるため、それを実行する多くの可能性を提供します。
また、インタラクションをポップアップに移動することの良い点の1つは、インターフェースのモーダル性を少なくできることです。つまりポップアップを使用すると、ユーザーは常に手動でUIを開いたり、閉じたり、移動したりする必要がありません。呼び出され、ポップアップし、ユーザーとやり取りして、消えます。ビンバンブーム。それらは迅速なインとアウトのトランザクションに最適です...自動化するほど、より良いものになります。
また、私は確かに斬新な方法で機能するUI要素を作成するのをやめたくありません（革新は良いです！そして必要です！）が、私の経験では、それをどのように提示するかに注意する必要があります。それが人々がすでに知っているものとは異なって機能する場合、それは彼らが既に知っているものとは異なって見えることは非常に頻繁です（しかし常にではありません！）。
あなたの問題は説明文で解決するのが最善ではないことに同意します。
情報ツールチップなのか、それとも複雑なポップアップダイアログなのか、本当に質問する必要があると思います。それがツールチップなら、私はそれを従来通りに保つでしょう。多分あなたの場合、より従来的なエキスパンドパネルスタイルの要素の方が良いでしょうか？複数の同時オープンを完全な手動スティッキーで行うことに設定している場合は、単にそれらをそれらの要素のように見せることだけが探求したい場所ですか？多分それは、ハイパーリンクだけでなく、複雑さの点でどれだけ追加することを計画するかに大きく依存すると思います。
ポップアップとそれらが提供する利点に満足している場合、おそらく、「ちょっと、これは以前に使用したものとは少し異なります！」というユーザーへの手掛かりとしてアニメーションを試すことができます。これは、動きや透明度、色などの変化である可能性があります。それとも、上記の組み合わせですか？
または、「段階的なプロモーション」を行うというアプローチもあります。つまりユーザーが何かを動かしたり選択したりすると、カーソルから静止したツールチップが表示され、その後ツールトップにカーソルを合わせると、フレームがバブルから小さなプッシュピンアイコンの付いた長方形に変わり、粘着性を示します。上記のアイコンをクリックすると、ふきだしになります。そうでない場合、バブルはツールチップのままであり、マウスをクリックせずに移動すると、それ自体が消えます。これにより、ポップアップでのマウス操作と、基になるウィジェットでの操作が分離され、ウィジェットがそれ自体のクリックを受け入れ続けることができます。これは必然的に、このような要素をより完全にデプロイするときに提供する必要があるものです。
考える価値のある1つの例は、Microsoft Officeの「フェージングコンテキストツールバー」です。何かを選択すると、カーソルの近くに色あせたアイコンが表示されます。通常は目立ちませんが、近くに移動すると、距離とともにフェードイン/フェードアウトし始めます。その上にカーソルを合わせると、コンテキスト主導のオプションがポップアップ表示されます。この場合、ミニツールバーとメニューです。ユーザーは物事を直接調整できます。ユーザーが離れたり、操作したりすると、それは自然に消えます。彼らはなんとかそこにたくさんの物を詰め込むことに成功しました。しかし、どのように表示され、フェードイン/フェードアウトするかは、非常に注意深く調整されていることに気づくでしょう。表面上は明らかではないが、状態の複雑さが増しています。しかし、それでも動作します。高速で自動であり、期待を混乱させないように十分に異なって（そしてまったく同じに）見えるからです。また、それを管理するための余分なクリックは不要です。これは、HCIシステムでは常に非常に大歓迎です。
とにかく、これは冗長になっています。ポップアップを使用したデザインは、非常にやりがいがありながら、やりがいのあるものであることがわかりました。これの一部が役に立たない場合に役立つと思います。乾杯！