<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理されていればいるほど、ユーザーがあなたの主張を理解し、伝えたいメッセージを受け取りやすくなります。 Web では、これはさまざまな方法で実行されます。 見出しとリストは、テキスト本文内で論理的に独立した情報ブロックとして使用されます。もう 1 つの解決策は、ページネーションと呼ばれるメカニズムです。これは、特定の記事の 1 つのセクション内を閲覧するための追加のナビゲーション オプションをユーザーに提供します。記事内のこれらの場所には、「前へ」ボタンと「次へ」ボタンに加えて、数字、プロンプト、矢印も表示されます。 検索エンジンはほとんどの場合ページネーションを使用しており、新聞では複数のセクションがある大きな記事をナビゲートするためにページネーションを使用することが多いです。場合によっては、ブログ (ウェブログ) でもページ区切りが必要になります。追加のナビゲーションにより、一部のサイト ページへのアクセスが簡素化され、たとえば、ユーザーはサイトのアーカイブを簡単に参照できるようになります。 ほとんどの場合、ページネーションは従来の「前のページ、次のページ」のナビゲーションよりも優れており、訪問者はサイト内をより速く簡単に移動できます。必須ではありませんが、あれば便利な機能です。 ページングの適切な実践方法と、ページングを実行するタイミングと方法の例をいくつか見てみましょう。 ページネーション設計のベストプラクティス (Faruk Ates による 7 つの側面):
関連文献
間違い #1: ページネーション オプションが表示されていない<br />ページネーションの主な目的はナビゲーションの改善であるため、訪問者が現在どこにいるのか、どこにいたのか、次にどこに移動できるのかを明確にする必要があります。これら 3 つの事実により、ユーザーはシステムがどのように機能し、ナビゲーションをどのように使用すべきかを完全に理解できます。 しかし、最も重要なのは、ナビゲーション オプションが表示されることです。 hugg.com はこのポリシーに従いません。リンクの色は白い背景とのコントラストが非常に低いです。マウスオーバー効果は提供されません。 ![]() 間違い #2: 直感的でないページネーション<br />かなり複雑 (ただし美しい) なナビゲーションと、必要な機能を備えたシンプルなナビゲーションのどちらかを選択しなければならない場合は、常にシンプルなアプローチを選択してください。ユーザーがページネーションの仕組みを理解していない場合、ページネーションを使用できず、その結果、サイトを使用しなくなります。 Helium.com はこの間違いの好例です。下のスクリーンショットを見てください。これらの矢印は何を表しているのでしょうか?訪問したページを表しますか、それとも訪問中のページを表しますか? 2 ページ目へのリンクの背景が白なのはなぜですか?矢印の色が違うのはなぜですか?これは直感的ではありません。 ![]() 直感的でないデザインは、構造、階層、および熟慮されたデザイン上の決定の欠如から生じます。空のナビゲーションは、混雑したソリューションと同じくらい直感的ではありません。 ![]() スペースのない Web リンクはスキャンやナビゲートが困難です。 Make-Believe.org は、直感的ではないよう設計されたサイトの例です。 ![]() 前のページ1 2 3 4 次のページ 全文を読む |
<<: WebpackはCSSファイルを読み込み、その設定方法
>>: HTML ドロップダウン ボックスの SELECT オプションを変更する複数の方法
Apache では構成ファイルで Web ページまたは Web サイトの書き換えを簡単に設定できる...
フォーラムで、ネットユーザーの jeanjean20 が、Marquee を標準に適合させる方法につ...
序文これまでは、パイプワークで割り当てた静的 IP は一時的なものであり、再起動すると無効になってい...
ターミナル分割画面ツールは2つあります: screen と tmux 1. 画面分割を使用する(上下...
この記事では、例を使用して、MySQL スケジュール タスクの実装と使用方法を説明します。ご参考まで...
1. はじめに最近、 Webpackの原理を勉強しています。これまでは Webpack の設定方法し...
目次水波効果実装を見てみましょう水の波紋のデフォルトスタイルをカスタマイズする水の波紋の位置と直径を...
1. 三角形境界線の設定 コード: 幅: 300ピクセル; 高さ: 300px; 背景: 赤; 境界...
目次1. リテラル1.1 数値リテラル1.2 浮動小数点リテラル1.3 特別な値1.4 文字列リテラ...
目次序文SessionStorage と LocalStorage の紹介SessionStorag...
MySQL スロー クエリ (正式名称はスロー クエリ ログ) は、MySQL によって提供されるロ...
プロジェクトにはアンケートが必要ですが、クライアントはアンケートのタイトルが純粋なHTMLタグでなけ...
グレースケールリリースとは、白と黒をスムーズに移行できるリリース方法を指します。 ABテストとは、グ...
現在、Web デザインではタブが広く使用されていますが、一般的に次の 2 つのタイプに分けられます。...
この記事の例では、VueがPCカメラを呼び出して写真機能を実現する具体的なコードを参考までに共有して...