web-dev-qa-db-ja.com

ハイパーリンクに下線を付ける必要があるのはいつですか?

ますます多くのWebサイトがハイパーリンクから下線を削除していることに気づきましたか?たとえば、Googleの現在のベータテストでは、検索結果に下線はありません。

google search no underline

Googleは、他の有名なWebサイトとともに、下線付きのハイパーリンクを徐々に取り除いてきました。なんでこんなことが起こっているの?デザインから下線を削除する必要があるのはいつですか?

個人的には、Google検索結果の装飾されていないリンクは解析が難しいと思います。タイトルを読んでいる間、下線が私の目を導いていた。タイトルと説明が一緒になりました。 ux.stackexchangeが太字でなくなり、スレッドのタイトルが軽くなったときも、このように感じました。タイトルが目立たなくなったため、スキャンが難しくなっています。何が私をこのように考えさせているのか誰が知っていますか...変更するのは人間の本能的な嫌悪かもしれませんし、それとも本物のUIの懸念かもしれません。

68
JoJo

プレーンテキスト、標準の青いハイパーリンク、オーバーレイリンクマーカーのテキストの読みやすさを比較したこの2003年の研究 によると、下線付きのリンクは読みやすさに悪影響を与える可能性があります。

後で さまざまなリンクの視覚化手法を比較する研究 は、その時点(2004年)で一般的なWebユーザーが下線付きの青いリンクに条件付けられていることを発見しましたが、最適な視覚化手法を示すことができませんでした。

Microsoftのガイドライン リンクについては明確で、さまざまな機能パターンで機能する例を示しています。

基本的なガイドラインは、ユーザーが目視検査だけでリンクを認識できる必要があることです。オブジェクトにカーソルを合わせたり、クリックしてリンクであるかどうかを判断したりする必要はありません。

青い下線付きのテキストは、リンクがリンクであることを示す多くの方法の1つにすぎません(ただし、長い間慣例となっているため、非リンクには青い下線付きのテキストを使用しないでください)。適切な視覚的スタイルのほかに、その他の要素としては、コンテキスト、リンクテキスト、インターフェイス全体の一貫性があります。

私の見たところ、Googleテストの主な問題は、水平線がないと、さまざまなアイテムが混ざり合い、視覚的なリズムが崩れるため、リストをスキャンすることがより困難になることです。これは、多くのソリューション(リストを表示するiphoneの方法など)の基本的なリストスタイル設定の問題です。

52
Marielle

リンクのスタイル設定にのみ色を使用する場合、2つの点に注意してください。


WCAG 2. 状態(レベルAの場合):

1.4.1色の使用:色は、情報を伝えたり、アクションを示したり、応答を促したり、視覚的に区別したりするための唯一の視覚的手段としては使用されません素子。

したがって、サイトにアクセスできるようにするには、リンクに別の視覚的な手掛かりを追加する必要があります。これはである可能性があります(ただしはありませんto)下線です。ただし、コントラストが十分に高く、異なるフォーカス動作を提供する場合は、カラーのみ 十分である可能性がありますG182 および F7 も参照してください。


(テキストの色に加えて)リンクのスタイル設定に何らかの種類の線や背景を使用しない場合、ユーザーは隣接するリンクを区別する問題があります 。 2つ以上の単語が1つのページにリンクされているかどうかをどのようにして確認するかOR 2つ以上のページ?確認するために、リンクをホバー/フォーカスする必要があります。すでにクリックされている場合(ホバリング/フォーカス後の一部のスタイリングの変更を認識しませんでした)、一部が「アクティブ」なスタイルを認識する可能性があります。

10
unor

文体的な決定でない限り、私は下線付きのリンクを少なくとも5年間使用していません。美的観点から見ると見た目は醜いだけですが、使いやすさの観点から見ると、リンクからリンクにジャンプする傾向があり、テキスト全体を読むのが難しいことに気づきます。

これは、スタイル、ウェイト、カラーを非常に多くの時間使って、下線付きの青いリンクほど不快ではない本文テキストとリンクの有意義なコントラストを取得することを意味しますが、それは私を幸せにします!

9
Robert Grant

常にリンクに下線を引くのがおそらく最善です。読みやすさに対するリンクの影響の十分な証拠はありません(以前にリンクされた調査は、可読性に対するリンクに下線を引くことのほとんど取るに足らない影響を示しています-とにかく、そのような重要な設計決定を行うには1つの調査では十分ではありません)。

リンクに下線を引くのは、その機能を示すためであり、ユーザーはalwaysでテキストの一部がリンクであるかどうかがわかります。これは実際にはいくつかの方法で行うことができますが、リンクに下線を引くのがその時点で最善です。

もちろん、リンクの機能を示すために色を使用することもできます。ただし、すべてのリンクが同じトーンでなければならないため、これは色の選択を大きく制限します。リンクの色として青を選択した場合、灰色のリンクはありません。それ以外の場合、リンクの機能を示すものは何もありません(リンクを青だけでなく灰色にすることもできる場合は、他の色を使用しないのはなぜですか?

しかし、それだけではありません。あなたのWebサイトがWeb上の唯一のものではないという事実を考慮してください。ユーザーは、yourWebサイト全体でリンクの色が一貫していることを確信できません。ユーザーがそうであるかどうかはわかりません。

したがって、リンクに下線を引くことは、実際にはハイパーリンクの機能を示す最も便利な方法です。ユーザーはそれに慣れています。正しく行うと、見た目も美しくなります(行の高さで十分です)。読みやすさへの影響については、未解決の問題です。ハンブルク大学の調査では、リンクがテキストのブロック全体に広がっている場合、下線が引かれたリンクが読みやすさに悪影響を与えることが示唆されています。しかし、たとえ読みやすさが低下したとしても、ユーザビリティへのプラスの影響は読みやすさの低下の可能性を上回っていると思います。

7
sbichenko

このページのほとんどのリンクに下線が引かれていません。 :)

私は点線の下線を使用してAJAXリンクを示します。これは現在のページで開きます(中クリックはできません)。FogCreekはそれをリンクに使用します キルン

Kiln underlined links

しかし、それが広く使われているスタイルとは言えません。

3
Phil Cohen

重要なことは、リンクが青色であり、テキストの残りの部分から目立つことです。「これはリンクです」とユーザーに伝えるのに十分です。このページの右側にあるリンクを確認してください。下線がなくても、通常のテキストと間違えないようにしてください。それはすべて美的であり、下線はテキストのきれいな流れを壊します。テキストがリンクであるというフィードバックをさらに強化するには、テキストにホバーするときに下線を付けることができます。

2
Henrik Ekblom

リンクに下線を引くことの利点について他の回答が示した良い点に加えて、もう1つの重要な考慮事項は、ホバー機能を持たないモバイルデバイスやその他のタッチベースのUIの台頭です。ウィキペディアでは、「 大統領トルーマン 」のようなテキストに頻繁に出くわします。それはいくつのリンクですか?ここのデフォルトのスタイルシートにはリンクの下線がないため、おそらく答えはあなたの考えとは異なります。「大統領」という単語をさりげなくクリックすると、おそらく予想外の場所に移動します。 (ちなみに、これがWikipediaのユーザースプレッドシートを変更してすべてのリンクに下線を引いた理由です。)

経験豊富なデスクトップユーザーは、テキストにカーソルを合わせると下線が表示されるかどうかを確認できます。また、サイト所有者がリンクに吹き出し機能を追加していない場合は、少なくともステータス領域に異なるURLが表示されるかどうかを確認できます。しかし、モバイルデバイスやタブレットのユーザーはどうですか?文章のさまざまな部分を長押しして、さまざまなURLにつながるかどうかを確認するために十分に動いていない限り、彼らはランダムにタップして最高のものを望みます。

要点:思いやりのあるUX設計者は、リンクスタイルを開発する際にモバイルユーザーを考慮します。

1
phenry

問題はwhenではありません。すべてのハイパーリンクがサイト上で同じに見える必要があるためです。他に何に下線を引く必要があるか、どのように競合しないかなど。

0
WaterBearer