Veri Tablolarını Kullanıcının Dört Görevine Göre Tasarlamak

Veri tablosu, arayüzün en çok iş gören ama en az tasarlanan parçası. Çoğu tablo aslında bir veri modelinin ekrana dökülmüş hali; kullanıcının o ekranda ne yapmaya çalıştığı sonradan akla geliyor. Sütunlardan değil görevlerden başlanınca kararların büyük kısmı kendiliğinden yerine oturuyor.

Bir tabloda yapılan dört şey

• Belirli bir kritere uyan kaydı bulmak
• Kayıtları birbiriyle karşılaştırmak
• Tek bir kaydı görüntülemek, düzenlemek ya da yeni kayıt eklemek
• Bir veya birden çok kayıt üzerinde işlem yapmak

Dördü aynı ekranda yaşıyor ama birbirinden farklı şeyler istiyor. Karşılaştırma yoğunluk ister, düzenleme alan ister. Tablo tasarımındaki gerilimlerin çoğu bu ikisinin çekişmesinden çıkıyor.

Bulmak

İlk sütun kaydın adı olsun. Otomatik ID kimseye bir şey söylemez, kullanıcı zaten satırı adıyla arıyor. Sütun sırası da rastgele değil: birlikte okunan alanlar yan yana dursun, yoksa gözün her karşılaştırmada ekranı taraması gerekir.

Filtre uygulandığında bunun görünür olması, sonuç boş geldiğinde iki katına çıkar. Kullanıcı boş ekranı görünce “veri yok” mu diyecek, yoksa üç filtre üst üste bindirdiğini mi hatırlayacak? Boş durumda hangi filtrelerin açık olduğunu yazın ve tek tıkla temizleme verin.

Peki filtre kullanıcının kendi kurduğu bir şey mi kalmalı, yoksa kaydedilebilmeli mi? Aynı sorguyu her sabah kuran biri varsa kaydedilebilir görünüm, tabloya eklenecek üçüncü filtre türünden daha çok iş görür. Filtrelemenin tarayıcıda mı sunucuda mı yapıldığı tasarım kararı gibi durmaz, oysa doğrudan tasarımın sınırını çizer: istemci tarafı filtre bütün satırları önce indirmeyi gerektirir (birkaç bin satırda kimse fark etmez, yüz binde ilk açılış kullanıcının sabrını aşar).

Karşılaştırmak

Tablonun kart düzenine karşı asıl üstünlüğü burada: aynı alan aynı hizada olduğu için göz tek eksende ilerler. Bunu koruyan birkaç şey var. Başlık satırını sabitleyin. Satırın üzerine gelindiğinde tüm satır vurgulansın. Zebra şeritleme ile çerçeve arasında birini seçin, ikisi birden gürültü yapar.

İlk sütunu sabitlemek geniş ekranda işe yarar, mobilde hesabı yapmaya değer: 360 piksel genişlikte ilk sütuna 140 piksel ayırırsanız geriye 220 piksel kalır, bu da tek bir sayı sütunu demek. Yani telefonda sabit sütun karşılaştırmayı kurtarmıyor, sadece pahalıya mal ediyor. Orada ya kart görünümüne geçmek ya da iki kaydı yan yana koyan ayrı bir karşılaştırma ekranı vermek daha dürüst bir çözüm.

Sütun gizleme ve yeniden sıralama sık istenen bir özellik, ama bir yan etkisi var: herkesin tablosu farklılaşınca ortak dil bozulur. “Üçüncü sütuna bak” cümlesi çalışmaz, ekran görüntüsü karşıdakinin gördüğüyle uyuşmaz. Kişiselleştirmeyi verecekseniz paylaşılabilir yapın; görünümü URL’de taşıyın ya da adlandırılmış görünüm olarak kaydedin.

Tek kaydı düzenlemek

Üç yaygın yol var: satır içi düzenleme, modal pencere, yan panel. Seçim tablonun genişliğine ve düzenlemenin sıklığına bağlı. Dar tabloda tek hücre değiştiriyorsanız satır içi düzenleme en az kesinti yaratan yol. Kaydın on beş alanı varsa modal ya da yan panel gerekir, panel de modaldan üstün çünkü arkadaki satırlar görünür kalır.

Satır içi düzenlemenin çoğu rehberde atlanan bir sınırı var. Tablo sıralıysa ya da filtreliyse, düzenlenen alan tam da o sıralama veya filtre alanıysa kayıt kendi altından kayar. Durum sütununa göre sıralı bir tabloda bir kaydın durumunu değiştirin, satır anında başka bir yere zıplar. Filtre “durum = açık” ise satır büsbütün kaybolur ve kullanıcı yazdığı şeyin kaydedilip kaydedilmediğini anlamaz.

Çözüm basit ve genelde uygulanmıyor: düzenleme kaydedilene kadar yeniden sıralamayı erteleyin, satır filtrenin dışına düşüyorsa hemen kaldırmayın, yerinde soluk bir halde bırakıp neden çıktığını söyleyin. Bir de düzenleme modu görünür olsun; okuma ile yazma arasındaki sınır belirsizse kullanıcı hücreye çift tıklamayı denemeyi bırakır.

Kayıtlar üzerinde işlem yapmak

Sık kullanılan bir iki işlem satırda dursun, geri kalanı satır sonundaki menüye girsin. Toplu işlem içinse satır başına kutucuk gerekir, ama asıl mesele kutucuk değil, “tümünü seç” ifadesinin ne anlama geldiği.

Kullanıcı bunu “ekrandaki 25 kayıt” diye de okuyabilir, “filtreye uyan 1.340 kaydın hepsi” diye de. İkisi de makul, dolayısıyla yazıyla söylemek gerekiyor: seçim özetinde sayıyı gösterin, tüm sonucu seçmeyi ayrı ve açık bir eylem yapın. Onay kutusunda da sayı ve geri dönüşü olmayan kısım açıkça yazılsın; “Emin misiniz?” diye soran kutu hiçbir şey engellemiyor.

Klavye ve erişilebilirlik

Sıralama başlıkları gerçek buton olsun, div üstüne tıklama dinleyicisi değil; aralarında sekme ile gezilebilsin ve sıralama yönü ekran okuyucuya bildirilsin. Filtre panelinden tabloya ve tablodan sayfalamaya klavyeyle geçiş kesintisiz olmalı. Dokunmatikte satır yüksekliği parmakla seçilebilecek kadar olsun, hedef küçüldükçe yanlış satırda işlem yapma ihtimali artar.

Renk tek sinyal olarak kullanılmasın. Durumu yalnız yeşil ve kırmızı noktayla anlatan tablo, kullanıcıların bir kısmı için boş sütundur; noktanın yanına metin koymak bunu bitirir ve kimseye bir şey kaybettirmez.