web-dev-qa-db-ja.com

フィードバックが必要-データの多いサイトでのページ編集のデザイン

私のサイトはスポーツピックエムソーシャルゲームです。スポーツとピッケムの性質を考えると、データ集約型のサイトになりがちです。私は、ユーザーが画面上のもので圧倒される可能性がある新しい機能やデザインに非常に注意しています。

それで、私はサイトのページネーションを再設計しようとしています。それは現在このように見えます:

enter image description here

それはかなり最小限です。ただし、ページに大きくまたは目立つクリック領域がないため、完全には使用できません。

私は再設計時に一歩進んだのですが、それは次のようになります:

enter image description here

確かに、ページ付けのベストプラクティスの観点からは、これは目的に適合します。しかし、私の個人的な反応は、それがページを圧倒的にすることです

あなたの考えは何ですか?また、データ集約型のサイトでは、ページネーションのデザインを視覚的に煩わしくなくするためにどのような提案をしますか?

4
keruilin

私見、そうです、それらの要素の視覚的なデザインはうるさいです。これらはページ上では2番目に重要ですが、コントラストと太字の色は1次のように見えます。また、現在のページは、他のページよりも目立つ少ないように見えます。これは、希望とは逆です。

私の最初の考えは、元のテキストリンクを変更することです:

  • パディングを追加してヒット領域を増やします-背景や境界線を気にしないでください。人々はこのパターンに慣れています
  • リンク間のマージンを削除します-ギャップは必要ありません
  • 永続的な下線を削除します。代わりにホバーに下線を引くので、ユーザーはどこをクリックするかがわかります。
  • 現在のページ番号を太字にします
  • どういうわけか次のリンクを強調表示します。おそらく、もう少し右に移動するだけです。

グーグルはこれを多かれ少なかれ行います(彼らがそれぞれの数を与えるスペースの量に注意してください):

Google search results pagination

または、「ボックス」リンクが必要な場合は、カラースキームの単純なやり直しで十分です。最初に非常に微妙なことを試してから、必要に応じてコントラストを追加します。あなたは試すかもしれません:

  • 現在のページ以外の場合:明るい灰色の背景/境界線なし/暗いフォント色
  • 現在のページの場合:白の背景/中程度の灰色の境界線/暗い、おそらく太字のフォント

また、数字の周りの左右のパディングを少しタッチして、ヒット領域を大きくすることをお勧めします。

5
peteorpeter

ピーターの提案は素晴らしいです。

おそらく、ページネーションを完全に削除して、代わりに「遅延読み込み」を使用することを検討するかもしれません。言い換えれば、最初の50-100程度の結果をプリロードし、パネルにスクロールバーを追加します。ユーザーが下にスクロールすると、次の結果セットが自動的に読み込まれます。ページ付けはまったく必要なく、ユーザーエクスペリエンスはより高速で応答性が高くなります。

1

あなたは視覚的な階層に欠けています-遠くからそれが真実ではないとき、すべてが同じ重みと重要性を持っているようです。ページで最も重要なことを強調することを検討し、二次情報を小さくしてコントラストを下げてください。

0
IgorG