Mikro Metin

Önceki ders simgenin metnin yerini tutmadığını gösterdi ve tartışmayı metne devretti. Arayüzdeki metin — düğme etiketleri, alan adları, boş durum cümleleri, hata iletileri — bu kursun her dersinde geçti ama hiçbirinde tasarım kararı olarak ele alınmadı. Metin, tasarım bittikten sonra doldurulacak bir yer değildir; düzenin en sert kısıtlarından biridir.

Mikro metin (microcopy), arayüzün işlevsel metinleridir: bir eylemi adlandıran, bir durumu bildiren, bir alanı açıklayan kısa parçalar. Bu ders üç sorusunu ele alır: etiket ne kadar yer kaplar, kırpma neyi bozar ve bir hata iletisi hangi parçalardan oluşur?

Etiket Bir Genişlik Bütçesidir

Bir düğmenin genişliği metninden türer. Aynı eylemi adlandıran farklı ifadeler farklı genişlikler üretir ve bu genişlikler eylem şeridine sığmak zorundadır.

// etiket.mjs — eylem etiketlerinin genisligi ve eylem seridine sigmasi

// Aday ailenin ilerleme genislikleri (em = 1000 birim); Satir Uzunlugu dersindeki tablo.
const G = {
  " ": 260, a: 556, b: 574, c: 500, ç: 500, d: 574, e: 545, f: 340, g: 574,
  ğ: 574, h: 560, i: 244, ı: 244, j: 244, k: 520, l: 244, m: 856, n: 560,
  o: 570, ö: 570, p: 574, r: 366, s: 480, ş: 480, t: 358, u: 560, ü: 560,
  v: 508, y: 508, z: 470, A: 660, B: 660, C: 686, Ç: 686, D: 720, E: 610,
  G: 740, H: 730, I: 280, İ: 280, K: 660, M: 890, N: 730, O: 760, Ö: 760,
  P: 610, R: 660, S: 620, Ş: 620, T: 620, U: 720, Ü: 720, V: 660, Y: 620,
  Z: 600, ",": 260, ".": 260, ":": 260, "-": 340, "'": 200,
};
const VARSAYILAN = 560;
const BOYUT = 16, DOLGU = 16, ARALIK = 8;

const genislik = (s) => ([...s].reduce((t, c) => t + (G[c] ?? VARSAYILAN), 0) / 1000) * BOYUT;
const dugmeGenisligi = (s) => genislik(s) + 2 * DOLGU;

const ADAYLAR = [
  ["uzun", ["Ödünç al", "Listeye ekle", "Rezervasyon oluştur"]],
  ["kisa", ["Ödünç al", "Listeye ekle", "Rezerve et"]],
  ["cok kisa", ["Al", "Ekle", "Rezerve et"]],
];

const SERIT = 360; // kayit ayrinti sutununun dar ekranda kalan genisligi

console.log("etiket kumesi  etiketler                                    dugme genislikleri        toplam  360 px");
for (const [ad, etiketler] of ADAYLAR) {
  const genislikler = etiketler.map(dugmeGenisligi);
  const toplam = genislikler.reduce((a, b) => a + b, 0) + ARALIK * (etiketler.length - 1);
  console.log(
    `${ad.padEnd(14)} ${etiketler.join(" / ").padEnd(44)} ${genislikler.map((v) => v.toFixed(0)).join(" ").padStart(22)} ${toplam.toFixed(0).padStart(7)}  ${toplam <= SERIT ? "sigiyor" : "TASIYOR"}`
  );
}

// Ayni eylemin farkli yazimlari arasindaki genislik farki
console.log("\neylem etiketi          metin genisligi  dugme genisligi");
for (const e of ["Ödünç al", "Ödünç alın", "Bu kaydı ödünç al", "Rezervasyon oluştur", "Rezerve et"]) {
  console.log(`${e.padEnd(22)} ${genislik(e).toFixed(1).padStart(15)} ${dugmeGenisligi(e).toFixed(1).padStart(16)}`);
}

// Esit genislikli dugme kullanilirsa: en genis etiket herkesi belirler
const kume = ADAYLAR[0][1];
const enGenis = Math.max(...kume.map(dugmeGenisligi));
const esitToplam = enGenis * kume.length + ARALIK * (kume.length - 1);
console.log(`\nesit genislikli dugme secilirse: her dugme ${enGenis.toFixed(0)} px, toplam ${esitToplam.toFixed(0)} px`);
console.log(`degisken genislikte toplam: ${(kume.map(dugmeGenisligi).reduce((a, b) => a + b, 0) + ARALIK * 2).toFixed(0)} px`);
console.log(`esit genislige gecmenin bedeli: ${(esitToplam - (kume.map(dugmeGenisligi).reduce((a, b) => a + b, 0) + ARALIK * 2)).toFixed(0)} px`);

etiket kumesi  etiketler                                    dugme genislikleri        toplam  360 px
uzun           Ödünç al / Listeye ekle / Rezervasyon oluştur             96 118 179     409  TASIYOR
kisa           Ödünç al / Listeye ekle / Rezerve et                     96 118 109     339  sigiyor
cok kisa       Al / Ekle / Rezerve et                                    46 63 109     234  sigiyor

eylem etiketi          metin genisligi  dugme genisligi
Ödünç al                          64.2             96.2
Ödünç alın                        77.1            109.1
Bu kaydı ödünç al                127.5            159.5
Rezervasyon oluştur              146.7            178.7
Rezerve et                        76.8            108.8

esit genislikli dugme secilirse: her dugme 179 px, toplam 552 px
degisken genislikte toplam: 409 px
esit genislige gecmenin bedeli: 143 px

Birinci tablo metnin bir düzen kısıtı olduğunu gösteriyor. “Rezervasyon oluştur” ifadesi tek başına 179 piksellik bir düğme üretiyor; üç düğme yan yana konduğunda toplam 409 piksele çıkıyor ve 360 piksellik şeride sığmıyor. Aynı üç eylem “Rezerve et” ifadesiyle 339 piksele iniyor ve sığıyor.

Buradan çıkan sonuç, kısaltmanın bir üslup tercihi değil bir ölçü kararı olmasıdır. Kısaltma yapılırken kaybedilecek bilgi de hesaba katılır: “Rezervasyon oluştur” ile “Rezerve et” aynı eylemi adlandırır, “Al” ise adlandırmaz — neyin alındığı bilgisi kaybolur.

İkinci tablo Türkçenin özgül bir kısıtını ölçüyor. “Ödünç al” 64.2 piksel, aynı eylemin nazik biçimi “Ödünç alın” 77.1 piksel, nesneli biçimi “Bu kaydı ödünç al” 127.5 piksel. Ekleme ve nesne, genişliği iki katına çıkarabiliyor. Eylem etiketlerinde emir kipinin kısa biçimi seçilir; bu bir nezaket kararı değil, 63 piksellik bir bütçe kararıdır.

Üçüncü blok bir düzen alışkanlığının bedelini veriyor. Eşit genişlikli düğmeler seçildiğinde en geniş etiket bütün düğmeleri belirliyor ve toplam 552 piksele, yani değişken genişliğin 1.35 katına çıkıyor. 143 piksellik bu fark dar ekranda karşılanamaz. Eşit genişlik, ancak etiketler zaten birbirine yakınsa ve şeritte yer varsa seçilir.

Kırpma Ayırt Ediciliği Yok Edebilir

Sonuç listesindeki kayıt başlıkları sütuna sığmadığında kırpılır. Kırpmanın görünür bedeli bilginin bir kısmının kaybolmasıdır; görünmeyen bedeli ise iki farklı kaydın aynı görünür hâle gelmesidir.

// kirpma.mjs — baslik kirpilmasi, on ek cakismasi ve hata iletisinin uc parcasi

const G = {
  " ": 260, a: 556, b: 574, c: 500, ç: 500, d: 574, e: 545, f: 340, g: 574,
  ğ: 574, h: 560, i: 244, ı: 244, j: 244, k: 520, l: 244, m: 856, n: 560,
  o: 570, ö: 570, p: 574, r: 366, s: 480, ş: 480, t: 358, u: 560, ü: 560,
  v: 508, y: 508, z: 470, A: 660, B: 660, C: 686, Ç: 686, D: 720, E: 610,
  G: 740, H: 730, I: 280, İ: 280, K: 660, M: 890, N: 730, O: 760, Ö: 760,
  P: 610, R: 660, S: 620, Ş: 620, T: 620, U: 720, Ü: 720, V: 660, Y: 620,
  Z: 600, ",": 260, ".": 260, ":": 260, "-": 340, "'": 200, "…": 800,
};
const VARSAYILAN = 560;
const genislik = (s, px) => ([...s].reduce((t, c) => t + (G[c] ?? VARSAYILAN), 0) / 1000) * px;

function kirp(s, px, sinir) {
  if (genislik(s, px) <= sinir) return s;
  const nokta = genislik("…", px);
  let sonuc = "";
  for (const c of s) {
    if (genislik(sonuc + c, px) + nokta > sinir) break;
    sonuc += c;
  }
  return sonuc + "…";
}

const BASLIKLAR = [
  "Işık ve Gölge",
  "Türkiye Cumhuriyeti Tarihi Araştırmaları Cilt I",
  "Türkiye Cumhuriyeti Tarihi Araştırmaları Cilt II",
  "Ağ Protokolleri El Kitabı",
];
const BOYUT = 20; // kayit basligi, olcekte 1. basamak

console.log(`kayit basligi boyutu: ${BOYUT} px`);
for (const sutun of [200, 280, 360, 520]) {
  const kirpilmis = BASLIKLAR.map((b) => kirp(b, BOYUT, sutun));
  const benzersiz = new Set(kirpilmis);
  console.log(`\nsutun ${sutun} px  (benzersiz baslik: ${benzersiz.size} / ${BASLIKLAR.length})`);
  for (let i = 0; i < BASLIKLAR.length; i++) {
    const k = kirpilmis[i];
    const cakisan = kirpilmis.filter((x) => x === k).length > 1;
    console.log(`  ${JSON.stringify(k).padEnd(52)} ${genislik(k, BOYUT).toFixed(0).padStart(4)} px  ${cakisan ? "CAKISIYOR" : k === BASLIKLAR[i] ? "tam" : "kirpildi"}`);
  }
}

// Hata iletisinin uc parcasi: ne oldu, neden, ne yapilmali
const PARCALAR = [
  { ad: "ne oldu", metin: "ISBN numarası doğrulanamadı" },
  { ad: "neden", metin: "Son basamak kontrol basamağıyla uyuşmuyor" },
  { ad: "ne yapilmali", metin: "Numarayı kitabın arka kapağından yeniden yazın" },
];
const ILETI_BOYUT = 13, SATIR_SINIRI = 525;
console.log("\nparca          metin genisligi (13 px)  tek satira sigar (525 px)");
let toplam = 0;
for (const p of PARCALAR) {
  const g = genislik(p.metin, ILETI_BOYUT);
  toplam += g;
  console.log(`${p.ad.padEnd(14)} ${g.toFixed(1).padStart(23)}  ${g <= SATIR_SINIRI ? "evet" : "hayir"}`);
}
const tumu = PARCALAR.map((p) => p.metin).join(". ");
console.log(`ucu birlestirilmis: ${genislik(tumu, ILETI_BOYUT).toFixed(1)} px, satir sayisi: ${Math.ceil(genislik(tumu, ILETI_BOYUT) / SATIR_SINIRI)}`);

kayit basligi boyutu: 20 px

sutun 200 px  (benzersiz baslik: 3 / 4)
  "Işık ve Gölge"                                       115 px  tam
  "Türkiye Cumhuriyeti…"                                198 px  CAKISIYOR
  "Türkiye Cumhuriyeti…"                                198 px  CAKISIYOR
  "Ağ Protokolleri El Ki…"                              196 px  kirpildi

sutun 280 px  (benzersiz baslik: 3 / 4)
  "Işık ve Gölge"                                       115 px  tam
  "Türkiye Cumhuriyeti Tarihi A…"                       274 px  CAKISIYOR
  "Türkiye Cumhuriyeti Tarihi A…"                       274 px  CAKISIYOR
  "Ağ Protokolleri El Kitabı"                           214 px  tam

sutun 360 px  (benzersiz baslik: 3 / 4)
  "Işık ve Gölge"                                       115 px  tam
  "Türkiye Cumhuriyeti Tarihi Araştırmal…"              354 px  CAKISIYOR
  "Türkiye Cumhuriyeti Tarihi Araştırmal…"              354 px  CAKISIYOR
  "Ağ Protokolleri El Kitabı"                           214 px  tam

sutun 520 px  (benzersiz baslik: 4 / 4)
  "Işık ve Gölge"                                       115 px  tam
  "Türkiye Cumhuriyeti Tarihi Araştırmaları Cilt I"     408 px  tam
  "Türkiye Cumhuriyeti Tarihi Araştırmaları Cilt II"    414 px  tam
  "Ağ Protokolleri El Kitabı"                           214 px  tam

parca          metin genisligi (13 px)  tek satira sigar (525 px)
ne oldu                          179.1  evet
neden                            269.7  evet
ne yapilmali                     284.4  evet
ucu birlestirilmis: 746.8 px, satir sayisi: 2

İki cilt, üç sütun genişliğinde de aynı kırpılmış başlığa iniyor. Dört kayıt ekranda üç benzersiz başlık olarak görünüyor; kullanıcı hangi cildi ödünç aldığını listeden okuyamıyor. Sütun 520 piksele çıktığında çakışma ortadan kalkıyor.

Bu bulgunun çözümü sütunu genişletmek değil. Genişletmek her zaman mümkün değildir ve başlıklar her zaman daha da uzayabilir. Çözüm, kırpmanın ayırt edici kısmı koruyacak biçimde yapılmasıdır: cilt bilgisi başlıktan ayrılıp ayrı bir üstveri alanına taşınır ve kırpılmayan bir alanda gösterilir. Kırpma kararının önkoşulu, hangi bilginin ayırt edici olduğunu bilmektir.

İkinci kural, kırpılan metnin tam hâline erişilebilir kalmasıdır. Kırpma bir sunum kararıdır; kaydın erişilebilir adı kırpılmamış başlığı taşımaya devam eder.

Hata İletisi Üç Parçadan Oluşur

Son tablo hata iletisinin yapısını ölçüyor. İyi bir ileti üç soruyu yanıtlar: ne oldu, neden oldu, ne yapılmalı. Üçü ayrı ayrı 525 piksellik satır sınırının altında; üçü tek bir cümlede birleştirildiğinde 746.8 piksele çıkıyor ve iki satır oluyor.

İki satır bir kusur değildir, ama parçaların tek bir metin bloğuna sıkıştırılması kusurdur. Ayrı tutulduklarında her parça farklı bir tipografik düzeye yerleştirilebilir: “ne oldu” kısmı ağırlıkla öne çıkarılır, “neden” ve “ne yapılmalı” ikincil metin düzeyinde durur. Kullanıcı sorunu tanıyorsa yalnız ilk parçayı okur; tanımıyorsa devam eder.

Üç parçanın hepsi her zaman gerekmez. “Neden” parçası, kullanıcının nedeni tahmin edemeyeceği durumlarda yazılır; ISBN’in kontrol basamağı böyle bir durumdur. “Ne yapılmalı” parçası ise Hata ve Uyarı Durumları dersinde konan kurala göre zorunludur: hata kurtarılabilirse kurtarma yolu iletide bulunur.

Metnin Değişmeyen Kuralları

Kursun through-line’ı boyunca biriken mikro metin kararları birkaç kuralda toplanır.

Eylem etiketi eylemi adlandırır. “Tamam” ve “Gönder” gibi genel sözcükler, bir onay kutusunda kullanıcının neyi onayladığını söylemez. “Ödünç al” ile “Vazgeç” çifti, hangi düğmenin ne yapacağını metnin kendisinden okutur. Bu, aynı zamanda kullanıcının iletiyi okumadan karar verebildiği tek kurulumdur.

Etiket arayüzün diliyle değil kullanıcının diliyle yazılır. “Kayıt oluştur” bir veri tabanı eylemidir; “Kitap ekle” kullanıcının yaptığı iştir. Katalog arayüzünün sözlüğü kütüphanenin sözlüğüdür.

Aynı şey her yerde aynı adla anılır. Bir yerde “ödünç alma”, başka bir yerde “emanet”, üçüncü bir yerde “çıkış” yazılırsa kullanıcı üç ayrı işlem olduğunu sanır. Yinelenme ve Tutarlılık dersinde görsel için konan kural metin için de geçerlidir.

Yer tutucu etiket değildir. Karşıtlık ve Erişilebilirlik dersinde hesaplanmıştı: yer tutucu metin kontrast eşiğini geçemediği için etiket işini yapamaz. Alanın adı alanın üstünde durur; yer tutucu yalnızca biçim örneği verir.

Özet

• Mikro metin bir düzen kısıtıdır; etiketin genişliği hesaplanır ve eylem şeridinin bütçesiyle karşılaştırılır.
• Türkçede ek ve nesne etiketi belirgin biçimde uzatır; eylem etiketlerinde kısa emir biçimi bir ölçü kararıdır.
• Eşit genişlikli düğmeler en geniş etikete bağlanır ve toplam genişliği belirgin biçimde artırır; dar şeritte karşılanamaz.
• Kırpma yalnızca bilgi kesmez, iki kaydı ekranda özdeşleştirebilir; ayırt edici bilgi kırpılan alandan çıkarılır ve kırpılan metnin tam hâli erişilebilir kalır.
• Hata iletisi ne olduğu, neden olduğu ve ne yapılması gerektiği parçalarından oluşur; parçalar ayrı tutulur ve ayrı tipografik düzeylere yerleştirilir.
• Etiket eylemi adlandırır, kullanıcının diliyle yazılır ve aynı şey her yerde aynı adla anılır.

Kurs Kapanışı

Bu kurs tek bir iddiayla açılmıştı: her görsel karar bir işlev üstlenir ve gerekçelendirilebiliyorsa tasarımdır. Yirmi iki ders boyunca kütüphane katalog arayüzü bu iddianın sınandığı yer oldu.

Dört konu birbirinin üzerine bindi. Görsel İlkeler dikkatin nasıl sıralandığını, ögelerin nasıl gruplandığını ve tutarlılığın öğrenilebilirliği nasıl ürettiğini kurdu. Düzen ve Aralık bu ilkeleri bir iskelete oturttu: ızgara, aralık ölçeği, yoğunluk kararı ve ekran boyutuyla girdi türünün getirdiği kısıtlar. Tipografi ve Renk iskeletin içine giren metni ve yüzeyi ölçülebilir hâle getirdi — yazı tipi ölçüleri, tipografik ölçek, satır uzunluğu, renk rolleri, kontrast eşikleri ve tema dönüşümü. Bileşen Durumları ise durağan görüntüyü zaman içinde davranan bir arayüze çevirdi: etkileşim durumları, bekleme, boşluk, hata, simge ve metin.

Kurs boyunca yinelenen üç kural her konuda yeniden ortaya çıktı. Birincisi, kritik ayrım en az iki kanalda ifade edilir; bu kural hiyerarşide boyut ve ağırlık, işlevsel renkte renk ve metin, bileşen durumlarında yüzey ve konum olarak göründü. İkincisi, karar bir sayıya bağlandığında tartışma denetime dönüşür; eşikler keyfî seçilse bile denetlenebilir oldukları için işe yaradılar. Üçüncüsü, bir sorunun en ucuz çözümü çoğu zaman öge eklemek değil, öge silmektir; düzey sayısını azaltmak, kenarlığı kaldırmak, düğmeyi devre dışı bırakmak yerine nedeni yazmak bu kuralın örnekleriydi.

Kursun kapsamadığı bir şey var ve sınırı orada çizilmelidir. Buradaki bütün kararlar “arayüz ne yapmalı” sorusunun görsel yanıtıydı. Arayüzün hangi görevleri desteklemesi gerektiği, kullanıcının o görevleri hangi sırayla yaptığı ve hangi bilgiye ne zaman ihtiyaç duyduğu bu kursun dışında kaldı. Katalog arayüzünde “arama alanı, sonuç listesi, kayıt ayrıntısı, ödünç alma” akışı baştan verilmişti; niçin bu akış olduğu sorulmadı.

M15/K02 Kullanıcı Deneyimi ve Davranış Tasarımı bu soruyla açılır. Kullanıcı araştırmasından tasarım kararına giden zinciri kurar: gözlem, görüşme ve anket yöntemlerinin ne zaman seçildiğini, gerçek veriye dayalı kullanıcı profillerinin nasıl kurulduğunu ve bilgi mimarisiyle akış tasarımının görev tamamlamayı nasıl kolaylaştırdığını ele alır. Bu kursun ölçtüğü şey bir ekranın içiydi; sonraki kursun ölçtüğü şey ekranlar arasındaki yol olacak.