web-dev-qa-db-ja.com

ハイパーリンクは青である必要がありますか?

すべてのハイパーリンクにデフォルトの色が設定されているサイトを作成しました。リンクは青、訪問済みリンクは紫です。ホバーすると赤くなります。

ハイパーリンクに常に青を使用することは良いことだと思います。ユーザーはハイパーリンクとは何か、そうでないものをすばやく確認できます。しかし、私の同僚の一部は反対し、他の色を望んでいます。

これについてどう思いますか?

42
Husky

未訪問リンクの#0000FFや訪問済みリンクの#800080などの標準は、ほぼ全員がそれを行う場合にのみ有効です。それ以外の場合、ユーザーは標準がいつ遵守されるか予測されないため、サイトの動作を予測するためにそれを使用できなくなります。残念ながら、ほとんどのWebサイトはこれらの色標準に従っていません。無作為な調査(ランダムな調査と混同しないでください)では、基準に準拠しているサイトは3分の1未満です。私の経験では、Webに比較的慣れていないユーザーでも標準に気付かない可能性があります。これは、ユーザーが経験から得たものではありません。デザイナーが基準に厳密に従うために、美的およびブランディングの目的のためにグラフィック属性にとって色はあまりにも重要であることが判明しました。率直に言って、それはいずれにしても優れた標準ではありませんでした。一部のユーザー、特に高齢者のユーザーは、彩度の高い青色のテキストに集中するのが難しいです。全体として、この標準に準拠する意味はもうないと思います。

ただし、より広く定義された意味でリンクを青にすることは依然として理にかなっています。私が調査したサイトの80%以上がリンクに青の色合いを使用しています。したがって、ユーザーが信頼できる標準的なものではありませんが、青みが他の色よりもリンクが強いと思う傾向があると思います。 明確な色である限り、リンクに青色以外の色を使用しても問題はありません(ユーザーはリンクかどうかを確認するには、各色のテキストの上にマウスをスクラブする必要があります)。ただし、青を使用することがまったく妥当な場合は、青を使用します。

色の選択よりもさらに重要なのは リンクに下線を付ける です。少なくとも、トップメニューまたはサイドバーメニューにないリンクについてはそうです。私が調べたサイトの90%以上は、リンクを区別するために下線を使用しています(ただし、多くの場合、マウスオーバーでのみ)。これにより、一貫して規則に従っています。また、下線を引くことで、色のアクセシビリティの問題を完全に回避できます。これには、完全に色盲の少数のユーザーが関係する問題も含まれます。

まとめると、かなりお勧めします Jakob Nielsenが推奨したものと同じもの 6年前:

  • 特定のサイトでは、すべての未訪問リンクに1色を使用します。複数の色を使用して未訪問のリンクを意味すると、サイトの学習負担が増加し、ユーザーが選択するリンクをスキャンすることが難しくなります。

  • 「色」とは、色相があることを意味します。リンクは黒、白、または灰色にすることはできません。色以外は、ユーザーにリンクテキストではないことを示します。

  • サイトのパレットに青がある場合は、その青をリンクに使用します。

  • 選択したリンクの色を、サイト上の非リンクテキストに使用しないでください。これにより、リンクの内容とリンクではないものがユーザーに混乱し、リンクに色を付ける目的が無効になります。

  • すべてのリンクに下線を引きます。マウスオーバーの下線は注意して使用してください。リンクが青色である場合、またはリンクがトップメニューまたはサイドバーメニューにある場合にのみ考慮します。

  • 非リンクに下線を付けないでください。代わりに、斜体または太字で強調してください。

静的なコンテンツのあるサイトの場合、調査では 別の色でアクセスしたリンク を表示することが推奨されています。ただし、アクセスされていないリンクに特定の色がないため、アクセスされたリンクに何を使用するかわかりません。私が調査したサイトの3分の1のみが訪問済みリンクと未訪問リンクを区別しており、これらのほとんどは訪問済みリンクに紫を使用していないため、この慣習に慣れているユーザーがどれほどいるかはわかりません。ここでは、色分けは任意です。紫自体については、「訪問済み」を意味するものは何もありません。ユーザーはリンクをクリックして戻って色の変化を見ると意味を推測できるかもしれませんが、1か月後にサイトに戻ったユーザーを想像してください。一部のリンクは1つの色で、他のリンクは異なる色です。どちらがどれかを覚えるのは難しい。

私が提案できることは、より広範なユーザーエクスペリエンスを活用し、アクセスしたリンクに「使い古した」ような色を採用することです。これは、訪問されていないリンクの色よりも彩度が低いはずです(#800080と#0000FFの使用に一致します)。ほかに何か?一部のサイトのように色相を赤にシフトします。紫と青の使用と一致していますか?他のサイトのように、リンクが「色あせた」ように見えるように、明るい色を使用しますか?他のサイトのように暗い色を使用して、リンクを通常のテキストとより調和させますか?これにはいくつかの研究が必要だと思います。それから、それを標準にする必要があります。

32

配色で許可されている場合、慣例は適切ですが、内部の一貫性がより重要であるため、青/紫/赤のパレットにこだわる必要はありません。また、リンクを通常のテキストと区別することも重要です。区別は、通常、色、重量、または下線によって行われます。リンク状態ごとに異なる色を使用すると、使いやすさが向上します。

27
Virtuosi Media

リンクを青にするかどうかは、古い議論です。ジェイコブニールセンは、これを擁護することが知られていますが、彼は何年にもわたって変化しています:ホームページの使いやすさビューを変更しました(Nielsen&Loranger 2006、p。100)。

ただし#0000FFよりも重要な色のリンクは、あなた変更訪問した色 links 。必ずしも紫色ではなく、何か(特に)異なるものに。


私の(刺激を受けた)意見:美学は重要です。したがって、#0000FFでも他の色でも、全体的な視覚的な感触に一致するdistinctリンク色を使用します。

8
jensgram

この恐ろしい青である理由は、色覚異常の人(つまり、色覚異常の最も一般的なケース)が黒と青を区別できるため、実際に違いがわかります。色覚異常の可能性があるユーザー(googleやbingなど)が非常に多い場合は、この規則を守ることをお勧めします。それ以外の場合、デザインで機能しない場合は、その必要はありません。ただし、少なくともリンクに下線を引くか、リンクを色だけでなく別のものにすることができます。

3
Lukas Oppermann

青である必要はなく、一貫している必要があります。そして一貫して、すべてが1つの色である必要があるという意味ではありません。ナビゲーション内のリンクと、フッター内のリンクと、コンテンツ内のリンク-領域内で一貫性があり、クリック可能であることがわかる限り、それぞれに独自の色を付けることができます。

私の意見では、ボタンの色もリンクの色と一致し、リンクの色だけでなく、「クリック可能な」色をユーザーに提供するのが最善です。訪問済みリンクに関する以前のコメントにも同意します。大幅に異なる必要はありませんが、著しく異なる必要はありません。

最後に、リンクの色を定義するときは、背景とテキストの色を定義します。

背景が白、テキストが黒、青/紫のリンクから始めると想定しないでください-ユーザーはこれらを変更できます。デフォルト以外の色を使用するようにブラウザーを設定する必要があります。そうすることで、サイト(および他の多くのサイト)がこれらの色を定義できない場合を確認できます。 (ブラウザの背景色をライトグレー、栗色のテキスト、明るい緑色のリンク、暗い緑色の訪問済みリンク、オレンジ色のリンクホバーに設定しています。)

2
Webveloper

まず、リンクの主要な問題は、特定の色であるかどうかではなく、リンクであることを明確にするために十分に区別されるようにすることです。

@VirtuosiMediaと@jensgram、訪問済みリンクの差別化は良いことだと思いますが、それでも重要なのは、リンクを目立たせることです。特に現在、情報の過負荷と読み取りではなくスキャンが多いため、ユーザーはリンクを一目で確認する必要があり、何かにアクセスしたかどうか、特にアクセスしているページからアクセスしていないかどうかを知ることは役に立ちます。 。多くのサイトが同じ素材にリンクしている1つの主要なトピック領域または業界内のコンテンツを読む場合、コンセプトはより重要であると思います。私は常に、ユーザーがブラウザーの設定で訪問済みリンクの動作を上書きできることを覚えておく必要があります(私と同じです)。

@Lukasと@Charlesまた、下線が機能しない場合もあります。十分に高いコントラストを考慮して設計する場合、単に別の色を使用するだけで色覚異常の人にとっても十分ではない可能性があります。あなたがあなたのリンクを与えることができるより多くの差別化とその後のより多くの疑似クラスバリエーションはより良いです。たとえば、シンプルなデザインの場合、#333のテキストの色と#000のリンクの色は、視力が低いユーザーや色覚異常のユーザーにはおそらく十分ではありませんが、黒いリンクを太字にして下線を引くだけで十分な場合があります。状態は、ホバーとアクティブで変更し、その後再び変更することをお勧めします。おそらく、上で引用したケースでは#999のようなものに変更します。

@Stewbobほんと?それがあなたのデザインを青にこだわるように臭くさせたとしても、あなたはそれをするべきですか?ほとんどありません。

1
jameswanless

特定の色が重要だとは思いませんし、下線が引かれていることもありません。それが即時である限り、それらをクリックできることは明らかであり、それで問題ありません。

私はクリックできるものを探すために(マウスを使って)狩りをしなければならなかったサイトに行ったことがある。カーソルが小さな手に変わったら、クリックできることを知っていました。私にはそれは非常に貧弱なデザインです。

サイトのデザインはそれぞれ異なりますが、一般的には、ページを(パッシブに)見ているだけで何がクリックされてアクションを実行できるかは明らかだと思います。物事がどこにあるかという点で、一般的な基準に従っているといいますが。多くのウェブサイトは右上にアカウント情報があります。繰り返しますが、過去に「ログアウト/ログオフ」リンクを見つけるために5分以上費やす必要があったサイトを利用しました。

0
Antony Scott

Microsoftが公開した リンクの標準 を以下に示します。リンク colors と背景に関する特定のセクションがあり、不適切な使用法の面白いイラストがあります。

0
JeromeR