Dashboard Tasarımı

Dashboard Tasarımı

Görsel çekiciliği yüksek bir dashboard’un sahip olması gereken ana özellikleri basit, heyecanlı ve düzenli olarak üç başlıkta toplayabiliriz.

1. Basit

Dashboard ekranı, verilerin ilk bakışta anlaşılabileceği şekilde basit bir arayüz ile tasarlanmalıdır. Son kullanıcı için dashboard’un çok fazla obje veya metin içermesi kafa karıştırıcı olabilir.

Büyük Metin

Metin boyutu, dashboard’taki önemi belirtmek için kullanılır. Büyük metin kullanımı, görselleştirilen veriyi netleştirdiği, anlamayı daha kolay ve hızlı hale getirdiği için oldukça işlevseldir.

İnsanlar dashboard’a ilk baktığında ekranda tek başına duran büyük sayılara/metinlere öncelik verme eğilimindedir. Başka bir deyişle, normalden farklı görünen her şey dikkatimizi çeker.

Daha Az Obje

Verilerin kolayca okunabilmesi ve anlaşılabilmesi için fazla ve çok çeşitli obje kullanımından kaçınmak gerekir.

2. Heyecanlı
Farklı Grafikler

Dashboard’un sade ve anlaşılır olması ne kadar önemli ise sıkıcılıktan uzak olması da bir o kadar önemlidir.

Dashboard’u farklı grafik ve görseller ile destekleyerek verilerinizin anlaşılabilirliğini arttırabilirsiniz.

Ayrıca beynimiz, dikkatimizi insan benzeri figürler üzerinde yoğunlaştırdığı için dashboard’unuzu mantıklı şekilde kullanılan insan figürleri ile destekleyebilirsiniz.

Aşağıdaki dashboard üzerinde bulunan ısı haritasında kırmızı ile belirtilen bölümler, insan gözünün en çok odaklandığı yerleri göstermektedir.

Göstermek istediğimiz veriyi gözümüze güzel gelen rastgele bir grafikle resmetmek doğru değildir. Önemli olan grafiğin kolay anlaşılabilir ve okunabilir olmasıdır. Örneğin; zaman serisi analizleri için en uygun grafikler, line ve area chart olarak bilinen çizgi ve alan grafikleridir. Line ve area chart, zamana göre değişim ve dalgalanmayı hızlı şekilde fark ederek yorumlamamızı sağlar. Oran göstermek istediğimizde ise gauge chart denilen gösterge grafikleri tercih edebiliriz.

Renkler

Dashboard’a bakan kullanıcılar için farklı renklerin neyi temsil ettiği bilinmediğinde renkler kafa karıştırıcı olabilir. Renkleri, dashboard’unuza dahil etmenin harika bir yolu koşullu renkler kullanmaktır. Örneğin, KPI hedeflerine bağlı olarak numaralarınıza mavi, turuncu ve yeşil gibi renkler atayabilirsiniz veya bir KPI’a ulaşamadığınızda bu sayıyı farklı bir renkte görüntüleyebilirsiniz. Genellikle, dashboard’larda renk körlüğü göz önüne alınarak kırmızı ve yeşil renk kullanımından kaçınmak gerekir.

Raporu hazırlarken doğal, pastel ve uyumlu renklerin seçilmesine özen gösterilmelidir.

İnsan gözü yüksek kontrastlı bir öğeden diğerine atlama eğilimi gösterdiği için dashboard’ta fazla olmamak koşuluyla yüksek kontrastlı öğe kullanımı pano boyunca yol gösterici olur. Örneğin, bir kontrol panelini yüksek kontrastlı öğeler ile destekleyerek güçlendirebilirsiniz.

Oyunlaştırma

Oyunlaştırma, raporları daha heyecanlı hale getirerek son kullanıcıyı motive eder. 

Bir ekip üyesi başarılı bir satış yaptığında, müşteriden iyi bir puan aldığında veya herhangi bir konuda hedefe ulaştığında dashboard’a tetiklenen özel bildirimler veya YouTube video linki ekleyebilirsiniz.

3. Düzenli
Önemli Bilgiler Sol Üstte 

Yapılan göz izleme çalışmalarına göre insanların çoğu içgüdüsel olarak dashboard’a baktıklarında ilk önce ekranın sol üst köşesine yönelir. Bunun sebebi, okumaya başlamak için öğretilen yerin sol üst köşe olmasıdır.

Dashboard’u en önemli bilgiler sol üstte olacak şekilde tasarlarken yukarıdan aşağıya doğru çalışmak başarılı bir uygulamadır. Tabii ki, metnin sağdan sola okunduğu bir ülkedeyseniz dashboard’u buna göre yapılandırmak gerekir. 

Genellikle, insanlar sol üst köşenin çevresine baktıktan sonra sayfanın orta kısmına gelerek incelemeye devam eder. Dashboard ekranında en son bakılan yer ise sağ alt köşedir. Dolayısıyla, sağ alt köşe verilmek istenen mesaj için uygun bir yerdir.

Aşağıdaki görüntüde dashboard üzerindeki göz hareketlerinin hangi noktalarda yoğunlaştığı gösterilmektedir.

Tüm bunlara ek olarak, hizalama da oldukça önemlidir. Doğru hizalama ile tasarım öğeleri arasında düzen oluşturarak okunabilirliği arttırabilirsiniz.

İlgili Objeleri Yakın Tutun

Benzer veya ilgili verileri karşılaştırmak için iki farklı obje kullanıyorsanız dashboard düzenine göre bu objelerin yan yana yerleştirildiğinden emin olmalısınız. 

Dashboard Standartları

Pano Boyutu

➳ Tüm panolar mümkün olduğu sürece tek sayfaya yazdırılabilir olmalıdır.

Pano Açıklaması

➳ Her dashboard, içeriğinin kısa bir açıklamasına sahip olmalı ve açıklanması gereken grafiklerin daha kolay anlaşılabilmesi için üzerine kısa notlar yazılmalıdır.

Görselleştirme

➳ Dashboard alanın temiz ve düzenli olması sağlanmalı, hizalamaya özen gösterilmelidir.

➳ Dashboard’un birincil odağı (en önemli grafik), mümkün olduğunca yukarı ve sola yakın yerleştirilmelidir. Bir kullanıcı bir web sayfasına veya dashboard’a baktığında genellikle gözlerin ilk odaklandığı yer burasıdır.

➳ Dashboard üzerinden web sitesine gidilecek ise yatay ve dikey kaydırmadan kaçınılmalıdır.

Filtreler

➳ Filtreler, genellikle sol tarafta veya üstte yer almalıdır.

➳ Filtre alanı dağınık olmamalı ve ikiden fazla filtre satırı olmamalıdır.

➳ Filtrelerin genişliği benzer olmalıdır.

Çoğu filtre, dashboard’taki her görselleştirmeye uygulanmalıdır. Aksi takdirde kullanıcı bu konuda bilgilendirilmelidir.

Mobil

➳ Tüm dashboard’lar mobile uygun olarak yatayda veya dikeyde objelerin alt alta geleceği şekilde tasarlanmalıdır.

Renkler

➳ Bir dashboard’ta üçten fazla ana renk tercih edilmemelidir.

Arka plan ve vurgu renklerinin kullanımı minimumda tutulmalı, genellikle doğal ve pastel renkler kullanılmalıdır.

Gereksiz ve göz yorucu renk ve dekorasyon sınırlandırılmalıdır.

➳ Kırmızı ve yeşilden renk körlüğü düşünülerek uzak durulmalıdır.

Dipnot

➳ Tüm uygulamalara sorular için bir e-posta eklenebilir. Örnek: Sorularınız için lütfen Destek@ornek.com.tr ile iletişime geçebilirsiniz.

Qlik Sense Ders 66: Alan Adını Değiştirme

Load ekranı (veri yükleme düzenleyicisi) üzerinden mevcut alan isimlerini rename field kullanarak değiştirebiliriz.

Örnek:

Sipariş:
Load * Inline 
[ 
Tarih, Kategori, 101, 105, 107
2021-05, Ofis, 50, 40, 10 
];
// Yukarıdaki tabloda sayı kodları ile isimlendirilmiş alan adlarını aşağıdaki şekilde değiştiriyoruz.
Fields_Map:
Mapping load * Inline
[
field_from, field_to
101, Satis
105, Kar
107, Maliyet 
];
Rename Fields using Fields_Map;

Eğer belirtilen kod tanımları, excel gibi bir veri kaynağı üzerinde tutuluyorsa aşağıdaki şekilde kullanabilirsiniz.

Fields_Map :
Mapping 
Load Kod, Tanım
From [lib://AttachedFiles/Excel.xlsx]
(ooxml, embedded labels, table is KPI_Mapping);
Rename Fields using Fields_Map;

Qlik Sense Ders 65: Çoklu Dilde Dashboard

Çoklu dilde dashboard oluşturmak için yapmamız gereken dashboard’u kullanmak istediğimiz dillere göre veriyi hazırlarken sütunları o diller için ayrı ayrı oluşturmaktır.

Aşağıdaki örnekte dashboard hem İngilizce hem de Türkçe olarak kullanılmaktadır. Bu örnek üzerinden multiple languages dahboard yani çoklu dilde dashboard‘un nasıl yapıldığını inceleyelim.

Öncelikle, dil için hazırladığımız excelleri veri modeline aşağıdaki gibi Qlik’e özgü şekilde bağlayarak kullanabiliriz.

Script tarafında girdiğimiz tabloların hemen altına exceldeki tabloları koyduğumuzda tablolar birbiriyle konuşmaya başlar.

Dil butonlarını oluşturmak için sırasıyla Türkçe ve İngilizce olarak butonlara Select values in a field action tanımlayalım. Field olarak içerisinde English ve Turkish şeklinde iki alan tutan Language‘i boyutunu kullanalım.

Türkçe butonu için Value‘unun içerisine Turkish, English butonu için de English yazalım.

Butonlara tıkladıkça başlık veya boyut & hesaplama isim dilinin değişmesi için objelerin başlığına aşağıdaki şekilde bir if ifadesi yazalım.

=if('$(=GetFieldSelections(Language))'='English','All Sectors','Tüm Sektörler')

+ Grafiklerde yer alan boyut veya hesaplama isimini dil butonlarıyla değiştirmek için Index, Türkçe ve İngilizce isimlerin tutulduğu bir tablodan da yararlanabiliriz.

Burada Index numarasını belirterek dili değiştirebiliriz. vDataLanguage, butonlarda kullandığımız Language alanını tutar.

=Only({10} $(=vDataLanguage))

Boyut bilgisine aşağıdaki ifadeyi yazarak Türkçe butonuna tıklayınca datadaki Sector_Turkish alanını, English butonuna tıklayınca da Sector_English alanını getirmesini sağlayalım.

=if('$(=GetFieldSelections(Language))' = 'English',Sector_English,Sector_Turkish)

Bu şekilde sheet başlıklarını ve obje içeriklerini hazırlayarak eski dostumuz QlikView’de ve yeni gözdemiz Qlik Sense’te birden fazla dil seçeneğine sahip dashboard’lar üretebiliriz.

Qlik Sense Ders 64: Tabloda Toplam Gösterimi

Qlik Sense, bazı durumlarda tablodaki otomatik toplamı null veya 0 getirebilir. İşte bu durum ile karşılaştıysanız aşağıdaki şekilde istediğiniz toplama fonksiyonunu seçerek tablonuzda göstebilirsiniz.

Edit mode -> Tabloya tıklayın -> Data -> Sütununuzu seçin -> Totals function ->Auto veya Sum gibi ihtiyaç duyduğunuz fonksiyonu belirleyin.

Eğer toplam bölümü tablonuzda otomatik olarak görünmüyorsa Presentation bölümünden Totals butonuna tıklayarak tablonuza getirebilirsiniz.

Buradan istenilen aggregate fonksiyonu seçerek hesaplama yapabilirsiniz.

Not: Alanlarınızın yanına Representation kısmından Indicator‘ı seçtikten sonra limit ekleyerek belirtilen değerin altında veya üstünde ise işaret koyabilirsiniz.

Qlik Sense Ders 63: Mobil Dashboard Tasarımı

Yukarıda hazırladığım dashboard’u ele alarak Qlik Sense’teki mobil tasarım mantığına birlikte bakalım.

Edit modtayken sayfada boş bir alana veya başlık kısmına tıkladığımızda sağ tarafta Sheet properties bölümü açılır. Burada mobil için List view ve Grid view olarak iki seçeneğimiz vardır.

List view‘i seçtiğimizde uygulama responsive davrandığı için telefondan veya tabletten bakarken ekrandaki objelerin soldan sağa doğru alt alta dizildiğiniz görebiliriz.

Grid view‘i seçtiğimiz takdirde dashboard’u bilgisayar ekranında olduğu şekliyle görüntüleriz. Raporu tam bir şekilde görebilmek için tableti veya telefonu yatay tutarak kullanabiliriz.

Eğer bir obje tam olarak görünmüyorsa sağ üst köşeye tıklayarak objeyi büyütebiliriz.

Qlik Sense Ders 62: Çizgi Grafikte Null Değerleri Gizleme

Line chart kullandığımızda yazdığımız tarih hesaplamasına göre bazen Include null values seçeneği görünmeyebilir. Böyle bir durumda tarih eksenini continuous (sürekli)‘tan discrete (parçalı/ayrık)’e çevirerek null değerlerden kurtulabilirsiniz.

Appearence (Görünüm) -> X-axis: Tarih -> Continuous‘u kapatarak Use continuous scale‘de onay kutusundaki işareti kaldıralım.

Tarih eksenini aşağıdaki şekilde discrete ölçekle kullandığımızda tarih alanın altındaki Include null values seçeneği açılacak ve buradaki onay işaretini kaldırdığımızda null değerler grafikten uçmuş olacaktır. ✨

Eksen ölçeğini değiştirdiğimizde grafiğinizde çizgi gösteriminde veya verilerde değişiklik olmaz. Yalnızca tarih ekseninin gösterimi aşağıdaki şekilde değişir.

Continuous tarih ekseni:

Discrete tarih ekseni:

Not: Tableau’da bu iki kavramı sıkça kullanıyor ve kavramlar arasında rahatlıkla geçiş yapabiliyoruz. Qlik Sense için bu iki kavram, henüz yalnızca belli grafik tipleri için kullanılabilmektedir.

Qlik Sense Ders 61: Başlıkta Filtre Seçimini Gösterme

Başlığında filtre ismini göstermek istediğimiz grafiği seçerek Genel -> Başlık bölümüne filtredeki alan adını ve ardından & ‘Görünen Başlık Adı’nı aşağıdaki yazıyoruz.

Böylece filtreden bölge seçimi yaptığımızda seçilen bölge ismini grafik başlığına yazdırmış oluyoruz.

Qlik Sense Ders 60: Negatif Değerlerin Sıfır Olarak Gösterimi

Eğer hesaplamanız negatif değerler içeriyorsa ve siz bu negatif değerlerin grafikte sıfır olarak görünmesini istiyorsanız ifadenizi aşağıdaki şekilde düzenleyebilirsiniz.

  • 1. Yöntem
    Rangemax(sum(Value),0)
  • 2. Yöntem
    if(sum(Value)>0, sum(Value),0)

Tutar bilgisi üzerinden örneklediğimizde sonuç aşağıdaki şekilde görüntülenir.

Qlik Sense Ders 59: Master Calender

Master Calendar oluşturarak verinizdeki başlangıç ve bitiş tarihi arasında kalan eksik günleri tamamlayabilirsiniz.

Aşağıdaki Master Calendar kodlarını, verinizdeki tarih adıyla değiştirerek kullanabilirsiniz.

Kodları kolayca kopyalayabilmeniz için aşağıya bırakıyorum.

MinMax:
Load min(Tarih) as MinTarih, //Buraya Tarih yerine kendi verinizdeki tarih alanının ismini yazın
max(Tarih) as MaxTarih
Resident Sipariş; //Sipariş tablosu yerine kendi tablonuzun ismini yazın

let vMinDate=peek('MinTarih',0,'MinMax');
let vMaxDate=peek('MaxTarih',0,'MinMax');

// peek komutu bir kolonun n. sıradaki değerini döndürür.
// 0 ilk satır, 1 ikinci satır, -1 son satır
// peek('KolonAdı', SatırSayısı,'TabloAdı')

drop table MinMax;

TempTakvim:
load Date($(vMinDate)+IterNo()-1) as Tarih
AutoGenerate(1) while $(vMinDate)+IterNo()-1 <= $(vMaxDate);

MasterCalendar:
Load
Tarih as "Sipariş Tarihi",
Year(Tarih) as Tarih.Yıl,
'Q'&ceil(month(Tarih)/3) as Tarih.Çeyrek,
Week(Tarih) as Tarih.Hafta,
Month(Tarih) as Tarih.Ay,
Day(Tarih) as Tarih.Gün,
Date(monthstart(Tarih), 'MMM YYYY') as Tarih.AyYıl,
WeekDay(Tarih) as Tarih.Günİsim
Resident TempTakvim
Order By Tarih ASC;

Drop Table TempTakvim;
//Verideki ilk tarihten başlayarak aradaki boş tarihleri günlük olarak doldurur.

%d blogcu bunu beğendi: