Dashboard UI Tasarımı
Veriye bakan ekip kararı hızlı versin
Panelde her şey vardır ama bakan kişi nereye bakacağını bilmez; grafikler birbirine benzer, tablo yatayda taşar, filtrenin nerede olduğu anlaşılmaz. Ekranı gösterilecek veriye göre değil, cevaplanacak soruya göre kuruyoruz. Önce cevabı, sonra ayrıntıyı gösteriyoruz.
- Önce cevap, sonra ayrıntı
- Doğru grafik türü seçimi
- Okunur tablo ve filtre
- Veri yok durumu tasarımı
Birlikte çalıştığımız markalar
Dashboard UI Tasarımı kimler için?
İç raporlama ekranı kuranlar
Operasyon, finans ya da satış ekibinin günlük takip ettiği panelleri olan şirketler. Ekran, kimin hangi kararı vermek için baktığına göre kurgulanır.
Ürün içinde veri gösteren yazılımlar
Müşterisine rapor ekranı sunan SaaS ürünleri. Burada panel yalnız bir araç değil, ürünün satış argümanının bir parçasıdır.
Rapor dosyası yerine ekran isteyen yönetim
Tabloyla gönderilen haftalık raporları canlı bir ekrana taşımak isteyen ekipler. Hangi metriğin gerçekten karar değiştirdiğini birlikte ayıklıyoruz.
Kapsam ve teslimatlar
Metrik önceliklendirme
Ekranda gösterilecek metrikleri karar değeri sırasına diziyoruz. Her sayı ekrana çıkmaz; hangi sayının hangi kararı değiştirdiği yazılı hâle gelir.
Ekran kurgusu ve hiyerarşi
Özet alan, kırılım alanı ve ayrıntı alanı ayrılır. Kullanıcı ekrana ilk baktığında durumu, sonra nedenini görür.
Grafik seçimi ve okuma kuralları
Her veri tipine uygun grafik türü seçilir, eksen, birim, yuvarlama ve karşılaştırma kuralları tanımlanır.
Tablo, filtre ve arama
Kolon önceliği, sıralama, sabit kolon, sayfalama ve toplu işlem davranışı tasarlanır. Tarih aralığı ve filtre mantığı ekranın her yerinde aynı çalışır.
Durum tasarımı
Veri yokken, veri yüklenirken, veri eksikken ve kullanıcının yetkisi yetmezken ekranda ne görüneceği ayrı ayrı çizilir.
Duyarlı davranış ve teslim
Dar ekranda grafiğin ve tablonun nasıl davranacağı belirlenir, dosya ölçüleriyle geliştirmeye teslim edilir.
Sayı değişince ne yapacaksınız
Bir panelin işe yarayıp yaramadığını anlamanın en hızlı yolu, ekrandaki her sayı için tek bir soru sormak: bu sayı bugün beklenenin dışına çıksaydı ne yapardınız. Cevap verilemiyorsa o sayı bir kararı değiştirmiyor demektir ve ekranda yalnız yer kaplıyor.
Bu soru çoğu zaman paneli ciddi biçimde küçültüyor. Toplam ziyaret, toplam kayıt ve benzeri geniş sayılar merak gideriyor ama hiçbir işi tetiklemiyor. Buna karşılık bekleyen iş sayısı, gecikmiş kayıtlar ya da hedefin altında kalan bir kanal doğrudan bir eyleme bağlanıyor.
Kalan metriklerin yerleşimi de bu cevaba göre belirleniyor. Her gün bakılan ve iş tetikleyen sayılar ekranın üstünde, açıklama getiren kırılımlar altında, yalnız dönem sonunda bakılanlar ise ayrı bir sayfada duruyor. Ekran böyle kurulduğunda bakan kişi nereye bakacağını sormuyor.
Elenen metrikler tamamen kaybolmuyor. Bir kısmı ayrıntı ekranına iniyor, bir kısmı istek üzerine açılan bir rapora taşınıyor. Böylece veri erişilebilir kalıyor ama her gün bakılan ekranın dikkatini bölmüyor.
Sıfır ile bilinmiyor aynı şey değildir
Panellerde en çok yanlış okunan şey eksik veri. Grafiğin son günü henüz tamamlanmadığı için düşük görünüyor ve satışlar gerilemiş sanılıyor. Bir kaynaktan veri gelmediği için tablo boş kalıyor ve o kanal hiç çalışmamış gibi okunuyor. Bir hesaplama sürerken ekranda eski değer duruyor ve karar onun üzerine veriliyor.
Bunların hiçbiri veri sorunu değil, gösterim sorunu. Sıfır gerçek bir değer, bilinmiyor ise bir boşluk; ekranda ikisinin aynı görünmemesi gerekiyor. Henüz tamamlanmamış bir dönem de tamamlanmış dönemlerle aynı biçimde çizilmemeli.
Bu yüzden panelde verinin durumunu da tasarlıyoruz. Son güncelleme zamanı görünür oluyor, devam eden dönem ayrı işaretleniyor, eksik kaynak sessizce boş bırakılmak yerine söyleniyor. Bu işaretler ekranı kalabalıklaştırmıyor; tam tersine ekrandaki sayılara güvenilmesini sağlıyor.
Hesaplama kuralının nerede yazılı olduğu da önemli. Aynı metriğin iki ekipte farklı hesaplandığı durumlar sık çıkıyor. Sayının tanımına ekrandan ulaşılabildiğinde tartışma verinin doğruluğundan çıkıp asıl konuya dönüyor.
Nasıl çalışıyoruz?
Kullanıcı ve karar analizi
Panele kimin, ne sıklıkla ve hangi kararı vermek için baktığını çıkarıyoruz. Aynı ekrana bakan iki farklı rol varsa görünüm farkını buradan belirliyoruz.
Metrik ve veri envanteri
Elinizdeki veri kaynaklarını, güncellenme sıklığını ve hesaplama kurallarını inceliyoruz. Ekranda gösterilemeyecek veriyi baştan ayıklıyoruz.
Ekran iskeleti
Özet, kırılım ve ayrıntı alanlarını yerleştirip akışı düşük çözünürlükte kuruyoruz. Renk ve grafik süslemesi bu aşamada yok.
Arayüz tasarımı ve grafik kararları
Grafik türlerini, tablo düzenini, renk kullanımını ve durum görünümlerini tasarlıyoruz. Renk burada süs değil, anlam taşır.
Kontrol ve teslim
Gerçek veriyle dolu örnekler üzerinde okunabilirliği ve kontrastı kontrol ediyor, dosyayı ölçüleri ve kurallarıyla teslim ediyoruz.
Kullandığımız araçlar ve platformlar
- Figma
- FigJam
- Figma Dev Mode
- Storybook
- Looker Studio
Dashboard UI Tasarımı fiyatını neler belirler?
Metrik ve grafik sayısı
Ekrandaki her metrik kendi hesaplama kuralını, birimini ve karşılaştırma mantığını getirir. Metrik sayısı arttıkça karar sayısı da artar.
Rol ve görünüm farkları
Aynı panelin yönetici, ekip lideri ve uzman için farklı görünmesi gerekiyorsa her rol ayrı tasarım kararı demektir.
Veri yapısının netliği
Hesaplama kuralları ve veri kaynakları tanımlıysa çalışma hızlı ilerler. Tanımlı değilse önce metriklerin ne anlama geldiğini oturtmak gerekir.
Etkileşim derinliği
Grafikten ayrıntıya inme, karşılaştırma, dışa aktarma ve kaydedilen görünüm gibi istekler kapsamı büyütür.
Sıkça sorulan sorular
Dashboard tasarımı ile raporlama aracı kurulumu aynı şey mi?
Değil. Biz ekranın nasıl kurgulanacağını, hangi metriğin nerede duracağını ve nasıl okunacağını tasarlıyoruz. Verinin toplanması ve hesaplanması yazılım ya da veri tarafının işi. İkisini birlikte yürütmek gerektiğinde ekipler arası kuralları baştan netleştiriyoruz.
Hangi grafik türünün kullanılacağına nasıl karar veriyorsunuz?
Veriye değil soruya bakarak. Zaman içindeki değişim, parça bütün ilişkisi, dağılım ve karşılaştırma farklı gösterim ister. Süslü görünsün diye grafik seçmiyoruz, çünkü yanlış grafik yanlış okumaya yol açar.
Mevcut panelimizi baştan mı tasarlamak gerekiyor?
Çoğu işte gerekmiyor. Önce mevcut ekranı gerçek veriyle inceliyoruz. Bazı panellerde sorun tasarımda değil, ekrana çok fazla metrik konmasında oluyor; ayıklama tek başına gözle görülür fark yaratabiliyor.
Koyu tema da tasarlıyor musunuz?
İsteğe bağlı olarak evet. Panellerde koyu tema sık isteniyor, ancak grafik renklerinin iki temada da ayırt edilebilir kalması ayrı bir çalışma. Kapsama eklenirse renk değişkenleri baştan iki tema düşünülerek kurulur.
Tabloların mobilde nasıl görüneceğini de planlıyor musunuz?
Evet. Geniş tablolar dar ekranda ya kolon önceliğine göre kırpılır ya da kart görünümüne dönüşür. Hangi yöntemin kullanılacağı tablonun içeriğine ve kullanıcının mobilde ne yapacağına göre belirlenir.
Veri yokken ekranda ne gösteriyorsunuz?
Boş durum ekranın en çok ihmal edilen parçası. Yeni kurulan hesaplarda kullanıcı ilk olarak orayı görür. Bu yüzden veri yok, veri yükleniyor, hesaplama bekleniyor ve yetki yok durumlarının hepsi ayrı tasarlanır.
Dashboard UI Tasarımı için ilk adımı atalım
- 1Formu doldurun ya da bizi arayın
- 2Bir iş günü içinde ön görüşme planlayalım
- 3Size özel yol haritası ve teklif hazırlayalım