Mobilde Büyük Veri Tabloları: Sabitleme, Kaydırma ve Kart Kararı

Mobilde tablo tasarımı, masaüstündeki tabloyu küçültme işi değil. Hangi sütunların ekrana girmeyeceğine karar verme işi. Aşağıdakiler, on iki sütunlu bir tabloyu 390 piksel genişliğe sığdırmaya çalışırken sırayla verilecek kararlar.

Önce sütun elemesi yap

Ekrana sığdırma sorununun büyük kısmı, sığdırılmaya çalışılan sütunlardan geliyor. Masaüstü tablosunu açın ve her sütun için tek soru sorun: kullanıcı bu ekranda karar verirken buna bakıyor mu, yoksa sadece kayıtta bulunsun diye mi orada. İkinci gruptakiler detay ekranına taşınır.

Metin sütunları geniş yer kaplar, sayısal sütunlar dar. Pratikte 390 piksellik bir ekrana iki metin sütunu ya da dört-beş sayısal sütun sığıyor. Sütun başlıklarını kısaltın, ama kısaltmayı simgeyle değiştirmeyin: tabloda simge başlık, kullanıcıyı her satırda yeniden tahmin etmeye zorluyor.

Kullanıcıya sütun seçtirme paneli, ancak sütun sayısı gerçekten yüksekse değer üretir. Beş sütunlu bir tabloda panel açmak, listeyi taramak ve kutucuk işaretlemek, yatay kaydırmadan daha pahalıdır. Sekiz on sütunun üstüne çıkıyorsanız seçim ekranı mantıklı, altında değil.

Başlığı ve ilk sütunu sabitle

Bağlam kaybı mobil tablonun en büyük sorunu: kullanıcı sağa kaydırınca hangi satırda olduğunu, aşağı inince sütunun ne olduğunu unutuyor. Çözüm, başlık satırını ve kimlik taşıyan ilk sütunu ekranda tutmak.

Bunu scroll olayı dinleyip her karede konum hesaplayan bir script'e bağlamam. position: sticky aynı işi iki satırda ve titremeden yapıyor: başlık hücrelerine top: 0, ilk sütun hücrelerine left: 0. Üç ayrıntı atlanırsa çalışmıyor:

• Sabit hücrelere opak bir arka plan verin. Varsayılan şeffaflıkta altından kayan satırlar başlığın içinden geçer.
• Kaydırma kabının dışındaki hiçbir üst öğede overflow: hidden kalmasın. Sticky en yakın kaydırılabilir atadan hesaplanır, arada bir overflow varsa sessizce devre dışı kalır.
• Hem üstte hem solda sabit olan köşe hücresine daha yüksek z-index verin, yoksa yatay kaydırmada diğer başlıkların altında kalır.

Kaydırmayı gizleme

Yatay kaydırma kötü bir çözüm değil, gizli olduğunda kötü. Tabloyu ekranın kenarında tam sütun sınırında bitirmeyin; sonraki sütunun birkaç pikseli görünsün. Kırpılmış bir sütun kenarı, kaydırma olduğunu okla ya da gölgeyle anlatan her çözümden daha net anlatıyor, çünkü kullanıcı devamı olan bir şeyi görüyor.

Kaydırma çubuğunu mobilde gizleyen stilleri de kaldırın. Masaüstünde estetik kaygıyla eklenen o kural, dokunmatikte tek görsel ipucunu da siliyor.

Satırı karta çevirmek her tabloyu kurtarmaz

Yaygın öneri, her satırı alt alta dizilen bir karta dönüştürmek. Bu, kullanıcı satırları tek tek okuyorsa iyi çalışır: sipariş listesi, bildirim dökümü, işlem geçmişi. Kullanıcı satırları karşılaştırıyorsa kötü çalışır, çünkü tablo zaten karşılaştırma için var. Kart düzeninde üçüncü ve on birinci kaydı yan yana görmek imkansız hale gelir; kullanıcı ekranı aşağı yukarı kaydırıp kısa süreli belleğiyle karşılaştırmaya çalışır.

Ölçüt basit: satırlar arasında "hangisi daha ucuz, hangisi daha hızlı" sorusu soruluyorsa tablo olarak kalsın, sütunları elenerek daralsın. Sorulmuyorsa karta çevirin.

Akordeon kullanacaksanız aramayı kendiniz kurun

Gruplu veride açılır başlıklar ekranı ciddi biçimde sadeleştiriyor. Bedeli şu: kapalı grupların içeriği çoğu tarayıcıda sayfa içi aramaya görünmez. Kullanıcı aradığı değeri bulamayınca veri yok sanır.

Bu yüzden akordeonla birlikte kendi arama alanınızı verin ve aramayı kapalı grupların içinde de çalıştırıp eşleşen grubu otomatik açın. Filtrelemede de aynı mantık: sonuç sayısını her zaman gösterin, sıfır sonuç durumunda hangi filtrenin sonucu boşalttığını söyleyin.

Satır sayısı büyüyünce tasarım değil, performans sorunu başlar

Bin satırlık ve on iki sütunlu bir tablo, ekranda on iki bin hücre demek. Her hücre bir DOM öğesi, çoğu tasarımda içine bir sarmalayıcı daha giriyor. Orta segment bir telefonda bu tablo yüklenirken saniyelerce donar ve kaydırma boyunca takılmaya devam eder.

Ekranda aynı anda on beş satır görünüyorsa bin satırı da basmanın karşılığı yok. Görünen aralığı ve biraz tamponu basan bir liste kullanın, ya da sayfalama yapın. Sayfalama daha eski bir çözüm ama mobilde hâlâ daha güvenli: bellek davranışı öngörülebilir, geri tuşuyla dönüldüğünde konum kaybolmaz.