web-dev-qa-db-ja.com

フィボナッチのページネーション

今日、私はこのページネーションのコンセプトに偶然出会い、それが魅力的であることに気づきました。フィボナッチベースのページネーションのコンセプトです。

それは実際には古い ショット ですが、近いうちにいくつかのコンテンツにページ番号を付ける必要があると考えました。

ページはすぐに数百になり、最終的には数千になるので、単にリストする代わりに、[グループで](10〜30 | 31〜32〜33 ... 37〜38〜39 | 40〜70)「賢い」ページネーションが必要になります。 1から200までのページ。

前述のように、このアプローチは魅力的ですが、ユーザーは必要なページに最小限のステップで到達できる必要があると感じています。

私はUXエキスパートではないので、あなたが裁判官になります。これは良いアプローチと悪いアプローチのどちらだと思いますか?そして、これはどのユースケースにとって良いか悪いアプローチですか?

私の使用例

作成者のユースケースを知りません。時間順に並べられたコンテンツを表示していますが、time変数はユーザーには関係ありません。ページはコンテンツを断片化するためだけにあります。

アイテムにはパーマリンクがあるため、ユーザー自身が特定のページに移動する必要はありません。

私が格言を含む投稿があるとします。それらは異なる時間に投稿されているので、それらをリストして注文し、最終的にページに分割できますが、日付/時刻自体は無関係です。

72
XCore

これでどのような問題を解決していますか?

これは、彼らが存在すると考える問題に対する開発者の解決策のようです。実際にユーザーがページを使用する方法を見てみましょう。

彼らは行きたい:

  • 特定のページ
  • 最初のページ
  • 最後のページ
  • いずれかのページ内にある特定のアイテム
  • 次または前のページに移動(おっと、忘れた、3nafishに感謝)

ランダムに10ページ先にジャンプしますか?どうして?ユーザーがそれを行わなければならない場合、問題を正しい方法で解決していません。

116
Chris Aplin

あなたが本当に3000からでもページを選択する可能性を提供したいのであれば、カラボスからの古い解決策があります。アイデアは、ページをスクロールバーのように選択させることです。たとえば、50ページの検索方法は次のとおりです。 enter image description here

このmometで本当に必要なページのグループに到達するために、スクロールポインタ(灰色)を非常に速く移動できます。オレンジ色のマーカー-ページが選択されました。ワンクリックでページを変更。

100ページの場合: enter image description here

この名前でサンプルとソースをウェブ上で見つけることができます-「Paginator 3000」

46
Mike Frolov

少数のEdgeのケースを除いて、ページ付けは悪い考えだと思います、特にフォーラムに関しては。

編集:4年後のこれを振り返って!今無限スクロール(私はそれをdynamic loadingと呼んでいます)は現代の頼りになるソリューションのようですアプリ。適例:Reddit

質問:ユーザーは、1534ページの投稿3に興味深い猫の写真があることをどのようにして知るのですか?

彼らはしません。 特定のページにアクセスする必要があるユーザーは、一般的なフォーラム形式では存在しない要件です。ユーザーが望んでいるのは、これらの騒々しい投稿(「素晴らしい投稿」、「WOW」、「LOL」、「ありがとう」)をスキップし、(うまくいけば)その猫の写真にアクセスすることですかもしれない投稿しました。

フォーラム(または同様の)形式では、10ページ(たとえば)以降のコンテンツは、一般にインターネットの一般ユーザーには使用できません。私は、システムがユーザーにガジリオンページまでスレッドを長くすることを思いとどまらせるようなウェブサイトを設計するべきだと思います。

では、ページネーションを行わずにフォーラムを拡大するにはどうすればよいでしょうか。

ディスコース には、長いスレッドを表示する魅力的な方法があります。ユーザーがページの一番下までスクロールすると、コンテンツが動的にフェッチされます。

あなたができる別のことは、騒々しい/不人気なものを抑制しようとすることです。そのため、関連する興味深いもののほとんどは最初のページに収まります。 Reddit はこれを行います。

ユーザーが本当に特定のページ/投稿にアクセスしたい場合はどうなりますか?

コメントからの興味深いアイデアの1つは、

ユーザーは、1534ページに面白い猫の写真があることを知っています。誰かが言ったからです。

しかし、これが改ページでどのように壊れるかを確認してください。ユーザーが1534ページに移動するまでに、画像は1531ページに移動しました。モデレーターがいくつかのスパム投稿を削除したためです。スレッドで。

むしろ、permalinkの概念を使用できます。パーマリンクは動的読み込みでどのように機能しますか?まあ、いくつかのコンテキストbeforeafterに関連付けられたパーマリンクに対応する投稿をユーザーに表示して、コンテキストを示すことができます。 Twitter なんとなくこれを行います。ユーザーは常に上または下にスクロールして、追加の投稿を読み込むことができます。

Twitter showing a Tweet with context

スレッドの上下の大まかなナビゲーション

コメントからの別の要件:

6年前に起こった出来事について知りたいのですが、その過程の約60%に飛び込んで、そこから見始めたいと思います。

動的読み込みでこれを行う非常に人気のあるソーシャルメディアWebサイトがあります。これをチェックしてください:

Facebook displays its timeline with dynamic loading. Users can jump to specific time periods using a scale in the side of the thread

ただし、動的なページの読み込みは非効率的です。どうすればそれを解決できますか?

コメントで指摘されているように、動的なページの読み込みは非常にプロセッサに負荷がかかり、ブラウザがクラッシュすることがあります。解決策は、ユーザーがページから既に読んだ古いコンテンツを削除することです。通常の会話では、ユーザーがスレッドに戻ることはほとんどありません。

25
sampathsris

クールな要素の後に止まると思います。それは、「できるからといって、そうすべきではない」タイプの状況の1つです。

従来の方法に従うことをお勧めします。 10ステップ前または後ろにジャンプするのが最も一般的です(もちろん、1ステップ後)。複数のページ間を移動する次の大きな数字は、25、50、100など、他の状況でジャンプする一般的な数字になると思います。もちろん、ユーザーテストが最善です。

編集: ページ付けは一般的に悪いと主張するコメントをいくつか見たので、ページ付けはしばしば良い経験であると指摘せざるを得ません。これがニールセンノーマングループの抜粋です。

ページネーションが便利なのは、eコマースのカテゴリページ、検索エンジンの結果ページ(SERP)、記事のアーカイブ、フォトギャラリーなどのリストです。ここで、ユーザーの目標は、完全なリストを熟読することではなく、特定のアイテムを見つけてクリックしてその宛先ページに移動することです。

リストアイテムに優先順位を付けることができると仮定すると、ユーザーは必要なものを一番上に見つける可能性があります。ユーザーの注意を集中させ、応答時間を改善するには、まず短いリストを表示してから、必要に応じてリストをさらに下に進むためのページ設定オプションを提供します。

ユーザーのページ設定と[すべて表示]

ユーザーが詳細ページに頻繁に飛び込んでバックアウトする場合、eコマースサイトでは無限スクロールが特に悪い場合があります。このテクニックに関するいくつかの問題を指摘する記事を次に示します。 http://www.nngroup.com/articles/infinite-scrolling/

私自身、携帯電話で買い物をしているとき、無限スクロールの苦痛に悩まされてきました。製品の詳細ページから戻ると、リストされた製品のページが更新され、以前のページの場所が保持されないためです。私は通常、サイトを離れます。

6
Michelle

これはスケーリングの問題です。これはデータの視覚化における一般的な問題です。)Y軸にはデータ(ページ番号)があり、理想的にはすべてを一度に表示したいのですが、収まらないため、スケーリングします。それ。

通常、log(10)でスケーリングします。これは、概念化するのに最も簡単な変換の1つであるためです。ただし、任意のスケーリングシーケンスで実行できます。特定のシーケンスをテストする1つの方法は、次の計算です。

- The most clicks required to reach a page in list
- The mean clicks to reach any page in list
- The modal clicks to reach any page in list

変数の使用:

 - Total number of pages
 - Number of options/jumps available to choose from
 - Scaling approach

リストの長さとジャンプの数が異なると、スケーリングアプローチが異なると結果も異なります。これらのスコアの計算は巡回セールスマンの問題でもあるため、大きなリスト(このデータが最も有用な場合)を計算するのは面倒になるかもしれません。それでも楽しい。

5
J.J

興味深いアイデアですが、フィボナッチ数列の使用はかなり恣意的です。ユーザーがページ全体に均一に配置されている特定のアイテムを検索する必要があり、アイテムのランク順を知っていると仮定すると、最も効率的なアルゴリズムはバイナリ検索アルゴリズムになります。したがって、次の改ページを使用する方が適切です。

LEFT MID RIGHT

たとえば、64ページあり、42ページのアイテムが必要な場合。括弧で囲まれた数字はユーザーの現在のページを示します。

16 (32) 48 --> 40 (48) 56 --> 36 (40) 44 --> 42 (44) 46 --> 41 (42) 43.

したがって、ユーザーは自分のアイテムを見つけるために5ページを表示するだけで済みます。ユーザーがさらにページをクリックするたびに、その指示を文字どおりに取り、ページ付け範囲を調整します。これが主流のアプリケーションに役立つかどうかは議論の余地がありますが、特定のタスクがアイテムを見つけるのに役立つかもしれません。これを3ページの表示からnページに均一に選択することで、非常に単純に拡張することもできます。

2
Brendon

通常のビデオプレーヤーからページを取得する場合、「早送り」ボタンと「早戻し」ボタンを追加して、ページ間をすばやく移動できます。でもフィボナッチ?私には意味がありません。

enter image description here

2
Adnan Khan

ユーザーがページに移動したり、ジャンプしたりすることを想定している場合、これは良い考えです。しかし、それでもフィボナッチ数列である必要はありません。任意の底の対数目盛を持つことができます。

しかし、実際にはそもそも、「前へ」と「次へ」(または同等のもの)以外の種類のボタンは意味がないと思います。ユーザーがジャンプしたい特定のページがある場合は、ナビゲーションボタンを連続してクリックしてそのページに到達するのではなく、入力ボックスにそのページを入力する必要があります。それ以外の場合(ユーザーが特定のページを念頭に置いていない場合)、ユーザーはすべてのページを1つずつ確認することに関心があり、特定のページをジャンプしても意味がないため、「前へ」と「次へ」は足ります。

2
sawa

また、ユーザーは必要なページに最小限のステップで到達できる必要があると感じています。

フィボナッチ数はかっこいいですが、最小限のステップは、ユーザーが望むページの番号を取得してそこにジャンプすることです。

1512ページに何かが含まれていることがわかっている場合は、フィボナッチ数列でバイナリ検索を実行するのではなく、実際に実行します(実際、URLを変更してナビゲーションをバイパスしようとします)。

2
thanosqr

ドロップダウンメニュー(ポップアップメニューとも呼ばれます)の使用を検討してください。

これにより、結果セットのサイズがすばやく表示され、ユーザーは最初、最後、および任意の中間ページに簡単にジャンプできます。

edinburghbicycle.com pagination

これは http://www.edinburghbicycle.com/browse/clothing/mens-clothing からのものです

ユーザーテストで最も重要なことは、次へ/前への大規模なボタンを持つことでした。

遅延読み込みの方が優れたソリューションですが、簡単に言うと...

2
dave

確かに興味深いアイデアですが、数百または数千のページを計画している場合、すべてのページを閲覧することはおそらく関係なく不快な経験になります。

私の皮肉なことに、作成者のユースケースは、フィボナッチ数列を出力するアルゴリズムを作成する際の一般的なプログラミングの課題を解決する能力を示していたと考えています。

1
drosenblatt

これが検索結果のページ分割である場合、最も関連性の高い結果は最初の数ページにあることに注意してください(2〜3を超えて実際にGoogle検索結果にページ番号を付けたことはありません)。したがって、最も効果的なのは、最も関連性の高い結果を上部に表示し、ページ分割へのフォーカスを低く保つことです。

アーカイブを表示している場合は、単純なページネーションよりも分類が優先されます。例:アルファベット順、著者別、最終更新、タグなど、それが役立つことを願って

0