Yahoo! Desgin Pattern Library - Item Pagination

デザパタ

Item Pagination

Problem Summary

The user needs to view data items from a potentially large set of sorted data that will not be easy to display within a single page.

EXAMPLE:

Pagination control for Yahoo! 360 blogs

Use When

  • There is more information than can comfortably fit within one screen.
  • The items of interest can be usually found on the first few pages.
  • If the data needs to be explored deeply, consider displaying the content in a scrolled area instead.

Solution

  • Break the list of items into a sequence of pages.
  • Provide links to access the previous and next pages of information.
  • Provide links to jump to the first and last pages in the set.
  • Provide information about what type of object the user is browsing.


  • Provide information about the set of objects the user is currently viewing.
  • Use the form: "[$ObjectName]s [DisplayedItemRange] of [TotalItems]
  • Present links in the following order: First, Previous, Next, Last.
  • Use graphical arrows to increase the target size of the links.
  • Show the displayed states of controls when they are unavailable.

Rationale

  • Displaying arrow graphics helps differentiate the links and provides larger click targets.
  • Unlike in Search Pagination, the controls are visible at all times during paging (even when disabled). This prevents distraction to the user that would occur when removing unavailable controls during paging.


項目にページ番号を付ける


問題の概要


一ページには収まりきらない程の大量のデータが 順付けて置かれているような場合、ユーザーはデータの項目を要求します。


こんな時に利用します

  • 一ページにうまく収めきれない量のデータがあるような場合
  • 興味をひく項目が最初の２〜３ページにあるような場合
  • データーを深く見ていく時に、ページをスクロールさせてコンテンツみせるやり方の代わりとして

ソリューション

  • 項目分けされたリストを、連続したページに分けて載せましょう
  • 前後の情報へと移動できるリンクを設けましょう
  • 項目の一番最初のページと、最後のページへのリンクを設けましょう。
  • ユーザーが閲覧しているものがどんなものなのかをあらわす情報を載せましょう。


  • ユーザーが現在見ている対象の情報を載せしょう

こんな形で表示しましょう　"[$ObjectName]s [DisplayedItemRange] of [TotalItems]
（「対象の名前」-「表示された項目の範囲」-「項目の全体数」）

  • リンクは次のような順番で載せます：First, Previous, Next, Last.
  • 見れない項目がある場合は、管理状況?（コントローラ？）を提示しましょう


原理

  • 矢印型の絵を表示すると、リンクであることがよく分かり また より大きいクリックターゲットになります
  • Search Painationとは違って、ページ呼び出しの間も常にコントローラが（このデザパタで作ったリンクの列）見えます。ページ呼び出しの最中にコントローラを表示しないようにするとユーザーの興味が散ってしまうことがありますが、コントローラを表示しておくことでこれを防ぐことが出来ます。