ウェブサイトのハイパーリンクを開く方法に関する議論

ウェブサイトのハイパーリンクを開く方法に関する議論

新しいウィンドウが開きます。 利点: ユーザーがリンクをクリックしても、現在閲覧しているコンテンツは置き換えられず、閲覧したコンテンツを表示するために前後に移動する必要がありません。 欠点: アクセスしてからしばらくすると、大量のウィンドウが生成され、リソースを占有します。各ウィンドウは手動で閉じる必要があります。
1つ。リンクを開く方法
    新しいウィンドウで開く利点: ユーザーがリンクをクリックしても、現在閲覧しているコンテンツは置き換えられず、閲覧したコンテンツを表示するために前後に移動する必要がありません。
    デメリット: アクセスしてからしばらくすると、多数のウィンドウが生成され、リソースを占有します。各ウィンドウは手動で閉じる必要があります。現在のウィンドウを開く利点: 多くのウィンドウを開いてリソースを大量に消費することなく、常に 1 つのウィンドウでコンテンツを表示できます。ウィンドウは 1 つだけなので、簡単に閉じることができます。
    デメリット: ユーザーが複数のページの内容を表示したり比較したりする必要がある場合に非常に面倒です。または、SHIFT キーを押しながらリンクをクリックする必要がありますが、この操作を知って使用している人はほとんどいません。新しいウィンドウと現在のウィンドウを選択的に使用することによる利点: 上記の 2 つの方法によって発生する不便さをより人道的な方法で解決できます。ウィンドウの数は大幅に増加せず、ユーザーは複数のウィンドウを切り替えて読むこともできます。
    デメリット: リンクをクリックするときのユーザーのニーズは、デザイナーが想定しているものとまったく同じではない可能性があります。ユーザーは、リンクが新しいウィンドウで開かれるのか、現在のウィンドウで開かれるのかを確信できないため、ある程度の心理的な「プレッシャー」を感じてしまいます。

2. リンクを開く方法の選択方法
    同じ種類の情報の場合は、同じリンクの開き方を使用します。中国人は新しいウィンドウで開くリンクをより受け入れやすいです。次の状況では、新しいウィンドウで開きます。
    チャンネル コンテンツ リンク、ナビゲーション リンク、記事内の拡張読み取り用リンク、記事内の関連コンテンツへのリンク、およびユーザーが同じ種類の製品を比較する必要がある場合、次の状況で現在のウィンドウを開いて使用します。
    記事のページネーションタグ、リストのページめくりタグ、前/次の記事へのリンク、リニアタスク(ユーザー登録、情報投稿など)、およびユーザーによるリニアな読み取り/操作にリンクが必要な場合。

3. リンク可用性設計ガイドライン
    意味があり、理解しやすく、認識しやすいリンク ラベルを使用します。リンク ラベルがリンク先のページのタイトルと一致していることを確認します。リンクではないテキストや画像をクリックするようにユーザーを誘導しないでください。重要なリンクを繰り返します。可能な限り、テキストをリンク ラベルとして使用します。ユーザーが使用したリンクと使用していないリンクを区別するために、異なる色を使用します。一貫したリンク ラベルを提供します。ユーザーがリンクを開けるように、「ポイント アンド クリック」方式を使用します。適切なリンク長を使用し、リンク ラベルは 1 行以内にします。内部リンクと外部リンクをユーザーに通知します。ページにリンクされている画像がある場合は、ページ上のすべての画像がクリック可能であることを確認します。

4つ。新たな視点
    ユーザーがリンクを開く方法を選択できるようにします。たとえば、デザイナーはユーザーにクエリ ボックス (小さなチェック ボックス) を提供し、ユーザーがリンクを開く方法を決定できるようにします。 一部の Web サイトでは、アイコンを使用してリンクの性質を説明し、誘導します。たとえば、Wikipedia の外部リンクは、小さな矢印を使用してサイト内のリンクと区別されます。

5. 一般的な国内ウェブサイトのリンクを開く方法
1. オンラインショッピング

現在のウィンドウ 0
新しいウィンドウ 1
チャンネル切り替え
リスト
詳細
カテゴリーから社内商品画像を検索して会社・店舗に入る
アリババ
0
1
1
1
1
1
HC
0
1
1
1
1
1
中国製
0
0
0
0
0
0
グローバルソース
0
0
0
0
0
なし
パット
0
1
0
1
1
0
タオバオ
0
1
1
1
1
1
ジョヨアマゾン
0
0
0
0
0
なし
※チャンネル切り替えの場合、すべてのウェブサイトは現在のページで開かれ、その他のリンク操作は主に新しいウィンドウで開かれます
2. 総合ポータル

現在のウィンドウ 0
新しいウィンドウ 1
チャンネルスイッチのホームページ/チャンネル内のリンク
シナ
0
1
捜狐
0
1
ヤフー中国
0
1
ネットイース
1
1
テンセント
1
1
中国ドットコム
1
1
3. 包括的な検索

現在のウィンドウ 0
新しいウィンドウ 1
チャンネルスイッチのホームページ/チャンネル内のリンク
グーグル
0
1
百度
0
1
ヤフー
0
1
ソゴウ
0
1
テンセントソソ
0
1
※チャンネル切り替えの場合は現在のページで開く方式、他ページでの操作の場合は新しいウィンドウで開く方式を採用しています。<br />そのため、チャンネル切り替えの場合は現在のページで開く方式、他ページでの操作の場合は新しいウィンドウで開く方式を推奨します。 Alipayのウェブサイトにも、無理なウィンドウの開き方がたくさんあります。上記の議論が、ウィンドウの開き方を設計する皆さんの助けになれば幸いです。

<<:  MySQL の Like の概念と使用法の説明

>>:  スーパーバイザーウォッチドッグの使い方を3分で学ぶ

推薦する

Linux自動ログイン例の説明

インターネット上には、expect を使用して自動ログインを実現するスクリプトが多数存在しますが、明...

Linux ブートシステム方式の分析

この記事では、Linux システムを起動する方法について説明します。ご参考までに、詳細は以下の通りで...

MySQLとOracleの違いを簡単に説明してください

1. Oracle は大規模データベースですが、MySQL は小規模から中規模のデータベースです。O...

ウェブページの色特性の分類

色特性の分類あらゆる色は、赤、緑、青の三原色から構成されます。三原色の中で暖色なのは赤だけなので、作...

MySQL テーブルの断片化を解消し、スペースを再利用する方法

目次MySQL テーブルの断片化の原因行の断片化行内断片化空き領域の断片化MySQL で極度に断片化...

複雑なウェブサイトのナビゲーションを簡素化

<br />ナビゲーション設計は構造設計における主要なタスクの 1 つです。ソフトウェア...

Linux で AIDE に基づいてファイルシステムの整合性を検出する方法

1. 補助AIDE (Advanced Instruction Detection Environm...

CSS リセットスタイルリセットの実装例

はじめに: すべてのブラウザには、「ユーザー エージェント スタイル シート」と呼ばれる、すべてのペ...

MySQLのlike演算子の詳細

1. はじめに不明な値または部分的に既知の値をフィルタリングする場合は、like 演算子を使用でき...

【HTML要素】画像の埋め込み方法

img 要素を使用すると、HTML ドキュメントに画像を埋め込むことができます。画像を埋め込むには、...

Vue で pdfjs を使用して PDF ファイルをプレビューする方法

目次序文考えるライブラリディレクトリの解析とダウンロード使い方ファイルの場所実際の通話質問要約する序...

ダイナミックな波効果を実現するSVG+CSS3

ベクトル波 <svg viewBox="0 0 560 20" class...

Centos8 の Django プロジェクトに nginx+uwsgi をデプロイするチュートリアル

1. 仮想環境virtualenvのインストール1. virtualenvをインストールするpip3...

scss で mixin が動作しない問題の解決方法 (ブラウザでコンパイルできない)

ミックスインメソッド: ブラウザはコンパイルできません: 以前のバージョンのsassでは上記の記述方...

VSCode 開発 UNI-APP 構成チュートリアルとプラグイン

目次前面に書かれた予防開発環境構築開発構成に関する注意事項前面に書かれたuni-app は、Vue....