Yahoo! Design Pattern Library - Search Pagination の訳

Search Pagination

Problem Summary

The user needs to view a set of search results ranked by relevance that is too large to easily display within a single page.


Pagination control for Yahoo! Search

Use When

  • Displaying search results.
  • There are more results than can comfortably fit within one screen.


Break the information into a sequence of pages sorted by relevance.
Provide a pagination control for providing access to paged content


Pagination control for Yahoo! Search

Pagination Control

  • Display the navigation controls as a row of links.
  • Present links in the following order: 'Prev', page links, 'Next'.
  • Display a left arrow after the label 'Prev'.
  • Display a right arrow before the label 'Next'.
  • Make the arrow(s) clickable.
  • The page links should contain a maximum set of 10 page links. If fewer pages of results exist, only show page links for the available pages.
  • When on pages 1-6, the page links should always start at '1'.
  • When on any page after 6 (7 and onward), the page links should start at the current page minus 5. For example, when on page 7, the first page will be 2 (7 - 5 = 2) and the last page will be 11 (still shows 10 pages.)

  • When on first page of results do not display the label or arrow for 'Prev'.
  • When on the last page of results do not display the label or arrow for 'Next'
  • Do not display a hyperlink for the current page in the page links.

Label the control 'Results Page'.


  • Displaying arrow graphics helps differentiate the links and provides larger click targets.
  • Disabled controls add little value in this context since
    • These links often appear blow the fold.
    • The first page of results makes up the vast majority of pageviews. Displaying a disabled "previous" control on all of these is of little added value.
  • Although a "First" link has value, it competes with the functionality presented in the random-access links.
  • The "Last" link is of little value as the results are sorted by relevance. This is is also problematic since the total number of results (and therefore, the last result) may not be known.


  • Allow each link to be navigated to with the Tab key.
  • When an individual link has keyboard focus, the Enter key will navigate to the linked page.





  • 検索結果を表示する時
  • 一画面にうまく収められない量の検索結果が出る時


  • 情報を 適切に順序付けて連続するページに分割する
  • 各ページに分けられたコンテンツにとべるように、ページ数を表示するコントローラを設ける


  • リンクを一列に表示するナビゲーションを表示する
  • 'Prev', page links, 'Next' の順番に従ってリンクを表現する
  • 'Prev'(前へ)の見出しの後ろに←マークを表示する
  • 'Next'(次へ)の見出しの前に→マークを表示する
  • 矢印はクリックできるようする
  • リンクの表示は10ページ分を最大とするべきです。表示するリンクが10ページ分より少ない場合は、見れるリンクだけを表示します。
  • リンク表示が1-6までの時は、'1'をリンク列の頭にします
  • 6番目以降のページを表示する場合は、リンク番号から5を引いたものを表示するべきです


  • 検索結果の一番最初のページには、'Prev(前へ)'を表示しない
  • 検索結果の最後のページには、'Next(次へ)を表示しない
  • 現在見ているページへのリンクは作らない。'Results Page'(検索結果?)と見出しをつけてあげます


  • 矢印の画像を表示すると、リンクを際立たせより大きいクリックターゲットになります
  • 機能しないコントローラ(リンクとして機能しない)はあまり意味がありません。というのは
    • (ここはうまく訳せませんでした)???
    • 結果の一番最初のページはもっとも多くのページビューを稼いでいるページです。機能しない"previous"(前へ)をつけておいてもあまり意味がありません。
  • 検索結果が適切に順序付けられてる場合、"Last"(最後のページ)リンクはあまり意味がありません。検索結果のトータル数は分からないので?最後のページというのは不確かなものなのです。


  • Tabキーでおのおのリンクにナビゲートできるようにしましょう
  • ここのリンクにキーボードフォーカスがあるときは、Enterキーでリンク先に飛べるようにしておきましょう