Yinelenme ve Tutarlılık

Önceki ders tek bir ekranın iç tutarlılığını ölçtü. Bir arayüz ise tek ekran değildir. Katalog uygulamasının arama sayfası, sonuç listesi, kayıt ayrıntısı ve ödünç alma onayı ayrı zamanlarda, çoğu zaman ayrı kişilerce çizilir. Arama sayfasında etiket ile alan arasında 8 piksel bırakılmış, kayıt ayrıntısında aynı ilişki için 10 piksel kullanılmıştır. İki piksel kimsenin gözüne batmaz. Sorun, bu iki pikselin bir karar olmasıdır: verilmiş, savunulmamış ve artık kaldırılamaz bir karar.

Bu ders arayüzün kararlarını sayar. Sayının kendisi bir kalite ölçüsü değildir; kaç kararın gerçekten bir ayrım ürettiği ile kaçının yalnızca çeşitlilik ürettiği sorusu kalite ölçüsüdür.

Yinelenme Bir Tahmin Sözüdür

Yinelenme (repetition), aynı işlevi taşıyan ögelerin aynı biçimde çizilmesidir. Tutarlılık (consistency) bu yinelenmenin arayüzün tamamına yayılmış hâlidir.

Yinelenmenin değeri estetik değil bilişseldir. Bir kullanıcı arayüzü kullanırken sürekli tahmin yürütür: bu koyu yeşil dolgulu dikdörtgen bir düğmedir, bu altı çizili metin bir bağlantıdır, bu 14 pikselik soluk satır bir üstveridir. Bu tahminler her seferinde doğrulanırsa öğrenme birikir; ekranın yarısı bakılmadan anlaşılır hâle gelir. Bir tek karşı örnek — dolgulu yeşil bir dikdörtgenin tıklanamaz bir etiket olması — tahmin zincirini kırar ve kullanıcı her ögeyi yeniden sınamaya döner.

Bundan iki kural türetilir ve bu kurallar simetrik değildir:

• Aynı görünen aynı davranır. Bu kuralın ihlali doğrudan hataya yol açar; kullanıcı öğrendiği bir kalıba göre davranır ve yanılır.
• Farklı davranan farklı görünür. Bu kuralın ihlali hataya değil yavaşlığa yol açar; kullanıcı ayrımı biçimden okuyamaz, metni okuyarak bulur.

İkinci kural, tutarlılığın sınırını da çizer. Tutarlılık her şeyi birbirine benzetmek değildir. Ödünç al düğmesiyle Kaydı sil düğmesi aynı görünüyorsa tutarlılık sağlanmış değil, önemli bir ayrım silinmiştir.

Karar Envanteri

Tutarlılık tartışmasını ölçülebilir kılmanın yolu, arayüzde fiilen kullanılan değerleri saymaktır. Aşağıdaki program dört özellik için katalog arayüzünün ham değerlerini alır ve üç şey hesaplar: kaç ayrı değer kullanıldığı, bu değerler arasında ayırt edilebilirlik eşiğinin (just noticeable difference) altında kalan kaç çift bulunduğu ve değerler bir ölçeğe oturtulduğunda kaç tanesinin gözle görülür biçimde değişeceği.

// 05-envanter.mjs — arayuzdeki karar envanteri, ayirt edilemeyen cift sayisi ve olcege oturtma

// Katalog arayuzunun dort ekraninda gecen ham degerler.
const envanter = [
  {
    ozellik: "aralik (px)",
    kullanilan: [4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32, 40, 48],
    olcek: [4, 8, 12, 16, 24, 32, 48],
    ayirtEsigi: 2,
  },
  {
    ozellik: "kose yaricapi (px)",
    kullanilan: [2, 3, 4, 6, 8],
    olcek: [4, 8],
    ayirtEsigi: 2,
  },
  {
    ozellik: "kenar kalinligi (px)",
    kullanilan: [1, 1.5, 2, 3],
    olcek: [1, 2],
    ayirtEsigi: 0.5,
  },
  {
    ozellik: "yazi boyutu (px)",
    kullanilan: [12, 13, 14, 15, 16, 18, 20, 24, 32],
    olcek: [14, 16, 20, 24, 32],
    ayirtEsigi: 1,
  },
];

function ayirtEdilemeyenCiftler(degerler, esik) {
  const ciftler = [];
  for (let i = 0; i < degerler.length; i++) {
    for (let j = i + 1; j < degerler.length; j++) {
      if (Math.abs(degerler[i] - degerler[j]) <= esik) ciftler.push([degerler[i], degerler[j]]);
    }
  }
  return ciftler;
}

function enYakin(deger, olcek) {
  return olcek.reduce((a, b) => (Math.abs(b - deger) < Math.abs(a - deger) ? b : a));
}

let oncekiToplam = 0;
let sonrakiToplam = 0;

for (const e of envanter) {
  const ciftler = ayirtEdilemeyenCiftler(e.kullanilan, e.ayirtEsigi);
  const oturtma = e.kullanilan.map((d) => {
    const hedef = enYakin(d, e.olcek);
    return { d, hedef, kayma: Math.abs(hedef - d) };
  });
  const gorunur = oturtma.filter((o) => o.kayma > e.ayirtEsigi);
  const enBuyukKayma = Math.max(...oturtma.map((o) => o.kayma));

  oncekiToplam += e.kullanilan.length;
  sonrakiToplam += e.olcek.length;

  console.log(e.ozellik);
  console.log(`  kullanilan deger sayisi: ${e.kullanilan.length}   olcek adimi sayisi: ${e.olcek.length}`);
  console.log(
    `  ayirt edilemeyen cift (fark <= ${e.ayirtEsigi}px): ${ciftler.length}   ` +
      `ornek: ${ciftler.slice(0, 3).map((c) => c.join("/")).join("  ")}`
  );
  console.log(`  en buyuk oturtma kaymasi: ${enBuyukKayma}px`);
  console.log(`  gozle gorulur degisiklik gerektiren deger sayisi: ${gorunur.length}`);
  console.log(`    ${oturtma.map((o) => `${o.d}->${o.hedef}`).join("  ")}`);
  console.log("");
}

console.log(`toplam ogrenilecek deger: oncesi ${oncekiToplam}   sonrasi ${sonrakiToplam}`);
console.log(`azalma: ${(100 * (1 - sonrakiToplam / oncekiToplam)).toFixed(1)}%`);

aralik (px)
  kullanilan deger sayisi: 13   olcek adimi sayisi: 7
  ayirt edilemeyen cift (fark <= 2px): 6   ornek: 4/6  6/8  8/10
  en buyuk oturtma kaymasi: 8px
  gozle gorulur degisiklik gerektiren deger sayisi: 3
    4->4  6->4  8->8  10->8  12->12  14->12  16->16  20->16  24->24  28->24  32->32  40->32  48->48

kose yaricapi (px)
  kullanilan deger sayisi: 5   olcek adimi sayisi: 2
  ayirt edilemeyen cift (fark <= 2px): 5   ornek: 2/3  2/4  3/4
  en buyuk oturtma kaymasi: 2px
  gozle gorulur degisiklik gerektiren deger sayisi: 0
    2->4  3->4  4->4  6->4  8->8

kenar kalinligi (px)
  kullanilan deger sayisi: 4   olcek adimi sayisi: 2
  ayirt edilemeyen cift (fark <= 0.5px): 2   ornek: 1/1.5  1.5/2
  en buyuk oturtma kaymasi: 1px
  gozle gorulur degisiklik gerektiren deger sayisi: 1
    1->1  1.5->1  2->2  3->2

yazi boyutu (px)
  kullanilan deger sayisi: 9   olcek adimi sayisi: 5
  ayirt edilemeyen cift (fark <= 1px): 4   ornek: 12/13  13/14  14/15
  en buyuk oturtma kaymasi: 2px
  gozle gorulur degisiklik gerektiren deger sayisi: 2
    12->14  13->14  14->14  15->14  16->16  18->16  20->20  24->24  32->32

toplam ogrenilecek deger: oncesi 31   sonrasi 16
azalma: 48.4%

Tutarsızlığın Görünmeyen Maliyeti

Envanterin ilk okuması sayı azaltmadır: 31 ayrı değer 16 ölçek adımına iniyor, yüzde 48.4 azalma. Bu, tek başına ilginç bir sayı değildir; asıl bulgu ikinci satırlardadır.

Köşe yarıçapı satırında beş ayrı değer kullanılmış ve bu beş değerin arasında beş çift ayırt edilebilirlik eşiğinin altında kalıyor. Yani 2, 3, 4 ve 6 piksellik yarıçaplar birbirinden ayırt edilemiyor. Dört ayrı karar verilmiş, hiçbiri görünür bir ayrım üretmiyor. Aynı satırda ölçeğe oturtmanın gözle görülür değişiklik gerektirdiği değer sayısı sıfır: beş değerin hepsi eşiğin içinde kayıyor.

Bu, tutarsızlığın nasıl bir maliyet ürettiğini gösterir. Maliyet görsel değildir — kimse 2 piksel ile 3 piksel arasındaki farkı fark etmez. Maliyet karar üzerindedir: her yeni öge için yarıçap değeri yeniden düşünülür, gözden geçirmelerde tartışılır, farklı ekiplerce farklı seçilir. Görünmeyen bir fark için ödenen görünür bir bedel.

Dört özelliğin toplamına bakıldığında 31 değerden yalnız 6’sı (3 + 0 + 1 + 2) ölçeğe oturtulurken gözle görülür biçimde değişiyor. Kalan 25 değer eşiğin içinde yerine oturuyor. Bu, ölçeğe geçişin sanıldığı kadar yıkıcı olmadığını söyler: tutarsızlığın büyük bölümü görünmeyen tutarsızlıktır ve karşılıksız ortadan kaldırılabilir.

Görünür değişiklik gerektiren 6 değer ise ayrı ele alınır. Aralık satırında 40 pikselin 32 piksele oturtulması 8 piksellik bir kaymadır ve düzeni değiştirir. Bu değerler için soru “ölçek yanlış mı” olur: 40 piksel gerçekten gerekliyse ölçeğe bir adım eklenir, gerekli değilse değer oturtulur. Ölçek bir dogma değil, istisnaları görünür kılan bir araçtır.

Tutarlılık Ne Zaman Bilerek Bozulur

Yinelenme kuralının istisnaları vardır ve istisnalar zararlı değildir; kayıt dışı istisnalar zararlıdır.

Katalog arayüzünde ödünç alma onayı ekranındaki düğme, sonuç listesindeki düğmelerden daha büyüktür. Bu bir tutarsızlık gibi görünür ama gerekçesi vardır: onay ekranındaki eylem geri alınması pahalı olan tek eylemdir ve ekranda başka hiçbir eylem yoktur. Boyut farkı burada bir ayrım üretir.

Ayırt edici ölçüt şudur: istisna, kuralın hangi koşulda geçersiz olduğunu söyleyebiliyorsa istisnadır; söyleyemiyorsa hatadır. “Onay ekranındaki tek eylem için daha büyük boyut kullanılır” bir koşuldur, denetlenebilir ve yinelenebilir. “Burada 40 piksel daha iyi duruyordu” bir koşul değildir.

Bu ayrım pratikte bir istisna kaydı gerektirir: kuraldan sapan her değerin yanında, sapmanın koşulu yazılı olur. Kayıt tutulmadığında iki şey birden olur — istisna çoğalır ve hiç kimse hangi değerin kural, hangisinin istisna olduğunu bilemez hâle gelir. Önceki derste optik hizalama düzeltmelerinin belgelenmesi istenmişti; aynı gerekçedir.

İç Tutarlılık ve Dış Tutarlılık

Tutarlılığın iki yönü vardır ve çatıştıklarında hangisinin kazanacağı önceden kararlaştırılır.

İç tutarlılık, arayüzün kendi kuralına uymasıdır. Katalogda seçili bir süzgeç her yerde aynı biçimde gösterilir.

Dış tutarlılık, arayüzün çalıştığı ortamın yerleşik kurallarına uymasıdır. Altı çizili mavi metnin bağlantı olması, onay eylemlerinin sağda durması, geri dönüşün sol üstte olması gibi kurallar hiçbir arayüzün icadı değildir; kullanıcı bunları başka yerlerden öğrenmiştir.

Çatışma çıktığında dış tutarlılık öncelik alır, çünkü kullanıcının önceki öğrenmesi arayüzün kendi öğrettiğinden daha büyüktür. Bir arayüz kendi içinde tutarlı biçimde bağlantıları altı çizisiz ve metinle aynı renkte gösterebilir; bu iç tutarlılıktır ve kullanıcının tıklanabilir ögeyi bulmasını yine de zorlaştırır.

Özet

• Yinelenme, aynı işlevi taşıyan ögelerin aynı biçimde çizilmesidir; değeri estetik değil bilişseldir, çünkü kullanıcının tahminlerini doğrulayarak öğrenmeyi biriktirir.
• Kural çifti simetrik değildir: aynı görünenin farklı davranması hataya, farklı davrananın aynı görünmesi yavaşlığa yol açar.
• Karar envanteri tutarlılığı sayıya bağlar; ölçülen arayüzde dört özellik 31 ayrı değer kullanıyor, bir ölçek bunu 16 adıma indiriyor.
• Tutarsızlığın büyük bölümü görünmez: köşe yarıçapındaki beş değerin beş çifti ayırt edilebilirlik eşiğinin altındadır, yani karar maliyeti ödenmiş ama görsel ayrım üretilmemiştir.
• Ölçeğe geçiş 31 değerden yalnız 6’sını gözle görülür biçimde değiştirir; kalanı bedelsiz yerine oturur, dolayısıyla tutarlılık borcu sanıldığından ucuz kapanır.
• İstisna, kuralın hangi koşulda geçersiz olduğunu söyleyebiliyorsa meşrudur ve kayda geçirilir; çatışmada dış tutarlılık iç tutarlılığı yener.

Sonraki Adım

Görsel ilkeler bölümü burada tamamlanıyor: ayrım, gruplama, vurgu, hizalama ve yinelenme. Son iki ders ortak bir eksiği gösterdi — hizalama eksenlerinin ve ölçek adımlarının nereden geleceği henüz belirlenmedi. Değerler tek tek seçildiği sürece envanter yeniden şişer. Sonraki bölüm bu boşluğu doldurur ve ızgara ile başlar: kapsayıcı genişliği, sütun sayısı, oluk ve kenar boşluğu arasındaki aritmetik ilişkiyi kurarak hizalama eksenlerini seçilen değil türetilen değerler hâline getirir.