Görsel Hiyerarşi

Arayüz tasarımı, dışarıdan bakıldığında beğeni işi gibi görünür. Bir ekran “iyi” ya da “kötü” bulunur, gerekçe sorulduğunda yanıt çoğu zaman kişisel bir tercihe dayanır. Bu kurs bu yaklaşımı reddeder. Her görsel karar bir işlev üstlenir: bir ayrım üretir, bir ilişki kurar ya da bir sırayı ilan eder. Karar gerekçelendirilebiliyorsa tasarımdır; gerekçelendirilemiyorsa süslemedir. Kurs boyunca sorulacak soru “güzel mi” değil, hangi ayrımı hangi maliyetle üretiyor olacaktır.

Örnekler tek bir arayüz üzerinden ilerleyecek: bir kütüphanenin katalog arayüzü. Arama alanı, arama sonuçları listesi, tek bir kaydın ayrıntı görünümü ve ödünç alma eylemi. Bu arayüz her derste bir adım daha kararlı hâle gelecek. İlk soru en temel olanıdır: bir ekrana bakan kişi neyi önce görür, bunu kim belirler?

Hiyerarşi Bir Okuma Sırası Sözüdür

Görsel hiyerarşi (visual hierarchy), bir düzlemdeki ögelerin dikkat çekme gücüne göre sıralanmasıdır. Tasarımcı bu sıralamayı doğrudan denetleyemez; ancak ögelerin görsel özelliklerini değiştirerek sıralamayı yönlendirebilir.

Bu tanımın iki sonucu vardır. Birincisi, hiyerarşi bir özellik değil bir ilişkidir. Bir başlığın kendi başına “güçlü” olması diye bir şey yoktur; ancak çevresindeki ögelere göre güçlü olabilir. Bütün metinler 32 piksele çıkarılırsa hiyerarşi yükselmez, yok olur.

İkincisi, hiyerarşi bir söztür ve tutulmadığında bedeli okurundur. Bir arayüz, kayıt başlığını rafta bulunma durumundan daha belirgin gösteriyorsa, kataloğa “hangi kitaplar şu an rafta” sorusuyla gelen kişi her kayıtta iki kez bakmak zorunda kalır. Yanlış hiyerarşi bilgiyi silmez; onu bulmanın maliyetini artırır.

Hiyerarşi kurmadan önce yanıtlanması gereken soru şudur: bu ekranda hangi görev ilk sırada? Katalog arayüzünde arama sonucu listesinin görevi “bu sonuç aradığım şey mi” sorusunu ucuzlatmaktır. Öyleyse en güçlü öge kayıt başlığıdır, yazar adı ikinci sıradadır, raf kodu ise ancak kayıt seçildikten sonra gerekir.

Dikkati Yönlendiren Kanallar

Bir ögeyi diğerinden ayırmak için birbirinden bağımsız birkaç kanal kullanılabilir. Her kanalın kendi maliyeti ve kendi sınırı vardır.

• Boyut. En güçlü ve en pahalı kanal. Bir ögeyi büyütmek yalnızca onu öne çıkarmaz, aynı zamanda ekranda yer tüketir ve altındaki her şeyi aşağı iter.
• Ağırlık. Yazının kalınlığı. Yer tüketmez, bu yüzden yoğun listelerde boyuttan daha kullanışlıdır. Sınırı, kullanılan yazı tipinin sunduğu ağırlık sayısıdır.
• Kontrast. Metnin zeminden ayrışma derecesi. Ayrımı zayıflatarak da çalışır: ikincil bilgiyi soluklaştırmak, birincil bilgiyi büyütmeden öne çıkarır. Bedeli erişilebilirlik eşiğidir; bu eşik Karşıtlık ve Erişilebilirlik dersinde ölçülecektir.
• Konum. Okuma yönünün başlangıcına yakın olan öge daha erken taranır. Bedava değildir: konum, düzenin geri kalanını kısıtlar.
• Boşluk. Bir ögenin çevresindeki boşluk, o ögeyi yalıtır ve öne çıkarır. Sonraki derslerin konusu budur.

Kanalların bağımsız olması önemlidir. Aynı ayrımı iki kanalda birden ifade etmek, ayrımı iki kat güçlendirmez ama dayanıklı kılar: kanallardan biri işlemez hâle geldiğinde diğeri ayakta kalır. Renk körlüğü, düşük parlaklıkta okuma, küçük ekran ve yazı tipinin yüklenememesi bu “işlemez hâle gelme” durumlarının hepsidir.

Ayrımı Ölçmek

Hiyerarşi tartışması, “yeterince belirgin mi” sorusu öznel kaldığı sürece sonuçsuz kalır. Soruyu ölçülebilir kılmanın yolu, komşu iki düzey arasındaki farkı kanal kanal hesaplamak ve bir ölçütle karşılaştırmaktır.

Aşağıdaki program katalog arayüzünün metin düzeylerini alır, her düzeyin zeminle kontrast oranı (contrast ratio) değerini hesaplar ve komşu düzeyler arasındaki farkları listeler. Kontrast oranı, CSS ile Görsel Sunum kursunda tanımlanan bağıl parlaklık (relative luminance) üzerinden hesaplanır.

// hiyerarsi.mjs — metin duzeyleri arasindaki ayrimi kanal kanal olcer

const duzeyler = [
  { ad: "sayfa basligi",   boyut: 32, agirlik: 700, renk: "#1a1a1a" },
  { ad: "bolum basligi",   boyut: 20, agirlik: 600, renk: "#1a1a1a" },
  { ad: "kayit basligi",   boyut: 18, agirlik: 600, renk: "#1a1a1a" },
  { ad: "yazar",           boyut: 16, agirlik: 400, renk: "#3d3d3d" },
  { ad: "ustveri",         boyut: 14, agirlik: 400, renk: "#5c5c5c" },
];

const ZEMIN = "#ffffff";

// WCAG bagil parlaklik ve kontrast orani
function kanal(v) {
  const s = v / 255;
  return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
}
function parlaklik(hex) {
  const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
  return 0.2126 * kanal(r) + 0.7152 * kanal(g) + 0.0722 * kanal(b);
}
function kontrast(a, b) {
  const [x, y] = [parlaklik(a), parlaklik(b)].sort((p, q) => q - p);
  return (x + 0.05) / (y + 0.05);
}

// Kurs olcutu: iki komsu duzey en az bir kanalda su esikleri asmalidir.
const ESIK = { boyutOrani: 1.15, agirlikFarki: 200, kontrastOrani: 1.5 };

console.log("duzey            boyut  agirlik  kontrast(zemin)");
for (const d of duzeyler) {
  console.log(
    `${d.ad.padEnd(16)} ${String(d.boyut).padStart(4)}px ${String(d.agirlik).padStart(7)}  ` +
      `${kontrast(d.renk, ZEMIN).toFixed(2)}:1`
  );
}

console.log("");
console.log("komsu duzey cifti              boyut orani  agirlik farki  kontrast orani  ayrim");
for (let i = 0; i < duzeyler.length - 1; i++) {
  const ust = duzeyler[i];
  const alt = duzeyler[i + 1];
  const boyutOrani = ust.boyut / alt.boyut;
  const agirlikFarki = ust.agirlik - alt.agirlik;
  const kUst = kontrast(ust.renk, ZEMIN);
  const kAlt = kontrast(alt.renk, ZEMIN);
  const kontrastOrani = kUst / kAlt;

  const gecen = [];
  if (boyutOrani >= ESIK.boyutOrani) gecen.push("boyut");
  if (agirlikFarki >= ESIK.agirlikFarki) gecen.push("agirlik");
  if (kontrastOrani >= ESIK.kontrastOrani) gecen.push("kontrast");

  const etiket = `${ust.ad} > ${alt.ad}`;
  console.log(
    `${etiket.padEnd(30)} ${boyutOrani.toFixed(3).padStart(11)} ` +
      `${String(agirlikFarki).padStart(14)} ${kontrastOrani.toFixed(3).padStart(15)}  ` +
      (gecen.length ? gecen.join("+") : "ZAYIF")
  );
}

duzey            boyut  agirlik  kontrast(zemin)
sayfa basligi      32px     700  17.40:1
bolum basligi      20px     600  17.40:1
kayit basligi      18px     600  17.40:1
yazar              16px     400  10.86:1
ustveri            14px     400  6.69:1

komsu duzey cifti              boyut orani  agirlik farki  kontrast orani  ayrim
sayfa basligi > bolum basligi        1.600            100           1.000  boyut
bolum basligi > kayit basligi        1.111              0           1.000  ZAYIF
kayit basligi > yazar                1.125            200           1.602  agirlik+kontrast
yazar > ustveri                      1.143              0           1.624  kontrast

Eşik değerleri bir doğa yasası değildir; bu kursun benimsediği ve denetlenebilir olsun diye sayısallaştırdığı ölçütlerdir. Önemli olan sayının kendisi değil, kararın bir sayıya bağlanmış olmasıdır: “yeterince belirgin görünmüyor” cümlesi tartışılabilir, “boyut oranı 1.111, eşik 1.15” cümlesi denetlenebilir.

Çıktının ikinci satırı asıl bulgudur. Bölüm başlığı ile kayıt başlığı arasında hiçbir kanal eşiği aşmıyor: boyutları neredeyse aynı, ağırlıkları eşit, renkleri özdeş. Bu iki düzey tasarım belgesinde ayrı satırlarda yazılıdır, ekranda ise aynı düzeydir. Hiyerarşi belgede vardır, arayüzde yoktur.

Bu bulgunun çözümü tek başına “bölüm başlığını büyütmek” değildir. Ayrım gerçekten gerekli mi diye sorulur. Katalog arayüzünde arama sonuçları listesinin tek bir bölümü varsa, bölüm başlığı bilgi taşımayan bir etikettir ve kaldırılabilir. Bir hiyerarşi sorununun en ucuz çözümü, çoğu zaman düzey sayısını azaltmaktır.

Tek Kanala Yaslanmanın Maliyeti

Çıktının son satırı bir başka zayıflığı gösteriyor: yazar ile üstveri arasındaki ayrım yalnızca kontrast kanalında duruyor. Boyut oranı 1.143, eşiğin altında; ağırlık farkı sıfır. Ayrım tek bacaklıdır.

Tek bacaklı ayrımlar öngörülebilir biçimde çöker. Kontrasta yaslanan bir ayrım, güneş altındaki bir ekranda ya da düşük parlaklığa ayarlanmış bir panelde ortadan kalkar. Renge yaslanan bir ayrım, renk ayrımı sınırlı olan okurda kalkar. Ağırlığa yaslanan bir ayrım, yazı tipinin yalnızca tek ağırlığı yüklenebildiğinde kalkar.

Kural şu biçimde yazılabilir: taşıdığı bilgi kritikse, ayrım en az iki kanalda ifade edilir. Kayıt başlığı ile yazar arasındaki ayrım bu koşulu sağlıyor (ağırlık ve kontrast). Yazar ile üstveri arasındaki ayrım sağlamıyor; üstverinin yazı boyutu 13 piksele indirilirse boyut oranı 16/13, yani yaklaşık 1.231 olur ve eşiği geçer.

Hiyerarşi Kaç Düzey Taşır

Düzey eklemek ücretsiz değildir. Her yeni düzey, mevcut düzeylerin arasına sıkışır ve komşularıyla arasındaki farkı daraltır. Beş düzeyli bir ölçekte boyut aralığı 14 ile 32 piksel arasındaysa, altıncı düzey ya alt ucu okunamayacak kadar küçültür ya da bir düzey çiftinin ayrımını eşiğin altına düşürür.

Bu yüzden pratikte düzey sayısı azdır: bir birincil, bir ikincil, bir üçüncül ve gerekirse bir de bastırılmış düzey. Aynı ekranda birbiriyle yarışan iki birincil öge varsa, ikisi de birincil değildir.

Aynı sınır eylemler için de geçerlidir. Katalog kaydında “Ödünç al” birincil eylemse, “Listeye ekle” ve “Paylaş” onunla aynı görsel güçte olamaz. Üç düğme de dolgulu ve renkli çizildiğinde, kullanıcı hangisinin beklenen eylem olduğunu arayüzden okuyamaz; kararı metinleri okuyarak verir. Bu, hiyerarşinin işini yapmadığı anlamına gelir.

Özet

• Görsel hiyerarşi, ögelerin dikkat çekme gücüne göre sıralanmasıdır; bir özellik değil ögeler arası bir ilişkidir ve her şeyi güçlendirmek hiyerarşiyi yok eder.
• Hiyerarşi, ekranın birincil görevinden türetilir: en güçlü öge, o görevi ucuzlatan ögedir.
• Ayrım boyut, ağırlık, kontrast, konum ve boşluk kanallarında ifade edilir; kanallar bağımsızdır ve her birinin ayrı bir maliyeti vardır.
• İki düzey arasındaki ayrım sayısal olarak denetlenebilir; ölçüt keyfî seçilse bile karar tartışmadan denetime taşınır.
• Kritik bilginin ayrımı en az iki kanalda ifade edilir; tek kanallı ayrımlar o kanalın işlemediği koşullarda tümüyle kaybolur.
• Düzey sayısı arttıkça komşu düzeyler arası fark daralır; hiyerarşi sorunlarının en ucuz çözümü düzey eklemek değil, düzey silmektir.

Sonraki Adım

Bu ders ögeleri birbirinden ayırmayı ele aldı. Arayüzün ikinci işi ise ögeleri birbirine bağlamaktır: kayıt başlığıyla yazar adının aynı kayda ait olduğu, raf kodunun ise ayrı bir bilgi kümesi olduğu ekranda nasıl anlaşılır? Sonraki ders, bu ilişkinin çizgi ve çerçeveyle değil boşlukla kurulduğunu gösterir ve boşluk oranlarının algılanan gruplamayı nasıl belirlediğini hesapla ortaya koyar.