Web Sitesi Navigasyonu: Menünüz Dönüşümü Nasıl Belirler

Menünüzü hemen anlamayan bir ziyaretçi geri tuşuna basmaz. Sekmeyi kapatır. Sessizce, şikâyet etmeden, sonsuza dek.

Web sitesi navigasyonu tüm web tasarımının en hafife alınan unsurudur. Nadiren kendi brief'ini, neredeyse hiç kendi bütçesini alır – ama hero bölümü ilgisini çektikten sonra kullanıcının bilinçli olarak kullandığı ilk şeydir. Hannover'deki Storyable ekibi olarak neredeyse her site denetiminde aynı tabloyu görüyoruz: güzel görünüm, güçlü metinler ve ziyaretçiyi çıkmaza sürükleyen bir menü. Bu rehberde sana, kullanıcıyı şaşırtmak yerine yönlendiren bir web sitesi navigasyonunun nasıl göründüğünü anlatıyoruz – her web tasarım projemizde kullandığımız desenler, bilgi mimarisi ve SEO etkileriyle.

Web Sitesi Navigasyonu Neden Kalmak ile Ayrılmak Arasında Karar Verir

Navigasyon bir tasarım ayrıntısı değildir. Her ziyaretçinin bilinçaltında sorduğu tek soruya verilen yanıttır: "Doğru yerde miyim – ve hedefime nasıl ulaşırım?" Bu soruyu saniyeler içinde yanıtlamazsan ziyaretçi gitmiştir.

Her menüyü iki psikolojik yasa yönetir:

• Hick Yasası: Bir kararın süresi, seçeneklerin sayısı ve karmaşıklığıyla artar. On iki menü maddesi altı maddenin iki katı kadar kötü değildir – üstel olarak daha kötüdür
• Miller Yasası: İnsan kısa süreli belleği yaklaşık 7±2 birim alır. Yedi ana maddenin üzerinde kullanıcıyı taramaktan okumaya zorlarsın – ve okumak, harcamak istemediği bir enerji gerektirir

Bu teori değil. Isı haritası analizlerimizde tutarlı biçimde şunu görüyoruz: sekizinci menü maddesinden itibaren her maddeye tıklama oranı düşüyor, çünkü kullanıcı menüyü "çok fazla" diye kapatıyor. Ziyaretçilerin sayfaları nasıl taradığını anlamak isteyenler, mekaniği F-Pattern, Z-Pattern ve Gutenberg diyagramı yazımızda bulur – göz sayfada rastgele zıplamaz.

Navigasyon ayrıca doğrudan dönüşümle bağlıdır. Ziyaretçinin "meraklı"dan "talep gönderildi"ye yürüdüğü patikadır. Her dolambaç, her çıkmaz, her belirsiz etiket metni, onun ayrıldığı bir noktadır. Bunun ardındaki psikolojik kaldıraçları psikolojik web tasarımı rehberinde daha derinlemesine okuyabilirsin.

Navigasyon Desenleri Karşılaştırması

"En iyi" navigasyon deseni yoktur – yalnızca sayfa tipine ve içerik miktarına uygun olan vardır. İşte en önemlileri doğrudan karşılaştırmalı:

Mega Menü mü, Basit Açılır Menü mü?

Klasik bir açılır menü, hover'da dar bir alt madde listesi gösterir. Bu yaklaşık sekiz alt sayfaya kadar işe yarar. Üzerinde liste fazla uzar, kullanıcı kaydırmak veya iç içe seviyelerde tıklamak zorunda kalır – ve yönünü kaybeder.

Bir mega menü bunu çözer: açıldığında tüm alt kategorileri aynı anda gösteren büyük, çok sütunlu bir panel, çoğunlukla gruplanmış ve küçük ikonlar veya önizleme görselleriyle. Onlarca kategorisi olan e-ticaret siteleri için pratikte zorunludur – kullanıcı tüm ürün yelpazesini tek bakışta görür, açılır listelerde gezinmek yerine. Pratik kural: bölüm başına 15 alt sayfadan itibaren mega menü mantıklıdır, altında gereğinden büyük kalır.

Hamburger Menü – Efsane ve Gerçek

Üç çizgili ikon web tasarımının en çok tartışılan bileşenidir. Gerçek ortada bir yerdedir:

• Mobilde: tamamen meşru. Öğrenilmiş bir standarttır ve yer açık bir menü çubuğuna izin vermez. Bugün kimse hamburger ikonundan şaşırmıyor
• Masaüstünde: genellikle bir hata. Gizlenmiş navigasyon, Nielsen Norman Group'a göre görünür olana kıyasla belirgin biçimde daha az kullanılır. 1.440 px'lik bir monitörde altı açık menü maddesi için yer varsa, onları bir tıklamanın arkasına saklama

Masaüstünde "minimalist görünsün" diye her şeyi hamburger menüye tıkanlar, görünümü bulunabilirlikle takas eder – ve kaybeder.

Sabit Navigasyonu Doğru Dozda Kullanmak

Sabit navigasyon kaydırma sırasında üstte yapışık kalır. Uzun sayfalarda bu gerçek bir dönüşüm kaldıracıdır: kullanıcı başka bir bölüme veya CTA'ya ulaşmak için asla yukarı dönmek zorunda kalmaz. Üç kuralı var:

1. Yüksekliği sınırla: Viewport yüksekliğinin en fazla %10–15'i, mobilde daha az – aksi halde çubuk içeriği yutar
2. Yukarı kaydırırken göster: Modern davranış, navigasyonu yalnızca kullanıcı yukarı kaydırdığında (gezinmek istiyor) gösterir ve aşağı kaydırırken (okumak istiyor) gizler
3. Kaydırmada gölge veya arka plan: Sabit çubuk altındaki içerikten temiz biçimde ayrılsın diye

Arama: Büyük Sitelerde Gizli Ana Navigasyon

Yüzlerce sayfası olan siteler için arama kutusu lüks değil, ikinci bir ana navigasyondur. Kullanıcıların önemli bir kısmı menüde gezinmek yerine doğrudan ne aradığını yazar. Bir e-ticaret sitesinde site içi aramayı kullanan ziyaretçiler, çoğu analizde ortalamanın belirgin biçimde üzerinde dönüşür – çünkü satın alma niyetleri nettir. Bu yüzden arama kutusunu büyük sitelerde header'da görünür tut, gizleme. Otomatik tamamlama, yazım hatası toleransı ve "sonuç yok" durumunda alternatif öneriler, aramayı gerçek bir navigasyon aracına çevirir. Küçük sitelerde ise arama gereksizdir – beş sayfalık bir sitede aranacak bir şey yoktur.

Bilgi Mimarisi: Menünün Arkasındaki Yapı

Kaotik bir sayfa yapısının üzerindeki şık bir menü, yanlış yere sürülmüş rujdur. Görünümü düşünmeden önce sağlam bir bilgi mimarisine ihtiyacın var – yani tüm içeriğin kategorilere ve seviyelere mantıklı dizilimi.

Derinlik mi, Genişlik mi?

Her navigasyon yapısı iki uç arasında bir uzlaşmadır:

• Yatay ve geniş: Bir seviyede çok madde. Hızla erişilir ama sayı arttıkça karmaşıklaşır
• Derin ve dar: Seviye başına az madde, buna karşılık çok tıklama seviyesi. Düzenli ama her ek tıklama kullanıcı maliyetidir

Pratik kural: Her önemli sayfa ana sayfadan en fazla üç tıklamada erişilebilir olmalı. Daha derinde yatan her şey, kullanıcılar gibi Google tarafından da daha az bulunur. Bu üç-tıklama disiplini aynı zamanda SEO altınıdır – buna birazdan geleceğiz.

Etiketler: Senin değil, Kullanıcının Dili

Navigasyonda en sık hata yaratıcı veya içeriden etiketlerdir. "Çözümler", "Dünyamız", "Solutions Hub" – bunu kimse anlamaz. Müşterilerinin gerçekten aradığı kelimeleri kullan: "Hizmetler", "Fiyatlar", "İletişim", "Hakkımızda". Tam bu noktada netlik her zaman yaratıcılığı yener.

Kart sıralaması (card sorting) doğru gruplamayı bulmanın yöntemidir: içeriklerini gerçek kullanıcılara verir ve onların kendi kategorilerine ayırmasını sağlarsın. Sonuç neredeyse her zaman şaşırtır – ve neredeyse her zaman kendi organizasyon şemandaki iç mantıktan daha iyidir.

Mobil Navigasyon: Baş Parmak ile Menünün Çarpıştığı Yer

Web trafiğinin %60'tan fazlası mobil – ve mobil menü masaüstündekinden farklı yasalara uyar. En büyük fark: fare değil, baş parmak bedendir.

Bu somut olarak şu demek:

• Hamburger üstte, aksiyonlar altta: Menü ikonu üstte durabilir (öğrenilmiş standart), ama "Ara" veya "Teklif İste" gibi en önemli aksiyonlar baş parmağın erişiminde, alt kenara aittir
• Dokunma hedeflerine saygı: Her menü maddesi en az 44×44 px tıklama alanına ihtiyaç duyar, aksi halde yanlış tıklamalar piyangoya döner. Bunun ardındaki mekaniği baş parmak bölgeleri ve dokunma hedefleri üzerine Mobil-Öncelikli rehberimizde ayrıntılı anlattık
• Uygulama benzeri deneyimler için alt navigasyon: Rezervasyon veya alışveriş akışlarında, en önemli üç aksiyonlu kalıcı bir alt çubuk çoğu zaman gizli menüden daha iyi dönüşür

Yaygın bir hata: masaüstü mega menüsünü mobile birebir taşımak. Küçük ekranda bu, kimsenin kaydırmadığı sonsuz bir liste haline gelir. Mobil navigasyon bağımsız düşünülmeli – küçültülmüş masaüstü kopyası olarak değil, açılabilir bölümlü bir akordeon olarak.

Navigasyon ve SEO: Menün Bir Sıralama Faktörüdür

Çoğunun gözden kaçırdığı şey: web sitesi navigasyonu senin en önemli iç bağlantı sistemindir. Her menü maddesi bir bağlantıdır ve bağlantılar Google'ın önemi ölçtüğü para birimidir.

Üç doğrudan SEO etkisi:

• Link gücü dağıtımı: Ana navigasyondan bağlanan sayfalar en fazla iç link gücü alır – Google menü hiyerarşisini bir önem sinyali olarak okur. Yalnızca footer'da olan ise ikincil sayılır
• Bağlantı metni (anchor text): "Online mağaza kurdurmak" gibi konuşan menü etiketleri Google'a hedef sayfanın konusunu söyler – "Daha fazla" gibi genel etiketler bu sinyali harcar
• Taranabilirlik: Yatay bir yapı (üç-tıklama kuralı) Googlebot'un her sayfaya hızla ulaşmasını sağlar. Derine gömülmüş sayfalar daha az veya hiç taranmaz

Bu iç bağlantı sistemini navigasyonun ötesinde, silolar ve bağlamsal bağlantılarla stratejik olarak nasıl kuracağını iç bağlantı mimarisi ve site yapısı cluster'ımızda okuyabilirsin. İyi düşünülmüş bir navigasyon, her arama motoru optimizasyonunun üzerine kurulduğu temeldir.

Breadcrumb: Küçük ama Güçlü

Breadcrumb (yani "Ana Sayfa > Hizmetler > Web Tasarım" satırı) ikili iş görür: kullanıcıya konumunu gösterir ve üst kategoriye sıçrama sunar. Ve yapılandırılmış veri (Schema.org BreadcrumbList) üzerinden Google bunu doğrudan arama sonucunda gösterir – bu tıklama oranını hissedilir biçimde artırır. İki hiyerarşi seviyesinden itibaren bir zorunluluktur.

Footer Navigasyonu: Hafife Aldığın İkinci Menü

Footer, ana navigasyona sığmayan bağlantıların atıldığı çöp tenekesi değildir. Farklı bir kullanıcı niyeti için bağımsız bir navigasyon sistemidir: footer'a kadar kaydıran biri genellikle somut bir şey arar – künye, iletişim, bir alt hizmet, belirli bir sektör sayfası. Onu net sütunlara ayır (örn. "Hizmetler", "Şirket", "Yasal") ve ana navigasyonda yer bulamayan long-tail sayfaları bağlamak için kullan. Bu, ana navigasyonu ince tutar ve yine de Google'a tüm önemli sayfalara net patikalar verir.

Erişilebilir Navigasyon: Klavye, Odak ve Ekran Okuyucu

Web Erişilebilirliği Yasası'ndan (Almanya'da BFSG, Haziran 2025'ten beri birçok e-ticaret ve hizmet sağlayıcı için geçerli) bu yana erişilebilir bir navigasyon artık bir bonus değil, zorunluluktur. Ve aynı zamanda yalnızca daha iyi web tasarımıdır – çünkü ekran okuyucu için işleyen, Google için de işler.

Önemli olan noktalar:

• Klavye ile kullanılabilirlik: Her menü maddesi Tab ile erişilebilir ve Enter ile tetiklenebilir olmalı. Açılır menüler yalnızca :hover'a tepki vermemeli, aksi halde klavye ve dokunmatik kullanıcıları dışarıda bırakır
• Görünür odak göstergesi: Klavye odağının nerede olduğu net görünmeli – yedek olmadan outline: none olmaz
• Anlamsal HTML: İç içe <div> tıklama alanları yerine <ul>/<li> ve anlamlı aria-label öznitelikleriyle gerçek bir <nav> etiketi
• "İçeriğe atla" bağlantısı: Klavye kullanıcılarının navigasyonu atlayıp doğrudan içeriğe sıçrayabilmesi için

Bu noktalar yalnızca erişilebilirliği iyileştirmez, somut güven ve sıralama sinyalleridir. Erişilebilirlik, güven ve dönüşümün ne kadar iç içe olduğunu web tasarım pillar rehberinde ve BFSG ve erişilebilir web detay yazısında derinleştiriyoruz.

En Sık Yapılan 8 Navigasyon Hatası

Hannover'deki Storyable'da 100'den fazla site denetiminden, sürekli aynı tuzakları görüyoruz:

1. Çok fazla ana madde – yediden fazla, kullanıcı kapatır
2. Net yerine yaratıcı etiketler – "Hizmetler" yerine "Solutions"
3. Masaüstünde hamburger menü – görünür olması gerekeni saklar
4. Aktif durum yok – kullanıcı şu an nerede olduğunu bilmez
5. Logo ana sayfaya bağlanmıyor – web'in en evrensel standardı, sık unutulur
6. Mini sitelerde mega menü – yalnızca kafa karıştıran aşırılık
7. Önemli sayfalar yalnızca footer'da – Google ve kullanıcı onları değersizleştirir
8. Mobil = küçültülmüş masaüstü – bağımsız düşünülmüş dokunmatik navigasyon yerine

Bu hataların her biri dönüşüm kaybettirir. Birleştiğinde, görünüşte iyi bir sayfayı kimsenin hedefini bulamadığı bir sayfaya dönüştürür – hero bölümü ne kadar iyi dönüştürürse dönüştürsün, bir sonraki tıklama boşluğa gidiyorsa.

Sonuç: İyi Bir Web Sitesi Navigasyonu Eksik Olana Kadar Görünmezdir

En iyi web sitesi navigasyonu kullanıcının hiç fark etmediğidir. Onu hedefine öyle doğal yönlendirir ki menü üzerinde hiç düşünmez – aradığını öylece bulur. İşte sanat budur: on iki yaratıcı etiket yerine beş ila yedi net madde, sayfa tipine uygun desen, yatay üç-tıklama mimarisi, bağımsız düşünülmüş mobil navigasyon ve hem kullanıcıyı hem Google'ı yönlendiren bağlantı metinleri. Navigasyonu sonradan akla gelen bir düşünce gibi ele alan, her dönemeçte dönüşüm harcar. Onu tüm kullanıcı deneyiminin omurgası olarak kavrayan ise ziyaretçilerin kaldığı, bulduğu ve harekete geçtiği bir site kurar. Storyable'da bu yüzden her web sitesi navigasyonu görünümle değil şu soruyla başlar: Bu tek ziyaretçi üç tıklamada hedefine nasıl ulaşır?

Cagri Ersöz

Navigasyonun ziyaretçi mi kaybediyor? Onları doğru yola koyalım.

Ziyaretçilerin sitende aradığını bulamadığından mı şüpheleniyorsun? 30 dakikalık bir ilk görüşmede menü yapını, tıklama patikalarını ve bilgi mimarini analiz ediyoruz – ve dönüşümünü en hızlı kaldıracak üç değişikliği somut biçimde gösteriyoruz. Doğrudan Hannover'den, baukasten tavizi yerine özel kodla.

Şimdi ücretsiz navigasyon denetimini al