国内外の有名なウェブサイトを例に、ウェブサイトのページングナビゲーションについて考察する

[コアヒント] ページングナビゲーションに関して、一見シンプルなデザインの背後にはどのようなロジックがあるのでしょうか?

編集者注:

この記事は、ウェブサイトのページング ナビゲーションの設計に関する読者の Weiyangliang の考えをまとめたものであり、ウェブサイトのページング ナビゲーションの設計に関するいくつかのアイデアや考えを分析しています。

Web を閲覧しているときに、ページナビゲーションに遭遇することがよくあります。ページネーション ナビゲーションには、閲覧する情報の量をユーザーに伝える、ユーザーが見たくない情報をすばやくスキップできるようにする、配置と検索を容易にする、ページ サイズを縮小して読み込み速度を向上させるという 4 つの主な機能があります。さらに、ページナビゲーションは、Web を閲覧しているユーザーに実際に一定の一時停止を与えるため、製品の「リズム」が向上し、ユーザーの閲覧疲労が軽減されます。

以下では、国内外の一般的なウェブサイト（主に検索エンジンや電子商取引サイト）を例に、ページネーションナビゲーションの設計についてさまざまな観点から説明します。

1: ページナビゲーションの長さ

ページネーションナビゲーションは長すぎても短すぎてもいけません。ページナビゲーションが長すぎるとユーザーの負担が増加し、ページナビゲーションが短すぎるとナビゲーションの目的を十分に果たせません。

Taobao と JD には 6 つのページネーション ナビゲーション ページがありますが、Google、Bing、Yahoo には 10 のページネーション ナビゲーション ページがあります。 Baidu と Amazon は可変長形式を使用します。 Baidu の初期の長さは 10 です。ページが下に行くにつれて、ページ番号が付けられたページの数が徐々に増え、最終的に 20 ページの長さを維持します。一方、Amazon は最初は 4 ページのみでしたが、最終的に 5 ページで維持されました。

Googleのページナビゲーション

Bingのページネーションナビゲーション

Yahooのページナビゲーション

Baiduのページネーションナビゲーション

Amazonのページネーションナビゲーション

タオバオのページングナビゲーション

JD.comのページネーションナビゲーション

電子商取引ウェブサイトのページネーションナビゲーションページの数は、一般的に検索エンジンよりも少ないことがわかります。もちろん、主な理由は、電子商取引ウェブサイトの検索結果の数が検索エンジンの検索結果の数よりもはるかに少ないことです。第二に、電子商取引のウェブサイトは主に物品の販売を目的としているため、ユーザーに情報を提供することを目的とする検索エンジンと比較して、ユーザーが任意のページをランダムにクリックして商品を閲覧するように誘導するのではなく、最初の数ページでユーザーが商品を注意深く閲覧できるようにすることが好まれます。

2: 最初のページと最後のページのナビゲーション リンクは必要ですか?

Google、Bing、Yahoo、Amazon、Baidu、Taobao、JD.com のページ ナビゲーションには、ホームページや最終ページへのリンクがありません。

Google、Bing、Yahoo、Baiduなどの検索エンジンにはホームページや最終ページがありません。検索結果の数が多すぎてページ数が多いため、最終ページを提供することにあまり意味がないことは理解できます。さらに、ページネーションナビゲーションの長さは 10 ページ以上あり、ユーザーは 10 ページ以内に必要な情報を見つける可能性があります。見つからない場合でも、ページ 1 をクリックすることで簡単にホームページに戻ることができるため、「ホームページ」リンクはあまり役に立ちません。

Amazon、Taobao、JD.com などの電子商取引サイトでは、商品情報に対するユーザーの需要はよりパーソナライズされており、検索精度に対する要件は検索エンジンほど高くありません。そのため、eコマースサイトのユーザーが必要とする商品情報は、検索エンジンのようにホームページに集中するのではなく、検索結果の各ページに均等に分散される可能性が高くなります。さらに、別の可能性もあります。ユーザーは、一定数のページをめくったときに、結果が自分のニーズからどんどん外れていることに気付いた場合、通常は検索条件を変更したり（紳士服、婦人服、ブランドなどを限定するなど）、再度検索したりします。

また、上記2種類のWebサイトの共通点は、検索結果内のリンクがデフォルトで別ウィンドウで開かれることです。そのため、ユーザーが後続のページを閲覧し、再度ホームページの商品情報や検索結果を閲覧したい場合、ウィンドウを切り替えることで閲覧することができます（ウィンドウを閉じる強迫性障害でない限り）。

3: カスタムページ番号が必要ですか?

カスタム ページは、オプションの数が制限されたページネーションによく使用されます。 Taobao と JD.com の両方がこのナビゲーション方法を提供しています。しかし、情報量が多いページでは、ユーザーは特定のページの具体的な内容がわからないことが多いため、ページをカスタマイズして閲覧することは少ないのではないかと思います。 Taobao と JD.com が提供しているこの機能は、ナビゲーション ページ番号に「ホーム」リンクがないことを補うものとして理解できます。さらに、電子商取引のウェブサイトは、このカスタムページ番号機能を提供することで、下位ランクの製品の露出を増やすことができます。電子商取引プラットフォームの観点からも、これはニーズです。

4: ページ番号の間隔

ページ番号の間隔が小さすぎると、ユーザーが誤ってクリックする可能性があります。間隔が大きすぎると、マウスの動きが大きくなります。 Google はこの点に関しては少しうまくいっていないようです。ページ番号が 2 桁になると、Google のページ ナビゲーションが少し混雑するように見えます。これは、各ページ番号がページネーション ナビゲーションの上にある文字 o と揃うようにするための Google の方法であると暫定的に理解できます。

Googleのページ番号の間隔は、2桁のページ番号が表示された後は狭すぎる

5: マウスの反応

理想的には、ページ番号の上にマウスを置いたりクリックしたりすると、ページ番号が反応するはずです。これにより、マウスが現在ホバーまたはクリックしているページ番号がユーザーに通知されます。マウスをページ番号の上に移動すると、Taobao では対応する小ボックスにオレンジ色の枠線が追加され、JD では対応する小ボックスが青色に変わり、Baidu と Bing では対応する小ボックスが灰色に変わり、Google では対応するページ番号に下線が引かれます。マウスをクリックすると、Baidu と Google は対応するページ番号を赤色に変えます。

上記の方法はすべて正しいはずですが、Google のアプローチは少し不可解です。リンクに下線を引くことは、もともと、ユーザーにリンクであることを知らせるための HTML 処理のデフォルトの方法でした。この方法は、World Wide Web の父である Tim Berners Lee によって定義されたようです。しかし、ユーザーが Web ページに慣れてくると、下線がなくてもリンクであることが分かるようになります。 6月にSinaがホームページ上のすべてのリンクから下線を削除したのを覚えています。その時はページがずっとすっきりしたと感じましたが、その後すぐに下線が戻されました。戻って、Google のナビゲーション リンクを見てみましょう。マウスをその上に置くと、下線が引かれます。「前のページ」や「次のページ」のリンクにも下線が引かれています。個人的には、ほとんどのユーザーがすでにクリック可能なリンクであることを知っているため、これは不要かもしれないと思います。おそらく Google は目立つためにこのレトロなスタイルを利用しているのでしょう。いずれにせよ、レトロと敗者の間にはたった一歩しかありません。

6: 「前のページ」と「次のページ」

「前のページ」と「次のページ」は通常、ページナビゲーションの左端と右端に配置され、Yahoo、Amazon、Baidu、Taobao、JD.com など、ユーザーを視覚的に誘導するための左矢印と右矢印が通常あります。

「前のページ」と「次のページ」の位置も重要です。ユーザーが前のページと次のページを使用して簡単にページを切り替えることができるように、位置は比較的固定されている必要があります。この点では、上記のウェブサイトは良い仕事をしています。 Baidu の最初の 20 ページのページ番号は、ページが下に行くにつれて右に移動しますが、これはあまり良い体験ではありません。おそらく、Baidu の出発点は、ユーザーが 20 ページ以内で簡単にページを切り替えられるようにすることでしょう。

さらに、Taobao と JD.com では、ページの右上隅に簡単な上下機能も提供されています。以下は完全なページング関数、上は簡略化された関数です。ユーザーはページをめくる前にそのページで商品を閲覧するため、商品ページの下部に完全なページング機能が必要であることは容易に理解でき、そのため完全な機能が下部に配置されます。では、ユーザーが商品ページのページング機能を使用する必要があるのはどのようなときでしょうか。商品ページの内容を読みたくないのでページをめくる場合や、自分がどこにいるのかを知りたい場合などが考えられます。また、商品ページ上部のページングモジュールは、商品審査条件モジュールと同じ場所に配置されることが多いため、スペースを節約するために、ここの機能はできるだけ簡素化する必要があります。さらに、Taobao と JD.com では、検索結果ページの総数もここに表示します。これは、検索語を再入力するか、検索条件を変更するかの判断を支援する情報をユーザーに提供するためであると考えられます。

タオバオページの右上隅にあるシンプルなページめくり機能

JDページの右上隅にあるシンプルなページめくり機能

7: 現在のページ

ユーザーが現在いるページのページ番号は、ユーザーに現在の位置を思い出させ、ナビゲーションを容易にするために、他のページ番号とはスタイルが異なる必要があります。 Google、Bing、Yahoo、Baidu はすべて、ユーザーの現在のページのページ番号を示すために黒いフォントを使用しています。JD.com はオレンジ色のフォントを使用し、Taobao は現在ページの小さな四角形の背景を黄色に設定しています。

さらに、現在のページはリンク可能ではないため、マウスをそのページ上に置いた後、ホバー状態に変化してはなりません。 JD.comのウェブサイトでは、現在のページにマウスを置くと、現在のページの背景が他のページと同様に青色に変わり、マウスが指の形に変わります。これにより、ユーザーは現在のページにリンクできると誤解します。

言及する価値があるのはSina Weiboです。 Sina Weibo のデフォルト モードでは、ユーザーが下方向に閲覧すると自動的に 2 回読み込まれ、その後ページングが表示されます。空き時間にWeiboを閲覧するほとんどのユーザーにとっては、コンテンツを2回読み込むだけで十分満足できます。より多くの情報を閲覧する必要があるユーザーにとっては、閲覧した量もわかります。この方法は間違いなくより柔軟です。ユーザーの閲覧情報の連続性を保証するだけでなく、素早いナビゲーションや情報量の推定機能も提供します。

Sina Weiboの情報フローにおけるページナビゲーション

8: 訪問済み/未訪問ページ番号を区別する

デフォルトでは、HTML では訪問済みのリンクと未訪問のリンクに異なる色が付けられます。ただし、上記の Web サイトのうち、訪問済みのページ ナビゲーション リンクと訪問していないページ ナビゲーション リンクを色で区別しているのは、Baidu と Bing だけです。個人的には、特に検索エンジンを使って情報を検索する場合には、この区別をする必要があると考えています。

9: ナビゲーションページでのブランディング

前述のように、Google ナビゲーション ページ番号の上には変形された Google ロゴがあり、各ページ番号はロゴの文字 o に対応しています。ユーザーはこれらの o をクリックして、対応するナビゲーション ページ番号のページにジャンプすることもできます。

さらに、カラーマッチングはブランドプロモーションと組み合わせることもできます。 Google のナビゲーション ページ番号の青色は、ロゴの G と g の色と非常に似ています。Baidu のロゴは、Baidu のナビゲーション ページ番号の上に表示されます。JD のナビゲーション ページ番号に使用されているオレンジと青は、そのロゴのメインカラーです。Taobao のナビゲーション ページ番号に使用されているオレンジは、そのロゴと Web サイトのメインカラーでもあります。

10: その他

製品を設計する際は、ユーザーのニーズという視点からすべてを考えて設計します。しかし、製品はユーザーのニーズと企業のニーズ（通常は利益）の両方を満たすものなので、時には他のことを考慮する必要があります。たとえば、特定のニュースや情報のウェブサイトを閲覧すると、各ページには 1 つまたは 2 つの段落しか含まれておらず、ページをめくる必要があることがわかります。短い記事でも 10 ページ以上に分割されています。サイトのPVを増やすために、わざと記事を分割してページ数を増やし、ユーザーのクリックを誘うという行為は、本当に言語道断です。

たまたま最近、製品設計の際に同様の問題に遭遇したので、この問題を解決しました。

原題: 国内外の有名ウェブサイトを参考にしたウェブサイトのページングナビゲーションに関する考察

キーワード: 国内外の有名ウェブサイト、ウェブサイトの分割について、ページナビゲーション、いくつかの考え、コア、ウェブマスター、ウェブサイトのプロモーション、収益化