Praktik Terbaik Dengan Infinite Scrolling

Infinite Scrolling , kadang-kadang disebut pengguliran tak berujung, adalah teknik yang memungkinkan pengguna untuk menggulir konten yang besar tanpa garis akhir yang terlihat. Teknik ini hanya menyuntikkan konten baru ke bawah ketika pengguna gulir ke bawah.

Image for post

Infinite scrolling

Teknik ini memungkinkan pengguna untuk menggulir daftar item tanpa gangguan atau tindakan tambahan – item hanya muncul saat pengguna menggulir ke bawah halaman. Teknik ini digunakan dalam umpan Facebook dan hasil pencarian gambar Google. Meski terdengar menggoda, teknik ini bukan solusi satu ukuran untuk semua untuk setiap situs atau aplikasi.

Lima Aturan Untuk Gulir Tak Terbatas Bagus

Membuat gulir tanpa batas yang baik bukanlah tugas yang mustahil. Untuk menyelesaikannya, Anda harus mengingat dan mengikuti panduan ini.

1. Biarkan Bar Navigasi Terlihat

Saat Anda menjaga bilah navigasi tetap terlihat, Anda menciptakan pengalaman navigasi yang lebih baik bagi pengguna. Mengapa? Karena jika bilah navigasi berada di luar jangkauan, pengguna harus menggulir ke belakang ketika mereka jauh di bawah daftar.

Image for post

Bilah navigasi teratas Facebook terlihat sepanjang waktu

Hanya perangkat seluler: Karena layar seluler jauh lebih kecil, bilah navigasi dapat menempati sebagian besar layar. Jika layar adalah umpan gulir, bilah navigasi dapat disembunyikan di gulir dan terungkap jika pengguna mulai menarik ke bawah mencoba untuk kembali ke atas.

Image for post

Facebook menghemat ruang vertikal dengan menyembunyikan bilah navigasi berdasarkan arah gulir. Kredit gambar: lmjabreu
2. Gunakan Tombol “Muat Lainnya” Jika Anda Memiliki Footer

Pengguliran tak terbatas menghambat akses pengguna ke footer halaman. Mencapai footer menjadi tantangan — karena item terus dimuat saat pengguna mendekati bagian bawah halaman, pengguna akan melihat footer selama satu atau dua detik sampai set konten berikutnya dimuat dan mendorong footer keluar dari pandangan. Ini mencegah pengguna mencapai footer.

Ambil Gambar Bing, misalnya. Footer berisi tautan seperti “Pelajari Lebih Lanjut” dan “Bantuan,” tetapi pengguna tidak akan dapat mengklik salah satu dari tautan ini sampai halaman berhenti bergulir tanpa batas, yang membutuhkan waktu.

Image for post
Kredit gambar: Gambar Bing

Jika situs atau aplikasi Anda memiliki footer dan footer berisi tindakan atau informasi penting bagi pengguna Anda, Anda harus menggunakan pendekatan “Muat lebih banyak”. Konten baru tidak akan dimuat secara otomatis hingga pengguna mengklik tombol “Muat Lainnya”. Keputusan desain yang sederhana ini memungkinkan pengguna Anda untuk memuat barang-barang tambahan sesuai permintaan. Instagram menggunakan tombol “Muat lebih” untuk memberikan akses mudah ke footer dan tidak memaksa pengguna untuk mengklik tombol “Muat lebih banyak” lagi dan lagi.

Image for post

Tombol “Muat lebih banyak hasil”, seperti yang digunakan oleh Instagram, menawarkan banyak manfaat dari pengguliran tak terbatas sambil menjaga footer tetap dapat diakses.
3. Tombol Kembali Membawa Pengguna Kembali Ke Tempat Sebelumnya

Tantangan kegunaan lain dari gulir tak terbatas jika masalah posisi gulir. Posisi gulir tidak direkam sebagai ‘status’. Jika pengguna mengikuti tautan dari daftar lalu mengklik tombol Kembali, mereka berharap untuk kembali ke titik yang sama di halaman asli. Tetapi ketika posisi pengguna dalam daftar hasil tidak dilacak, tombol kembali browser umumnya akan mengatur ulang posisi gulir ke bagian atas halaman. Tidak mengherankan bahwa pengguna merasa frustrasi cukup cepat dengan tidak memiliki fungsionalitas “kembali ke daftar” yang tepat.

Image for post

Image for post

Back button in Safari

Jangan membuat pengguna Anda kehilangan tempat mereka di daftar barang hanya karena mereka menggunakan tombol Kembali. Setelah pengguna mengunjungi halaman item tertentu dari daftar, mereka harus dapat kembali ke tempat yang sama pada daftar itu dengan mengklik tombol kembali browser.

Flickr mencocokkan perilaku tombol kembali browser dengan harapan pengguna. Aplikasi ini mengingat posisi gulir pengguna, jadi ketika pengguna menekan tombol Kembali ia kembali ke posisi semula.

Image for post

Image credit: Flickr

4. Izinkan Pengguna Menandai Item-Item Tertentu

Salah satu yang paling sering kontra dari gulir tak terbatas adalah bahwa tidak mungkin untuk mem-bookmark item dari daftar item. Tindakan hasil bookmark sederhana (“simpan untuk nanti” dari “tambahkan ke favorit”) dapat menjadi alat yang sangat kuat untuk pengguna Anda. Pinterest, misalnya, menggunakan alat bookmark yang membantu pengguna menyimpan ide-ide kreatif.

Image for post

Pengguna Pinterest dapat membookmark atau membagikan item dari daftar
5. Berikan Umpan Balik Visual Saat Memuat Konten Baru

Ketika konten baru dimuat, pengguna perlu tanda visual yang jelas bahwa situs melakukan ini. Terus beri tahu pengguna dengan menggunakan indikator kemajuan untuk menunjukkan bahwa konten baru sedang dimuat dan akan segera muncul di halaman.

Karena memuat konten baru adalah tindakan cepat (tidak perlu waktu lebih lama beberapa detik), Anda dapat menggunakan animasi berulang untuk menawarkan umpan balik bahwa sistem berfungsi.

Image for post

Animasi yang halus (seperti indikator pemuatan Tumblr) memberi tahu pengguna “Saya memuat beberapa konten untuk Anda.”

Juga dapat bermanfaat untuk menambahkan kejelasan tambahan bagi pengguna dengan memasukkan teks yang menjelaskan mengapa pengguna menunggu (mis. “Memuat komentar …”).

Image for post
Animasi roda berputar
Kesimpulan

Ketika pengguliran tak terbatas diimplementasikan dengan baik, itu dapat membuat pengalaman yang sangat halus dan mulus. Semoga Anda telah menerima beberapa petunjuk tentang apa yang membuat pengguliran tak terbatas yang baik dan ini akan membantu Anda untuk membangun pengalaman pengguna yang sempurna.

Pelajari cara mendesain antarmuka pengguna

Interaksi antara komputer dan manusia harus sama intuitifnya dengan percakapan antara dua manusia. Yayasan Desain Interaksi akan membantu Anda mempelajari cara mendesain untuk efisiensi dan persuasi.

 

 

 

 

 

 

sumber:uxplanet.org

Latest articles

12.6k Followers
Follow

Related articles