it-swarm.asia

Praktek Terbaik Pagination

Saya tidak yakin tentang cara terbaik untuk menangani beberapa pagination saya perlu melakukan di atas meja yang berpotensi menjadi sangat besar (5.000 baris plus).

Pertanyaan pertama saya adalah apakah jumlah baris yang ditampilkan per halaman hanya ditentukan oleh tata letak, atau haruskah jumlah halaman juga menjadi pertimbangan. Sebagai contoh, apakah saya harus mengatakan <1000 show 20 rows,> = 1000 show 30 rows?

Pertanyaan selanjutnya adalah bagaimana cara terbaik menavigasi antar halaman, dengan asumsi pengguna telah memfilter tabel sebanyak yang mereka bisa dan mereka dibiarkan dengan 50 halaman informasi, haruskah mereka mendapatkan kotak input untuk melompat ke halaman 45? Atau haruskah melompati (1) melompati (5) tombol sudah cukup? Saat ini saya tidak tahu bagaimana pengguna akhir akan menggunakan tabel jadi saya tidak yakin dengan opsi apa untuk membiarkan mereka mencoba terlebih dahulu.

Akhirnya, apakah ada yang punya contoh pagination yang baik yang bisa mereka bagikan? Saya selalu mencari bahan referensi yang bagus!

25
Toby

Ini mungkin atau tidak mungkin pagination dilakukan dengan benar, tetapi di sini adalah bagaimana saya melakukan pagination di aplikasi web saya:

|< First, << Previous, Page [5] of 12, Next >>, Last >|

Empat opsi terluar adalah tautan, sedangkan Page [5] of 12 adalah formulir, dengan [5] sebagai bidang input. Untuk pengguna yang mengaktifkan JavaScript, saya menyembunyikan tombol kirim dan kirimkan formulir pada acara yang tidak fokus atau masukkan penekanan tombol. Pengguna memiliki opsi pada berapa banyak baris yang ingin mereka tampilkan, yang dapat mereka pilih dari menu dropdown: 10, 20, 50, 100, All. Saya juga menyediakan penyortiran dan penyaringan hasil selain pagination, meskipun itu mungkin tidak masuk akal dalam setiap situasi.

Edit:

Berikut cuplikan dari mockup aplikasi web kami untuk memberi Anda ide yang lebih baik. Dalam versi ini, kata-kata telah dihilangkan dari tombol, tetapi muncul sebagai tooltip pada hover setelah sedikit penundaan. Namun, Anda mungkin menemukan bahwa menjaga kata-kata akan menghasilkan tingkat kegunaan yang lebih tinggi.

Virtuosi Media's Pagination Example

Beberapa hal lain yang perlu diperhatikan:

  • Tombol "Pertama" dan "Sebelumnya" telah dinonaktifkan karena ini adalah halaman pertama.
  • Biru menunjukkan tombol aktif (saya harus menjalankan tema khusus ini melalui pemeriksa warna untuk memastikan bahwa pengguna buta warna dapat mengetahui perbedaannya).
  • Tombol selalu tetap, bahkan jika dinonaktifkan. Ini memberikan konsistensi antarmuka.
  • Saya memilih bidang input daripada kotak pilih dropdown karena skala. Jika Anda memiliki 3000 halaman, Anda tidak ingin menggulir ke bawah untuk menemukan halaman
  • The pagination dikelompokkan dalam komponen visual tunggal untuk menunjukkan kesamaan tujuan.
27
Virtuosi Media

Maaf untuk jawaban seperti itu, tetapi itu tergantung . Jenis konten apa yang Anda miliki dan apa yang dicari pengguna? Apa tujuan pengguna? Apakah ini situs web atau aplikasi?

Dalam banyak kasus, Anda dapat menghindari pagination sama sekali menggunakan pengguliran tak terbatas misalnya (lihat hasil pencarian pencarian gambar Google ).

Masalah dengan pagination adalah bahwa halaman itu sendiri tidak memiliki arti. Mengapa saya harus pergi ke halaman 45? Kenapa tidak 38? Jika konten diurutkan, Anda dapat mencoba untuk memberikan halaman nama yang bermakna (seperti huruf alfabet atau rentang tanggal atau hal lain yang masuk akal). Jumlah baris per halaman harus sebesar mungkin karena menggulir biasanya memberikan pengalaman yang jauh lebih baik daripada menavigasi halaman (namun ini bukan aturan umum dan ada beberapa pengecualian).

Dan untuk contoh dan praktik yang baik di sini adalah artikel bagus .

12
Kostya

Secara umum, jumlah item per halaman adalah sesuatu yang Anda tentukan berdasarkan kriteria berikut:

  • Jenis data apa yang saya tampilkan dan berapa lama jumlah item yang diberikan akan membuat halaman?
  • Apa konsekuensi item X pada halaman terhadap kinerja aplikasi?
  • Apakah saya ingin mengizinkan pengguna untuk menyesuaikan jumlah item yang ditampilkan per halaman?
  • Jika saya peduli dengan navigasi interpage (misalnya, apakah pengguna akan peduli dengan pergi ke halaman spesifik no 512?), Bagaimana jumlah item per halaman akan mempengaruhi kemampuan navigasi pagination?
  • Apa kontrol pagination yang tersedia untuk saya?

Jika Anda menjawab pertanyaan di atas, mereka akan mengarah ke jawaban untuk pertanyaan kedua Anda. Pagination adalah produk dari data yang Anda miliki dan jumlah item yang Anda tampilkan. Saran saya adalah menentukan apakah pengguna Anda ingin menentukan halaman mana yang ingin mereka lihat. Anda dapat mengetahui hal ini dengan melakukan pengujian pengguna serta memikirkan jenis informasi apa yang terdaftar. Misalnya, hasil pencarian jarang cukup spesifik untuk dapat mengatakan "Saya ingin pergi ke halaman 47" karena biasanya diurutkan berdasarkan algoritma samar dan buram. Tetapi jika Anda mendaftar, katakanlah, nama-nama dalam urutan abjad, pergi ke halaman 47 bisa sangat intuitif.

Demikian pula, tipe data yang Anda tampilkan juga dapat memengaruhi navigasi dan Anda mungkin ingin mempertimbangkan pola desain navigasi faceted untuk menyederhanakan banyak hal. Dalam contoh yang baru saja saya berikan tentang nama alfabet, Anda dapat mempertimbangkan pagination dengan menggunakan huruf (A | B | C | D dll) dan halaman dalam setiap huruf jika Anda memiliki banyak data.

Secara konkret:

  • Saya tidak menyarankan memberi terlalu banyak kontrol spesifik kepada pengguna kecuali Anda tahu pasti itulah yang mereka inginkan
  • Sebagai gantinya, tawarkan padding di sekitar halaman saat ini (1 .. 7 8 [9] 10 11 .. 28)
  • Sertakan halaman pertama dan terakhir jika Anda mengurutkan secara algoritma, kecuali Anda tidak bisa karena alasan kinerja.
  • Jika mengurutkan secara algoritma, pertimbangkan berbagai opsi pengurutan (seperti membalik urutan) - tergantung pada tipe data

Contoh pagination dilakukan dengan benar:

  • Flickr - membedakan dengan jelas antara status yang dipilih, tidak aktif, dan tautan; warna yang dapat diakses; tautan empuk dengan target klik yang bagus; bantalan yang baik di sekitar halaman saat ini; tidak terlalu rumit. Favorit pribadi.
  • Funda.nl - Situs web real estat Belanda dengan desain hebat, sederhana, mudah dibaca yang juga tercermin dalam pagination
  • Bing - tanpa BS, desain tipografi minimalis yang berarti bahwa pagination sangat halus tetapi secara bersamaan mudah digunakan
  • Google (jelas) - semacam menarik perhatian, tetapi meskipun memiliki banyak pilihan, masih terasa sederhana dan bahkan membawa senyum ke wajah Anda
  • Chris Messina memiliki beberapa foto pagination yang bagus di album pola desainnya di Flickr.
6
Rahul

Pola pagination:

Adapun pertanyaan pertama Anda - Saya penggemar konsistensi (dan sebagian besar pengguna juga). Jangan membingungkan pengguna dan membuat mereka berpikir mengapa mereka melihat lebih banyak baris saat ini ... Anda bahkan dapat membiarkan mereka memilih "item per halaman", yang merupakan praktik yang sangat umum dan berguna.

3
Dan Barak

Pengguna lebih suka menggulir daripada paging. Jauh lebih mudah untuk mengoperasikan roda gulir daripada membidik tautan navigasi kecil.

Morea tentang Paging vs. Scrolling

1
Miki