Web デザインと制作におけるハイパーリンク効果の改善_HTML/Xhtml_Web ページ制作

ハイパーリンクを使用すると、ユーザーはページからページへ、またはサイトからサイトへ瞬時に移動できます。そのような力は不安を引き起こす可能性があります。
ハイパーリンクを使用すると、訪問者はあるページから別のページ、またはあるサイトから別のサイトにジャンプできます。しかし、この頻繁なジャンプは人々を不安にさせる可能性があります。

ユーザーが安心して閲覧できるように、リンクは完全に明確かつ明示的である必要があります。
ユーザーがページをより快適に閲覧できるように、ハイパーリンクは完全に明確かつ明示的である必要があります。

原則
原則

1. テキスト ハイパーリンクは通常のテキストと明確に区​​別できる必要があります。
2. マウスオーバー動作はできるだけ短く、かつ次のいずれかを識別できる長さである必要があります。 ハイパーリンクの特定のコンテンツは簡潔かつ簡潔 (短く正確) である必要があります:


・
どこへ行くか [

ジャンプ転送アドレス
] ・

得られるもの [
どのようなコンテンツを取得したいですか] ・ なりたいこと [

希望効果
] 4. 異なるターゲットを含むハイパーリンクは明確に区別できる必要があります。 5.予期せぬ結果の兆候。例: ハイパーリンクをクリックした後に発生する特殊な状況について説明します。

・ ファイルへのリンク [ファイルへのリンク ]

・ ウィンドウを開閉するリンク [リンクをクリックするとウィンドウが開閉します]

リンクは何を作成しますか?
このハイパーリンクを作成する目的を考えてください

ハイパーリンク コンテンツの例: Amapproved.com
ハイパーリンク コンテンツの例: Amapproved.com

承認されたアストン マーティンを見つけるためのサイトです。これは、検索結果から特定の車両の詳細を確認する方法を推測します。モデル (車両概要列内)
このケースは Aston Martins [Aston Martin] 車両概要列 [車両基本リスト]」の「」>車両についてです。モデル[車両モデル]」。

最初の、そして最大の問題は、ハイパーリンクを区別できないことであり、原則 1 を破っています。詳細情報を得るためにどこをクリックすればよいのかわかりません。推測する必要があります。最初に直面する最大の問題は、どれがハイパーリンクであるか区別できないことです。これは法律 1 に違反します。つまり、詳細情報を得るためにどこをクリックすればよいかわからないので、最初にそれについて考える必要があります

2 番目の問題は、リンクがまったく異なるターゲットを指しているにもかかわらず、同じように見えることです (それぞれが異なる中古のアストンマーティンです)。これは原則 4 に違反します。このページ上のリンクはすべて同じ内容であるためです。 (車両モデル)、リンク「
Aston Martin」である可能性はさらにわかりにくいですが、これらはほぼ同じに見えます。これは上記のルール に違反します。 4; プラスすべて リンクにはすべて同じ内容が含まれます (車両モデル [車両タイプ) ]) により、ハイパーリンクが目立たなくなります。

「Aston Martin DB7 GT」をクリックすると、Aston Martin DB7 GT 車に関する一般的な情報が得られると期待されますが、これは原則 3 に違反します。リンクが、得られる情報を正確に説明していないからです。
リンク「
Aston Martin DB7 GT」をクリックすると、「Aston Martin DB7 GT」タイプの車に関する一般情報。しかし、最終的に得た情報とリンク先の説明との間に矛盾があることに気づきました。すると、これは法律3に違反します。

何をすべきでしょうか?

ウェブサイトをどのように改善すべきですか?

「取得するもの」は特定の車に関する情報です。特定の車を表すものはテーブルの行全体です (走行距離、価格などはありません)。したがって、行全体がクリック可能なハイパーリンクである必要があります (マウスオーバーで行の色や色調が変わると便利です)。

「得られるもの [得られる情報]」は、自動車に関連する情報である必要があります。同時に、特定のモデルがテーブルの列全体を占める必要があります。特定のモデル情報 (走行距離、価格など) を含む確認オブジェクトがないため、テーブルの列全体がクリック可能なハイパーリンク オブジェクトとして使用される必要があります。 。 (マウスをハイパーリンク上に移動したときに色の変化効果が発生すると、識別しやすくなります)。

ハイパーリンクでのサイズの表現
ハイパーリンク オブジェクトのサイズを記述します

ファイルにリンクするときに、コンピューターがユーザーの期待を設定するために次のような情報を出力しているのを見つけるのは非常に一般的です。
ファイルにリンクするとき、通常はハイパーリンクが表示されます。説明が含まれます。ユーザーがファイル リンクをクリックするかどうかを決定しやすくするために、ファイル サイズを表示します。
例: PDF (46,764 バイト)
ユーザーの目標について考え、ユーザーが知っておく必要があることダウンロードにかかるおおよその時間: 数秒でしょうか、それとも数分でしょうか? 一般に、ダウンロードにかかる時間はどれくらい正確であるかを知る必要があります: 秒でしょうか、それとも数分でしょうか?したがって、できるだけ正確に説明する必要があります。

それは何でしょうか?

上記のファイルサイズはどのように記述すべきですか?

ファイル サイズを 2 桁を超える有効数字で表示することにはまったくメリットがありません。また、オンラインでのファイル サイズにはキロバイトまたはメガバイトのみを使用してください (有効数字 2 桁までが適切です)。実行: 4.7KB、47KB、470KB、4.7MB など)
ファイル サイズは有効数字 2 桁以内で記述するのが最善です。上記のファイルサイズは
47KBと記述する必要があります。したがって、可能な限り、ファイルはキロバイト (kb) またはメガバイト (mb) を使用して Web 上で記述する必要があります。 (推奨する2桁の記述方法は以下の通りです: 4.7KB、47KB、470KB、4.7MBなど)

ハイパーリンクの書式設定

ハイパーリンクの書式の定義

テキストのハイパーリンクを他のテキストと区別する必要がある場合、色や下線/太字などの書式設定を行う必要がありますか?
テキストのハイパーリンクを他のテキストと区別する必要がある場合、これを行う必要がありますか?ハイパーリンク部分に通常のテキストとは異なる色を使用するか、ハイパーリンク テキストに下線や太字を付ける必要がありますか?

事実上の慣例では、ハイパーリンクは下線付きの青色で表示され、クリックすると赤色に変わり、アクセスされたリンクは紫色になります。
デフォルトのハイパーリンク アクションは次のとおりです。色の変化は次のとおりです。最初はハイパーリンクが青色で下線が付いていますが、クリックすると赤色に変わり、訪問したハイパーリンクは紫色で表示されます。

ほとんどのテキストを白の背景に黒でレンダリングする最も読みやすい方法は、テキストのハイパーリンクを青 (#00f) にすることです。は白の背景に非常に適しています。通常の黒いテキストと明確に区​​別できますが、読みやすいだけの視覚的なコントラストが得られます (
#00f)。そうすることで、色の視覚的なコントラストが明確になり、ハイパーリンクのコンテンツとテキストのコンテンツを区別しやすくなり、読みやすさが向上します。

グレースケールの青色のハイパーリンク: 下線ありまたはなし

ハイパーリンクの色は、下線の有無にかかわらず、青色ではなく灰色にすることができます。


色盲の人にとって色だけで区別できるかどうかを尋ねるのは適切です。上の画像は、完全に彩度を下げたこのページのスクリーン キャプチャであり、色がなくても十分な色調の違いがあることがわかります。下線付きのバージョンは、ハイパーリンクを明確にするために黒と青の間で色を区別しますが、ホバー時に下線を表示することも同様の目的で使用できます。また、色のみに依存するかどうかも考慮する必要があります。区別するためにハイパーリンクのステータスを変更した場合、色覚異常の人はそれを受け入れることができますか?色を識別できるかどうか尋ねるのが最善です。上の図はページのスクリーンショットです。上の図から、ハイパーリンクの色の変更効果を使用しなくても、黒と青だけを使用してハイパーリンクを明確に識別できることがわかります。ハイパーリンクに下線を付けると、ユーザーがハイパーリンクを識別しやすくなります。また、マウスがハイパーリンク上を通過したときに下線を表示すると、同じ効果が得られます。


ハイパーリンクに下線を付ける必要がありますか?

ハイパーリンクに下線を付ける必要がありますか?
時々のインラインリンクでは下線が問題なく機能します。

頻繁に使用されない組み込みのハイパーリンクには下線を付けることができます。
ハイパーリンクの役割を強調するため、色だけよりもリンクが少し目立ちます。
この例では、下線は記事タイトルとサブタイトル レベルのタイトルを区別するために適切に機能します。

段落内やリンクのリスト内に多数のインラインリンクがある場合、およびページ上に多数のリンクのセットがある場合は、下線は役に立たないと思います。

段落内の場合。 、リンク リストまたはページ上にハイパーリンクが多すぎる場合、これらのリンクに下線を引いても目立った効果はありません。

ここでは、ハイパーリンクのコレクションの例をいくつか示します。元のリンク (下線付き) と、下線を削除したものを示します。

次の 2 つのハイパーリンクのセットの効果を比較します。次のように、左側のハイパーリンクには下線が含まれていますが、右側のハイパーリンクには下線が含まれていません:

下線のないテキスト ブロックをすばやく簡単に読むことができることに注目してください。



この 2 番目の例では、関連する単語が明確になるように行間も調整しています。

一貫性

一貫性

ハイパーリンク形式がページ間で一貫して動作することが重要です。
ハイパーリンク形式がページ間で一貫して動作することも重要です。

明らかに、ナビゲーション バーなど、一部のテキスト リンクが異なる背景にある場合は、特別な色や処理を使用する必要がある場合があります。
明らかに、ハイパーリンクがナビゲーション バー内など、別の背景にある場合は、特別な色と効果を使用します。

上記のスニペットは Guardian Online のホームページから取得されています
上記のスニペットは Guardian Online のホームページ。

ほとんどのリンクは似ていますが (#036、主に下線が引かれていません)、マウス ポインターがアクティブなリンク上に移動すると、ホバーにいくつかの非常に異なるスタイルが適用されます。
上ハイパーリンクの形式は基本的に同じです (フォントの色 #036、ハイパーリンクには基本的に下線が引かれず、マウスがハイパーリンク上を通過したときに生じる効果が異なります >

心理的影響は当惑させるものです。すべてのリンクが同じようなことをするのか (つまり、このサイトの別のページに移動するのか)、それとも予期せず別の場所に移動してしまうのではないかという疑念が残ります。これは統合失調症の行動だと思います。
心理的な観点から見ると、このようなエフェクト処理は同時に人々を不安にさせるでしょう。使用されているリンク これはすべて当てはまります (他のページを含む)。予期しない場所にリンクしていますか?この統合失調症的なアプローチは、サイトのブランドに対するユーザーのイメージを低下させ、同時にサイトを使いにくくすると考えています。

すべてのハイパーリンクを別々に扱う正当な理由はありません。色の変更によってハイパーリンクが弱まり、目立たなくなります。これは
すべてのハイパーリンクに異なる効果を使用することはできません。上記の 3 番目のケースは 2 番目のルールに違反します。色の変化が異なると焦点がぼけてしまい、目立った役割をまったく果たせないためです。

結論
結論

結局のところ、業界では、リンクには #

00f または #
00c (少し暗い) 青を維持し、リンクを作成するのが主流のようです。カーソルを合わせると赤色と (オプションで) 下線が表示されます。つまり、最も特徴的なハイパーリンクの色効果の変更は次のとおりです。 #00f または # を使用します。 00c (色は前者よりわずかに濃い)、マウスがハイパーリンクの上を通過するときに、赤色を使用するか、下線を追加して強調表示します。

これは、インライン ハイパーリンクとグループ化されたハイパーリンクに一貫して適用すると、機能の最適なバランスが維持できると思います。