Liste Tasarımı: Açılır Detay, Arşiv ve Kaydırmalı Listeler Ne Zaman İşe Yarar

Liste deseni çoğu projede ihtiyaçtan değil alışkanlıktan seçiliyor: bir yerde açılır detay gördük, biz de koyduk. Oysa açılır detay, arşiv listesi ve kaydırmalı liste birbirinin süslü alternatifi değil, üç ayrı soruya verilmiş üç ayrı cevap. Hangi soruyu sorduğunu bilmeden desen seçmek, arayüzü kalabalıklaştırmaktan başka işe yaramıyor.

Önce kullanıcının listeyle ne yaptığına bak

Bir listeyle yapılabilecek üç şey var. Kullanıcı adını bildiği bir öğeyi bulmaya çalışıyor olabilir; bu durumda desen değil arama kutusu ve öngörülebilir bir sıralama işe yarar. Ne olduğuna bakmak için geziniyor olabilir; burada her satırın kısa bir özet taşıması, satır sayısından daha çok fark yaratır. Ya da öğeleri birbiriyle karşılaştırıyordur, ki en sık ihmal edilen kullanım budur. Karşılaştırma varsa öğelerin aynı anda ekranda kalabilmesi gerekir, ve bu tek şart üç desenden ikisini doğrudan eler.

Açılır detay ekran kazandırır, karşılaştırmayı kaybettirir

Liste içi açılır detay, başlığa tıklayınca içeriği yerinde açar: sayfa değişmez, kullanıcı bağlamı kaybetmez. Buraya kadar iyi. Ama aynı kaynakların çoğu iki şeyi yan yana söylüyor: bu desen "öğeler arası ilişkiyi görünür tutar" ve "aynı anda yalnızca bir detay açık kalsın". İkisi birden doğru olamaz. Tek detay açık kalıyorsa iki öğeyi karşılaştıramazsın, karşılaştırabiliyorsan liste metrelerce uzamış demektir.

Pratikte ölçü şu: detay üç dört satırsa yerinde aç, birden çok açık kalmasına da izin ver. Detay bir ekranı dolduruyorsa açılır panel yanlış yerdir, ayrı bir sayfa ya da yan panel daha dürüst çalışır. Açılır başlığın gerçek bir button olması ve aria-expanded taşıması da bu arada zorunlu, aksi halde ekran okuyucu kullanıcısı listede neyin açık olduğunu bilmiyor.

Arşiv listesi, ancak kronoloji kullanıcının hafızasıysa

Yıl, ay, gün kırılımlı arşiv listeleri blog şablonlarının klasiği. Sayıya bakınca cazip de görünüyor: on iki yılda bin iki yüz yazı, yılda yüz yazı, ayda sekiz dokuz yazı. Üç tıklamada sekiz satırlık bir listeye iniyorsun. Sorun şu ki kullanıcı hangi ayı isteyeceğini bilmiyor. Aradığı şeyin ne zaman yayımlandığını hatırlamıyorsa on iki yıllık takvim onun için bir dizin değil, on iki kapılı bir koridor.

Arşiv kırılımı, tarihin kendisi veri olduğu yerde işini yapar: fatura dökümleri, mevzuat değişiklikleri, günlük raporlar, haber akışı. Konu bazlı bir blogda ise tarih ana gezinme ekseni olmamalı, arama sonucunun yanında ikincil bir daraltıcı olarak durmalı. Etiket ve kategori, o içerikte yıl kırılımından çok daha fazla iş görüyor.

Kaydırmalı listeler ve sonsuz kaydırmanın faturası

Sayfalamayı sonsuz kaydırmadan daha güvenilir bulurum, çünkü sayfa numarası bir adrestir, kaydırma konumu değildir. Kullanıcı 400. öğeye kadar indi, bir detaya girdi, geri tuşuna bastı: listenin başındasın. Aynı listeyi birine göndermek de mümkün değil. Sonsuz kaydırma akış tüketiminde (sosyal içerik, galeri) yerinde durur; kullanıcının bir karar verip geri dönmesi beklenen listelerde bedeli ağır. Ortadaki çözüm çoğu zaman yeterli: gerçek bağlantı taşıyan sayfalama artı "daha fazla yükle" düğmesi.

Uzun kaydırmalı listelerde ikinci mesele performans. Beş bin satırı DOM'a basıp tarayıcıdan idare etmesini beklemek yerine görünür otuz satırı ve iki tampon ekranı render etmek, hem ilk çizimi hem kaydırma akıcılığını başka bir yere taşır. Sanallaştırma bugün çoğu liste kütüphanesinde hazır geliyor, elle yazmaya gerek yok.

Liste sayfaları SEO'ya ne yapar, ne yapmaz

"Listeler SEO'yu iyileştirir" cümlesi olduğu gibi doğru değil. Arama sonucunda çoğunlukla öğenin kendi sayfası çıkar, liste sayfası değil. Liste sayfalarının SEO'daki asıl rolü sıralamak değil, taranabilirlik: iç bağlantıyla derindeki sayfalara yol açmak. Bunun için sayfalamanın gerçek a href bağlantıları içermesi yeterli, JavaScript'le yüklenen bir sonraki sayfa tarayıcıya görünmüyor.

Asıl zarar filtre sayfalarından gelir. Dört filtre grubu ve her grupta beş seçenek varsa, tek seçimli bir kurguda bile boş hali sayarak 6 üzeri 4, yani 1296 ayrı URL üretirsin. Çoklu seçime izin verirsen sayı milyonlara çıkar ve bunların büyük bölümü birbirinin neredeyse aynısı sayfalardır. Yapılacaklar kısa: filtre kombinasyonlarına noindex, follow, sıralama parametrelerine kanonik etiket, site haritasında yalnızca kalıcı kategori sayfaları.

Klavye ve dokunma alanı

Liste tasarımının en kolay atlanan yeri gezinme donanımı. Sekme sırası görsel sırayla aynı olmalı, açılan detay odağı kaçırmamalı, kaydırılabilir bir alan klavyeyle de kaydırılabilmeli. Dokunmatik tarafta satırın tamamı tıklanabilir olsun, sadece başlıktaki üç kelime değil. Seçili öğeyi yalnızca renkle değil, ikon veya kalınlıkla da işaretlemek gerekiyor; renk körlüğü bir yana, güneş altındaki telefonda tonlar zaten kayboluyor.