Tasarım Sistemi Nedir

Buraya kadarki iki kurs katalog arayüzünün kararlarını tek tek doğru vermeyi öğretti. Arayüz Tasarımının Temelleri kursu ızgarayı, aralık ölçeğini, tipografik ölçeği ve renk rollerini kurdu; Kullanıcı Deneyimi ve Davranış Tasarımı kursu bu kararların hangi araştırma bulgusuna dayandığını ve sonuçlarının nasıl ölçüleceğini gösterdi. Her iki kursta da birim tek bir karardı: bu boşluk kaç piksel, bu akış kaç adım, bu değişiklik görev süresini düşürdü mü.

Bir karar doğru verilebilir. Aynı kararın ikinci, onuncu ve yüzüncü kez aynı biçimde verilmesi ayrı bir sorundur ve tek tek doğruluk bu sorunu çözmez. Katalog arayüzü artık dört ekrandan ibaret değil: yönetim paneli, üye profili, raf yerleşim ekranı ve mobil uygulama aynı kurumun ürünleri olarak aynı dili konuşmak zorunda. Bu ders, tekrarın kendisini bir tasarım nesnesi hâline getiren yapıyı tanımlar ve onu en sık karıştırıldığı şeyden — bileşen kütüphanesinden — ayırır.

Sistem, Kararların Adlandırılmış Hâlidir

Tasarım sistemi (design system), bir kurumun arayüz kararlarını yeniden verilmek yerine başvurulacak biçimde adlandıran, belgeleyen ve dağıtan yapıdır. Tanımın üç yüklemi de zorunludur ve birbirinin yerine geçmez.

Adlandırma kararı bir addan okunabilir kılar. “Ödünç al düğmesinin zemini nötr 600 üzerine ana 600” bir karardır; --eylem-ana bir addır. Ad kullanıldığı sürece karar yeniden verilmez, başvurulur.

Belgeleme kararın gerekçesini adla birlikte taşır. Renk Sistemi dersinde birincil ve ikincil eylemin ton farkıyla ayrılamayacağı hesapla gösterilmişti. Bu bulgu yazılmazsa, altı ay sonra bir başkası ikincil eyleme mor bir dolgu verir ve aynı hesabı baştan yapmak zorunda kalır.

Dağıtım kararı kullanılabilir kılar. Bir tasarım dosyasında duran, kimsenin kuramadığı bir ölçek karar değil temennidir.

Bileşen kütüphanesi (component library) ise bu yapının yalnız bir teslim biçimidir: yeniden kullanılabilir arayüz parçalarının paketlenmiş hâli. Kütüphane sistemin çıktısıdır; sistemin kendisi değildir. Aradaki farkı sezmenin en hızlı yolu, arayüzün gerçekten kaç karar taşıdığını saymaktır.

Kararlar Dört Katmanda Durur

Katalog arayüzünün dört ekranında verilmiş kararlar dört katmana ayrılır. Değer katmanı hangi ham büyüklüğün kullanılacağını söyler: boyut basamağı, renk rolü, boşluk adımı. Bileşen katmanı tek bir parçanın iç yapısını tanımlar: düğmenin iç boşluğu, metin alanının kenarlığı. Kalıp katmanı birden çok bileşenin bir arada nasıl dizildiğini belirler: süzgeç paneliyle sonuç listesinin oranı, form alanı ile etiketinin ilişkisi. Kural katmanı ise her yerde geçerli davranış sözleşmeleridir: yıkıcı eylem onay ister, odak göstergesi kaldırılamaz.

Bu ayrımın burada kullanılan adı arayüz kalıbı (interface pattern) ile karışmasın diye netleştirilir: kalıp, bileşenlerin arasındaki dizilişin adıdır; tek bir bileşenin iç yapısı bileşen katmanına aittir.

Aşağıdaki program bu dört katmanı sayar ve bir bileşen kütüphanesinin hangilerini yanıtladığını hesaplar.

// kapsam.mjs — bir bilesen kutuphanesinin katalog arayuzundeki kararlarin kacini yanitladigi

// Katalog arayuzunun dort ekraninda fiilen verilmis kararlar.
// katman: deger  -> hangi ham degerin kullanilacagi (renk, aralik, boyut)
// katman: bilesen -> tek bir bilesenin ic yapisi
// katman: kalip   -> birden cok bilesenin bir arada nasil dizildigi
// katman: kural   -> her yerde gecerli davranis kurali
const KARARLAR = [
  { ad: "govde metni boyutu", katman: "deger", ekran: ["arama", "sonuc", "ayrinti", "onay"] },
  { ad: "baslik boyut basamagi", katman: "deger", ekran: ["arama", "sonuc", "ayrinti", "onay"] },
  { ad: "birincil eylem zemini", katman: "deger", ekran: ["arama", "sonuc", "ayrinti", "onay"] },
  { ad: "kenarlik rengi", katman: "deger", ekran: ["arama", "sonuc", "ayrinti"] },
  { ad: "kart ic boslugu", katman: "deger", ekran: ["sonuc", "ayrinti"] },
  { ad: "grup ici bosluk", katman: "deger", ekran: ["arama", "sonuc", "ayrinti", "onay"] },
  { ad: "kose yaricapi", katman: "deger", ekran: ["arama", "sonuc", "ayrinti", "onay"] },
  { ad: "odak halkasi kalinligi", katman: "deger", ekran: ["arama", "sonuc", "ayrinti", "onay"] },

  { ad: "dugme ic yapisi", katman: "bilesen", ekran: ["arama", "sonuc", "ayrinti", "onay"] },
  { ad: "metin alani ic yapisi", katman: "bilesen", ekran: ["arama"] },
  { ad: "kayit karti ic yapisi", katman: "bilesen", ekran: ["sonuc"] },
  { ad: "etiket ic yapisi", katman: "bilesen", ekran: ["sonuc", "ayrinti"] },
  { ad: "acilir katman ic yapisi", katman: "bilesen", ekran: ["onay"] },
  { ad: "sayfalama ic yapisi", katman: "bilesen", ekran: ["sonuc"] },

  { ad: "suzgec paneli ile liste orani", katman: "kalip", ekran: ["sonuc"] },
  { ad: "bos sonuc ekrani dizilisi", katman: "kalip", ekran: ["sonuc"] },
  { ad: "form alani ve etiket dizilisi", katman: "kalip", ekran: ["arama", "onay"] },
  { ad: "onay eyleminin yeri", katman: "kalip", ekran: ["onay"] },
  { ad: "kayit ustverisinin sirasi", katman: "kalip", ekran: ["sonuc", "ayrinti"] },

  { ad: "yikici eylem onay ister", katman: "kural", ekran: ["ayrinti", "onay"] },
  { ad: "odak gostergesi kaldirilamaz", katman: "kural", ekran: ["arama", "sonuc", "ayrinti", "onay"] },
  { ad: "hata iletisi alanin altinda", katman: "kural", ekran: ["arama", "onay"] },
  { ad: "yukleme durumu yer tutar", katman: "kural", ekran: ["sonuc", "ayrinti"] },
  { ad: "tarih bicimi", katman: "kural", ekran: ["sonuc", "ayrinti", "onay"] },
];

// Bir bilesen kutuphanesi yalniz "bilesen" katmanini paketler.
const KUTUPHANE_KATMANI = new Set(["bilesen"]);

const katmanlar = ["deger", "bilesen", "kalip", "kural"];
console.log("katman   karar sayisi  toplam kullanim  kutuphane yanitliyor mu");
let toplamKarar = 0;
let toplamKullanim = 0;
let kapsanan = 0;
for (const k of katmanlar) {
  const grup = KARARLAR.filter((d) => d.katman === k);
  const kullanim = grup.reduce((t, d) => t + d.ekran.length, 0);
  toplamKarar += grup.length;
  toplamKullanim += kullanim;
  if (KUTUPHANE_KATMANI.has(k)) kapsanan += grup.length;
  console.log(
    `${k.padEnd(8)} ${String(grup.length).padStart(12)} ${String(kullanim).padStart(16)}  ${KUTUPHANE_KATMANI.has(k) ? "evet" : "hayir"}`
  );
}
console.log(`toplam   ${String(toplamKarar).padStart(12)} ${String(toplamKullanim).padStart(16)}`);
console.log(`kutuphanenin kapsadigi karar orani: ${((100 * kapsanan) / toplamKarar).toFixed(1)}%`);

// Deger katmani adlandirilmadiginda: her deger, onu kullanan her bilesende yeniden yazilir.
const BILESENLER = KARARLAR.filter((d) => d.katman === "bilesen");
const degerKullanimi = {
  "govde metni boyutu": ["dugme ic yapisi", "metin alani ic yapisi", "kayit karti ic yapisi", "etiket ic yapisi", "acilir katman ic yapisi", "sayfalama ic yapisi"],
  "baslik boyut basamagi": ["kayit karti ic yapisi", "acilir katman ic yapisi"],
  "birincil eylem zemini": ["dugme ic yapisi", "acilir katman ic yapisi"],
  "kenarlik rengi": ["metin alani ic yapisi", "kayit karti ic yapisi", "etiket ic yapisi", "acilir katman ic yapisi"],
  "kart ic boslugu": ["kayit karti ic yapisi", "acilir katman ic yapisi"],
  "grup ici bosluk": ["dugme ic yapisi", "metin alani ic yapisi", "kayit karti ic yapisi", "etiket ic yapisi", "acilir katman ic yapisi", "sayfalama ic yapisi"],
  "kose yaricapi": ["dugme ic yapisi", "metin alani ic yapisi", "kayit karti ic yapisi", "etiket ic yapisi", "acilir katman ic yapisi"],
  "odak halkasi kalinligi": ["dugme ic yapisi", "metin alani ic yapisi", "kayit karti ic yapisi", "sayfalama ic yapisi"],
};

console.log("\ndeger karari             adlandirilmamis: kac bilesen  adlandirilmis: kac yer");
let adsiz = 0;
for (const [ad, kullananlar] of Object.entries(degerKullanimi)) {
  adsiz += kullananlar.length;
  console.log(`${ad.padEnd(24)} ${String(kullananlar.length).padStart(25)} ${"1".padStart(23)}`);
}
console.log(`${"toplam".padEnd(24)} ${String(adsiz).padStart(25)} ${String(Object.keys(degerKullanimi).length).padStart(23)}`);
console.log(`bilesen sayisi: ${BILESENLER.length}`);
console.log(`degisiklik yeri orani: ${(adsiz / Object.keys(degerKullanimi).length).toFixed(2)} kat`);

console.log("\ntek bir kararin degismesi (ornek: kose yaricapi 4 -> 8)");
console.log(`  adlandirilmamis: ${degerKullanimi["kose yaricapi"].length} bilesen dosyasi degisir`);
console.log("  adlandirilmis  : 1 belirtec tanimi degisir, bilesen dosyalari degismez");

katman   karar sayisi  toplam kullanim  kutuphane yanitliyor mu
deger               8               29  hayir
bilesen             6               10  evet
kalip               5                7  hayir
kural               5               13  hayir
toplam             24               59
kutuphanenin kapsadigi karar orani: 25.0%

deger karari             adlandirilmamis: kac bilesen  adlandirilmis: kac yer
govde metni boyutu                               6                       1
baslik boyut basamagi                            2                       1
birincil eylem zemini                            2                       1
kenarlik rengi                                   4                       1
kart ic boslugu                                  2                       1
grup ici bosluk                                  6                       1
kose yaricapi                                    5                       1
odak halkasi kalinligi                           4                       1
toplam                                          31                       8
bilesen sayisi: 6
degisiklik yeri orani: 3.88 kat

tek bir kararin degismesi (ornek: kose yaricapi 4 -> 8)
  adlandirilmamis: 5 bilesen dosyasi degisir
  adlandirilmis  : 1 belirtec tanimi degisir, bilesen dosyalari degismez

Kütüphane Kararların Dörtte Birini Kapsar

İlk tablo dersin ana bulgusunu veriyor. Yirmi dört karardan altısı bileşen katmanında; yüzde 25. Bir bileşen kütüphanesi eksiksiz teslim edilse bile, arayüzün kararlarının dörtte üçü hâlâ her ekranda yeniden verilir.

Bu oranın kendisi de yanıltıcı biçimde iyimser. İkinci sütun kullanım sayılarını gösteriyor: altı bileşen toplam 10 kez kullanılıyor, sekiz değer kararı ise 29 kez. Değer katmanı hem daha az sayıda hem de daha sık başvurulan kararlardan oluşur. Sık başvurulan bir kararın tek yerde tutulmaması, tutarsızlığın en verimli üreticisidir.

Kural katmanı ayrı bir uyarı taşır. Beş kural 13 kez uygulanıyor ve hiçbiri bir bileşen dosyasında yaşamıyor. “Yıkıcı eylem onay ister” kuralı bir düğmenin içine yazılamaz; düğme, kendisine tıklandığında ne olacağını bilmez. Bu kurallar yalnız belge olarak var olabilir ve belgelenmediklerinde her ekranda yeniden keşfedilirler.

Adlandırma Değişiklik Yerlerini Teke İndirir

İkinci tablo, değer katmanının adlandırılmamasının maliyetini sayıyor. Sekiz değer kararı, altı bileşenin içinde toplam 31 ayrı yerde geçiyor. Aynı sekiz karar adlandırıldığında tanım sayısı 8’e iner: değişiklik yeri sayısı 3.88 kat azalır.

Son blok bunu tek bir değişiklik üzerinden somutlaştırıyor. Köşe yarıçapının 4 pikselden 8 piksele çıkarılması, değer adlandırılmamışsa beş ayrı bileşen dosyasında beş ayrı düzenleme demektir. Bu düzenlemelerin hepsinin bulunması gerekir; bulunamayan biri arayüzde tek başına kalır ve tutarsızlığı üretir. Ad kullanıldığında değişen yer tektir ve bileşenler değişikliği kendiliğinden devralır.

Bu, Özel Özellikler dersinde kurulan mekanizmanın sistem düzeyindeki gerekçesidir. Orada bileşenin dışarıya açtığı ayar noktaları özel özellik olarak tanımlanıyordu; buradaki hesap, o mimarinin neden bir kolaylık değil bir zorunluluk olduğunu gösteriyor.

Sistemin Kütüphaneden Beş Farkı

Sayılar tanımı keskinleştiriyor. Bir bileşen kütüphanesinin tasarım sistemine dönüşmesi için beş şey daha gerekir.

Değerler adlandırılır. Bileşenlerin okuduğu sayılar ve renkler ayrı bir katmanda, bileşenlerden bağımsız olarak tanımlanır. Bu katmanın adı tasarım belirteci (design token) olacak ve sonraki konunun tamamını kaplayacak.

Kalıplar yazılır. İki bileşenin yan yana nasıl duracağı bileşenlerin içine yazılamaz; ayrı bir belge olarak durur.

Kurallar sözleşme hâline gelir. Her yerde geçerli davranışlar, ihlal edildiğinde gösterilebilir bir metne dayanmalıdır.

Karar gerekçeleri saklanır. Bir eşiğin neden 4.5 olduğu, bir oranın neden 1.25 seçildiği kararla birlikte durur. Gerekçesiz karar, bir sonraki gözden geçirmede yeniden tartışılır.

Değişim yönetilir. Bir belirtecin değeri değiştiğinde onu kullanan her yerin etkilendiğini gördük; bu, gücün kendisidir ve aynı zamanda riskin kendisidir. Sürümleme, katkı süreci ve yönetişim bu riskin karşılığıdır.

Sistem Bir Ürün Değildir, Bir Ürün Ekidir

Son bir ayrım gerekir. Tasarım sistemi kendi başına kullanıcıya değer üretmez; ürünler üretir. Sistemin ölçüsü kendi eksiksizliği değil, ürünlerin ondan ne kadar yararlandığıdır.

Bunun pratik sonucu, sistemin kendi başarısını benimseme (adoption) üzerinden ölçmesidir: kaç ürün, kaç ekran, kararların yüzde kaçı sistemden geliyor. Yüzde 100 eksiksiz ama hiçbir üründe kullanılmayan bir sistem, yüzde 40 eksik ama her ekranda kullanılan bir sistemden daha başarısızdır. Benimseme ölçümü bu kursun son konusunda ayrıca ele alınır; burada gerekli olan, sistemin varlık gerekçesinin kendisinde değil kullanımında olduğudur.

Bu ayrım kapsam kararını da belirler. Sistem, ürünlerin gerçekten tekrarladığı kararları kapsar; tek bir ekranda bir kez geçen bir düzen, sisteme değil o ekrana aittir. Kapsamın nasıl çizileceği bir sonraki dersin konusu olan gerekçelendirme hesabına bağlıdır.

Özet

• Tasarım sistemi, tekrarlanan arayüz kararlarının adlandırılmış, belgelenmiş ve dağıtılmış hâlidir; bileşen kütüphanesi bu yapının yalnız bir teslim biçimidir.
• Arayüz kararları dört katmanda durur: değer, bileşen, kalıp ve kural. Bileşen kütüphanesi yalnız bir katmanı paketler.
• Ölçülen arayüzde 24 karardan 6’sı bileşen katmanındadır; kütüphanenin kapsadığı oran yüzde 25’tir ve değer katmanı hem daha az kararla hem daha çok kullanımla en sık başvurulan katmandır.
• Adlandırılmamış sekiz değer kararı altı bileşenin içinde 31 yerde geçer; adlandırma değişiklik yeri sayısını 3.88 kat azaltır.
• Kural katmanı hiçbir bileşen dosyasında yaşayamaz; yalnız belge olarak var olur ve belgelenmediğinde her ekranda yeniden keşfedilir.
• Sistemin ölçüsü kendi eksiksizliği değil ürünlerdeki benimsenmesidir; kapsam, ürünlerin gerçekten tekrarladığı kararlarla sınırlanır.

Sonraki Adım

Bu ders bir sistemin ne olduğunu tanımladı ve kütüphanenin kapsamadığı alanı ölçtü. Ancak kapsanmayan bir alanın varlığı, o alanı kapatmanın karlı olduğunu kanıtlamaz. Sistem kurmak bir maliyettir: belirteçlerin tanımlanması, bileşenlerin yazılması, belgenin sürdürülmesi ve mevcut ekranların geçirilmesi zaman ister. Sonraki ders bu maliyeti ekran sayısı, ekip sayısı ve değişiklik sıklığı cinsinden hesaplar; sistemli ve sistemsiz gidişatın hangi ekran sayısında kesiştiğini bulur ve sistemin gerekçelendirilemediği durumları da adlandırır.