Carousel Blog Saya Salah Pola, Daftar Vertikal Menang

Kemarin malam saya buka blog sendiri dari HP. Halaman Blog loaded, dan yang keliatan cuma satu kartu artikel di layar. Saya geser ke kiri, ada satu lagi. Geser lagi, satu lagi. Lima artikel terbaru tersembunyi di dalam carousel yang harus di-swipe satu per satu. Artikel yang lebih lama? Nggak keliatan sama sekali tanpa scroll jauh ke bawah melewati carousel itu.

Saya sendiri yang bikin halaman itu, dan saya kesulitan menemukan tulisan lama. Kalau penulisnya aja kesusahan, pembaca pasti lebih parah.

Harusnya saya sudah tahu

Kebetulan hari sebelumnya saya baru commit yang nambah carousel serupa di halaman layanan. Responsnya bagus, kartu-kartu layanan terlihat rapi, horizontal, enak di-swipe. Jadi waktu lihat masalah di halaman Blog, dugaan awal saya: "Mungkin harusnya carousel-nya diperbaiki aja, bukan dibuang." Toh pola yang sama berhasil di tempat lain. Pengalaman kayak gini juga yang bikin saya makin yakin sama cara kerja yang dulu saya tulis di artikel soal log nginx yang dituduh DDoS: kesimpulan cepat dari gejala mirip hampir selalu meleset, haruse cek konteksnya dulu. Pola yang sama, konteks beda, jawabannya bisa kebalikan.

Tapi ternyata saya keliru dari awal. Bukan soal carousel-nya yang jelek. Soal saya pakai pola yang sama untuk dua jenis konten yang beda banget.

Konten showcase vs konten navigasi

Halaman layanan itu cuma lima item. Masing-masing punya ilustrasi visual, judul singkat, satu kalimat penjelasan. Tujuannya showcase: pengunjung lihat, paham opsi yang tersedia, pilih satu. Carousel horizontal cocok untuk tipe konten kayak gini: sedikit item, visual kuat, nggak butuh dibaca keseluruhan sekaligus [3].

Tapi halaman Blog isinya daftar artikel. Banyak link, masing-masing punya judul dan deskripsi yang harus bisa dipindai cepat. Pengunjung cari artikel spesifik. Mereka nggak mau swipe puluhan kali lewat satu per satu cuma buat nemu tulisan yang dicari. Apalagi data dari Nielsen Norman Group menunjukkan rata-rata user cuma baca maksimal 28 persen kata di satu halaman [2]. Kalau kontennya aja susah diakses, angka itu pasti lebih kecil lagi. Makin susah kontennya dijangkau, makin sedikit yang kebaca. Itu logikanya.

Sekarang halaman Blog di HP: judul halaman, lalu lima artikel paling baru dalam daftar turun biasa, judul, tanggal, ringkasan satu baris. Setiap item cuma dua baris: judul yang jadi link, lalu ringkasan satu kalimat. Tidak ada gambar besar yang harus dimuat, tidak ada posisi yang harus ditebak. Nggak ada animasi, nggak ada swipe, nggak ada indikator halaman. Item keenam ke bawah tinggal scroll. Itu aja perubahannya, dan persis itu yang bikin lucu: dua puluh baris kode hilang, masalah beres. Jumlahnya juga saya batangkaykan: cuma lima artikel terbaru di daftar itu, sisanya emang lewat halaman arsip dan kategori. Daftar yang kepanjangan sama bahayanya sama carousel yang isinya kebanyakan: dua-duanya bikin orang berhenti milih.

UI yang gerak sendiri vs yang diam

Ada alasan lebih dalam kenapa carousel untuk daftar artikel itu masalah. Riset NN/g soal auto-forwarding carousels nemuin bahwa panel yang bergerak sendiri secara konsisten dianggap pengunjung sebagai iklan [1]. Mereka cuekin. Jadi kalau carousel artikel saya auto-rotate (atau bahkan cuma mengundang swipe), risiko kontennya diabaikan itu nyata.

CSS carousel berbasis JavaScript juga punya masalah teknis tersendiri. MDN sendiri catat bahwa carousel semacam ini rentan karena butuh skrip terus-menerus buat sinkronkan tombol navigasi dan penanda posisi [3]. Untuk daftar artikel yang fungsinya cuma navigasi? Overkill.

Saya pribadi tetap pakai carousel untuk showcase visual yang jumlahnya terbatas. Itu keputusan yang sama dengan kemarin, cuma sekarang ada batasnya yang jelas. Tapi untuk daftar navigasi, daftar vertikal sederhana lebih jujur, nggak ngelawan kebiasaan natural user yang cuma baca sebagian kecil dari satu halaman. Ngomong-ngomong soal pola yang pindah-pindah tempat, kemarin saya juga nulis gimana carousel layanan di mobile saya selamatkan pakai CSS scroll snap. Dua keputusan itu keliatan kontradiktif kalau dibaca sendiri-sendiri, padahal jawabannya ada di jenis kontennya.

---

Sumber

• Nielsen Norman Group, Auto-Forwarding Carousels and Accordions [1]
• Nielsen Norman Group, How Little Do Users Read [2]
• MDN, Creating CSS carousels [3]