インタラクティブデザインでページングと読み込みのどちらを選択するかについての説明

インタラクティブデザインでページングと読み込みのどちらを選択するかについての説明
この記事の著者@子木yoyoが個人ブログに投稿したものです。 Web ページでもモバイル アプリでも、多くの場合、情報を 1 ページにすべて表示することはできません。そのため、ページ情報を拡張できるインタラクティブ モード (ページ区切りや連続スクロール) を使用する必要があります。ページネーションと読み込みは、私たちが毎日遭遇する非常に一般的なインタラクション モードです。非常に一般的なため、その存在すら感じません。ページの下部を閲覧し、ページネーションが表示されたらクリックし、自動的に読み込まれたら読み続けます。
しかし、この小さな点こそが、ユーザーに非常に異なった微妙な感覚をもたらすのです。この記事では、これらの小さな違いがもたらす大きな違いについて説明します。
ページネーション ページネーションを使用すると、大きなコンテンツを小さな部分に分割し、別々の連続したページに表示できるため、ユーザーが理解したり見つけたりしやすくなります。これにより、ユーザーは閲覧したいコンテンツの量、閲覧した部分、残りの量を明確に把握できるようになります。ページネーションにより、ユーザーは閲覧しているコンテンツについて明確な期待を持つことができます。
記事が長くなると、必ずページ区切りが必要になります。まず、ユーザーにコンテンツの量を予想させ、次に視聴者に休憩を与えます。ユーザーが記事を読んでいる間に 10 画面以上スクロールしても、スクロール バーがブラウザの上部中央に留まったままだとしたら、どれほどイライラすることでしょう。
インタラクション デザイン: ページングか読み込みか? それが問題だ 123WORDPRESS.COM
検索エンジンや電子商取引の Web サイトを見ると、ページング コントロールが必ず表示されます。
検索や商品リストの閲覧時にはコンテンツの量が予測できないため、ページネーションの第一の機能は、閲覧に必要な情報量をユーザーに伝えることです。 2 つ目は、ページネーションにより、ユーザーは読みたくない情報をすばやくスキップしたり、ホームページや最後のページにすばやくジャンプしたり、閲覧したいコンテンツを独自に選択したりできるようになります。 3 つ目は、ページ付けにより、検索と取得が非常に簡単になります。スカートを探しているときに、すでに 5 ページ目までたどり着いていたとしても、2 ページ目に良いエントリがあることを突然思い出し、直接ジャンプしてすぐに見つけることができます。
ページング コントロールは、Web サイトのコンテンツに自然な休止を作り出します。この休止をうまく利用すれば、製品にリズムを与えることができます。ただし、ユーザーはページの閲覧を終えると、読むのをやめてクリックしてジャンプし、さらにコンテンツを取得する必要があります。この一時停止によってユーザーの思考がある程度中断されることは否定できません。ページネーションに遭遇すると、ユーザーは閲覧を続けるか、Web サイトを離れるかを考える可能性が高くなります。そのため、ページネーションに遭遇すると、一部のユーザーは迷ってしまうことがよくあります。
連続読み込み 連続読み込みはページングとは逆の対話モードで、メッセージ間に明確な境界や一時停止はありません。ページを一番下までスクロールすると、新しい情報が自動的に読み込まれます。
さまざまなソーシャル ネットワークでは、特にこのタイプのコントロールを使用することを好みます。これにより、ユーザーは中断されることなく、スムーズにブラウジングして没頭することができます。
しかし、情報が自動的に読み込まれるため、ページに終わりがなく、ページにどのくらいのコンテンツが含まれるかを予測することが困難です。ブラインドローディングでは、ユーザーは迷子になってしまいます。このページにはどのくらいのコンテンツがあるのでしょうか。どのくらいのコンテンツを閲覧したのでしょうか。このページはいつ読み終えるのでしょうか。このような一時停止のないページでは、ユーザーが以前に見た情報を検索するのにも困難が伴います。しかし、レジャーやエンターテイメントに重点を置いたこの種のソーシャル製品の場合、ユーザーの情報の流れを中断しない読み込み方法を使用することは依然として非常に適しています。
ページング コントロールを使用する場合、ユーザーはクリックしてさらにコンテンツを表示する必要があるため、情報の取得はユーザーによって積極的に要求されます。継続的な読み込みを使用すると、新しい情報が自動的に読み込まれ、ユーザーはそれを受動的に受け入れます。
妥協策 ページングと読み込みにはそれぞれ長所と短所があります。最近の多くの Web サイトでは、ページングと読み込みを併用する妥協策も採用されています。
たとえば、Quora では、自動的に 4 回読み込まれた後に「詳細」ボタンが表示され、連続した情報の流れの後にユーザーに一時停止を与え、ユーザーが積極的により多くの情報を取得できるようにします。
Sina Weiboもこの妥協策を採用しており、自動的に2回読み込まれた後にページングが表示されます。空き時間にWeiboを閲覧するほとんどのユーザーにとっては、コンテンツを2回読み込むだけで十分満足できます。より多くの情報を閲覧する必要があるユーザーにとっては、閲覧した量もわかります。
ユーザーがより多くの画像を素早く見ることができるように、Google 画像検索でも連続読み込み方式を採用しています。しかし、画像を検索する際には、ユーザーが自分の位置を明確に把握する必要があり、見たばかりの画像を探すために戻る可能性が高いです。そのため、Google では、位置決めと検索を容易にするために、同じページにページ番号もマークします。これはもう一つの妥協です。
画面が小さく、使用シナリオがより多様なモバイル クライアントでは、正確なクリックよりもスライドの方が明らかに簡単で、誤操作の可能性が低くなります。モバイル製品の情報アーキテクチャは比較的単純で、ユーザーの閲覧時間は比較的短く、使用時の注意は比較的分散しています。そのため、ほとんどのアプリは継続的な読み込みを使用します。また、読み込みにはページング コントロールよりも少ないスペースが必要です。
しかし、検索エンジンのような製品では、依然としてページネーションのデザインが維持されています。
読み込みやページングの選択はデザイン上のほんの小さなポイントですが、優れた製品はこのような小さなポイントの無数から構成されています。製品の特性に基づいて最も適切なインタラクション方法を選択するのが、インタラクション デザイナーの仕事です。

<<:  ウェブページで Enter キーを押すと自動的にフォームを送信し、他のページにジャンプするソリューション

>>:  Vue の下部ナビゲーション バー TabBar を実装するための非常に詳細なチュートリアル

推薦する

URL を入力すると、バックグラウンドでは具体的に何が起こるのでしょうか?

ソフトウェア開発者は、ネットワーク アプリケーションがどのように動作するかを階層的に完全に理解してい...

Linux オペレーティング システムでよく使用される MySQL コマンドの概要

以下に、一般的な MySQL コマンドをいくつか示します。 -- データベース サービスを開始します...

MySQL 外部キー設定方法の例

1. 外部キーの設定方法1. MySQL では、2 つのテーブルを関連付けるために、外部キー (FO...

HTMLは読み取り専用のテキストボックスを実装しており、コンテンツを変更することはできません。

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!--方法 1: onf...

グループフィールドを 1 行に書き込むための mysql group_concat メソッドの例

この記事では、MySQL group_concat を使用してグループ化されたフィールドを 1 つの...

Reactの3つの主要属性における状態の使用の詳細な説明

目次クラスコンポーネント機能コンポーネントsetStateの落とし穴React では多くの場所でデー...

CSSブレンドモードとSVGを使用して、製品画像の色を動的に変更します。

数日前、Codepen で @Kyle Wetton が書いた、CSS ブレンディング モードと S...

キーボード上の各種特殊記号の英語読み方(知識の普及)

キーボード文字英語`バッククォート〜チルダ!叫ぶ@で#ナンバーサイン$ドル%パーセント^キャレット&...

デザインストーリー: ナンバープレートを覚えられない警備員

<br />私が住んでいる地域では、コミュニティに出入りする車両を管理するために、コミュ...

値の転送を実現するために、2つの同じレベルのコンポーネントをVueで作成します。

Vue コンポーネントは接続されているため、コンポーネント間で値を渡す必要があるのは避けられません...

h5入力ボックスプロンプト+通常のテキストボックスプロンプトを実装する方法

XML/HTML コードコンテンツをクリップボードにコピー<入力 id = "ユーザ...

NexusはAPIを使用して操作します

Nexus は RestApi を提供していますが、一部の API はまだ Groovy と組み合わ...

Mysql5.7.14 インストールと設定方法操作グラフィックチュートリアル(パスワード問題解決)

この記事は主に、以前のインストール方法を使用して MySQL 5.7.14 をインストールするときに...

入力タイプ=テキスト値=str を使用するための不完全なソリューション

今日、非常に奇妙な問題に遭遇しました。次のコードを見てください。 SimpleDateFormat ...

MySQL の日付と時刻関数の概要 (MySQL 5.X)

1. MySQLは現在の日付と時刻を取得する関数1.1 現在の日付 + 時刻 (日付 + 時刻) ...