Gezinme Modelleri

Kart gruplama beş grup ve grup adları üretti. Bu henüz bir gezinme değil. Grupların kaç tanesinin aynı anda gösterileceği, alt kırılımların kaç düzey ineceği ve kullanıcının bir ögeye kaç adımda ulaşacağı ayrı kararlardır ve birbirlerine bağlıdırlar: menü daraldıkça ağaç derinleşir, genişledikçe sığlaşır.

Bu ders üç gezinme modelini ayırır, sonra derinlik ile genişlik arasındaki ödünleşimi bir maliyet modeliyle hesaplar. Sonuç, “menüde yedi öge olmalı” türünden bir kural değil, hangi koşulda hangi genişliğin en ucuz olduğunu veren bir hesaptır.

Üç Model

Hiyerarşik gezinme (hierarchical navigation) ögeleri iç içe gruplara koyar. Kullanıcı kökten başlar, her düzeyde bir seçim yapar ve yaprağa iner. Katalog arayüzünün konu ağacı budur. Gücü, her düzeyde seçeneği azaltmasıdır; zayıflığı, hiyerarşinin tek bir sıra dayatmasıdır — önce konu mu, önce materyal türü mü sorusunun bir yanıtı olmalıdır ve kullanıcının zihnindeki sıra farklıysa bedel öder.

Düz gezinme (flat navigation) bütün ögeleri tek düzeyde gösterir. Derinlik yoktur, kullanıcı hiçbir zaman kaybolmaz, her şey bir adım uzaktadır. Ölçeklenmez: öge sayısı arttıkça tarama maliyeti doğrusal büyür.

Matris gezinme (matrix navigation) aynı ögelere birden çok bağımsız eksenden erişim verir. Katalog arayüzünde bir kayda hem konudan hem materyal türünden ulaşılabiliyorsa matris gezinme vardır. Gücü, kullanıcının kendi eksenini seçebilmesidir; bedeli, her eksenin ayrı ayrı bakımıdır.

Genişlik ile Derinlik Arasındaki Ödünleşim

Bir ağaçta uç düğüm sayısı sabitken menü genişliği ile derinlik ters orantılıdır: genişlik b, uç düğüm sayısı N ise derinlik yaklaşık log_b N olur. Genişlik arttıkça her düzeyde okunacak öge artar, derinlik azaldıkça sayfa değişimi ve yeniden yönelme azalır. Hangi genişliğin daha ucuz olduğu, bu iki maliyetin oranına bağlıdır.

// derinlik-genislik.mjs — menu genisligi ile derinlik arasindaki odunlesim

const N = 1000;      // erisilecek uc dugum sayisi
const SAYFA = 1.2;   // her duzeyde sayfa degisimi ve yeniden yonelme (saniye)
const OGE = 0.12;    // menudeki bir ogeyi okuma (saniye)

const derinlik = (b) => Math.ceil(Math.log(N) / Math.log(b));

console.log(`N = ${N} uc dugum, duzey basina ${SAYFA} sn yonelme, oge basina ${OGE} sn okuma`);
console.log("genislik  derinlik  taranan oge  toplam sure");
let enIyi = { b: 0, sure: Infinity };
for (const b of [2, 3, 4, 5, 6, 7, 8, 10, 12, 16, 20, 32, 64]) {
  const d = derinlik(b);
  const sure = d * (SAYFA + OGE * b);
  if (sure < enIyi.sure) enIyi = { b, sure };
  console.log(
    `${String(b).padStart(8)}  ${String(d).padStart(8)}  ${String(b * d).padStart(11)}  ${sure.toFixed(2).padStart(11)} sn`
  );
}
console.log(`\nen kucuk sure: genislik ${enIyi.b}, ${enIyi.sure.toFixed(2)} sn`);

// Yalnizca taranan oge sayisi olculseydi hangi genislik secilirdi
let enAzOge = { b: 0, oge: Infinity };
for (let b = 2; b <= 64; b++) {
  const t = b * derinlik(b);
  if (t < enAzOge.oge) enAzOge = { b, oge: t };
}
console.log(`yalnizca taranan oge olculseydi: genislik ${enAzOge.b}, ${enAzOge.oge} oge`);

// Yonelme maliyeti degistikce en iyi genislik nasil kayar
console.log("\nduzey basina yonelme  en iyi genislik  derinlik  sure");
for (const s of [0.0, 0.4, 1.2, 3.0, 6.0]) {
  let en = { b: 0, sure: Infinity, d: 0 };
  for (let b = 2; b <= 64; b++) {
    const d = derinlik(b), sure = d * (s + OGE * b);
    if (sure < en.sure) en = { b, sure, d };
  }
  console.log(
    `${s.toFixed(1).padStart(20)}  ${String(en.b).padStart(15)}  ${String(en.d).padStart(8)}  ${en.sure.toFixed(2)} sn`
  );
}

N = 1000 uc dugum, duzey basina 1.2 sn yonelme, oge basina 0.12 sn okuma
genislik  derinlik  taranan oge  toplam sure
       2        10           20        14.40 sn
       3         7           21        10.92 sn
       4         5           20         8.40 sn
       5         5           25         9.00 sn
       6         4           24         7.68 sn
       7         4           28         8.16 sn
       8         4           32         8.64 sn
      10         3           30         7.20 sn
      12         3           36         7.92 sn
      16         3           48         9.36 sn
      20         3           60        10.80 sn
      32         2           64        10.08 sn
      64         2          128        17.76 sn

en kucuk sure: genislik 10, 7.20 sn
yalnizca taranan oge olculseydi: genislik 2, 20 oge

duzey basina yonelme  en iyi genislik  derinlik  sure
                 0.0                2        10  2.40 sn
                 0.4                4         5  4.40 sn
                 1.2               10         3  7.20 sn
                 3.0               10         3  12.60 sn
                 6.0               32         2  19.68 sn

Üç sonuç okunuyor.

En iyi genişlik ölçüte bağlıdır. Yalnızca taranan öge sayısı sayılsaydı ikili menü kazanırdı: yirmi öge okunur ve bu, tablodaki en küçük değerdir. Ama on düzey inmek gerekir ve her düzeyin bir yönelme maliyeti vardır. Süre ölçüldüğünde ikili menü en pahalı seçeneklerden biri olur: 14.40 saniye.

Toplam süre yassı bir eğridir. Genişlik 6 ile 12 arasında süre 7.20 ile 7.92 saniye arasında kalıyor. Bu aralıkta seçim, hesabın değil başka kısıtların işidir: dar ekranda kaç ögenin sığdığı, grup adlarının uzunluğu, kart gruplamadan çıkan grupların doğal sayısı. Hesap kararı vermez, kararın hangi aralıkta serbest olduğunu söyler.

Yönelme pahalıysa menü genişler. Düzey başına yönelme sıfır olsaydı en iyi genişlik 2 olurdu; 1.2 saniyede 10’a, 6.0 saniyede 32’ye çıkıyor. Bunun tasarımdaki karşılığı doğrudan bir kuraldır: sayfa geçişi yavaşsa, geçiş sırasında yer imi kayboluyorsa ya da kullanıcı her düzeyde yeniden yön bulmak zorundaysa derin ağaç pahalıya gelir ve menü genişletilir. Tersine, düzey geçişi anlıksa ve bağlam korunuyorsa derin ağaç ucuzdur.

Bu, dördüncü derste ölçülen bir olguyla doğrudan bağlantılıdır: bizim arayüzümüzde geri dönüşte arama durumu korunmuyor. Durumun korunmaması yönelme maliyetini yükseltir, yönelme maliyetinin yükselmesi de derinliği pahalılaştırır. Aynı kusur iki ayrı yerde fatura çıkarıyor.

Kullanıcının Ekseni ile Menünün Ekseni

Hiyerarşinin dayattığı sıra ölçülebilir bir maliyet üretir. Katalog koleksiyonu iki eksenle sınıflanabiliyor: yirmi dört konu başlığı ve beş materyal türü.

// gezinme-modelleri.mjs — duz, hiyerarsik ve matris gezinmenin tarama maliyeti

const KONU = 24;   // konu basligi sayisi
const TUR = 5;     // materyal turu sayisi
const UC = KONU * TUR; // 120 uc dugum
const GERI = 1;    // yanlis eksende basladiktan sonra geri adim

// Ortalama tarama: aradigini bulana kadar listenin yarisi okunur
const duz = UC / 2;
const eslesen = KONU / 2 + TUR / 2;        // kullanicinin ekseni ile menunun ekseni ayni
const eslesmeyen = KONU + TUR / 2 + GERI;  // kullanici once tur dusunuyor, menu konu ile basliyor
const matris = KONU / 2 + TUR / 2;         // kullanici kendi ekseninden basliyor

console.log(`koleksiyon: ${KONU} konu x ${TUR} tur = ${UC} uc dugum`);
console.log("\nmodel              giris noktasi  uc dugume yol  ortalama taranan oge");
console.log(`${"duz".padEnd(18)} ${String(UC).padStart(13)} ${String(1).padStart(14)} ${duz.toFixed(1).padStart(21)}`);
console.log(`${"hiyerarsik".padEnd(18)} ${String(KONU).padStart(13)} ${String(1).padStart(14)} ${"degisken".padStart(21)}`);
console.log(`${"matris".padEnd(18)} ${String(KONU + TUR).padStart(13)} ${String(2).padStart(14)} ${matris.toFixed(1).padStart(21)}`);

console.log("\nhiyerarsik modelde kullanicinin ekseni menuyle eslesiyor mu");
console.log(`  eslesiyor   : ${eslesen.toFixed(1)} oge`);
console.log(`  eslesmiyor  : ${eslesmeyen.toFixed(1)} oge`);

console.log("\ntur ekseniyle dusunen oran  hiyerarsik  matris  fark");
for (const p of [0, 0.1, 0.2, 0.3, 0.4, 0.5]) {
  const h = eslesen * (1 - p) + eslesmeyen * p;
  console.log(
    `${p.toFixed(2).padStart(26)}  ${h.toFixed(2).padStart(10)}  ${matris.toFixed(2).padStart(6)}  ${(h - matris).toFixed(2)}`
  );
}

// Matrisin bedeli: iki eksen de her uc dugumu kapsamak zorunda
console.log("\nmatrisin bakim yuku");
console.log(`  konu ekseninde tutulacak baglanti : ${UC}`);
console.log(`  tur ekseninde tutulacak baglanti  : ${UC}`);
console.log(`  hiyerarside tutulacak baglanti    : ${UC}`);
console.log(`  matriste toplam                   : ${2 * UC}  (${((2 * UC) / UC).toFixed(1)} kat)`);

koleksiyon: 24 konu x 5 tur = 120 uc dugum

model              giris noktasi  uc dugume yol  ortalama taranan oge
duz                          120              1                  60.0
hiyerarsik                    24              1              degisken
matris                        29              2                  14.5

hiyerarsik modelde kullanicinin ekseni menuyle eslesiyor mu
  eslesiyor   : 14.5 oge
  eslesmiyor  : 27.5 oge

tur ekseniyle dusunen oran  hiyerarsik  matris  fark
                      0.00       14.50   14.50  0.00
                      0.10       15.80   14.50  1.30
                      0.20       17.10   14.50  2.60
                      0.30       18.40   14.50  3.90
                      0.40       19.70   14.50  5.20
                      0.50       21.00   14.50  6.50

matrisin bakim yuku
  konu ekseninde tutulacak baglanti : 120
  tur ekseninde tutulacak baglanti  : 120
  hiyerarside tutulacak baglanti    : 120
  matriste toplam                   : 240  (2.0 kat)

Düz gezinme yüz yirmi ögede ortalama altmış öge taratıyor; hiyerarşi ve matris on dört buçuk. Bu, gruplamanın kendisinin dörtte birden fazla tasarruf ettiğini gösterir ve düz gezinmenin sınırını verir: birkaç düzine ögeye kadar iyidir, yüzlerce ögede değildir.

Hiyerarşi ile matris arasındaki fark, kullanıcıların ne kadarının menünün ekseniyle düşündüğüne bağlı. Herkes konudan düşünüyorsa fark sıfır. Beşte biri materyal türünden düşünüyorsa hiyerarşi 2.6 öge daha pahalı; yarısı düşünüyorsa 6.5 öge. Matrisin kazancı sabit bir üstünlük değil, eksen uyuşmazlığının oranıyla doğru orantılı bir kazançtır.

Bu oran tahmin edilmez, ölçülür. Önceki dersteki kart gruplama verisi tam olarak bunun içindir: katılımcılar kartları hangi eksende grupladıysa, gezinmenin birincil ekseni odur.

Matrisin bedeli son bloktadır: her uç düğüm iki eksende de yer aldığı için tutulacak bağlantı sayısı iki katına çıkar. Bu, çalışma zamanındaki maliyet değil bakım maliyetidir. Yeni bir konu başlığı eklendiğinde iki eksenin de güncellenmesi gerekir ve eksenlerden biri güncel kalmazsa aynı içerik iki farklı yerde iki farklı gerçeklik gösterir. Matris gezinme, iki gezinmeyi tutarlı tutmayı üstlenebilen ekipler içindir.

Modelin Sınırları

Yukarıdaki hesaplar iki varsayıma dayanıyor ve ikisi de açıkça yazılmalıdır.

Birincisi, kullanıcının menüyü baştan sona tarayıp doğru ögeyi tanıdığı varsayılıyor. Gerçekte kullanıcı bazen doğru ögeyi tanımaz: “kurumlar arası ödünç” başlığını arayan kişi “ödünç işlemleri” grubuna girmeyi düşünmeyebilir. Bu durumda maliyet tarama değil, yanlış dala girip geri dönme maliyetidir ve modelde yoktur.

İkincisi, arama kutusu hesaba katılmadı. Aramanın var olduğu bir arayüzde gezinme tek yol değildir; kullanıcıların bir bölümü hiçbir menüye girmeden arar. Gezinme yapısı yine de gerekir: arama ne aradığını bilene yarar, gezinme ne aradığını bilmeyene. İkinci derste kurulan “konu tarayan” profili tam olarak ikinci gruptadır.

Özet

• Hiyerarşik gezinme her düzeyde seçeneği azaltır ama tek bir sıra dayatır; düz gezinme ölçeklenmez; matris gezinme birden çok eksenden erişim verir.
• Genişlik ile derinlik ters orantılıdır ve en iyi genişlik ölçüte bağlıdır: taranan öge sayısı en aza indirilecekse dar menü, süre en aza indirilecekse geniş menü kazanır.
• Örnek modelde toplam süre genişlik 6 ile 12 arasında yassı kalıyor; hesap kararı vermez, kararın hangi aralıkta serbest olduğunu söyler.
• Düzey başına yönelme maliyeti arttıkça en iyi genişlik büyür; durumun korunmaması gibi kusurlar yönelmeyi pahalılaştırarak derin ağaçları da pahalılaştırır.
• Matrisin hiyerarşiye üstünlüğü, kullanıcıların ne kadarının menünün ekseni dışında düşündüğüyle orantılıdır ve bedeli tutulacak bağlantı sayısının iki katına çıkmasıdır.

Sonraki Adım

Gezinme yapısı ögelere nasıl ulaşıldığını anlatıyor, ama bir görevin içindeki kararları anlatmıyor. Ödünç alma eylemi tek bir tıklama değildir: üyelik doğrulanır, kaydın durumu denetlenir, ödünçteyse rezervasyon önerilir, üyenin gecikmiş kitabı varsa işlem durur. Bu dallanmalar yazıyla anlatıldığında hangi durumun hangi duruma bağlandığı kaybolur. Sonraki ders akışı bir çizge olarak kurar ve iki kusuru hesapla arar: başlangıçtan erişilemeyen durum ve çıkışı olmayan düğüm.