Dashboard Tasarımı: Veri Yoğun Ekranlar İçin İlkeler

Dashboard'lar ürünlerin en çok bakılan, ama en az okunan ekranları olabilir. Bir yönetim panelinde on iki gösterge kartı, beş grafik ve bir tablo yan yana durur; kullanıcı yine de "bu hafta bir sorun var mı?" sorusunun yanıtını bulmak için dışa aktarma düğmesine basar. Veri yoğun bir ekranın sorunu genellikle veri eksikliği değil, önceliksizliktir. Bu yazı dashboard tasarımında kararları sıraya koyan ilkeleri, kaynaklarıyla birlikte anlatıyor.

Operasyonel ve analitik dashboard

NN/g dashboard'u, kullanıcının hızlı harekete geçebileceği bir bakışta bilgi sunan, tek sayfalık veri görselleştirmeleri topluluğu olarak tanımlar ve iki temel türü ayırır 1. Operasyonel dashboard'lar zamana duyarlı karar vermeyi ve anında müdahaleyi destekler; analitik dashboard'lar ise daha fazla düşünme, inceleme ya da analiz gerektiren durumları fark ettirir. NN/g'nin örneğine göre günde bir güncellenen bir satış dashboard'u genellikle analitik türdedir 1.

Bir ürün iki türü de içerebilir, ama aynı ekranda karıştırıldığında ikisi de zayıflar. Lojistik bir panelde "geciken sevkiyatlar" listesi operasyonel bir ekrana, "son çeyrekte teslim süresi eğilimi" ise analitik bir ekrana aittir.

Önce kararları yazın

Grafik seçmeden önce şu soruları yanıtlayın. Yanıtlar, hangi verinin ekranda olacağını ve hangi sırayla görüneceğini belirler:

1. Kim bakıyor? Rolü ve bu ekrana hangi sıklıkla döndüğü.
2. Hangi kararı veriyor? "Bugün hangi siparişleri önceliklendireceğim?" gibi somut bir cümle.
3. Kararı vermek için neyi karşılaştırması gerekiyor? Geçen haftayla mı, hedefle mi, diğer şubelerle mi?
4. Bir sorun gördüğünde ne yapacak? Ayrıntıya inecek mi, birine görev atayacak mı, dışa aktaracak mı?
5. Veri ne kadar taze olmalı? Ve kullanıcı, verinin en son ne zaman güncellendiğini nereden görecek?

Bu beş sorunun yanıtı, gösterge kartlarının sırasını da belirler: en önemli karar en üstte, sol başta yer alır. Hangi sayıların gerçekten izlenmeye değer olduğunu UX metrikleri yazısında ayrıca tartıştık.

Grafik seçimi: uzunluk ve konum

NN/g, insanların bilinçli çaba göstermeden algıladığı görsel nitelikler arasında nicel karşılaştırma için en uygun olanların uzunluk ve iki boyutlu konum olduğunu belirtir; çubuk grafikler uzunluğa, çizgi grafikler ve saçılım grafikleri konuma dayanır 1. Pasta, halka, gösterge ve radar gibi dairesel grafikler ise alan ve açıya dayandığı için bir alanın diğerinden ne kadar büyük olduğunu söylemek zorlaşır 1.

Renk konusunda NN/g'nin önerisi, rengi nicelik göstermek yerine kategorileri ayırmak için ve tek başına değil, şekil ya da gruplama gibi bir başka işaretle birlikte kullanmaktır. Aynı yazıya göre genel nüfusun yüzde 4,5'e kadarı bir tür renk körlüğü yaşar; oran erkeklerde yaklaşık yüzde 8, kadınlarda yaklaşık yüzde 0,5'tir ve etnik kökene göre değişir 1.

Veri tabloları ve filtreler

Dashboard'ların çoğu bir noktada tabloya iner. NN/g, kullanıcıların veri tablolarıyla dört temel iş yaptığını belirtir: kayıt bulmak, verileri karşılaştırmak, tek bir kaydı görüntülemek ya da düzenlemek ve kayıtlar üzerinde işlem yapmak 2. Bu dört iş için öne çıkan öneriler şunlardır 2:

• İlk sütun okunabilir bir kimlik olmalı: Otomatik üretilmiş bir numara yerine müşteri adı ya da sipariş başlığı.
• Sütunlar önem sırasına göre dizilmeli, ilişkili veriler yan yana durmalı.
• Filtreler kolay bulunmalı ve etkin olduklarında açıkça görünmeli: Kullanıcı "Durum: Gecikmiş" filtresinin açık olduğunu unutursa tabloyu eksik sanır.
• Büyük tablolarda başlık satırı ve ilk sütun sabitlenmeli, satır ayırma için kenarlık, zebra çizgi ya da üzerine gelince vurgulama kullanılmalı.
• Tek kaydın ayrıntısı, tabloyu kapatan bir pencere yerine yan panelde açılmalı, böylece kullanıcı tabloyla bağlantıyı kaybetmez.
• Toplu işlemler için onay kutuları satır içi düğme kalabalığından daha iyi çalışır.

GOV.UK Design System de sayı sütunlarının karşılaştırılabilmesi için tablo hücrelerinde sağa hizalanmasını önerir; tabloyu bir başlık gibi tanımlayan bir tablo başlığı (caption) kullanılmasını ve yardımcı teknolojilerin satır ve sütun başlıklarını ayırt edebilmesi için başlık hücrelerinin doğru işaretlenmesini ister 6.

Türkçe sayı, tarih ve para biçimi

Yerelleştirme hataları veri yoğun ekranlarda en çok güven kaybettiren hatalardandır: "1,234" bir Türk kullanıcı için bir virgül iki yüz otuz dört mü, yoksa bin iki yüz otuz dört mü? Unicode CLDR'nin Türkçe yerel ayar verisi bu soruyu netleştirir 3:

CLDR, Türk lirası için ₺ simgesinin yanında TL varyantını da tanımlar 3. Hangisini seçerseniz seçin, ürünün tamamında aynı biçimi kullanın. Biçimlendirmeyi elle yazmak yerine ürünün kullandığı yerelleştirme kütüphanesine Türkçe yerel ayarla bırakmak ve çıktıyı bu tabloyla karşılaştırmak daha güvenlidir. Grafik eksenleri, araç ipuçları, tablo hücreleri ve dışa aktarılan dosyalar ayrı yerlerde biçimlendirildiği için tutarsızlık genellikle buralarda ortaya çıkar.

Boş, yükleniyor ve hata durumları

Bir dashboard'un ilk günü genellikle boştur: henüz veri yoktur, entegrasyon kurulmamıştır ya da filtre hiçbir sonuç döndürmemiştir. NN/g, tamamen boş ekranların sistemin çalışıp çalışmadığı konusunda kafa karışıklığı yarattığını belirtir ve boş durumlar için üç ilke önerir: sistemin durumunu bildirmek, bağlam içinde öğretici ipuçları vermek ve ana görevlere doğrudan yol sunmak 7. Örneğin "Henüz sipariş yok. Mağazanızı bağladığınızda siparişler burada listelenecek." metninin altında "Mağazayı bağla" düğmesi.

Yükleniyor durumunda NN/g'nin önerisi süreye göre değişir: bir saniyenin altındaki yüklemelerde gösterge gerekmez, iki ile on saniye arasında döner gösterge ya da iskelet ekran kullanılabilir, on saniyeyi aşan işlemlerde ise ilerleme çubuğu önerilir 8. Aynı yazıya göre iskelet ekranlar tüm sayfa yüklenirken, döner göstergeler ise dashboard kartı gibi tek bir modül yüklenirken daha uygundur 8. Veri yoğun panellerde kartların bağımsız yüklenmesi, tek bir yavaş sorgunun tüm ekranı bekletmesini önler.

Hata durumunda ise kullanıcıya hangi kartın neden yüklenemediğini ve ne yapabileceğini söyleyin; ekranın geri kalanı çalışmaya devam etmelidir. Boş ve hata metinlerinin yazımı için boş durum ve hata mesajları yazısına bakabilirsiniz.

Grafiklerin erişilebilirliği

İki WCAG başarı ölçütü grafik tasarımını doğrudan etkiler. Birincisi 1.4.1 Renk Kullanımı (A düzeyi): renk, bilgi aktarmanın, bir eylemi belirtmenin ya da bir öğeyi ayırt etmenin tek görsel yolu olmamalıdır 4. Pratikte bu, çizgi grafikte serileri yalnız renkle değil, doğrudan etiket, farklı işaretçi şekilleri ya da çizgi desenleriyle de ayırmak; "kırmızı = kritik" yerine bir ikon ya da metin etiketi eklemek demektir.

İkincisi 1.4.11 Metin Dışı Kontrast (AA düzeyi): içeriği anlamak için gereken grafik parçaları ve arayüz bileşenleri, bitişik renklere karşı en az 3:1 kontrast oranına sahip olmalıdır 5. W3C'nin açıklamasına göre bu, pasta dilimleri, çizgi grafikteki çizgiler ve çubuk parçaları gibi anlamı taşıyan öğeler için geçerlidir; aynı bilgi grafiğin yanında metin olarak da veriliyorsa grafik öğeleri anlamak için zorunlu sayılmayabilir 5. Açık renkli, birbirine yakın tonlardan oluşan paletler bu ölçütü en sık karşılayamayan tasarımlardır. Genel web erişilebilirliği için web erişilebilirliği ve WCAG yazısı iyi bir başlangıç noktasıdır.

Rol ve izin yapısı karmaşık panellerde bu ilkeleri ekranlara dökmek için panel ve dashboard tasarımı hizmetimize, B2B ürünlerdeki örnek kullanım bağlamları için SaaS ve B2B sayfamıza göz atabilirsiniz.