ページネーションのベストプラクティス


画像著作権:codyhouse

Webサイトやアプリケーションで軽視されがちな要素の1つに、ページネーション・コントロールがあります。事実、デザイナーや開発者は、よく後付けのようにページネーションを扱っています。最適なページネーションを作成するのは、実は非常に簡単です。しかし、それを実現できているサイトやアプリケーションは、あまり多くないのが現状です。

優れたページネーションについて分析をする前に、まずは私自身が思うページネーションの説明をしましょう。ページネーションとは、コンテンツを複数ページに分割し、そのリンクをひとまとめにして表示する手法です。表示位置はページの下部か上部が多く、そこから次のページや前のページに飛んだり、任意のページ番号を手動で選択したりすることができます。分かりやすい例が、Googleの検索結果です。なお、ページネーションはブログ(前の記事/次の記事のリンク)や多くのeCommerceのサイトにも使用されています。


ページネーション

そしてもう1つ重要なのが、ページネーションは主観的に決められるということです。つまり、コンテンツやコンテキストに依存しているのです。例えばGoogle検索においては、ユーザが本当に知りたい情報を上位10個の検索結果で提供するために、ページネーションが重要な役割を果たしています。

優れたページネーションのルール

優れたページネーションを作成するのは、難しいことではありません。ページネーションを実装する際は、以下に紹介するガイドラインをぜひ参考にしてみてください。

1. ページは適度な長さにする

ページを極端に短くするのは、やめましょう。サイトやアプリケーションのページは、印刷物の1ページとは違います。印刷物の場合は、紙のサイズに物理的な制限がありますが、サイトのページは長さが無制限で、好きなだけコンテンツを掲載できます。

検索結果に関しては、1ページあたり25~75個のアイテムを表示するのが無難でしょう。ただし、この数はあくまでも目安なので、実際に表示するアイテム数はサイトのコンテキストや扱う分野によって変わってきます。スペック重視の製品(消費家電製品、ハードウェア、自動車の部品や関連用品)のリストの場合は、表示するアイテム数を少なくしましょう(Best Buyの場合、最も関連性の高い製品を1ページに最大でも15個までしか表示しません)。一方、ページ上で見比べるような製品(衣料品など)であれば、ユーザにより多くのアイテムを提示しましょう(eBayの場合、1ページに300個以上のアイテムを表示しています)。

2. クリックできる要素は大きくする

ページネーションで重要なのが、クリックするターゲットのサイズです。しかし、それを軽視しているサイトやアプリケーションはたくさんあります。クリックできるボタンは大きくするというのは、メニュー要素など、あらゆるナビゲーションリンクに当てはまる鉄則です。そしてページネーションの要素においては、特に重要なルールです。ユーザがターゲットをよりすばやく、より簡単に見つけて選択できるよう、必ずターゲットを十分に大きくしましょう。モバイル機器であれば、要素のサイズを44 x 44ポイント以上にすると、ユーザエクスペリエンスが向上し、正確に指でタップできるようになります。

左:ページネーションのターゲットが大きいので、ユーザが素早く簡単にナビゲートできる。画像著作権:Apple

3. 現在のページを認識する

「今、どこにいるのか」は、ユーザが適切にナビゲートするために、答えを知っていなければならない基本的な質問の一つです。この重要な質問に答えるために、ユーザはナビゲーション要素の視覚的なヒントを頼りにします。ですから、適切なスタイルを与え、現在のページを明確に認識できるようにしなければいけません。ユーザは、現在どのページにいるのかを知る必要があります。そのために、現在のページは他のページと全く異なるスタイルにするべきで、そうすることでユーザは自分のいるページを簡単に認識することができます。しかし、色だけに頼ってはいけません色のない状態で見ても分かるようにしましょう。

4. ページ数を制限し、要素の間を離す

ページリンクでは、10ページを越すページ数を一緒に表示するのは避けるべきです。存在する結果が10ページより少ない場合は、そのページ分だけリンクを表示するようにします。

良い例:Googleでは10個のリンクをまとめて表示している。

また、それぞれのページリンクの間には、十分なスペースを確保しなければいけません。これは、意図しないページの数字を間違えてクリックしないようにするためです。

悪い例:ページリンクが少し近すぎる。また、2桁の数字の区切りを認識しにくい点も問題である。

5. 前後のページへのリンクを提供する

ほとんどの場合、前後のページへのリンクがある方がユーザにとって便利です。しかし、適切なページネーションを実現するには、ページを表す数字と明確に区別できるようにしなければいけません。十分に距離を離したり、固有のスタイルを与えたりして、ページと間違えられないようにします。このためには、「前へ」や「次へ」といった言葉の代わりに矢印を使う方法が特に効果的です。

6. 最初と最後のページへのリンクは使わない

ページネーションに最初と最後のページへ飛ぶリンクがあり、ユーザがそこにスキップできる場合があります。その中には最初と最後のページへのリンクを二重の矢印で表現しているものがあるため、一重の矢印が最初や最後のページにスキップする場合でも、一重の矢印は前後のページへ移動するものと勘違いして押してしまうことがあります。

また、「最初へ」「最後へ」とラベリングしたとしても、「次へ」や「前へ」のリンクに近いため、誤ってクリックする原因となります。

ユーザは最新のものから順にコンテンツを見たがるため、ほとんどの場合、最初と最後のページへのリンクは不要です。過去に見たコンテンツを探しているのでなければ、ユーザにとって最後のページから読み始める意味などありません。

しかし、最初のページに戻る選択肢を提供することには、ある程度価値があります。最初のページは、最も関連性が強く、最新のコンテンツを含むことが多いからです。ユーザはページを読み進んだ後に、最初のページに戻りたいと思うかもしれません。その際、何度も「前へ」をクリックしなくても最初のページに戻れたら便利です。最初のページは数字を使い、「1」と表示するのがいいでしょう。

最初のページに常に戻れるようにする。

7. モバイル機器向けにページネーションを調節する

モバイル機器のスクリーンが小さいことは、周知の事実です。そのため、効率的に使わなければなりません。デスクトップではページをリスト表示できる一方、モバイル機器では必須要素のみ、つまり、現在のページの番号と基本的なナビゲーションオプション(最初のページ、前のページ、次のページ)のみを表示することになります。

左:デスクトップ用ページネーション 右:モバイル機器用ページネーション

8. キーボードの矢印キーとTabキーでのページ移動を可能にする(デスクトップのみ)

ユーザがキーボードのみでページ移動できるようにしましょう。単純に、右矢印キーを押すと次のページに行き、左矢印キーを押すと前のページに戻ります。そして、この機能について、ユーザに通知すべきです。そうでなければ、このような機能があることがユーザに分かりません。「ページ移動には、キーボードの左矢印キー(←)と右矢印キー(→)を使ってください」というような簡単なメッセージをページ情報の下に表示すれば十分です。

また、ユーザがTabキーを使ってリンク間を移動できるようにするのも良いでしょう。あるリンクがフォーカスされている状態でEnterキーを押すと、そのリンク先のページに移動するのです。

ページ番号と次へ/前へのどちらを使用する?

もし、ページネーションで2桁前半のページが数ページしかなければ、ページを示すことでユーザは最後まで閲覧しようという気になるかもしれません。

しかし、もしページネーションで2桁後半あるいはそれ以上のページがたくさんあれば、当然全ページに目を通すことができないため、ユーザは合計何ページあるかを知ってもあまり意味がありません。

ユーザは、1000ページのコンテンツを見ようとは思いません。

このルールに1つ例外があります。eCommerce のサイトやアプリケーションのページネーションをデザインする場合、ユーザが具体的に製品の購入を検討している時に特定のページに戻れるよう、ページネーションでページ番号を表示しておく必要があるのです。

まとめ:一般に、ページ数が少ない場合はページ番号を表示するが、ベージ数が多い場合には、シンプルな前へ次へのボタンを表示する。

結論

優れたページネーションは、可読性を上げ、複雑性を下げます。読者の皆さんが、この記事から優れたページネーションについてのヒントを得て、パーフェクトなユーザエクスペリエンスの構築に役立てられれば幸いです。

最後までお読みいただき、ありがとうございました。

Originally published at babich.biz