Gerçekten İyi Navigasyon Ne Yapmalı
10 web sitesi navigasyon örneğine geçmeden önce, nav'ınızın yapması gereken üç basit İngilizce görev:
- Ziyaretçilerin nerede olduklarını söyleyin. Modern web tasarımı içinde en çok atlanan temel, açık bir mevcut sayfa göstergesidir.
- Onlara ne var olduğunu söyleyin. Sayfa X'te olan bir ziyaretçi, tıklamadan siteyi tamamen hayal edebilmelidir.
- Bir veya iki tıklamada bir sonraki sayfaya götürün. Bunun üzerine friction olur; bunun altıysa muhtemelen onlar için gerekli olan şeyi gizliyor olabilirsiniz.
Aşağıdaki web sitesi navigasyon örneklerinin çoğu üçünü de yerine getirir. Onlardan bazıları (Wikipedia, bilinçli olarak) kuralları bozuyor çünkü onlar nedeniyle ilginçtir.
Farklı Zorluk Seviyelerinde 10 Web Sitesi Navigasyon Örneği
Aşağıdaki 10 web sitesi navigasyon örneği, görsel tarz yerine çözülen problem türüne göre sıralanmıştır. Birlikte çoğu kez karşılaştığınız desenleri kapsar - genel menüler, mega menüler, yan menüler, kavşak izleri, mobil alt çubukları, içerik içindeki navigasyon ve daha fazlası. Tipik bir e-ticaret sitesinden daha büyük ölçeklerde navigasyon menü örnekleri arıyorsanız, bu referans setidir.
1. GOV.UK - 67 Milyon Kişiyi Aynı Anda Hizmet Verirken
Tür: Devlet hizmetleri portalı
İncelenmesi değerli olan: Dünyanın muhtemelen en test edilen bilgi yapısı.
GOV.UK, İngiltere hükümetine dijital kapıdır. 25'ten fazla bakanlık ve binlerce hizmet üzerinden ("pasaportumu yenile"den "ölümü kaydet"e, "yeni bir iş kur"a kadar) vatandaşlara, işletmelere ve ziyaretçilere hizmet verir. Navigasyon, stresli ve acele eden bir ziyaretçiyi aşırı yüklemeden tüm bunları bulabilir hale getirmek zorundadır.
Çözüm, radikal netlikle. Ana sayfa, mega menü, öne çıkan resimler veya bir hero içermemektedir. Sadece bir arama çubuğu, "GOV.UK'da Popüler" görevlerin bir listesi ve kategorik bir gezinme listesi ("Avantajlar", "Doğumlar, ölümler, evlilikler ve bakım", "Çocuk bakımı ve ebeveynlik", vs.) vardır. Yeter.
Altında olan da aynı derecede öğreticidir. GOV.UK, "Adım adım navigasyonu" icat etmiştir - *Araba sürmeyi öğren* gibi bitişik yollarda, site, bir yan çubuğa sahip olur, her adım ilgili içeriğe bağlantı verir. Her zaman neyin içinde olduğunuzu ve bir sonrakinin ne olduğunu bilirsiniz.
Üç şeyi çal:
- Basit dil kategori etiketlerini, iç yapı etiketlerinden tercih edin. "Avantajlar", "DWP Hizmetleri"den daha iyi. "Para ve vergi", "HM Vergi ve Güvenlik Operasyonları"ndan daha iyi. Nav etiketlerinizi ziyaretçiler için değil, departmanlar için yazın.
- İçerik yoğun sitelerde arama çubuğu navigasyondur. Binlerce sayfanız varsa, arama, gezinmeden daha hızlıdır. Onu dikkat çekici, hızlı ve yazım hatalarına karşı bağlayıcı yapın.
- Beş veya daha fazla sayfayı kapsayan görevler için adım adım navigasyon. Ziyaretçinizin işi beş veya daha fazla sayfayı kapsıyorsa, onlara nerede olduklarını gösteren numaralı bir yan çubuk verin. Tamamlayıcı etkisi çok büyük olur.
2. MoMA - "İki Kitle, Bir Site" Problemi
Tür: Müze / kültürel kurum
İncelenmesi değerli olan: Çift kitle navigasyon problemi temiz bir şekilde çözer.
MoMA web sitesi, tamamen farklı iki kitleyi farklı görevlerle hizmet verir. Sıkı ziyaretçiler, sergileri görmek, müzeye ziyaret planlamak ve bilet almak ister. Araştırmacılar ve eğitimciler, derin koleksiyon erişimi, yayınlar ve akademik materyal ister. Navigasyon, her iki grup için temiz bir giriş noktası sunmalı, ama bilimsel tarafı basitleştirme veya ziyaret planlama tarafını gizleme olmamalıdır.
2019 yeniden tasarımı, iki katmanla çözdü. Üstteki yatay ana navigasyon, Ziyaret, Sergiler, Etkinlikler, Sanat ve Sanatçılar, Mağaza, Dergi gibi basit etiketler kullanır, her iki kitle için de işe yarar. Her etiket, katmanlı bir açılır menü açar ve "temel" ve "ikinci düzey" görevlere ayrılır. Sanat ve Sanatçılar, hem halka açık koleksiyon tarayıcısına hem de derin araştırmacı araçlarına gider.
Ünlü "Rauschenberg testi" kuralı - içte, ekibin koleksiyondaki en uzun sanatçı adı (Rauschenberg) herhangi bir navigasyon kutusuna her ekran boyutunda sığması gerekir - çoğu site için kopyalanması faydalı olur.
- Açılır menüyü "temel" ve "derin" görevler olarak bölün. Sıkı ziyaretçiler, görünen seçeneklere sahip olur; ileri kullanıcılar, açılır menünün altındaki bağlantıları alır. Aynı navigasyon, iki derinlik.
- Navigasyon kutuları için "en uzun etiket" testi belirleyin. "Rauschenberg" gibi en uzun ürün adınız, en uzun hizmet başlığınız, en uzun makale kategoriniz gibi neyse, her kesimde sığdığından emin olun. Kısaltılmış navigasyon etiketleri anında dikkatsizlik sinyali verir.
- Ana navigasyonda ikonlara göre kalın yazı tipi. MoMA'nın nav'ı üst seviyede hiçbir ikon kullanmaz. Etiketler tüm işi yapar. İkonlar, gerçekten küresel olarak anlaşılanlar (arama, sepet, hesap) hariç, sadece yığınlama ekler.
3. IKEA - Aslında Çalışan Bir Mega Menü
Tür: Büyük katalog e-ticaret (12.000+ ürün)
Neden incelenmeli: Mega menü, çoğu kötü yapıldığı gibi doğru yapıldığında.
2026 yılında mega menüler kötü bir üne sahiptir - çok fazla site, ekip karar veremediği her bağlantıyı atık alan olarak kullanır. IKEA, doğru şekilde kullanıldığında nasıl göründüğünü gösterir. Üst menüde sadece beş öğe vardır: Ürünler, Odalar, İndirimler, Daha Fazla, Mağazaları Göz At. "Ürünler" üzerine gelindiğinde, her mobilya kategorisini gösteren kategorilendirilmiş bir panel açılır ve küçük ürün fotoğrafları görsel anahtar olarak hizmet eder.
Disiplin, olmayan şeydedir. "Hakkımızda" yok. "Sürdürülebilirlik" yok. "Haber Odası" yok. "Kariyer" yok. Bu öğeler siteye vardır - ancak alt menü seviyesinde, satın alma akışıyla rekabet etmez.
Üç şeyi kopyala:
- Üst menüyü sadece gelir yolları için ayırın. Üst menüdeki her şey, dönüşüm fünyesine rekabet etmemelidir. Hakkımızda içeriği, kariyer, basın - tüm bunlar alt menü gezinmesi içinde olmalıdır.
- Mega menülerde ürün fotoğraflarını görsel anahtar olarak kullanın. Mega menüdeki her kategoriye yan yana küçük bir resim, etiketli menülerden daha hızlı ne aradığınızı tanımlamanıza yardımcı olur. Özellikle görsel ürünler için çok etkili.
- Farklı odalar, akıllı ikincil IA'dır. "Oturma odası / yatak odası / mutfak" müşteriye mobilya düşünme şeklidir. "Sofalar / koltuklar / masalar" katalogun organize edildiği şekildir. IKEA her ikisini de ortaya koyar - müşteri, şirketin SKU ağacından ziyade kendi zihinsel modeline göre alışveriş yapmasına olanak tanır. Bu, perakende sektöründe en temiz büyük ölçekli web sitesi gezinme örneklerinden biridir.
4. BBC Sport - Canlı Etkinliklere Uyarlanan Gezinti
Tür: Canlı haber ve içerik medyası
Neden incelenmeli: Daha fazla içerik tüketimine sahip olan alt mobil menü.
BBC Sport'un uygulama ekibi, mobilde alt gezinmeye geçiş yapma konusunda kamu olarak bir durum çalışması yayınladı. Sonuç: Yeni desende 7,4% daha fazla içerik tüketimi, 4 haftalık çoklu varyant testiyle doğrulandı. Bu, her yerde gerçek, yayınlanan artış verisi olan mobil gezinme örneklerinden biridir.
Masaüstü sitesi, büyük etkinlikler sırasında dikey gezinme kullanır - Olimpiyatlar, Dünya Kupası, Birleşik Devletler Oyunları sırasında, geçici "Olimpiyatlar 2024" veya "Euro 2026" bağlantısı üst seviye öğesi olarak geçici olarak eklenir ve etkinlik bittiğinde kaldırılır. Gerçek dünya etkinlikleriyle ilişkilendirilmiş dinamik gezinme nadirdir; çoğu sitenin gezinmesi yıllarca değişmez.
Üç şeyi kopyala:
- Mobilde alt gezinme, içerik uygulamalarında üst gezinmeden daha iyi çalışır. Modern telefonlar, ekranın üstünde tıklamalar için yeterince komfortlu değildir. Parmak doğal olarak altta durur.
- Gezinti değişikliklerini gezinme tıklamaları yerine içerik tüketim metriklerine karşı test edin. Gezinti değişiklikleri için doğru başarı metriği, "insanlar daha fazla okudu / izledi / satın aldı mı?" - "insanlar gezintiye daha fazla tıkladı mı?" değildir.
- İkili zaman sınırlı gezinti öğeleri için alan bırakın. İşinizde mevsimsel anlar (etkinlikler, satışlar, kampanyalar) varsa, diğer her şeyi yeniden yapılandırmadan geçici bir öğeyi ortaya çıkarmaya olanak tanıyan bir gezinme yapısına sahip olun.
5. Wikipedia - Yan Menü Gezintisinin Hâlâ Doğru Cevap Olduğu Durum
Tür: Ansiklopedi / referans sitesi (60 milyonun üzerinde makale)
Neden incelenmeli: Her modern kurala karşı ve mükemmel şekilde çalışır.
Wikipedia dünyada en çok ziyaret edilen sitelerden biridir. Gezintisi: her makalede bir yan menü (İçindekiler, En Üstte, Ayrıca Bakınız, Kaynaklar, Dış Bağlantılar), sol kenarda global bir gezinme menüsü (Ana Sayfa, Rastgele Makale, Wikipedia Hakkında, Bize Ulaşın) ve makale içi bir içindekiler. Üstte dikey bir gezinme yok. Mega menü yok. Masaüstü için hamburger menü onlar için iş görmez.
2026 tasarım kurallarına göre bu isyan edici bir durumdur - ve yine de milyarlarca kullanıcı her gün Wikipedia'yu rahatça gezinir. Ders: Gezinti kuralları çoğu site için yardımcı olur; doğa yasaları değildir. Kullanıcılarınız araştırmaya odaklanmış ve içerik hiyerarşik (makaleler → bölümler → kaynaklar) ise, Wikipedia'nın gibi klasik yan menü gezinme örnekleri, daha eğlenceli alternatiflerden daha iyi olur. Bu rehberdeki en mantıksız web sitesi gezinme örneklerinden biridir ve muhtemelen en öğretici olanıdır.
Üç şeyi kopyala:
- Uzun içerikte bir içindekiler tablosu gezintidir. Uzun makaleler, belgeler ve referans içerikler, kullanıcı kaydırırken yapışkan bir içindekiler yan menüsüne yarar. Bu, çoğu blogun eklemeyi unuttuğu bir gezinti öğesidir.
- İhtiyacınız olmayan menüleri eklemeyin. Wikipedia ziyaretçileri kategoriye göre taraymıyor - onlar arıyor veya bağlantıları takip ediyor. Bu nedenle Wikipedia kategori mega menülerinden kaçınıyor. Ziyaretçi kalıplarınızın menüsünü doğru şekilde hizmet verip vermediğini inceleyin.
- Alt menü, metin yoğun sitelerde üst menüye karşılık gelebilir. Makale gövdesi tüm deneyim olduğunda, ikincil gezinme altta veya yan çubukta olmalıdır - içerikle dikkat çeken yerde değil.
6. NYT Yemekleri - Filtreleme Gezinme
Tür: Abonelik içeriği + araç
İncelenmesi değerlidir: Filtreleme, birincil gezinme, etiketler ise ikincil gezinmedir.
NYT Yemekleri anasayfası kategorilerle açılmaz - arama çubuğunu açar, ardından özel koleksiyonlar (30 Dakikalık Yemekler, Kolay Haftasonu, Bitkisel, Konfor Yemeği) için yatay kaydırma sunar. Geleneksel üst menü (Tarifler, Koleksiyonlar, Kaydedilen Tarifler, Alışveriş) orada olmasına rağmen, başlıca keşif mekanizması değildir. Başlıca mekanizma, tüm kataloğu giderek daraltan güçlü bir dizi yüzey (mutfağı, diyeti, etkinliği, zamanı, malzemesi) olan filtrelemedir.
Bu, daha çok içerik sitesi için dikkate alınması gereken bir örüntüdür. Kütüphaneniz büyük ve ziyaretçinizin niyeti keşif ("ne pişireceğim?"), filtreler ve özel koleksiyonlar kategori ağaçlarından daha iyi çalışır.
Üç şeyi kopyalayın:
- Özelleştirilmiş koleksiyonlar da gezinmedir. "Editörün Tercihleri" veya "Şu An Popüler" için yatay kaydırma satırı, belirli bir hedefi olmayan ziyaretçilere 6 öğeli bir menüden daha yararlıdır.
- 200'den fazla öğesi olan her site için yüzey filtreleme gezinmedir. Tarif sitesi, içerik kütüphaneniz, kurs kataloğunuza veya ürün koleksiyonunuza sahipseniz - menü arayüzünü değil, filtre arayüzünü daha çok yatırım edin. Filtreler içeriğinizle ölçeklenir; menü ölçeklenmez.
- Kaydet / yıldız işareti, bir gezinme özelliği değil, bir özellik özelliğidir. Kullanıcı tarafından aktif olarak özelleştirilen "sonraki için kaydedilen" görünümü, içerik sitesindeki en değerli gezinme yüzeylerinden biridir.
7. GitHub Docs - Doğru Dokümantasyon Gezinmesi
Tür: Teknik belgeler (3.000+ sayfa)
İncelenmesi değerlidir: Herhangi bir docs tarzı bilgi mimarisi için bir referans.
GitHub Docs, her seviyedeki geliştiricileri hizmet verir - ilk kez Git kullanarak bir repo klonlayanlar, eylemler akışı debug eden üst mühendisler. Gezinti, üç panel düzenidir: sol tarafta ürünler ve konular, ortada makale, sağda sayfa içi içerik tablosu. Sol menü, bölüme göre kapatılabilir, sağ TOC kaydırıldıkça güncellenir ve makalenin üstünde bulunan yollar, tam olarak nerede olduğunuzu söyler.
Kritik detay: gezinme durumu korunur. "GitHub Eylemleri" → "Yapı ve test" bölümünü kapatırsanız, ilgilenmiyorsanız, farklı bir konuya tıkladığınızda bu bölüm hâlâ kapatılı olarak kalır. Çoğu belge sitesi her gezinmede durumu sıfırlar, ziyaretçilerin aynı şeyleri sürekli tekrar kapatmalarını zorlaştırır.
Üç şeyi kopyalayın:
- Üç panel düzeni, dokümantasyon için işe yarar, yeter. Sol menü ürün hiyerarşisi için, merkezde içerik, sağda sayfa içi TOC. Dokümantasyon siteleri için bu düzeni yeniden icat etmeyin - kopyalayın.
- Gezinti durumunu sayfa yüklerine göre koruyun. Ziyaretçi neyi açtı, kapattı, filtreledi veya sıraladı - onu değiştirmeden tutun, onları açıkça sıfırlamalarına kadar. Bu için çerezler veya
localStorageuygundur. - İçeriklerin iç içe olduğu durumlarda yordam gezinmesi zorunludur. Ziyaretçi 4 seviye derine iniyorsa, en üste geri dönmek için yoldan yararlanmalılar. Yordam gezinmesi, ekleyebileceğiniz en ucuz gezinme özelliğidir ve neredeyse her zaman kendisini öder.
8. MIT - Büyük Çoklu Hedef Kitleli Eğitim Sitesi
Tür: Üniversite / çoklu hedef kitle kurumu
İncelenmesi değerlidir: Sekiz farklı hedef kitle, aynı tutarlı menü.
MIT web sitesi, potansiyel öğrenciler, mevcut öğrenciler, öğretim üyeleri, mezunlar, bağışçılar, araştırmacılar, gazeteciler ve meraklı halkı hizmet verir - sekiz farklı hedef kitle ve sekiz farklı ihtiyaç seti. Gezinti, "için..." örüntüsüyle bu durumu işler. Üst menü küçük (Eğitim, Araştırmalar, Yenilik, Başvuru + Yardım, Kampüs Hayatı, Haberler, Mezunlar, Hakkında), ancak "Hızlı Bağlantılar" açılır menüsü, her hedef kitle türü için en sık yapılan görevleri ortaya koyar ("MIT'e Başvuru," "Burslara Başvuru," "Kampüse Ziyaret," "Bir Bağış Yap").
Anasayfa kahramanı, tek bir ana mesaj seçmek yerine hedef kitlelere özel içerikleri döndürür - sekiz hedef kitle için aynı anda tek bir en önemli şey söylemenin mümkün olmadığını kabul ederek.
Üç şeyi kopyalayın:
- Hızlı Bağlantılar / Popüler Bağlantılar açılır menüsü, tüm şeyleri üst menüye sıkıştırmaya çalışmaktan daha iyidir. "Çoğunlukla buraya ne yapmak için gelirler?" için küçük bir açılır menü, 12 öğeli üst menüden daha iyidir.
- Çoklu hedef kitle siteseleri için anasayfanın döndürüleceğini kabul edin. Tüm hedef kitlenize hizmet edecek tek mesajı aramayın. Hedef kitle veya ziyaret zamanına göre ana içerikleri döndürün.
- Güçlü kullanıcılar için hedef kitleye özel alt alan adları. MIT,
studentlife.mit.edu,news.mit.edu,alum.mit.edu- her biri kendi nav'ini bu hedef kitlesine uygun şekilde optimize etmiştir. Ana.eduana kapı; alt alan adları ise odalardır.
9. Decathlon - Spor Yatayları Mega Menüyü Yeniden Şekillendirir
Tür: Çoklu spor mağazası (90+ spor)
Neden incelenmelidir: Mega menü, ürün türü yerine spora göre sıralanmıştır.
Decathlon, 90'dan fazla spor alanında ürün satmaktadır - koşu, bisiklet, yüzme, tırmanma, balıkçılık ve daha fazlası. Çoğu spor mağazası menüsünü ürün türü (ayakkabı / kıyafet / ekipman) göre düzenler. Decathlon ise spora göre düzenler. "Spor" üzerine gelindiğinde kategorilendirilmiş bir liste görülür: Bisiklet, Koşu, Yürüyüş, Fitness, Su Sporları, Takım Sporları, Dağ Sporları, Savaş Sporları. "Bisiklet"e tıklandığında yol, dağ, şehir, çocuklar - her biri içinde ilgili ekipmanlar görülür.
Bu, müşterilerin aslında düşündükleriyle uyuşmaktadır. Koşu ayakkabısı almak isteyen biri "Ayakkabı bölümünde" değil, "Koşucu" olduğunu düşünür. Menü, zihinsel modeli takip eder.
Üç şeyi kopyalayın:
- Kullanım durumuna göre değil, SKU türüne göre düzenleyin. Müşterileriniz aktivite, meslek veya yapılması gereken işe göre tanımlanıyorsa, menüyü depo kategorilerinizin yerine ona göre düzenleyin.
- Menüyü sadece dil değil, yerel olarak özelleştirin. Decathlon'ın Fransız sitesi bisiklet ve futbol ile başlar; ABD sitesi ise yürüyüş ve koşu ile başlar. Kültürel spor öncelikleri ülkeye göre değişir ve menü bu farkı yansıtır.
- Menü resimleri sadece dekor değil, kategori sinyali vermelidir. Decathlon, her spor kategorisi yanına küçük eylem fotoğrafları (bisikletli, koşucu, yürüyüşlü) kullanır - ziyaretçi aktivitesini anında tanır. Görüntü, dekor olarak değil, bir navigasyon aracı olarak kullanılır.
10. Smashing Magazine - Okuyucu Amacını Saygılı Bir Şekilde Karşılayan İçerik Navigasyonu
Tür: Web tasarımı / geliştirme dergisi
Neden incelenmelidir: Uzun formlu içerik tüketimi nasıl olduğuna saygı duyar.
Smashing Magazine'ın menüsü küçük (*Dergi, Makaleler, Kitaplar, Podcast'ler, Çalıştaylar, Üyelik*), ama her makale kendi iç menüsünü sunar: sabit bir içerik tablosu, "bu makalede" atlamalar, tahmini okuma süresi ve yazar bloğu ile sabit bir bağlantı. Makale, genel menü değil, navigasyon yüzeyidir.
Uzun formlu içerik için bu doğru örüntüdür. Google aramasından gelen okuyucular genel menüden çok, geldikleri makaleyi okumak ve sonra benzer içerik bulmakla ilgilenir. Smashing bu tam yolu optimize eder.
Üç şeyi kopyalayın:
- Makale içi menü, genel menüden daha iyi çalışır uzun formlu içeriklerde. Sabit TOC, atlamalar, "bu yazarın diğerleri" - bu, uzun makalelerde genel menüden daha fazla tıklama sağlar.
- Okuma süresi tahminleri navigasyon görevi görür. "12 dakikalık okuma" bilgisi, ziyaretçinin şimdi etkileşime geçip geçmeyeceğini veya sonra saklayıp saklamayacağını söyler. Her iki durum da kazançtır.
- "Konuya göre ilgili içerik", "genel popüler içerikten" daha yararlıdır. Smashing, popülerlik yerine etiketlere göre ilgili makaleleri sunar. CSS Grid hakkında okuyan bir ziyaretçi, sitenin en çok trafiğe sahip makalesi değil, CSS Grid içeriği isteyecektir.
5 Ortak Hata ki Gizli Şekilde Navigasyonu Bozar
Yukarıdaki 10 güçlü web sitesi navigasyon örneği incelendikten sonra, başarısızlık kalıpları tutarlı hale gelir. Audit yapan olduğum çoğu altperformanslı site, aşağıdaki hatalardan en az birini yapar - ve bu hatalar, web sitesi navigasyon örneklerinden bazılarının işe yarayıp bazılarının işe yaramamasını da belirler:
- Masaüstü bilgisayarlarda hamburger menü. 1440px bir monitörde üç çizgiyle menüyü gizlemek, sahip olduğunuz alanı boşa harcar. Onu kullanın. Hamburger menü mobil için (ve hatta orada da sadece seyrek olarak) kullanılır.
- Çok fazla üst seviye öğesi. Eğer üst menünüzde 9'dan fazla öğe varsa, tasarımın öncesinde bilgi mimarınız bozulmuştur. En fazla 5-7 öğe hedefleyin. Bunun üzerine, "Daha fazla" açılır menüsüne gruplayın.
- Belirsiz etiketler. "Çözümler" ve "Kaynaklar", B2B menülerde en çok tıklanan kelimelerdir ve en az faydalıdır. Aslında ne varsa yazın: "Pazarlama Ekibi İçin", "Müşteri Hikayeleri", "Fiyat Rehberi."
- Şu anki sayfa göstergeç yok.
/pricingsayfasında bulunan bir ziyaretçi, menüde "Fiyatlar" ı vurgulamalıdır. Bu temel bir şeydir ve sıklıkla atlanır. - Çok yüksek sabit menü. Mobilde 96px sabit başlık, ekranın üçte birini yutar. Sabit navigasyonu 56-64px en fazla tutun, veya kaydırma aşağı olduğunda gizleyin ve kaydırma yukarı olduğunda gösterin.
Hızlı Referans: Sitene Uygun Navigasyon Şeması?
Yukarıdaki 10 web sitesi navigasyon örneğini hızlı bir karar matrisine göre çapraz inceleyin:
Site türü | Tavsiye edilen desen | Yapılmaması gereken |
Landing page (tek ürün) | 3-5 öğe içeren sabit üst menü + net CTA | Mega menü, masaüstü hamburger menüleri |
E-ticaret (200'den az SKÜ) | Kategori açılır menüleri + arama ile üst menü | Mega menü (aşırı) |
E-ticaret (1.000+ SKÜ) | Kullanım durumuna göre organize edilmiş mega menü + filtreleme | Uzun düz açılır menüler |
Dokümantasyon | Üç panel düzeni (sol dikey menü / içerik / sağ TOC) | Sadece üst menü |
İçerik / medya | Üst menü + alt mobil menü + filtreleme seçenekleri | Mobilde sadece yan menü |
Çoklu hedef kitleli kurumsal | Küçük üst menü + Hızlı Bağlantılar + hedef alt alan adları | Tüm hedef kitleleri bir menüde toplamak |
Uzun formatta yayın | Minimal genel menü + güçlü içeriğe özgü menü (sabit TOC, atla bağlantıları) | Aşırı genel menü odak çalmak |
Bu matris, web sitesi menü tasarımı doğru şekilde yapmanın kısa yolu — sitenizin türüne uygun satırı seçin ve geri kalan tüm menü kararları takip eder.
Wegic ile Nasıl Çalışan Bir Menü Kurulur
İyi bir menü kurmak gerçekten bir tasarım deneyimi değildir — içerik mimarisi deneyimidir. Etiketler ve yapı, görsel işlemden daha önemlidir. Yukarıdaki 10 web sitesi menü örneği bununla aynı disiplini paylaşır: bilgi mimarisi ile ün kazanmışlardır, görsel tasarım değil.
Wegic, bir sohbet özetiyle bir site oluşturan, sitenizin gerçekten içerdiği şeylere dayalı mantıklı bir menü yapısı oluşturan konuşmacı Yapay Zeka site büyüme sistemidir. Sayfa eklemek ve ardından şablonun menüsünde zor bir şekilde yerleştirmek yerine, yapay zeka içerik mimarlığını açıklamanızdan oluşturur.
Faz 1: Yapay Zekaya Bilgi Ver
Wegic'i açın ve Kimmy, yapay zeka proje yöneticinizle sohbet edin. Yukarıdaki 10 örnektan herhangi birini referans olarak kullanın:
"GitHub Docs'a benzer bir belgeler sitesi inşa et. Üç panel düzeni, sol menüde ürün grupları, sağ tarafta içeriğe göre tablo, her makalenin üstünde yolu izleme. Üstte arama çubuğu."
Veya içerik sitesi için:
"NYT Cooking tarzında filtreleme ile bir tarif sitesi inşa et. Üst menüde Tarifler / Koleksiyonlar / Kaydedilen / Hesap. Ana sayfa arama çubuğuyla başlar, ardından yatay kaydırılabilir koleksiyonlar, ardından mutfağa / diyet / zaman / malzeme ile filtreleme."
Faz 2: Bir Dakikadan Azda Yapay Zeka Kurulumu
Wegic, tanımlanan navigasyon desenine sahip, tamamen uyumlu çok sayfalı bir site oluşturur — masaüstü için sabit, mobil için ekranın altına, uygun yerde yolu izleme, mevcut sayfa göstergeçleri. Konuşmacı üretme akışının adım adım bir rehberi için Wegic tutorial sayfasına bakın.
Faz 3: Konuşma ile Düzenle
"Üst menüye en sık kullanılan 6 görevi içeren Hızlı Bağlantılar açılır menüsü ekleyin. Mobil menüyü ekranın altına taşıyın. Tüm alt sayfalara yolu izleme ekleyin."
Uygulamadan önce Wegic, 2-3 tasarım seçeneği önerir — böylece menü durumunu kaza ile bozmayın.
Faz 4: Dahil Edilen Hosting ile Yayınla
Yayınla. Hosting, özel alan adı, otomatik oluşturulan
sitemap.xml, ve SEO meta verileri hepsi paket halinde. Wegic'in sadece bilgi mimarisi açısından diğer yapay zeka oluşturuculara göre nasıl durduğunu görmek için 5 web tasarım yapay zeka aracı üzerine detaylı incelememize bakın. Diğer kategorilerde daha fazla ilham almak için estetik web siteleri koleksiyonumuza bakın.
Sonuç: En İyi Web Sitesi Menü Örnekleri Görülemez
Bu rehberdeki 10 web sitesi menü örneği, ziyaretçi herhangi bir noktada düşünmek zorunda kalmaz. Her bağlantı bekledikleri yerdedir. Her etiket ne anlama geldiğini söyler. Her sayfa, nerede olduklarını ve ne olacağını söyler.
Bu standarttır. Menü, kimse ondan bahsetmediğinde başarılıdır. Yukarıdaki web sitesi menü örneklerinden sitenize uygun olanları seçin, disiplinle kopyalayın ve beş yaygın hataya karşı kendinizi inceleyin. Sonuç, rekabetin %90'ından daha iyi olur — çoğu aynı yeniden kullanılabilir ilhamlar üzerine inşa edilmiştir.
Kategoriler arasında daha fazla ilham almak için web sitesi ana sayfa örneklerimiz rehberine ve uyumlu web sitesi örneklerimiz koleksiyonuna bakın.
👇 Aşağıdakiye tıklayarak Wegic ile başlayın
Sık Sorulan Sorular
En önemli web sitesi menü en iyi uygulamaları nelerdir?
Yukarıdaki 10 web sitesi menü örneğinden elde edilen altı evrensel web sitesi menü en iyi uygulaması: (1) üst seviye öğelerini 5-7'ye sınırlayın; (2) iç yapı etiketleri yerine ziyaretçilerin tanıdığı basit dille etiket kullanın; (3) her menü öğesinde mevcut sayfa göstergeçleri ekleyin; (4) iki seviyeden fazla olan her sayfada yolu izleme görünür olmalıdır; (5) mobil menü, içerik uygulamaları için ekranın altına ve tek el ile çalışacak şekilde olmalıdır; (6) dönüşüm içermeyen içerikleri (Hakkında, İş Olanakları, Basın) üst menüde değil, alt menüde yerleştirin.
İlk ve ikincil menü arasındaki fark nedir?
Ana menü, en önemli hedefleriniz olan 5-7 en önemli yerin bulunduğu üst seviye menüdür, her sayfada bulunur. İkincil menü, aksi takdirde: alt ayak linkleri, sayfa içi içerik tablosu, "ilgili içerik" satırları, yollar, kategorilendirilmiş filtreler, belirli bölümlerdeki yan menü. En çok sitelerin yaptığı hata, ikincil menüyü ana menüye koyarak üst menüyü okunamaz hale getirmektir. Ziyaretçi niyetine göre neyin ana olduğunu karar verin, iç politika değil.
2026'da mega menüler iyi bir fikir mi?
Bazen. Mega menü örnekleri gibi IKEA'nın çalışması, 12.000'den fazla ürün olan site için gerekli kategorilendirmeyi sağlar. Mega menüler, üst menüde yer alması gerekmeyen organizasyonel linklerin atıldığı yer olarak kullanıldığında başarısız olur. Mega menünüzün yanlış olduğuna dair üç işaret: (1) 100'den az SKÜ'nüz var ama 4 sütunlu mega menünüz var; (2) mega menüde "Hakkımızda" veya "Basın" içerir; (3) mega menüdeki kategoriler sadece 1-2 öğe içerir. Bunlardan herhangi biri doğruysa, mega menüyü daha basit drop-down menü tasarımı ile değiştirin veya içeriği alt ayak menüsüne bölün.
Hamburger menüler nasıl?
Hamburger menü kalıpları, yatay alanın sınırlı olduğu mobil cihazlarda uygun olsa da, genellikle yeterince alanın olduğu masaüstü cihazlarda uygun değildir. İstisna: minimalizm, tüm tasarım beyanı olan marka odaklı portföy siteleri veya tek sayfa uygulamaları. Çoğu B2B, e-ticaret, içerik ve SaaS sitesi için masaüstü cihazlarda hamburger menü, ziyaretçinin gerçekleştirmesi gereken bir tıklamayı gizler.
Kullanmalı mıyım bir yapışkan menü?
Ziyaretçi uzun içerikler arasında kaydırırken, başka bir yere gitmek isteyebilir. Uzun formlu makaleler, belgeler ve ürün sayfaları için uygun. Kısa pazarlama sayfaları için gereksizdir. Kullanıyorsanız üç kural: (1) yapışkan yüksekliği en fazla 56-64px tutun; (2) kaydırma aşağıda gizlenir, kaydırma yukarıda görünür, ekran alanını geri verin; (3) sayfanızın birden fazla anker bölümü varsa, yapışkan menüde mevcut bölüm göstergesi olmalıdır.
İçerik ağırlıklı bir site için menü nasıl ele alınmalı?
Üç kalıp, içerik türüne bağlı olarak işe yarar. İnformasyon mimarisi hiyerarşik (örneğin belgeler) ise, GitHub Docs gibi üç panel düzenini kullanın. Keşif içeriği (örneğin yemek tarifleri, makaleler) için, NYT Cooking gibi arama + seçilmiş koleksiyonlar + kategorilendirilmiş filtreler kullanın. Referans içeriği (örneğin ansiklopediler, bilgi tabanları) için, Wikipedia gibi güçlü iç makale içerik tablosu ile yan menü navigasyonu kullanın. İçeriğinizin şekli, doğru menüyü belirler, değil tersi.
2026'da en iyi mobil menü kalıbı nedir?
İçerik ve sosyal uygulamalar için, alt menü çubukları, üst menüden daha iyi performans gösterir - modern uzun telefonlarda baş parmağa daha kolay erişilebilir. E-ticaret için, hamburger menü ve kalıcı arama/sepet ile üst menü daha iyi çalışır. Belgeleme ve referans siteleri için, hamburger menüden tetiklenen sol taraftan kayan bir çekme kutusu en iyi şekilde çalışır. Tek kural: mobil cihazlarda dokunmatik büyütme özelliğini devre dışı bırakmayın, dokunma hedeflerini 44×44 piksele kadar küçük yapmayın. Her ikisi de erişilebilirlik ihlalleridir ve uyarlanabilir menü navigasyonunuzun mobil incelemelerini başarısız kılmanın nedenleridir.
2026'da tasarımcılar için en iyi menü araçları nelerdir?
İlham galerileri için: Navbar.gallery, Footer.design, Land-book. Etkileşimli tasarım için: Figma'nın bileşen kütüphanesi ve prototipleme araçları. Test için: BrowserStack ve gerçek cihaz testi. Uygulama için: Tailwind UI, Headless UI ve Radix UI, harika erişilebilir menü bileşenleri sunar. Başka bir şeyden başlamak zorunda kalan non-çalışanlar için, Wegic gibi yapay zeka web sitesi oluşturucuları, sabit bir kütüphaneden seçim yapmak yerine içerik tanımını temel alarak menü kalıpları oluşturur - bu genellikle sabit bir kütüphaneden seçimden daha iyi web sitesi menü fikirleri üretir.
