Bawa ke Batas – Tinjauan Situs Web Gulir Panjang

Gulir panjang, atau gulir tak terbatas, situs web persis seperti itu: halamannya jauh lebih panjang daripada halaman situs web "rata-rata" dan karenanya gulir "tanpa batas." Jenis situs ini telah menjadi populer dengan situs media sosial dan situs seperti Pinterest yang menyertakan banyak konten buatan pengguna, serta beberapa situs berita dan blog—situs web dan portofolio pribadi juga mulai menggunakan teknik gulir panjang untuk meningkatkan keterlibatan pengguna dan lamanya waktu yang dihabiskan orang di situs.

Gulir tak terbatas telah menjadi pola desain yang populer dan umum, namun, ada beberapa potensi jebakan yang harus diperhatikan oleh perancang UI saat merancang situs yang menggunakan pengguliran panjang. Ada juga beberapa jenis situs yang tidak sesuai untuk menggunakan pola desain pengguliran yang panjang.

Maksud dan Manfaat Gulungan Panjang

Salah satu manfaat terbesar dari situs web gulir panjang adalah mereka membuat pengunjung tetap berada di situs lebih lama. Ketika orang tidak harus membuat keputusan sadar untuk mengonsumsi lebih banyak konten, mereka cenderung tidak mengklik.

Anggap ini mirip dengan cara Facebook, YouTube, Netflix, dan situs serupa memutar video secara otomatis saat video yang dilihat pengguna selesai. Mereka tahu bahwa jika pengunjung harus berusaha mengeklik video baru, kemungkinan besar mereka akan mengeklik ke situs yang sama sekali berbeda. Tetapi jika video terus diputar, kemungkinan besar mereka akan terus menonton.

Ketika situs gulir panjang dikodekan dengan benar, mereka memuat URL baru dengan setiap konten baru. Itu sama dengan lebih banyak tampilan halaman untuk situs, yang dapat meningkatkan pendapatan iklan dan nilai keseluruhan situs.

Seperti halnya keputusan UX, penting untuk mempertimbangkan keuntungan dan kerugian orang-orang yang akan benar-benar menggunakan situs sebelum memutuskan format. Gulir panjang bisa menjadi pilihan yang bagus untuk jenis situs tertentu, sementara dalam situasi lain yang dilakukannya hanyalah membuat pengguna frustrasi. Sangat penting untuk mempelajari perbedaan antara keduanya.

Kapan Menggunakan Gulir Panjang (dan Kapan Tidak)

Hal utama yang perlu diingat ketika mempertimbangkan gulir panjang adalah bahwa konten harus menentukan format apa pun jenis situs yang sedang dirancang. Situs web gulir panjang sangat bagus untuk jenis konten tertentu tetapi dapat menghadirkan kegagalan UX besar dengan jenis lain.

Secara keseluruhan, situs berorientasi tugas dan tujuan tidak mendapat manfaat dari desain gulir tak terbatas (misalnya, situs eCommerce dan tutorial atau situs pendidikan lain di mana pengguna ingin melihat kemajuan yang pasti). Jenis situs ini perlu memberi pengguna rasa penyelesaian dan pencapaian, yang lebih sulit dicapai dengan situs pengguliran panjang.

Etsy, misalnya, mencoba desain gulir tak terbatas pada 2012 dan akhirnya beralih kembali ke pagination. Mereka menemukan bahwa meskipun pelanggan masih membeli dengan harga yang kurang lebih sama, keterlibatan pengguna menurun. Bahkan hal-hal seperti jumlah pencarian yang dilakukan menurun.

Salah satu opsi yang diberikan beberapa situs eCommerce kepada pengunjung adalah opsi “Lihat Semua” saat melihat halaman produk. Ini memberi pengguna opsi untuk melihat situs dalam format gulir tak terbatas jika mereka memilih untuk melakukannya sambil mempertahankan halaman hasil yang lebih pendek untuk pengguna yang lebih suka format itu.

Pagination juga berguna ketika penting bagi orang untuk melihat informasi dalam urutan kronologis. Di mana situs web pengguliran satu halaman mungkin mendorong orang untuk membaca sekilas dan melompat ke depan, pagination memperlambat pengunjung dan meningkatkan kemungkinan mereka mengonsumsi informasi dalam urutan yang benar.

Di mana situs web pengguliran satu halaman benar-benar dapat bersinar adalah di situs di mana membaca konten atau artikel tambahan adalah aliran alami. Ini berlaku untuk hal-hal seperti situs berita atau blog topikal. Pengguna di situs ini sering ingin mengambil informasi dalam jumlah besar sekaligus, dan scroll tanpa batas membuatnya lebih mudah.

Area lain yang jelas di mana gulir tak terbatas adalah pilihan UX yang populer adalah situs media sosial atau situs dengan banyak konten buatan pengguna. Facebook, Pinterest, dan Twitter semuanya menggunakan scroll tanpa batas. Situs-situs ini ingin mempertahankan pengguna di situs selama mungkin, dan gulir tak terbatas melakukannya dengan baik.

Biaya Psikologis dari Gulir Panjang

Efek psikologis dari setiap keputusan desain harus selalu dipertimbangkan dengan hati-hati. Ketika datang ke situs web pengguliran satu halaman, ada efek psikologis untuk, dan juga menentangnya.

Hal pertama yang perlu dipertimbangkan adalah bahwa pengguna tidak keberatan mengklik dengan sengaja. Mengklik telah menjadi bagian dari komputasi, antarmuka pengguna grafis, dan internet secara virtual sejak awal. Orang-orang terbiasa dengan jenis interaksi tertentu dan tidak akan dimatikan jika mereka harus mengeklik beberapa tautan untuk mendapatkan lebih banyak konten.

Banyak pengguna tidak menyukai gulir tak terbatas secara default. Dihadapkan dengan halaman yang sangat panjang untuk digulir bisa terasa seperti tenggelam dalam lautan informasi yang tidak pernah berakhir. Saat pengguna mencari informasi tertentu, menggulir jarang menjadi cara paling efisien untuk menemukannya.

Karena tidak akan secara akurat menampilkan panjang halaman, gulir tak terbatas merusak bilah gulir di sisi halaman. Meskipun tidak setiap pengguna menggunakan bilah gulir, dalam hal ini, mereka yang melakukannya mungkin merasa frustasi dengan gulir tak terbatas.

Gulir tak terbatas juga menghilangkan rasa penyelesaian yang diperoleh pengguna dari menyelesaikan tugas atau mencapai tujuan pada satu halaman dan kemudian mengklik ke halaman berikutnya. Kehilangan rasa penyelesaian ini dapat membuat pengguna enggan dan menyebabkan mereka mencari sumber lain untuk informasi atau tugas yang sama.

Dampak psikologis negatif lain yang dapat ditimbulkan oleh situs web pengguliran panjang adalah bahwa pengguna cenderung melihat konten yang berada di bagian bawah halaman sebagai kurang penting daripada konten di bagian atas. Menggunakan header dapat membantu dengan ini, karena semacam "mengatur ulang" otak pengunjung tentang di mana "atas" berada.

Praktik Terbaik Situs Gulir Panjang

Jika telah ditentukan bahwa proyek situs web cocok untuk desain gulir panjang, ada beberapa praktik terbaik yang perlu diingat untuk memastikan proyek itu menawarkan pengalaman pengguna yang optimal.

Pertama, buang footernya! Saat konten terus dimuat, footer akan terus didorong dari bagian bawah halaman. Itu berarti konten atau informasi apa pun yang terdapat di footer akan tetap tidak terlihat. Lebih buruk lagi adalah ketika pengguna melihat sekilas footer tetapi melupakannya sebelum mereka sempat mengklik apa pun. Menggunakan footer lengket adalah salah satu cara mengatasi ini, meskipun menyingkirkan footer seluruhnya seringkali merupakan pilihan yang lebih baik.

Menggunakan isyarat visual itu penting, terutama jika tidak segera terlihat saat layar utama memuat bahwa ada lebih banyak konten di halaman. Situs yang memiliki gambar header besar atau konten visual yang memenuhi layar saat halaman dimuat, sering kali menyertakan panah (terkadang dianimasikan) atau gambar serupa untuk menunjukkan bahwa ada lebih banyak konten di bawahnya.

Navigasi harus terlihat secara konsisten, baik dengan menggunakan tajuk lengket atau bilah sisi stasioner dengan tautan navigasi. Pengecualian untuk ini adalah pada perangkat seluler, di mana tajuk lengket dapat mengambil real estat layar yang berharga. Facebook menangani ini dengan baik dengan menghilangkan header ketika pengguna menggulir ke bawah tetapi kemudian muncul kembali ketika mereka mulai menggulir kembali.

Peramban web Chrome melakukan hal serupa dengan kontrolnya di bagian bawah layar; mereka menghilang saat pengguna menggulir ke bawah, dan muncul kembali saat mereka mulai menggulir kembali. Ini adalah cara yang sangat intuitif untuk membuat antarmuka yang memaksimalkan real estat layar yang tersedia.

Salah satu fitur UX vital yang untungnya menjadi lebih umum di situs web pengguliran tak terbatas adalah mengubah URL saat setiap bagian digulir. Beberapa melakukan ini dengan bookmark internal di dalam halaman. Situs lain, terutama situs berita dan blog, memperbarui seluruh URL saat pengguna menggulir. Ini penting, karena memungkinkan pengguna untuk menautkan ke konten yang ingin mereka tautkan, terlepas dari perubahan pada halaman itu sendiri.

Beberapa perancang web memilih untuk membuat apa yang dapat dianggap sebagai situs gulir panjang "hibrida", dengan tombol "muat lebih banyak" yang memuat konten langsung ke halaman yang sama. Beberapa desainer UI menggunakan ini berulang kali di halaman, sementara yang lain memilih untuk memasukkannya hanya sekali, dan setelah itu mengubah situs menjadi format pengguliran panjang yang lebih tradisional.

Selain pertimbangan desain khusus situs web gulir panjang ini, praktik terbaik UI dan UX lainnya untuk membuat desain yang baik masih berlaku untuk situs yang menggunakan gulir tak terbatas.

Contoh Gulir Panjang Selesai Benar

Lalu ada situs ini, dari Andrew McCarthy. Meskipun desainnya unik, ia bergulir tanpa batas dengan informasi yang sama berulang kali. Karena McCarthy adalah seorang desainer, kemungkinan pilihan yang disengaja untuk menonjol dari keramaian.

Dan contoh lain dari Sam Rosen, yang juga terus mengulangi konten yang sama berulang kali, meskipun situs ini kembali ke atas daripada memuat ulang semua konten.

Kesimpulan

Meskipun situs web gulir panjang bukanlah hal baru, mereka mencapai tingkat kedewasaan yang baru. Desainer tidak lagi menggunakannya hanya sebagai hal "besar" berikutnya dan malah memperhatikan bagaimana pola tersebut memengaruhi pengalaman pengguna.

Mengikuti praktik terbaik saat membuat situs web pengguliran tak terbatas memungkinkan desainer untuk membuat UX yang menyenangkan pengguna daripada membuat mereka frustrasi. Secara bersamaan, situs web gulir panjang yang diterapkan dengan benar juga dapat membantu merek mencapai tujuan situs web mereka.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• Desain Persuasif: Menggunakan Psikologi Tingkat Lanjut Secara Efektif
• Psikologi Desain dan Ilmu Saraf dari UX yang Luar Biasa
• Pengalaman Adalah Segalanya – Panduan UX Terbaik
• Kait UX Utama – Desain Antisipatif, Persuasif, dan Emosional di UX
• Hukum UX yang Dicoba dan Benar (dengan Infografis)