Karşılaştırma Tablolarında Lawn Mower Deseni Ne Kadar Geçerli?

Karşılaştırma tablolarında gözün sol üstten başlayıp satır satır ileri geri gittiği söylenir; buna Lawn Mower deseni deniyor. Desen gerçek. Tasarım kararlarını bu desene göre vermek ise çoğu zaman okunmayan yere yatırım yapmak demek, çünkü kullanıcıların büyük kısmı tabloyu baştan sona taramıyor.

Desen ne anlatıyor, ne anlatmıyor

Ad, Nielsen Norman Group'un tablo tarama gözlemlerinden geliyor: göz sol üst hücreden başlıyor, satırı sağa kadar okuyor, bir alt satıra düşüyor, soldan sağa devam ediyor. Çim biçme makinesinin tarlada gidiş gelişine benzediği için böyle anılıyor.

Buraya kadar tartışma yok. Tartışma, bu gözlemden çıkarılan tasarım tavsiyelerinde başlıyor. Desenin varlığı, kullanıcının tablonun tamamını bu şekilde taradığını göstermiyor; sadece taradığı kadarını bu şekilde taradığını gösteriyor. Zaten kaynakların kendisi de "belirli bir özelliği kontrol etmek isteyen kullanıcı tek satıra odaklanır" diye ekliyor, sonra bu cümleyi unutup tam taramaya göre tavsiye veriyor.

Kaç hücre gerçekten okunuyor

Sekiz özelliği dört ürün için listeleyen bir tablo otuz iki hücre demek. Kullanıcı gerçekten üç özelliği önemsiyorsa (fiyatı, garantiyi, bir de kendi işine yarayan teknik detayı) ilgilendiği hücre sayısı on iki, kalan yirmi hücre onun için gürültü. Tam tarama varsayımıyla kurulan tablo o yirmi hücreyi de özenle hizalar, ikonla süsler, renk verir.

O yüzden ilk soru "göz nasıl hareket ediyor" değil, "kullanıcı hangi üç satırı arıyor" olmalı. Satır sırasını karar kriterine göre dizmek, hizalamayı düzeltmekten fazla iş görür. Bunu ölçmek de zor değil: site içi arama kayıtları ve destek taleplerinde hangi özelliğin sorulduğu bir saatlik işte çıkar, göz takip oturumu kurmaya gerek kalmaz.

Deseni bozan şeyler

Desenin bozulması tek başına kötü değil. Kullanıcı aradığını ikinci satırda bulup çıktıysa iyi bile. Sorun, aradığını bulamadığı için taramayı bıraktığında.

• Açıklaması olmayan kısaltmalar. "Native 4K" ya da "Smart Sync" yazan bir hücre, kullanıcıyı tablodan çıkarıp arama motoruna gönderiyor.
• Yer tutucular. "TBA" ve "Açıklanacak" dolu bir sütunun karşılaştırmaya katkısı sıfır; bilgisi eksik satırları en alta toplamak taramayı rahatlatıyor.
• Başlık bağlamının kaybolması. Yirmi satır aşağıda hangi sütunun hangi ürün olduğu hatırlanmıyor.

Birleşik hücre tavsiyesinin ters tarafı

Ortak özellikleri birleşik hücrede toplamak sık verilen bir tavsiye ve tekrar hissini gerçekten azaltıyor. Ama "kullanıcı satır satır tarıyor" dedikten sonra satır yapısını bozan bir çözüm önermek kendi içinde çelişiyor. rowspan ve colspan, gözün saydığı ızgarayı dağıtıyor; hangi hücrenin hangi sütuna ait olduğu belirsizleşiyor. Ekran okuyucuda durum daha sert, birleşik hücreler tablo gezinmesini bozan en yaygın nedenlerden biri.

Tekrarı azaltmanın daha ucuz yolu var. Bütün paketlerde aynı değeri taşıyan satırları tablonun dışına, "hepsinde var" başlıklı kısa bir listeye taşı. Tablo küçülür, ızgara bozulmaz, kimse headers ve scope ilişkilerini elle kurmak zorunda kalmaz.

Sabit başlık mı, sütun gizleme mi

İkisi de aynı derdin ilacı: uzun tabloda bağlamı korumak. Sütun gizlemeyi daha güvenilir buluyorum. Sabit başlık kırılgan bir çözüm; position: sticky üst öğelerin overflow değerine duyarlı, iç içe kaydırma alanlarında sessizce çalışmayı bırakıyor, mobil tarayıcıların adres çubuğu davranışıyla da kavga ediyor. Masaüstünde kusursuz görünen tablo telefonda başlığı sayfanın ortasında asılı bırakabiliyor.

Kullanıcıya ilgilenmediği sütunu kapatma imkânı vermek ise sorunu ortadan kaldırıyor: dört sütun ikiye düşünce başlık zaten ekranda kalıyor. Sabit başlığı tamamen bırakmak gerekmiyor, ama ikisinden birine zaman ayıracaksan sütun seçimine ayır. Biri görüntüleme sorununa yama koyuyor, diğeri tabloyu küçültüyor.