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

<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理されていればいるほど、ユーザーがあなたの主張を理解し、伝えたいメッセージを受け取りやすくなります。 Web では、これはさまざまな方法で実行されます。
見出しとリストは、テキスト本文内で論理的に独立した情報ブロックとして使用されます。もう 1 つの解決策は、ページネーションと呼ばれるメカニズムです。これは、特定の記事の 1 つのセクション内を閲覧するための追加のナビゲーションオプションをユーザーに提供します。記事内のこれらの場所には、「前へ」ボタンと「次へ」ボタンに加えて、数字、プロンプト、矢印も表示されます。
検索エンジンはほとんどの場合ページネーションを使用しており、新聞では複数のセクションがある大きな記事をナビゲートするためにページネーションを使用することが多いです。場合によっては、ブログ (ウェブログ) でもページ区切りが必要になります。追加のナビゲーションにより、一部のサイトページへのアクセスが簡素化され、たとえば、ユーザーはサイトのアーカイブを簡単に参照できるようになります。
ほとんどの場合、ページネーションは従来の「前のページ、次のページ」のナビゲーションよりも優れており、訪問者はサイト内をより速く簡単に移動できます。必須ではありませんが、あれば便利な機能です。
ページングの適切な実践方法と、ページングを実行するタイミングと方法の例をいくつか見てみましょう。
ページネーション設計のベストプラクティス (Faruk Ates による 7 つの側面):

クリック可能な領域を大きくします。現在のページに下線を付けません。Web リンクを分離します。前のページと次のページのリンクを提供します。最初のページと最後のページのリンクを使用します (該当する場合)。最初のページと最後のページのリンクを外部に配置します。
関連文献

ページネーション 101、Faruk Ates がページネーションの最終ドラフトを完成させました。ページネーション用のいくつかのスタイル。必要なページネーションスタイルをダウンロードできます。ブログが WordPress をベースにしている場合は、プラグイン WP-PageNavi をインストールしてページネーションを生成できます。インストールは非常に簡単ですが、テーマのソースコードの一部を変更する必要があります。
間違い #1: ページネーションオプションが表示されていない<br />ページネーションの主な目的はナビゲーションの改善であるため、訪問者が現在どこにいるのか、どこにいたのか、次にどこに移動できるのかを明確にする必要があります。これら 3 つの事実により、ユーザーはシステムがどのように機能し、ナビゲーションをどのように使用すべきかを完全に理解できます。
しかし、最も重要なのは、ナビゲーションオプションが表示されることです。 hugg.com はこのポリシーに従いません。リンクの色は白い背景とのコントラストが非常に低いです。マウスオーバー効果は提供されません。

間違い #2: 直感的でないページネーション<br />かなり複雑 (ただし美しい) なナビゲーションと、必要な機能を備えたシンプルなナビゲーションのどちらかを選択しなければならない場合は、常にシンプルなアプローチを選択してください。ユーザーがページネーションの仕組みを理解していない場合、ページネーションを使用できず、その結果、サイトを使用しなくなります。
Helium.com はこの間違いの好例です。下のスクリーンショットを見てください。これらの矢印は何を表しているのでしょうか?訪問したページを表しますか、それとも訪問中のページを表しますか? 2 ページ目へのリンクの背景が白なのはなぜですか?矢印の色が違うのはなぜですか?これは直感的ではありません。