Yoğunluk Kararları

Aralık ölçeği boşlukların hangi değerleri alabileceğini söyledi, hangi adımın nerede kullanılacağını söylemedi. Bu soru katalog sonuç listesinde en somut hâlini alır: bir kayıt satırının iç boşluğu 6 piksel mi 16 piksel mi olacak?

Soru estetik gibi görünür, sonucu aritmetiktir. İç boşluk satır yüksekliğini belirler, satır yüksekliği ekranda kaç kaydın göründüğünü belirler, bu da 200 sonucun taranması için kaç ekran gerektiğini belirler. Bu ders o zinciri baştan sona hesaplar.

Yoğunluk Görevden Türetilir

Bilgi yoğunluğu (information density), birim ekran alanına düşen anlamlı bilgi miktarıdır. Yüksek yoğunluk daha çok bilgiyi aynı anda gösterir; düşük yoğunluk her bilgi parçasına daha çok yer ayırır.

İkisinden biri genel olarak daha iyi değildir. Doğru yoğunluk, ekranın birincil görevinden türetilir ve iki görev türü zıt yönde çeker:

• Tarama görevi. Kullanıcı çok sayıda öge arasından birini arıyor. Karar ölçütü tek bir alandır — çoğu zaman başlık. Bu görevde her ek boşluk, aranan ögenin ekranın dışında kalma olasılığını artırır.
• Değerlendirme görevi. Kullanıcı az sayıda öge arasından karşılaştırma yaparak seçiyor. Karar ölçütü birden çok alandır: yazar, yıl, baskı, rafta bulunma durumu. Bu görevde sıkışıklık, alanların birbirine karışmasına yol açar.

Katalog arayüzünde iki görev de vardır ama aynı ekranda değildir. Sonuç listesi bir tarama ekranıdır; kayıt ayrıntısı bir değerlendirme ekranıdır. Aynı yoğunluk kararının ikisine birden uygulanması, ikisini de bozar.

Zinciri Hesaplamak

Aşağıdaki program üç yoğunluk düzeyi için kayıt satırının toplam yüksekliğini hesaplar ve buradan ekran başına kayıt sayısını, ekranda görünen alan sayısını, 200 sonucun taranması için gereken ekran sayısını ve 137. sıradaki bir kayda ulaşmak için geçilecek ekran sayısını çıkarır. Çıktıdaki satir sütunu kayıt satırının toplam yüksekliğidir; metin sütunu bu yüksekliğin metin satırlarına düşen bölümüdür.

// 08-yogunluk.mjs — satir yuksekliginden ekran basina kayit ve tarama maliyeti

const GORUNTU_YUKSEKLIGI = 900;
const SABIT_ALAN = 260; // baslik, arama alani ve suzgec seridi
const LISTE_ALANI = GORUNTU_YUKSEKLIGI - SABIT_ALAN;

const SONUC_SAYISI = 200;
const HEDEF_SIRA = 137; // aranan kaydin listedeki sirasi

const DOKUNMA_ESIGI = 24; // WCAG 2.5.8 en kucuk hedef boyutu (CSS px)

const duzeyler = [
  { ad: "sikisik", yazi: 14, carpan: 1.4, icBosluk: 6, alanSayisi: 1 },
  { ad: "dengeli", yazi: 16, carpan: 1.5, icBosluk: 12, alanSayisi: 2 },
  { ad: "ferah", yazi: 16, carpan: 1.6, icBosluk: 16, alanSayisi: 3 },
];

console.log(`liste alani: ${LISTE_ALANI}px   sonuc sayisi: ${SONUC_SAYISI}   hedef sira: ${HEDEF_SIRA}`);
console.log("");
console.log("duzey    satir  metin  bosluk  kayit/ekran  alan/ekran  ekran  hedefe  dokunma");
for (const d of duzeyler) {
  const satirYuksekligi = Math.round(d.yazi * d.carpan);
  const metin = d.alanSayisi * satirYuksekligi;
  const satir = metin + 2 * d.icBosluk + 1; // 1px ayirici cizgi
  const boslukOrani = (100 * (satir - metin)) / satir;
  const ekrandaKayit = Math.floor(LISTE_ALANI / satir);
  const bilgiBirimi = ekrandaKayit * d.alanSayisi;
  const ekranSayisi = Math.ceil(SONUC_SAYISI / ekrandaKayit);
  const hedefeKadar = Math.ceil(HEDEF_SIRA / ekrandaKayit);
  const dokunma = satir >= DOKUNMA_ESIGI ? "gecer" : "kalir";

  console.log(
    `${d.ad.padEnd(8)} ${String(satir).padStart(4)}px ${String(metin).padStart(6)} ` +
      `${boslukOrani.toFixed(1).padStart(6)}% ${String(ekrandaKayit).padStart(12)} ` +
      `${String(bilgiBirimi).padStart(11)} ${String(ekranSayisi).padStart(6)} ` +
      `${String(hedefeKadar).padStart(7)} ${dokunma.padStart(8)}`
  );
}

// Sikisik duzeyin ic boslugu 6px; karma aralik olceginde (4, 8, 12, 16, 24, ...) yok.
// Olcege oturan iki komsu adim icin ayni zincir yeniden hesaplanir.
console.log("");
console.log("sikisik duzeyin olcege oturtulmasi (yazi 14, carpan 1.4, tek alan)");
console.log("ic bosluk  satir  kayit/ekran  200 sonuc icin ekran  hedefe kadar");
for (const ic of [4, 6, 8]) {
  const satir = Math.round(14 * 1.4) + 2 * ic + 1;
  const kayit = Math.floor(LISTE_ALANI / satir);
  console.log(
    `${String(ic).padStart(9)}px ${String(satir).padStart(6)}px ${String(kayit).padStart(12)} ` +
      `${String(Math.ceil(SONUC_SAYISI / kayit)).padStart(21)} ${String(Math.ceil(HEDEF_SIRA / kayit)).padStart(13)}`
  );
}

liste alani: 640px   sonuc sayisi: 200   hedef sira: 137

duzey    satir  metin  bosluk  kayit/ekran  alan/ekran  ekran  hedefe  dokunma
sikisik    33px     20   39.4%           19          19     11       8    gecer
dengeli    73px     48   34.2%            8          16     25      18    gecer
ferah     111px     78   29.7%            5          15     40      28    gecer

sikisik duzeyin olcege oturtulmasi (yazi 14, carpan 1.4, tek alan)
ic bosluk  satir  kayit/ekran  200 sonuc icin ekran  hedefe kadar
        4px     29px           22                    10             7
        6px     33px           19                    11             8
        8px     37px           17                    12             9

Bilgi Miktarı Değil, Bilginin Biçimi Değişiyor

Çıktının en öğretici sütunu alan/ekran sütunudur: 19, 16, 15. Üç yoğunluk düzeyi arasında ekranda görünen toplam alan sayısı yüzde 21 farkla neredeyse aynıdır.

Bu, yoğunluk tartışmasının yaygın çerçevesini bozar. “Sıkışık düzen daha çok bilgi gösterir” cümlesi doğru değildir; sıkışık düzen daha çok kayıt gösterir, ferah düzen kayıt başına daha çok alan gösterir. Ekranın taşıdığı toplam bilgi yaklaşık sabittir. Karar, bilginin miktarı üzerinde değil dağılımı üzerinedir: 19 kaydın başlığı mı, 5 kaydın üç alanı mı?

Bu çerçeveyle görev ayrımı doğrudan bir kurala dönüşür. Tarama görevinde kullanıcının ihtiyacı çok sayıda başlıktır; sıkışık düzen 19 kayıt gösterir ve 137. kayda 8 ekranda ulaşılır. Ferah düzen aynı kayda 28 ekranda ulaştırır — üç buçuk katı. Buna karşılık değerlendirme görevinde ferah düzen her kaydın üç alanını birden verir ve kullanıcı karşılaştırma için ayrıntı görünümüne girmek zorunda kalmaz.

Boşluk Oranı Sezgiyi Yanıltır

Çıktının bosluk sütunu beklenenin tersini söylüyor: sıkışık satırın boşluk oranı yüzde 39.4, ferah satırınki yüzde 29.7. “Ferah” olarak adlandırılan düzen, satır yüksekliğinin daha küçük bir bölümünü boşluğa ayırıyor.

Çelişki görünüştedir. Ferah düzende satır uzundur çünkü içinde üç metin satırı vardır; iç boşluk 16 piksele çıksa bile metnin payı daha hızlı büyür. Oran düşer, mutlak boşluk artar: sıkışık satırda toplam 13 piksel boşluk vardır, ferah satırda 33 piksel.

Buradan iki sonuç çıkar. Birincisi, “ferah” ve “sıkışık” sözcükleri tek başına bir ölçü vermez; hangi büyüklüğün ölçüldüğü söylenmelidir. İkincisi, yoğunluğu değiştirmenin iki ayrı yolu vardır ve etkileri farklıdır: iç boşluğu değiştirmek satır yüksekliğini doğrusal etkiler, alan sayısını değiştirmek ise satır yüksekliğini metin satırı yüksekliği kadar sıçratır. Ferah düzende iç boşluk sıkışığın 2.67 katıdır ama satır yüksekliği 3.36 katına çıkar; farkın kaynağı iki ek alandır.

Yoğunluğu düşürmek isteyen bir tasarımcı önce hangi kaldıraca bastığını bilmelidir. Alan eklemek pahalıdır ve geri alınması zordur; iç boşluk değiştirmek ucuzdur ve ölçek adımları arasında gezinir.

Yoğunluk Ölçeğin Neresinden Beslenir

Hesabın kendisi bir tutarsızlık ortaya çıkarıyor. Sıkışık düzeyin iç boşluğu 6 pikseldir ve bu değer önceki derste seçilen karma aralık ölçeğinde — 4, 8, 12, 16, 24 ve devamı — yoktur. Yoğunluk kararı ölçeğin dışına çıkmış durumdadır.

Çıktının ikinci bloğu, ölçeğe oturtmanın ne değiştirdiğini gösteriyor. İç boşluk 4 piksele çekilirse satır 29 piksele iner, ekranda 22 kayıt görünür ve 137. kayda 7 ekranda ulaşılır. 8 piksele çıkarılırsa satır 37 piksele, ekran başına kayıt 17’ye, hedefe ulaşma 9 ekrana gider. Ölçek dışı 6 piksel bu ikisinin arasındadır ve hiçbir şey kazandırmaz: 4 piksellik adım daha çok kayıt gösterir, 8 piksellik adım daha rahat ayırır, 6 piksel ikisinin de gerekçesini taşımaz.

Bu, ölçek ile yoğunluk arasındaki ilişkiyi netleştirir. Ölçek, yoğunluk kararını ayrıklaştırır: sonsuz sayıda ara değer yerine sayılabilir birkaç seçenek bırakır. Her seçeneğin sonucu — ekran başına kayıt sayısı, tarama maliyeti — önceden hesaplanabilir. Yoğunluk böylece bir ayar düğmesi olmaktan çıkıp bir seçim hâline gelir; seçim gerekçelendirilebilir, ara değer gerekçelendirilemez.

Yoğunluğu Kullanıcıya Bırakmak

Görev ayrımının bir ekranda çözülemediği durumlar vardır: aynı sonuç listesi hem hızlı tarama hem karşılaştırma için kullanılıyor olabilir. Bu durumda yoğunluk bir ayar hâline getirilir ve kullanıcı seçer.

Bu çözümün maliyeti gerçek ve çoğu zaman hafife alınır. Her yoğunluk düzeyi ayrı bir düzendir: ayrı satır yüksekliği, ayrı alan kümesi, ayrı taşma davranışı. İki düzey iki kat denetim demektir. Ayrıca seçimin kalıcı olması gerekir — kullanıcı her oturumda yeniden seçmek zorunda kalırsa ayar bir kolaylık değil bir yük olur.

Ölçüt şudur: yoğunluk ayarı, iki görevin de birincil olduğu kanıtlanabildiğinde eklenir. İki görevden biri açıkça baskınsa ayar eklenmez; baskın görev için doğru yoğunluk seçilir, diğer görev ayrı bir ekrana taşınır. Katalog arayüzünde sonuç listesi tarama için, kayıt ayrıntısı değerlendirme için vardır; ayara gerek yoktur.

Yoğunluğun Alt Sınırı

Yoğunluk serbestçe artırılamaz. Çıktının son sütunu kayıt satırının WCAG 2.5.8 ölçütünün istediği 24 CSS pikselini karşılayıp karşılamadığını gösteriyor: üç düzey de geçiyor.

Ancak aynı ölçütün gelişmiş biçimi olan 2.5.5 hedef boyutunu 44 CSS pikseline çıkarır. Sıkışık düzenin 33 piksellik satırı bu eşiğin altındadır; dengeli düzenin 73 pikseli ve ferah düzenin 111 pikseli üstündedir. Yani sıkışık düzen, satırın tamamı tıklanabilir bir hedefse yalnız en düşük eşiği karşılar.

Bu, yoğunluk kararının girdi türünden bağımsız verilemeyeceğini gösterir. Aynı 33 piksellik satır, imleçle çalışan bir ortamda rahat, dokunmayla çalışan bir ortamda kaçırılan bir hedeftir. Bu bağımlılığın tam ölçüsü bölümün son dersinde hesaplanacaktır.

Özet

• Bilgi yoğunluğu bir tercih değil, ekranın birincil görevinden türetilen bir karardır; tarama görevi yoğunluğu artırmaya, değerlendirme görevi azaltmaya çeker.
• Kayıt satırı yüksekliği ekran başına kayıt sayısını, o da tarama maliyetini belirler: 137. kayda sıkışık düzende 8, ferah düzende 28 ekranda ulaşılır. Buna karşılık ekranda görünen toplam alan sayısı yaklaşık sabit kalır (19, 16, 15); değişen bilgi miktarı değil, bilginin kayıtlara dağılımıdır.
• Boşluk oranı sezgiyi yanıltır: ferah düzenin boşluk oranı daha düşüktür, çünkü satır yüksekliğini büyüten şey iç boşluk değil eklenen metin satırlarıdır.
• Yoğunluk kararı aralık ölçeğinin adımlarından beslenir; ölçek dışı 6 piksellik iç boşluk yerine 4 ya da 8 seçildiğinde ekran başına kayıt 22 ya da 17 olur ve her iki seçim de gerekçelendirilebilir, aradaki değer gerekçelendirilemez.
• Yoğunluk ayarı ancak iki görevin de birincil olduğu gösterilebiliyorsa eklenir; her ayar ikinci bir düzen ve kalıcı bir durum saklama yükü getirir.
• Yoğunluğun alt sınırını hedef boyutu ölçütleri çizer; 33 piksellik satır en düşük eşiği geçer, gelişmiş eşiğin altında kalır.

Sonraki Adım

Bu dersin hesapları tek bir görüntü alanı yüksekliği ve tek bir kapsayıcı genişliği varsayarak yapıldı. Izgara dersinde 768 piksellik kapsayıcıda hiçbir sütun bölünmesinin içerik ölçütlerini karşılamadığı görülmüştü. İki bulgu aynı soruya çıkıyor: düzen genişlik değiştiğinde ne yapar? Sonraki ders duyarlı ve uyarlanabilir yaklaşımların farkını kurar, sütun sayısının genişlikten nasıl türetildiğini hesaplar ve kesme noktalarının aygıt listelerinden değil içerik ölçütlerinden çıkarıldığını gösterir.