Kullanıcı odaklı tasarım: kademeli açığa çıkarma, düğme durumları ve simgeler

Bir sayfaya koyabileceğin her şeyi koyarsan kullanıcı hiçbir şeyi görmez. Kademeli açığa çıkarma (progressive disclosure), bilgiyi katmanlara ayırıp her katmanı kullanıcı bir adım attığında göstermektir. Yer işareti, Seçim bölmesi, detay sayfası ve araç ipucunun mekaniği “Raporla hikâye anlatmak” dersinde; burada bu araçlarla kullanıcı odaklı bir arayüz kuruyoruz.

Üç katman

Kural: Bir katmanı açmak tek bir tıklama olmalı ve kullanıcı her zaman geri dönebilmeli. Gizlenen bilgi, gizlendiğini belli etmeli; aksi hâlde kullanıcı onun varlığından haberdar olmaz.

Göster/gizle paneli

En sık kalıp, sayfayı dolduran dilimleyicileri ve açıklama metinlerini bir yan panele toplamaktır. Kullanıcı “Filtreler” düğmesine basınca panel kayar gibi açılır.

1. Bir dikdörtgen şekil (panel arka planı), dilimleyiciler ve bir “Kapat ×” düğmesi yerleştir.
2. Seçim bölmesinde bunları seçip grupla; grubu “Filtre Paneli” diye adlandır.
3. Panel açıkken bir yer işareti ekle: “Panel açık”. Panel grubunu gizleyip ikinci yer işaretini ekle: “Panel kapalı”.
4. Her iki yer işaretinde Veri seçeneğini kapat (kullanıcının seçtiği filtreler korunur), Görüntü açık kalsın ve Seçili görseller ile yalnızca panel grubunu kapsa. Böylece yer işareti sayfadaki diğer görsellerin durumunu değiştirmez.
5. “Filtreler” düğmesine Eylem → Yer işareti → “Panel açık”, “Kapat ×” düğmesine “Panel kapalı” bağla.

Filtre Düğmesi Metni =
IF(
    ISFILTERED(Satislar[Kanal]),
    "Filtreler • " & COUNTROWS(VALUES(Satislar[Kanal])) & " kanal",
    "Filtreler"
)

Hiç kanal seçilmemişse düğmede yalnızca “Filtreler” yazar; Web ve Mobil seçiliyse “Filtreler • 2 kanal”. Kullanıcı panel kapalıyken de bir filtrenin etkin olduğunu anlar.

Düğme durumları ve dinamik düğme metni

Bir düğme beş durumda ayrı biçimlendirilebilir. Biçim → Düğme → Stil (ya da Şekil) kartında Ayarları uygula: Durum listesinden durumu seçip o durumun dolgusunu, metnini, kenarlığını ayarlarsın:

Dinamik metin: Stil → Metin kutusunun yanındaki fx düğmesi → Biçim stili: Alan değeri → metin döndüren bir ölçü seç. Aynı yolla dolgu rengini de bir ölçüye bağlarsın. Detaya git düğmesi kullanıcı tek bir öğe seçene kadar zaten devre dışı kalır; metin ölçüsü ona ne seçmesi gerektiğini söyler, renk ölçüsü durumu görünür kılar (alıştırma 2 ve 3). Desktop’ta düğmeyi denemek için Ctrl + tıklama.

Alan parametresiyle görsel değiştirme

“Grafik / Tablo” geçişi için iki görsel ve iki yer işareti gerekir. Aynı görselde yalnızca ölçüyü ya da ekseni değiştirmek istiyorsan alan parametresi daha sade bir katman sağlar: tek grafik, bir düğme dilimleyici (“Satış · Kâr · Sipariş”), hiç yer işareti yok. Oluşturma adımları “Hesaplama grupları, alan parametreleri, görsel hesaplamalar” dersinde. Arka planda oluşan tablo şuna benzer:

Ölçü Seçimi = {
    ("Net Satış", NAMEOF('Ölçüler'[Net Satış]), 0),
    ("Brüt Kâr", NAMEOF('Ölçüler'[Brüt Kâr]), 1),
    ("Sipariş Sayısı", NAMEOF('Ölçüler'[Sipariş Sayısı]), 2)
}

• Alan parametresi: Aynı görsel türü, farklı alan. Filtreler doğal olarak korunur, bakımı kolaydır.
• Yer işareti geçişi: Farklı görsel türleri (çizgi ↔ matris) ya da farklı düzenler arasında.
• Seçili alanı başlığa yazmayı unutma; aksi hâlde ekran görüntüsünde hangi ölçünün çizildiği anlaşılmaz.

Tablolarda simgeler: Unicode ve UNICHAR

Matriste bir sayının yanındaki küçük ok, satırı okumadan durumu söyler (katman 1’i tablonun içine taşır). UNICHAR(kod), verilen Unicode kod noktasındaki karakteri döndürür:

Aylık Eğilim Simgesi =
VAR Degisim = [MoM %]
RETURN
    SWITCH(
        TRUE(),
        ISBLANK(Degisim), BLANK(),
        Degisim > 0.02, UNICHAR(9650),
        Degisim < -0.02, UNICHAR(9660),
        UNICHAR(9644)
    )

Matrise Tarih[YilAy] koyunca 2024-03’te ▲ (önceki aya göre +%41,5), 2024-04’te ▼ (−%45,9) görünür. ±%2 eşiği, gürültüyü “yatay” sayar; eşiği brifte iş birimiyle birlikte belirle.

• Renk: Simge ölçüsü metin döndürür. Rengi, aynı koşulu kullanan ayrı bir renk ölçüsüyle Yazı rengi → fx → Alan değeri üzerinden ver. Renk + şekil birlikte renk körü kullanıcıyı da korur.
• Sıralama: Metin ölçüsü alfabetik sıralanır. Sıralama gerekiyorsa sayısal ölçüyü ayrı sütunda tut.
• Emoji: PDF, abonelik e-postası ve bazı cihazlarda farklı görünebilir. Kurumsal raporlarda geometrik şekiller (▲▼●) daha güvenlidir.

Filtre bölmesini kullanıcıya göre ayarlamak

Kilitleme ve gizlemenin anlamı “Filtreler bölmesi ve dilimleyiciler” dersinde. Kademeli açığa çıkarma açısından filtre bölmesi, sayfada yer kaplamayan hazır bir “3. katman” panelidir:

• Biçimlendir: Tuvalin boş yerine tıkla → Biçim → Filtreler bölmesi (arka plan, simge, sol kenarlık) ve Filtre kartları. Kartlarda Varsayılan ve Uygulanan durumlara farklı renk ver; uygulanan filtre ilk bakışta fark edilsin.
• Sadeleştir: Teknik filtreleri gizle, iş kurallarını kilitle, kartları çift tıklayıp anlaşılır adlarla yeniden adlandır, en sık kullanılanı sürükleyip en üste al.
• Sınırla: Seçenekler → Rapor ayarları → “Kullanıcıların filtre türlerini değiştirmesine izin ver” kutusunu kaldır. Çok filtreli sayfada Sorgu azaltma ayarından tek bir Uygula düğmesi ekle.
• Bölmeyi tamamen gizlemek için Filtreler başlığının yanındaki göz simgesi. Web’de yayımla raporlarında filtre bölmesi zaten görünmez; orada dilimleyici kullan.

Tema JSON ile varsayılanlar

Her düğmeyi, her filtre kartını tek tek biçimlendirmek yerine kuralları temaya yaz (tema dosyasının temel yapısı “Temalar, sayfa ayarları ve tuval tasarımı” dersinde). Filtre bölmesi ayarları visualStyles altında page girdisine yazılır:

{
  "name": "Kesit Sade",
  "textClasses": {
    "label":   { "fontFace": "Segoe UI", "fontSize": 10, "color": "#3B3A36" },
    "callout": { "fontFace": "Segoe UI Semibold", "fontSize": 28 }
  },
  "visualStyles": {
    "page": { "*": {
      "outspacePane": [{ "backgroundColor": { "solid": { "color": "#F6F5F1" } }, "fontFamily": "Segoe UI" }],
      "filterCard": [
        { "$id": "Applied",   "backgroundColor": { "solid": { "color": "#DCE9F8" } }, "border": true },
        { "$id": "Available", "backgroundColor": { "solid": { "color": "#FFFFFF" } } }
      ]
    } }
  }
}

Applied uygulanmış filtre kartını, Available boştaki kartı biçimler. Tema bir kez yüklenince yeni eklenen her sayfa aynı varsayılanla gelir.

Mobilde kademeli açığa çıkarma

• Telefon ekranında katman 1 (KPI kartları ve oklar) üstte kalır; ayrıntı tablosu mobil düzene konmaz, detay sayfasına bırakılır.
• Mobil düzen otomatik oluşturulduğunda gizli görseller de yerleştirilir; görünürlüğü değiştiren yer işaretleri mobilde de çalışır. Gizli bir görsel tuvalde yer kaplar, boşluk varmış gibi görünse de oraya başka şey koyma.
• Telefonda üzerine gelme olmadığı için araç ipucuna gömülü bilgi zor bulunur. Önemli ayrıntıyı dokunarak açılan bir panele ya da detay sayfasına taşı.
• Düğmeleri parmakla rahat basılacak kadar büyük yap; yan yana çok küçük düğme yanlış dokunmaya yol açar.