web-dev-qa-db-ja.com

リンクアフォーダンスのベストプラクティスは何ですか?

複数のリンクがある場合、そのリンクにアフォーダンスがあることを示すためのベストプラクティスは何ですか。この例を見てみましょう:

ホバーに下線のみがあり、色がないリンクがあります。

確かに、リンクはアフォーダンスを示さないので、それは十分ではありませんか?だから私たちはそれを改善します。色を使用してリンクであることを定義できないと仮定します(さまざまな理由により、デザイン主導ではないことは述べません)

標準として下線が引かれ、色がないリンクがあります。

これがリンクであることを定義する唯一のことは、ロールオーバー時のカーソルアイコンです。これは、ユーザーにとってクリック可能な要素であることを定義するのに十分ですか?

9
DLM

Jakob Nielsenは、Web上のリンクを視覚化する最良の方法に関する優れた記事を提供しています 彼のユーザー調査に基づいており、質問に直接回答します。

彼はこうして要約している:

これらのガイドラインにはいくつかの例外がありますが、テキストリンクは、クリックしやすさの認識された最良のアフォーダンスを達成するために、色付けされ、下線が引かれている必要があります。

あなたの本能は、あなたがあなたのウェブサイトであなたが使用していると説明した既存の振る舞いの両方が不適切なフォームと見なされ、記事にリストされているという点で優れています。

下線のないテキストの場合、彼の主なガイドライン(2つの例外を提供)は次のとおりです。

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

彼のサイトの別の記事 には、彼がいるイントラネットサイトにおける両方の問題の蔓延を示すグラフが含まれていますレビュー済み(イントラネットについて話していることは明らかではありませんが、より幅広いWebの妥当な指標である可能性があります):

Chart of link treatments across 56 intranets reviewed by Jakob Nielsen
Jakob Nielsenによるグラフ( Source )。

5
Kit Grose

アクティブなリンクでは、下線付きの青色が最も一般的です。ハンドポインターと下線のテキストは、色覚障害者に役立ちます。ウェブサイトのテーマの色でデフォルトの青を変更できます。リンクを注意する必要があるものだけが、段落テキストで十分に見えるようにしてください。

1
Vijay Misra

下線が引かれたリンクは、数年前の標準だったので、年配のインターネットユーザーにとっても快適に感じるでしょう。

ただし、このアフォーダンスはすべての人に役立つとは限りません。したがって、 Wikipedia のような他のサイトでは、横に小さいアイコンを表すリンクがいくつかあります。このリンクをクリックすると、ユーザーが外部サイトなどにアクセスできることに注意してください。

他にも例があります ウェブ全体 。アプリケーションと最も重要なのはユーザーに合ったソリューションを採用するようにしてください。 :)

0
ekapros

ホバーに下線を引くだけのリンクがあり、色はありません。

いいえ、それでは十分ではありません。色だけでリンクとしてマークするのも、色覚異常の人には機能しないので、良いことではありません。したがって、アクセシビリティは失敗します。

標準として下線が引かれたリンクがあり、色はありません。

それは少し微妙に聞こえます。おそらくロールオーバー時に色を変更し、下線を削除してアクティブリンクであることを少し視覚的に確認します。 ekaprosが外部リンクのアイコンを提案することがベストプラクティスです。

0
Will

フォントスタイルもオプションです。一部のサイトでは、本文テキストにsan serifを使用し、リンクにseriffedフォントを使用するか、斜体または太字の処理を使用できます。色は、関連性があり選択的な視覚的変数であり、全体的なデザインテーマを損なうことなくかなり微妙に使用できるため、よく使用されます。

0
Mark Sloan

私は、あなたが文体的に何を決定したかに関係なく、何かがクリック可能であることを常に意味するものの1つは、それがテキスト、ボタン、画像など、ポインタ(またはハンド)カーソルであるかどうかです。

pointer hand cursor

0
Code Maverick