--- title: 'Gezinme Modelleri' source: 'https://academia.sh/tr/kurslar/kullanici-deneyimi/gezinme-modelleri' course: 'Kullanıcı Deneyimi ve Davranış Tasarımı' language: tr updated: '2026-08-17T18:09:38+00:00' license: 'CC BY-SA 4.0' --- # Gezinme Modelleri Hiyerarşik, düz ve matris gezinmenin karşılaştırılması; menü genişliği ile derinlik arasındaki ödünleşimin hesaplanması ve yönelme maliyetinin en iyi genişliği nasıl kaydırdığı. 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. ```js // 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ü. ```js // 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.