一覧リストにおけるページングについて

Posted on | 2009-02-22 | 9 Comments

google_paging

これです。一番わかりやすいのがグーグルなどの検索サイトの検索結果ページに使用されるこんなナビゲーション（ページング）について書きます。

なぜページングなんてものを取り上げるのか

広く普及している割にはワーディングが揺れていたり、何を「ページング」と呼べるかが少し変化していると感じる部分と相変わらず変わっていない部分と両方を感じるからです。

定義

ここでいうページングとは以下の場合を指すものとします。

ウェブにおいて、閲覧している画面解像度に対して一覧リストがある程度以上長くなってしまう場合に、閲覧上の負荷を下げる目的で複数ページに分割して表示する見せ方やそのナビゲーションのこと

また以下の場合を除くものとします。

一つの記事が画面サイズ長い場合に、編集的視点でページを複数に分割している場合のナビゲーション
一つのタスクが複数ページにわかれている場合（ショッピングサイトの購入フローなど）のナビゲーション

ちょっとわかりづらいかもしれないんですが、これらは分けて考える必要があると思います。除くものとしてリストしたものは、どちらかというとシーケンシャル（連続）型で、一つのコンテンツが便宜上複数ページに分かれているというものですね。並び順に意味があり、意味でページ分割されている。
ここで取り上げたいのは、いわゆる一覧リストがソートされて、文脈的ではなく機械的に複数ページへ分割されている場合のナビゲーションを対象としてみます。

ワーディング

ポピュラーに使われている割にはワーディングに揺れ幅があります。ページング（Paging）、ページネーション（Pagination）、ページャー（Pager）の３つに集約できるかと思います。UIをテーマにしている主要サイトでどういうワーディングや定義（定義がないものは問題点として記載されている内容）をしているか、リストしてみました。

ページング（Paging）

ソシオメディアの定義: 一連の情報が複数ページにまたがる場合、ページを送るためのリンクを表示する。

Welie.comの定義: Users need to browse through a large list of items looking for the item that interests them most.

blink design libraryの定義: most web-based systems seem to bump into performance limits that prevent implementing infinite scrolling. And so some amount of paging navigation is usually required.

ページネーション（Pagination）

UI Patternsの定義: The user needs to view a subset of sorted data that is not easily displayed on one page.

Yahoo! Design Pattern Libraryの定義: The user needs to view a subset of data that will not be easy to display within a single page.

Konigiの定義: (not available)

あるjQuery pluginの名称: When you have a a large list of items (e.g. search results or news articles),
you can display them grouped in pages and present navigational elements to move
from one page to another.

ページャー（Pager）

あるjQuery pluginの名称: (not available)

あるPHPライブラリーの名称: (not available)

どれが一番ふさわしいのか

定義でいうとWelie.comかblink design libraryが個人的な見解と近いです。UIPatternsやYahoo!で定義されているような「１ページに表示するのが困難」だけが理由ではないと思うからです（理由は後述）。
ワーディングでいうと英語圏ではPaginationが最も通りがいい印象ですが、和製英語としてのページネーションという言葉は、日本ではDTP用語としての印象が強い（鈴木一誌氏の「ページネーションのための基本マニュアル(pdfファイル)」）。元の英語の意味だった「ページ番号をふる」という意味から、「複数ページに渡る組版ルール」へと日本では意味が独自に拡張されていった経緯があることは、ご本人が著書「ページと力」で書かれている通り。

page_and_chikara

ページャーもしくはpagerで検索すると同時に使われている検索ワードとしてphp、cakephp、symfony、pear、smartyなどphp界隈のものが多いのでphp界ではこの言い方がポピュラーなんでしょうかね。またページャーといえば英語的にはポケットベルのこと。

以上のようなことを考慮して、ここでは一番無難そうな「ページング」と呼ぶことにします。

ページを分割する理由

「閲覧している画面解像度に対してある程度以上ページが長くなってしまう」という問題以外にも、ダウンロードにかかる時間の問題というのもあると思います。実際、オフラインデータを対象とするクライアント・アプリではどんなにスクロールが長くなってもページングしないものがほとんどではないかと。
iTunesでいうとローカルに保存しているライブラリファイルをブラウズする際にはページングしませんが、オンライン前提のiTunes Storeではページングがほぼすべてのページで使われているのがわかりやすい例です。
そう考えると（クライアントアプリやその他オフラインで完結するシステムではなくて）ウェブサイトでのみ分割する理由があるといえそうです。

何を「ページング」と呼べるか

最近よくみかける主にダッシュボード型ページや、関連リンクのような形でリストされるインライン型のものを含むのか含まないのか、という点が気になります。

itunespagination

上記サイトの中で明示的にこれをページングに含んでいるのはkonigi.comのみですね（iTunes Pagination）。ちょっと判断が難しいかなと思います。理由を次の項目で書きます。

ユーザーのモチベーション

「該当する一つを探し出したい（例えば書名を知っている本を探したい）」ような場合
「なんとなく探したいものが決まっているが、いいものがないか探しながら見つけたい」ような場合

ではユーザーのモチベーションがだいぶ異なります。

「該当する一つを探し出したい（例えば書名を知っている本を探したい）」ような場合

何十ページにもページングされた検索結果が出ている場合、例えば50ページに分割されてリストが表示されている際に、その中の25ページ目を見せるリンクって本当に必要かというと必ずしもそうではないのではないか、と思います。せいぜい

前後ページへの移動リンク
一番前のページへの移動リンク
全体の件数と今見ている項目の順番

程度でいいのではないでしょうか。必要なたった一つの項目を見つけるためには、ページングでリンクをたくさん出すことよりも、むしろデータの絞り込みやソート機能を充実させることで、データをより絞り込める方が重要だったりするのではないでしょうか。データベースの項目はライブサイトであればそうカンタンに増やせないでしょうが、一つの項目の取りうる値の幅をパラメータ化するなどといったこともできるかと思います。

「なんとなく探したいものが決まっているが、いいものがないか探しながら見つけたい」ような場合

この場合は、そもそもデータベースを隅から隅まで見せるUIの必要性は低く、例えばiLike.com（アーティストレーティング、ユーザーブラウズ）ではページングをあえて出していず、「もっと見る」というリンク一つのみという潔さ。このような場合には、ページングを出して隅から隅まで見ることを強制するよりも、リコメンデーション的にセレクトされた結果を感覚的に見せてあげる方がよりスマートだと思います。
インライン型のものをページングに含めるかどうかは、インライン型がまさにこれに含まれるから、です。

ブラウザとサイトでのUI役割分担

ブラウザが担うUIと、個別にサイトが担うUIの役割分担が、ブラウザの進化があって整理されてきていて、文字サイズの拡大縮小機能はサイトが個別に個別の使い勝手を持って実装するものではなく、ブラウザ側で（文字サイズだけではなく）画面全体を対象とする拡大縮小機能がIE7以降についたことで解決済みですが、ページングももしかしたら本来的にはブラウザ側で解決すべきものかもしれない。
サイトごとにブラウザの挙動をカスタマイズできるGreaseMonkeyのAutoPagerizeは、現実解として発明に近い。
ある一定の書式で書けばAutoPagerizeに対応する訳ですから、統一した書式が策定できるならばブラウザ側でそういった仕組みを実装することも不可能ではないはず、ではあります。
現時点で問題となる、そもそもリテラシー高い人しか知らないし使ってないとか対応ブラウザが限られている、といった点も解消されそうなんですけどね。

Category: opinion
Tags: IA, paging, UI

Comments

9 Responses to “一覧リストにおけるページングについて”

kotarok
February 23rd, 2009 @ 12:20 am

Great article! thanks!
(外人風)
さと
February 23rd, 2009 @ 2:22 am

Two thumbs up!
(外人風）
noblog
February 23rd, 2009 @ 2:32 am

Re: 一覧リストにおけるページングについて

よくまとまってます。circumstance evidence: 一覧リストにおけるページングについて個人的には「Pagination」かな？
もちろん日本語の「ページネーション」の意味は知ってますが
＃昔QuarkXpress…
kaz
February 23rd, 2009 @ 10:48 am

Yes, we can!
LOL!!
(外人風)
yuichi
February 24th, 2009 @ 1:34 am

thanks for your comments!
hope it helps.
(しかたなく外人風)
みっとしぶ
March 4th, 2009 @ 10:14 am

どういうページングが使いやすいか、という話を期待しました。しています。
yuichi
March 6th, 2009 @ 1:49 am

@みっとしぶ
FBありがとうございまーす。
リクエストにお答えして、後日どういうページングが使いやすいか、という切り口で記事を書いてみます。
「デザイニング・ウェブインターフェース」発売 : circumstance evidence
January 8th, 2010 @ 9:40 pm

[...] 使い勝手について、動作ロジックも含めてかなり細かく解説されていますが、具体的なデザイン手法やソースコードには触れていず、まさにユーザー・インターフェイスにフォーカスした内容になっています。少し前にとりあげたページングについても、カルーセル型も込みでばっちり規定されてました。素敵！ [...]
ページネーション考察 | MOL
February 18th, 2010 @ 10:15 pm

[...] » 一覧リストにおけるページングについて circumstance evidence [...]