Ekran Boyutu ve Girdi Türü

Önceki ders genişliği tek değişken olarak ele aldı ve düzenin genişlikle nasıl değiştiğini hesapladı. Ancak dar bir görüntü alanı yalnız dar değildir. Çoğu zaman girdi türü de değişir: imlecin bıraktığı yeri parmak alır, hedeflerin ölçüsü yeniden tanımlanır ve imlece bağlı etkileşimlerin karşılığı ortadan kalkar.

Yoğunluk dersinde 33 piksellik kayıt satırının en düşük hedef eşiğini geçtiği ama gelişmiş eşiğin altında kaldığı görülmüştü. Bu ders o eşikleri ölçüt numaralarıyla hesaplar, katalog kayıt satırındaki simge düğmelerini sınar ve düzeltmenin maliyetini çıkarır.

Girdi Türü Ekran Boyutundan Bağımsızdır

Girdi türü (input modality), kullanıcının arayüze dokunma, imleç ya da klavye üzerinden hangi kesinlikle eriştiğini belirtir. Yaygın varsayım, dar ekranın dokunma, geniş ekranın imleç anlamına geldiğidir. Bu varsayım üç yerde kırılır: geniş ekranlı dokunmatik yüzeyler, dar pencereye küçültülmüş imleçli oturumlar ve ikisini birden taşıyan aygıtlar. Dahası girdi türü oturum içinde değişebilir; kullanıcı aynı ekranda bir dakika parmakla, bir dakika imleçle çalışabilir.

Bundan iki tasarım kuralı çıkar:

• Ölçü kararları en kaba girdiye göre verilir. Etkileşime açık her alan bir dokunma hedefidir (touch target) ve ölçüsü dokunmanın gerektirdiği değere göre belirlenir; imleçle çalışan kullanıcı büyük hedeften zarar görmez.
• Yetenek kararları özellik saptamayla verilir, genişlikle değil. Üzerine gelmenin desteklenip desteklenmediği ekran genişliğinden çıkarılamaz; ilgili ortam özelliğiyle sınanır.

Hedef Boyutu Ölçütleri

İki ölçüt vardır ve ikisi de CSS piksel cinsinden ölçülür. WCAG 2.5.8 hedefin en küçük kenarının 24 piksel olmasını ister; 2.5.5 aynı ölçüyü 44 piksele çıkarır. İlkinin bir de aralık istisnası vardır: hedef 24 pikselden küçük olsa bile, her hedefin sınırlayıcı kutusuna çizilen 24 piksel çaplı daireler birbirini kesmiyorsa ölçüt sağlanmış sayılır.

Aşağıdaki program katalog kayıt satırının sağındaki dört simge düğmesini üç ayrı ölçü kararıyla üretir ve her ikisini de denetler.

// 10-hedef.mjs — hedef boyutu, aralik istisnasi ve etkin alan genisletmenin maliyeti

const ENAZ = 24; // WCAG 2.5.8 Hedef Boyutu (En Az)
const GELISMIS = 44; // WCAG 2.5.5 Hedef Boyutu (Gelismis)

// Katalog kayit satirinin sagindaki simge dugmeleri.
// Simge 16px, iki yanda ic bosluk, dugmeler arasinda ARALIK kadar bosluk.
function satirUret(simge, icBosluk, aralik, sayi, baslangicX) {
  const kenar = simge + 2 * icBosluk;
  const dugmeler = [];
  for (let i = 0; i < sayi; i++) {
    dugmeler.push({
      ad: `dugme-${i + 1}`,
      x: baslangicX + i * (kenar + aralik),
      y: 0,
      g: kenar,
      h: kenar,
    });
  }
  return dugmeler;
}

function merkez(d) {
  return { x: d.x + d.g / 2, y: d.y + d.h / 2 };
}
function merkezUzakligi(a, b) {
  const ma = merkez(a);
  const mb = merkez(b);
  return Math.hypot(ma.x - mb.x, ma.y - mb.y);
}

function denetle(ad, dugmeler) {
  console.log(ad);
  const enKucukKenar = Math.min(...dugmeler.map((d) => Math.min(d.g, d.h)));
  console.log(`  dugme olcusu: ${dugmeler[0].g}x${dugmeler[0].h}px   dugme sayisi: ${dugmeler.length}`);
  console.log(`  2.5.8 (>= ${ENAZ}px): ${enKucukKenar >= ENAZ ? "gecer" : "kalir"}`);
  console.log(`  2.5.5 (>= ${GELISMIS}px): ${enKucukKenar >= GELISMIS ? "gecer" : "kalir"}`);

  // Aralik istisnasi: her hedefin merkezine cizilen 24px capli daireler kesismemeli,
  // yani iki merkez arasindaki uzaklik en az 24px olmali.
  let enYakin = Infinity;
  for (let i = 0; i < dugmeler.length; i++) {
    for (let j = i + 1; j < dugmeler.length; j++) {
      enYakin = Math.min(enYakin, merkezUzakligi(dugmeler[i], dugmeler[j]));
    }
  }
  console.log(
    `  en yakin iki merkez arasi: ${enYakin}px   aralik istisnasi: ${enYakin >= ENAZ ? "gecer" : "kalir"}`
  );
  console.log("");
}

denetle("A) simge 16, ic bosluk 4, aralik 4", satirUret(16, 4, 4, 4, 0));
denetle("B) simge 16, ic bosluk 2, aralik 2", satirUret(16, 2, 2, 4, 0));
denetle("C) simge 16, ic bosluk 14, aralik 4", satirUret(16, 14, 4, 4, 0));

// Etkin alani gorsel olcuyu buyutmeden 44px'e cikarmak
const gorsel = 24;
const buyume = (GELISMIS - gorsel) / 2;
console.log("etkin alani gorsel olcuyu degistirmeden 44px'e cikarmak");
console.log(`  her yandan eklenecek: ${buyume}px`);
for (const aralik of [4, 12, 20, 24]) {
  const kalanBosluk = aralik - 2 * buyume;
  console.log(
    `  dugme araligi ${String(aralik).padStart(2)}px -> etkin alanlar ` +
      `${kalanBosluk >= 0 ? `${kalanBosluk}px aralikla ayrik` : `${-kalanBosluk}px ust uste biner`}`
  );
}

// Satirin tamami hedefse: 44px satir yuksekliginin tarama maliyetine etkisi
console.log("");
const LISTE_ALANI = 640;
console.log("satirin tamami hedefse ekran basina kayit");
for (const satir of [33, 44, 73]) {
  const kayit = Math.floor(LISTE_ALANI / satir);
  console.log(
    `  satir ${String(satir).padStart(3)}px -> ${String(kayit).padStart(2)} kayit/ekran   ` +
      `200 sonuc icin ${Math.ceil(200 / kayit)} ekran`
  );
}

A) simge 16, ic bosluk 4, aralik 4
  dugme olcusu: 24x24px   dugme sayisi: 4
  2.5.8 (>= 24px): gecer
  2.5.5 (>= 44px): kalir
  en yakin iki merkez arasi: 28px   aralik istisnasi: gecer

B) simge 16, ic bosluk 2, aralik 2
  dugme olcusu: 20x20px   dugme sayisi: 4
  2.5.8 (>= 24px): kalir
  2.5.5 (>= 44px): kalir
  en yakin iki merkez arasi: 22px   aralik istisnasi: kalir

C) simge 16, ic bosluk 14, aralik 4
  dugme olcusu: 44x44px   dugme sayisi: 4
  2.5.8 (>= 24px): gecer
  2.5.5 (>= 44px): gecer
  en yakin iki merkez arasi: 48px   aralik istisnasi: gecer

etkin alani gorsel olcuyu degistirmeden 44px'e cikarmak
  her yandan eklenecek: 10px
  dugme araligi  4px -> etkin alanlar 16px ust uste biner
  dugme araligi 12px -> etkin alanlar 8px ust uste biner
  dugme araligi 20px -> etkin alanlar 0px aralikla ayrik
  dugme araligi 24px -> etkin alanlar 4px aralikla ayrik

satirin tamami hedefse ekran basina kayit
  satir  33px -> 19 kayit/ekran   200 sonuc icin 11 ekran
  satir  44px -> 14 kayit/ekran   200 sonuc icin 15 ekran
  satir  73px ->  8 kayit/ekran   200 sonuc icin 25 ekran

Üç ölçü kararının üçü de aynı 16 piksellik simgeyi taşıyor; farkı yalnız iç boşluk yaratıyor. A kararı 4 piksel iç boşlukla tam 24 pikselde durur ve en düşük eşiği geçer. B kararı 2 piksel iç boşlukla 20 piksele iner ve iki ölçütü birden kaybeder. C kararı 14 piksel iç boşlukla 44 piksele çıkar ve ikisini de geçer.

Aradaki tek değişken, ekranda hiç görünmeyen bir değerdir. İç boşluk simgenin çevresindeki şeffaf alandır; kullanıcı onu görmez, yalnız dokunduğunda varlığını fark eder. Hedef boyutu bu yüzden görsel bir karar değil, görünmeyen bir karardır ve gözle denetlenemez.

Aralık İstisnası Neyi Kurtarır

B kararında düğme ölçüsü 20 piksele indi ve ölçüt kaldı. Aralık istisnası bu durumu kurtarabilir miydi? Çıktı hayır diyor: en yakın iki merkez arası 22 piksel, gereken 24. İstisna da sağlanmıyor.

Aritmetik ilginçtir. B kararında düğmeler 20 piksel genişliğinde ve aralarında 2 piksel var; merkezler arası uzaklık 22 piksel. İstisnanın geçmesi için ya düğme en az 22 piksele çıkmalı ya da aralarındaki boşluk en az 4 piksel olmalı. İkinci yol daha ucuzdur: aynı görsel ölçüyle, yalnız 2 piksel daha boşlukla ölçüt sağlanır.

Bu, aralık istisnasının ne işe yaradığını gösterir. İstisna, küçük hedefleri meşrulaştırmak için değil, hedefler arası boşluğun hedef boyutunun bir parçası olduğunu söylemek için vardır. Yan yana duran iki küçük düğme birbirini tehlikeli kılar; tek başına duran bir küçük düğme kılmaz. Ölçüt, yalıtılmışlığı ödüllendirir.

Etkin Alanı Büyütmenin Gizli Maliyeti

Yaygın bir çözüm, görsel ölçüyü değiştirmeden etkin alanı (hit area) büyütmektir: düğme 24 piksel görünür, 44 piksel tıklanır. Çıktının ikinci bloğu bu çözümün gizli maliyetini veriyor.

24 pikselden 44 piksele çıkmak her yandan 10 piksel ekler. Düğmeler arasındaki boşluk 4 pikselse, iki komşu düğmenin etkin alanları 16 piksel üst üste biner: üst üste binen bölgeye yapılan bir dokunuşun hangi düğmeye gideceği tasarımın söyleyemediği bir şeydir. Boşluk 12 pikselde hâlâ 8 piksel binişme kalır. Ayrılma ancak 20 piksellik boşlukta sağlanır.

Sonuç şudur: etkin alanı büyütmek, aralığı da büyütmeden yapılamaz. Görsel ölçüyü sabit tutup dokunma kolaylığı kazanma vaadi, komşu hedefler varken karşılıksızdır. Tek başına duran bir düğmede — örneğin kayıt ayrıntısındaki “Ödünç al” düğmesinde — vaat geçerlidir, çünkü çakışacak komşu yoktur.

Satırın Tamamı Hedefse

Katalog sonuç listesinde tıklanabilir olan çoğu zaman tek tek simgeler değil, kayıt satırının tamamıdır. Bu durumda hedef boyutu doğrudan satır yüksekliğidir ve yoğunluk kararıyla aynı sayıya bağlanır.

Çıktının son bloğu bağlantıyı gösteriyor. Sıkışık düzenin 33 piksellik satırı ekranda 19 kayıt gösterir ve 200 sonuç 11 ekranda taranır. Satır gelişmiş eşiğe, 44 piksele çıkarıldığında ekranda 14 kayıt kalır ve tarama 15 ekrana çıkar — dört ekran daha. Dengeli düzenin 73 piksellik satırında maliyet 25 ekrandır.

Bu, yoğunluk dersindeki ödünleşimin girdi türüne bağlı olduğunu kesinleştirir. Aynı liste, imleçle çalışan bir oturumda 33 piksellik satırla 11 ekranda taranabilir; dokunmayla çalışan bir oturumda gelişmiş eşiği tutmak için 15 ekrana çıkar. Fark yüzde 36’dır ve tasarımın bunu ya kabul etmesi ya da satır dışındaki bir hedefle çözmesi gerekir — örneğin satırın tamamını değil, yalnız kayıt başlığını hedef yapmak ve başlığın kendi yüksekliğini eşiğe çıkarmak.

İmlece Bağlı Etkileşimin Karşılığı Yoktur

Ölçü dışında bir de yetenek farkı vardır. İmleç bir konum bildirir ve bu konum tıklama olmadan da bilinir; dokunma böyle bir konum üretmez. Üzerine gelme (hover) durumunda görünen her şey, dokunmayla çalışan bir oturumda ya hiç görünmez ya da ancak dokunulduktan sonra görünür.

Buradan bir kısıt çıkar: üzerine gelme, bilgi taşıyan tek yol olamaz. Kayıt satırındaki simge düğmeleri yalnız üzerine gelindiğinde beliriyorsa, dokunmayla çalışan kullanıcı onların varlığını bilemez. Aynı biçimde, bir kısaltmanın açılımı ya da bir raf kodunun anlamı yalnız ipucu balonunda veriliyorsa, o bilgi bir kullanıcı kümesi için yok demektir.

Üzerine gelmenin meşru kullanımı pekiştirmedir: zaten görünen bir şeyin tıklanabilirliğini vurgulamak, zaten yazılı olan bir etiketi belirginleştirmek. Yeteneğin varlığı ekran genişliğinden değil, ilgili ortam özelliğinden okunur; hover ve pointer ortam özellikleri bu ayrımı doğrudan sorgular ve pointer: coarse değeri kaba çözünürlüklü bir girdiyi bildirir. Ölçü kararlarının bu sorgulamaya bağlanmaması gerekir: hedef boyutu her koşulda en kaba girdiye göre verilir, çünkü girdi türü oturum içinde değişebilir.

Özet

• Girdi türü ekran genişliğinden türetilemez; ölçü kararları en kaba girdiye göre verilir, yetenek kararları ise ortam özelliği sorgulanarak verilir.
• Hedef boyutu görünmeyen bir karardır: aynı 16 piksellik simge, iç boşluğa göre 20, 24 ya da 44 piksellik hedef üretir ve fark ekranda görünmez.
• Aralık istisnası küçük hedefleri meşrulaştırmaz; hedefler arası boşluğun hedef boyutunun parçası olduğunu söyler ve yalıtılmış hedefi ödüllendirir.
• Etkin alanı görsel ölçüyü değiştirmeden büyütmek komşu hedefler varken karşılıksızdır: 24 pikselden 44 piksele çıkmak her yandan 10 piksel ekler ve 20 pikselden dar aralıkta etkin alanlar üst üste biner.
• Satırın tamamı hedefse yoğunluk kararı ile hedef boyutu aynı sayıya bağlanır; 33 piksellik satır 11 ekranda, 44 piksellik satır 15 ekranda taranır.
• Üzerine gelme bilgi taşıyan tek yol olamaz; meşru kullanımı zaten görünen bir şeyi pekiştirmektir.

Sonraki Adım

Düzen iskeleti bu dersle tamamlandı: sütunlar, oluklar ve kenar boşlukları ekran genişliğinden türetiliyor, aralıklar kapalı bir ölçekten geliyor, yoğunluk görevden çıkarılıyor ve hedef ölçüsü en kaba girdiye göre belirleniyor. İskeletin içine girecek metin ise henüz seçilmedi. Katalog arayüzünün taşıdığı yükün neredeyse tamamı metindir ve bu ders boyunca metin hep bir dikdörtgen gibi ele alındı — 16 piksel yüksekliğinde, 8 piksel genişliğinde karakterlerden oluşan bir blok. Sonraki bölüm bu varsayımı açar ve yazı tipi seçimini beğeniden ölçüte taşır: görünen büyüklük nasıl hesaplanır, hangi karakterler birbirine karışır, bir yazı tipi ailesi kaç hiyerarşi düzeyi taşıyabilir.