ページ要素がホバーされることをどのように明確にできますか？
私のウェブページには、5つのステップのプロセスの各ステップの名前を含む5つのボックスがあります。ユーザーがいずれかのボックスにカーソルを合わせると、ボックスが展開され、そのプロセスを説明するテキストが表示されます。
ボックスをマウスでホバーする必要があるようにするにはどうすればよいですか？現在は単色の四角形であり、偶然そうでないと「ホバーオーバー」とは何も言えません。
境界線またはホバーする必要があるアイテムのすぐ下に虫眼鏡アイコンが埋め込まれているサイトを見たことがあります。
まず、これがコンテンツを表示するための最良の方法であるかどうかを検討します。コンテンツはどのくらいの頻度で使用されますか？コンテンツの重要性。頻繁に使用される場合、または非常に重要な場合は、コンテンツを別の方法で表示することを検討してください。
この「ホバー時」のパターンが正しいパターンであると確信している場合は、注意を引く必要があります。通常、この効果は、stackexchangeユーザー名などのテキストに使用されます。これは通常のリンクと同じスタイルです。一般的には、ユーザーがこれを自分で発見するという考えです。そのため、ここには重要な情報を入力しません。または、onlclickを提供して、ユーザーをより詳細なビューに移動することもできます。
ホバーイベントを追加する要素が単なるテキストのリンクではない場合は、何らかのアイコンを使用して詳細情報を示すことができます。
要件
ユーザーを引き付ける行動を促すフレーズが必要です。そのため、これはメッセージや画像/アイコンの形をとる必要があります。たとえば、情報アイコン、疑問符アイコン、虫眼鏡、バスケットアイコン、方向矢印、またはアプリケーションのコンテキスト内の何か。
自己完結型の領域である必要があります（たとえば、周囲と調和しない）が、スタンドアロンボタンのように見えないようにしてください。これは、ユーザーがクリックできることを期待するが多すぎる -これはアクティブであるがボタンではないことを示す微妙な微妙な点が必要です。それ以外の場合は、「これはボタン」という考え方があまりにも顕著になります。
ホバーアクションはすぐにアクティブになります。多くのツールチップスタイルのヘルプテキストのように2秒間待たないでください。これは、ユーザーがマウスを上に置いたときの偶然の発見も助け、これ以上の「これはボタン」の考えを払拭します
ホバー時のインスタントアクションが本当にどこにでもポップアップするときに迷惑になるので、このメカニズムをどこでも使用しないでください。インスタントホバーを特定の関心領域に制限します。
ポップアップは、ポップアップをアクティブにした元の領域のスペースではなく、独自のスペースの外に移動するとすぐに非表示になります。
可能であれば、何が発生するかを試してみてください。たとえば、コンテンツの「カットオフ」スニペットを表示して、何かが移動したり露出したりするように見えるようにしたり、矢印がエッジから出てくるようにしますページまたはポップアップを引き出すことを示す領域。
例
これらの手順を組み合わせた典型的なシナリオは、次の場所にあります。
- eコマースサイト-製品の詳細など-バスケット価格/リスト-すべての一時的な詳細
- 各アイテムのヘルプを取得するためのWebフォーム
- ナビゲーションメニュー項目
カルーセルの例を次に示します（執筆時点では johnlewis.com オンラインショッピングサイトで使用されています）
明確な行動を促すフレーズがあり、矢印とポップアップの半分が非表示になっているため、どうなるかは明らかです。ホバーアクションはすぐに行われ、近くに他のインタラクティブコンテンツはなく、移動するとすぐにポップアップが消えますそれから離れて。
極値
ホバーの極端な使用例- dontclick.it/ を見てみてください。最初のページの後、すべての対話がホバーで行われ、クリックはまったく必要ありません。
また、マウスnearerをホバーオブジェクト（ある最大距離内）に移動し始めると、小さな情報パネルが徐々にフェードし始める興味深い動作も見たので、パネルを表示し始める前に、実際にカーソルを合わせる必要はありません。これは、特定のシナリオで正しく機能するように少し試行錯誤する必要がある場合があり、ホバーオブジェクトがメインコンテンツやその他の対話領域からある程度離れていることに依存しています。残念ながら、どこでそれを見たのか思い出せません。そのコンセプトではテストが不可欠です！
私は、ホバーに表示されるのはオプションの「Nice-to-have」情報のみが表示されるべきであるとまで言っています。ホバーの遅延が非常に小さい場合でも、ユーザーが何かの上にホバーしようとすることに依存するのは本当に難しいです。したがって、これが説明テキストが表示される唯一の場所である場合は、少し考え直す必要があるかもしれません。
各ボックス内に、詳細情報へのリンクのように見えるものを配置します。ユーザーがリンクをクリックするとき（つまり、マウスをボックスに移動するとき）は、リンクを削除し、すべての情報を含むボックスを展開します。クリックレスリンク。
リンクは「詳細情報」や「ヘルプ」などのテキストである場合と、小さな「？」のいずれかである場合があります。サークルのアイコン。
上記の回答の上に構築したいと思います。 「？」の付いたアイコンその中で、おそらく助けを探しているユーザーに示唆を与えるだけでしょう。情報アイコン（ ここにいくつかの例があります ）を使用しないのはなぜですか？これらは「より多くの情報」を探している人々により示唆的だと思います。
ブラウザでサポートされている場合は、CSSでこれを行うことができます。 IE 6はまだ使用中で、新しいCSS機能の多くをサポートしていません。
色を使用して領域に注意を引くことができます。また、マウスクリックでページの残りの部分をフェードアウトするなどのイベントを使用して、ユーザーが移動する正確な領域を強調表示することもできます。
情報テキストは、ページレイアウトが本来ナビゲーションに向いていない場合にも可能性があります。
ホバリングは偶発的である可能性があるため（ユーザーがマウスを使用していない、マウスが邪魔にならないように移動しているなど）、ホバーデザインパターンの乱用に反対しています。ページのレイアウトを変更しないボタンやその他のコンテンツでは、ホバリングは非常に便利です。迷惑なホバー動作（IMO）は、要素の拡張に起因します。
そうは言っても、私は ScottKの答え が好きです。虫眼鏡のアイコンを表示します。