web-dev-qa-db-ja.com

新しいスタイルのページ区切りパターン

私はいくつかの巨大なeコマースサイトと、それらがページネーションをどのように処理するかを見ていました。

Asos
enter image description here

Amazon
enter image description here

上記でAsosとAmazonがどのように処理するかを示しました。このページ分割は5ページ程度の場合は問題なく機能しますが、たとえば100ページある場合、この種のシステムは少し面倒になる可能性があります。

私はどのようにページネーションを改善できるかを考えていて、以下を思いつきました:

enter image description here

テキスト入力フィールドを使用してユーザーが数字を入力し、Enterキーを押すだけでは、ページ付けは改善されませんか?

私が目にする唯一の潜在的な落とし穴は、ユーザーが番号を入力した後にEnterキーを押す必要があることを知らない可能性があることです。ただし、明示的な検索ボタンがない検索があるため(Enterキーを押す必要があります)、これは多くの問題になると考えています。

このシステムの他の欠点について考えることができますか?

16
Rich

テキストボックスのアイデアが好きですが、人々がEnterキーを押す必要があり、一部のユーザーはEnterキーを取得できない可能性があることも理解しています。たぶん、プロトタイプを作成してテストできますか?内部リンクが少ないことによるSEOの不利な点に関するポイントも有効です。

ただし、ユーザーはどのページにアクセスできるかを知っている必要があるため、ソリューションに合計ページ数を追加します。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

今後は、エラー処理についても考える必要があります。ユーザーが「17」と入力したが、16ページしかない場合はどうなりますか?

15
greenforest

私はこのアイデアを気に入っていますが、以下に示すように、デザインが失敗する理由はいくつかあります。

  1. ユーザーは、ページ番号をクリックしてサイト内の特定の場所を取得するという概念に慣れており、到達する必要があるページ番号を入力する必要があるというこの新しいアフォーダンスに気付かない可能性があります。

  2. 第2に、ページ付けにより、異なるページがいくつあるか、異なる検索オプションまたは単語の選択で製品を検索する必要があるかどうかの最終結果にたどり着くまでの距離がユーザーに通知されます。

  3. Eコマースサイトのユーザーは、ページ分割の詳細を使用して、通過したすべてのページを判断し、相対的なページ番号の近さを使用して、気に入った製品にすばやく戻ります。あなたのデザインでは、ユーザーがどれだけ戻ったかを覚えておく必要はありませんが、24ページから21をクリックするだけでなく、数学的減算を行って戻る必要があります。これを引用するには article

この規則には1つの例外があります。 eコマースサイトを扱う場合は、ページ番号にページ番号を表示して、ユーザーが特定のページに戻って購入を検討している製品を確認できるようにすることをお勧めします。また、ページ番号を使用すると、ユーザーはどのページを閲覧したか、どのページで閲覧しているかがわかるので、ユーザーは商品をより深く購入できます。 それだけでなく、ユーザーがページをブックマークする必要がある場合は、ページ番号と製品カテゴリの説明的なタイトルタグを付けて保存するので、ユーザーは何を忘れずに中断したところから再開できます。買い物をしていました。

上記の記事は、ページ番号でページ番号を表示する場合についても述べています

ページネーションで常にページ番号の行を表示する必要はありません。ページ付けで上位2桁以上のページが多数ある場合、ページ全体を通過できないため、ユーザーが合計ページ数を確認することは役に立ちません。ただし、ページ付けの2桁以下のページが数ページしかない場合は、ページ付けでページを表示すると、ユーザーが最後まで閲覧しやすくなります。ページ数が少ない場合はページ番号を表示する必要がありますが、ページ数が多い場合は、単純な[次へ]および[前へ]ボタンを使用してください。

つまり、この方法を使用してページネーションを処理するアプリケーション(pdf-xchange)の一例を以下に示します。

enter image description here

3
Mervin

どういうわけか、両方の世界のベストを何とかしてみませんかつまり、一部のユーザーが入力して他のユーザーがクリックできるハイブリッドモードがありますか?個人的には、リンク構造をゲームすることで同じ戦術に頼ることがしばしばありました。

もう1つのポイントは、Amazonなどのサイトでは、23ページに行きたいことを明示的に知っている頻度はどれくらいかということです。流れはとにかく本質的に線形です。ページ番号は、逆方向の流れの意味でより関連性があります。つまり、"十分な靴を見てきました。page3で気に入った靴に戻りましょう。"

最後に、私が本当に気に入ったUIを備えたサイトが1つありました。 100ページあるとしましょう。一般的にこれが使用されます:

Prev 1 2 3 4 5 6 7 8 9...100 Next

私はむしろこれが賢いと思います(たとえば、現在6ページ目にいるとします)。

Prev 1...4 5 6 7 8...50 70 100 Next 
3
curious_cat

はい、私が考えることができる本当に大きな不利な点は、基本的にあなたの次のページのインデックス作成を殺すSEOでしょう。もちろん、previousとnextでrel = "prev/next"を使用することもできますが、それでもボットにページを1つずつインデックス付けさせる必要があります。

もう1つは、Googleです。地球上のほとんどすべての人が、Googleのページネーションがどのように機能するかを知っています。知らない人は、Amazon、Bing、Yahoo、その他の主要なサイトでページネーションがどのように機能するかを知っているかもしれません。それらはすべて標準のページネーションを行います(もちろん、これが最良のソリューションであるとは定義されていません)。

私はその考えに同意しますが、他の場所でも見たことがあります(今は覚えていません)。また、実装方法にも依存します。タブレットやモバイルユーザーも、その機能を使用するのが難しい場合があります...

3
David K.

私たちの製品、つまりケース管理(小売製品や商用製品ではない)について、私は新しいページネーションを実装し始めました。 enter image description here

コンパクトで、ユーザー入力用のフィールドがあり、ドロップダウンがあります。

1
user57212