it-mure.jp.net

ハイパーリンクにカーソルを合わせたときにテキストの色を変更する

ハイパーリンクにカーソルを合わせると、テキストの色を変更する必要がありますか?私は通常、ホバー時にハイパーリンクを明るい青色に変更します。

a:link {
 color: #0088cc;
}

a:hover {
 color: #0099dd;
}

これにより、視覚的なフィードバックが増えるため、ハイパーリンクをターゲットにしてクリックするのが容易になると思います。私はこのまさに理由で私のサイトでクリック可能なほぼすべてのものにホバー状態を持っています-画像、ボタンなど...

Googleの検索結果には色を変えるハイパーリンクがないようです。彼らはこれについて調査を行い、それがユーザビリティを低下させると結論付けましたか? 41階調の青 で変換率をテストするなど、クレイジーなテストをたくさん行っているので、ハイパーリンクのホバー状態でテストを実行したはずです。

8
JoJo

数人の同僚と私は、Webアプリケーションの一連のユーザビリティテストを実施したところです。ホバー時にリンクに他の視覚的な手がかり(ハンドカーソルを除く)を追加するかどうかは特に検討しませんでしたが、視覚的なフィードバックが多いクリック可能な要素(リンク、ボタン)が気付く可能性が高いことがわかりましたおよび/またはクリックしました。 「もっと」と言ったとき、それは非常に注意を引く必要があるという意味ではありません。リンクの微妙な色または下線の変更が役立ちます。

リンクのホバー状態の色を設定するためにどれだけ暗い/明るいかについて、無限に議論することができます。ただし、特にリンクについては、i)下線の追加/削除、ii)リンクホバー時にツールチップを表示することで、ユーザーがリンクの存在とクリック可能性を大幅に認識できることがわかりました。

これがお役に立てば幸いです。

1
moey

私は、あなたが指摘したように、それは「空間的発見」の点で使いやすさを助けることができると思います-つまり、リンクがクリックできるとき、特にリンクが他に示されていない大きなフットプリントを持っている場合、それを少しはっきりさせることができます。

ただし、カーソルの変更はすでにこれを示しているので、利点は最小限だと思います。私の経験では、肯定的なユーザビリティよりも「かなりの効果」に使用されることが多いです。

おそらく非常に効果的であると私が思う1つのケースは、小さなリンクが近接して配置されている場合です。 「A-Z」バー。これにより、カーソルの変化では提供されない、選択されているリンクを特定するのが容易になるため、特定のリンクを選択しやすくなります。ただし、それはおそらく元の問題に対する最良の解決策ではありません。スペースがわずかにつながり、フットプリントを増やします!

最後に、テキストリンクが隣接している場合、ホバースタイルは分離を示し、どのリンクが選択されているかを示すのに役立ちます。

7
Bobby Jack

それが主に「かなりの効果」に使用されているかどうかはわかりませんが、視覚的なアフォーダンスに対応していると思います。それはサイトがあなたに反応していること、そしてあなたが現在いるエリアがインタラクティブであることをより明確に示しています。どちらかと言えば、私はホバーステートを持たないようにプッシュしようとしたビジュアルデザイナーと協力してきました。それが物事をより美しくすると言う人は誰も聞いたことがありません。

また、カーソルは常に変化するとは限りません-デフォルトでは変化しますが、デザイナーはそれをオーバーライドできます。また、JavaScriptまたはFlashモジュール内でトリガーされるインタラクティブな要素がある場合、常にカーソルの変化で示されるとは限りません。

私はなぜGoogleがこれをしないのか戸惑ったことを認めざるを得ない。そうでなければ、各検索結果でいくつかのハイライト状態を提供しますが(リンクの隣の一部のアイコンが暗くなります)、検索結果内のURL自体がクリックできないなど、他の奇妙な設計上の決定もあります。 (スポンサー付き広告では、表示されるURLがトップレベルドメインであり、リンクがクリックされたときにアクセスする実際のURLではない可能性があるためです)。

Googleがこれを行う理由は何でしょうか?それはデフォルトのブラウザ動作だからです。つまり、すべてを無効にしていて(CSS、JavaScriptなど)、純粋なHTMLを使用しているだけでも、リンクの色/機能は誰にとっても同じに見えます。

1
Michael Histen