濃い水色の下線でハイパーリンクを区別する理由は何ですか？

Question

私の知る限り、フローの下線を読む際の注意散漫を避けるために、ハイパーリンクだけでなく、あらゆる状況では避けてください。 BBCは、色を付けずに代わりに太字にします。ただし、マガジン Wired は、太い水色の下線を意図的に選択して区別します。それは推奨事項に矛盾していませんか？何故ですか？

Daniel Beck · Accepted Answer

つまり、この回答の簡潔でぎこちないバージョンは、「有線であるため」である可能性があります。彼らは何年にもわたってかなりトーンダウンしてきましたが、Wiredは、可読性よりもエッジの効いたデザインの原則に多かれ少なかれ基づいていました-蛍光ピンクの背景に10ptライムグリーンのテキストを書いた初期の栄光の時代と比較して、これはかろうじて評価されます。つまり、機能的なタイポグラフィの手本として私が期待するものとは、厳密には違います。

しかし、その歴史はさておき、この特定の設計上の決定は弁護可能です。青い下線は、ハイパーリンクの元の下線付きの青いテキストインジケーターへの明白な参照です。（リンクを示す必要がありますどういうわけか、そして1990年代初頭からよく知られているインジケーターを使用することは非常に合理的です。）一方、その太さとその比較的明るい色は、どちらもベアボーンに比べて読みやすさが向上しています。オリジナル-美的には、真の下線よりも蛍光ペンのように読みます。

私の知る限りでは、フローの下線を読む際の注意散漫を避けるために、ハイパーリンクだけでなくどのような状況でもを避ける必要があります。

これは、「過大評価」と「単に不正確」の間のどこかにあります。強調のための下線の使用は、print資料では一般的には推奨されませんです。これは、他の表記上の強調よりも読みにくいためです。利用可能です。オンライン資料では、下線強調は、一般的に理解されている下線付きテキストがリンクであるという慣用句に干渉するため、特に避けてください。

リンクに下線を引く必要はありませんが、慣れ親しんで広く推奨されていますであり、 accessibility です（誰もがその意味を知っていて、色覚異常でもそれを見ることができます）。 BBCの例でも、テキスト内のリンクに下線を使用しています-見出しはクリック可能であることが期待されるため、ホバー状態以外は何も表示されませんが、インラインリンクには、強調のための太字と区別するために薄い灰色の下線が表示されます。

Mike M · Answer

スタイルはアフォーダンスとアクセシビリティと同義ではありません

視覚的なデザインに関する多くの決定は、アクセシビリティ、読解力、視覚的アフォーダンスよりも美学のために行われます。一部のサイトでは、リンクがborder-bottom cssプロパティを使用して境界線の太さを強調するスタイルに移行しています。したがって、例では、テキストが区別できない場合でも、境界線があるためクリックするアフォーダンスはかなり強力です。

下線付きテキストからのフローの懸念の読み取り

あなたは2003年の研究を参照しているかもしれません：リンクマーカーの視覚化手法の比較–読書行動の変化

この調査では、下線付きのリンク（特に、リンクの比率が高いテキストの場合）が原因で読みやすさが損なわれていることは示されていますが、反研究とアクセシビリティの懸念がまだ残っています。

アクセシビリティの懸念と認識

Nielsen Normanから： ハイパーリンクのベストプラクティスへの古い（ただし便利な）ガイド

これらのガイドラインにはいくつかの例外がありますが、テキストリンクは、クリックしやすさの知覚可能な最高のアフォーダンスを実現するために、色と下線を付ける必要があります。

例外...

リンクテキストに色が付いていると仮定すると、必ずしも下線を引く必要はありません。

下線を安全に削除できる主なケースは2つあります。ナビゲーションメニューとその他のリンクリストです。ただし、これはページのデザインが領域の機能を明確に示している場合にのみ当てはまります。（設計は、外部のユーザーにとっては、自分のチームメンバーにとっては明らかではないかもしれません。）ユーザーは通常、左側のナビゲーションレールを理解します。左側のナビゲーションレールは、ほとんどのナビゲーション領域に似ていると想定して、色付きの背景にリンクのリストを表示します他のサイト。

W3から： 成功基準（SC）1.4.1：色の使用

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

From Usability.gov:

プロ：

下線付きのテキストはリンクであることをユーザーが理解しているため、リンクは見つけやすいです。下線が注目を集めます。ユーザーの負担を取り除くと、遅延を防ぎ、目的のコンテンツへのアクセスを高速化できます。

コン：

リンクに下線を引かないことを選択した場合は、誤解を招く手がかりを避けたいことに注意してください。リンクを選択するためのシグナルは明確でなければなりません。また、サイト全体で一貫して使用する必要があります。

視覚的な混乱の他に、左のナビゲーションやタブ付きナビゲーションなど、下線付きのリンクが適切でない場合があります。長いリスト、特に箇条書きのリストでは、圧倒的な量のテキストと下線が読みやすさを妨げます。リンクやテキストが多いホームページ、およびインデックスページや起動ページでは、視覚的な混乱が特に蔓延する可能性があります。

Baymard には、ハイパーリンクだけでなく、強調対実際のハイパーリンクのテキストを強調表示するいくつかのオプションがある興味深い記事があります。