Web Sitesi Menü Yapısı Nasıl Tasarlanır? Etkili Navigasyon Rehberi

Web sitesi menü yapısı, ziyaretçinin sitenizde ilk baktığı yol haritasıdır. Bu yazıda bilgi mimarisi teorisine girmiyorum; doğrudan arayüze odaklanıyorum: mega menü, mobil menü, etiketler, öğe sayısı, yardımcı menü ve footer. 2012'den beri sahada kurduğum ve düzelttiğim menülerden çıkardığım pratik kuralları paylaşıyorum.

Web sitesi menü yapısı nedir, nasıl tasarlanır?

Web sitesi menü yapısı, bir sitedeki ana sayfalara ulaşan bağlantıların hangi bölgede, hangi sırayla, hangi etiketle ve hangi etkileşim biçimiyle sunulduğunu belirleyen arayüz düzenidir. İyi tasarımda ana menü, yardımcı menü, mobil menü ve footer birbirini tamamlar; ziyaretçi nerede olduğunu ve nereye gidebileceğini düşünmeden anlar.

Tasarım sürecini ben dört adımda yürütürüm. İlk olarak ziyaretçinin en sık yaptığı üç işi yazarım. Ardından bu işlere giden sayfaları ana menüye, geri kalan kurumsal sayfaları yardımcı menüye ve footer'a dağıtırım. Daha sonra etiketleri ziyaretçinin kelimeleriyle yeniden yazarım. Son olarak masaüstü ve mobil davranışı ayrı ayrı test ederim.

Bu yazı yalnızca menünün görünen yüzünü anlatıyor. Sayfaların nasıl gruplanacağı, kategori ağacının derinliği gibi konular başka bir işin parçası. Örneğin büyük katalogların ağaç yapısını büyük web sitelerinde kategori yapısı yazımda ele aldım. Burada o ağacı ekranda nasıl göstereceğinize bakıyoruz.

İyi bir menü aslında hangi işi görür?

İyi bir menü üç soruyu aynı anda yanıtlar: Bu site ne sunuyor, ben şu an neredeyim ve istediğim şeye nasıl giderim? Ziyaretçi bu üç sorudan birine takılırsa geri tuşuna basar. Bu yüzden menüyü süs değil, satış ekibinin ilk cümlesi gibi düşünürüm.

Menü aynı zamanda bir vaat listesidir. Ziyaretçi menüye bakarak işletmenizin kapsamını birkaç saniyede tahmin eder. Örneğin bir mimarlık ofisi menüsünde "Projeler", "Hizmetler" ve "İletişim" görürse, doğru yerde olduğunu anlar. Öte yandan "Vizyonumuz", "Değerlerimiz" ve "Kariyer" gibi öğeler öne çıkarsa, ziyaretçi aradığını bulmak için çaba harcar.

Üçüncü görev ise yön duygusudur. Kullanıcı bir iç sayfaya reklamdan ya da aramadan indiğinde ana sayfayı hiç görmez. Dolayısıyla menü, o iç sayfada da sitenin tamamını özetlemeli. Aktif sayfanın vurgulanması, logonun ana sayfaya dönmesi ve tutarlı yerleşim bu duyguyu kurar. Bu işlevleri hemen çıkma oranını düşürme çalışmalarında da ilk kontrol noktası olarak kullanıyorum.

Ana menüde kaç öğe olmalı?

Kesin bir sayı yok; ancak saha tecrübeme göre kurumsal sitelerde beş ile yedi arası üst düzey öğeyi ziyaretçi çoğu zaman rahat okur. Bu bir garanti değil, bir başlangıç aralığıdır. Belirleyici olan sayı değil, her öğenin gerçekten farklı bir ihtiyaca karşılık gelmesidir.

Sık duyduğunuz "yedi artı eksi iki" kuralının aslında menülerle ilgisi yok. George Miller'ın bu gözlemi kısa süreli bellekle ilgilidir; menüde ise ziyaretçi öğeleri ezberlemez, gözüyle tarar. Yani on öğeli bir menü, iyi gruplanmışsa, karışık adlandırdığınız beş öğeden daha kolay kullanılabilir.

Yine de fazlalığın bedeli var. Her yeni öğe diğerlerinin görünürlüğünü azaltır ve masaüstünde satır kırılmasına yol açar. Ben şu soruları sorarak sadeleştiririm:

• Bu öğeyi son üç ayda kaç kişi tıkladı?
• Bu sayfa bir satış ya da iletişim adımına yakın mı?
• Aynı içerik başka bir öğenin altında mantıklı durur mu?
• Öğeyi kaldırırsam ziyaretçi onu başka bir yoldan bulabilir mi?

Yanıtlar çoğu zaman gösteriyor ki "Hakkımızda" gibi sayfalar yardımcı menüye ya da footer'a rahatlıkla taşınabilir.

Menü etiketlerini nasıl yazmalısınız?

Etiketi ziyaretçinin kullandığı kelimeyle yazın, şirket içi jargonla değil. Örneğin "Çözümler" yerine "Hizmetler", "Kaynaklar" yerine "Blog" ya da "Rehberler" ziyaretçiye çoğu zaman daha hızlı bir şey anlatır. Çünkü ziyaretçi menüyü okurken değil, tararken karar verir.

Ben etiketleri seçerken üç kaynağa bakarım. İlk olarak sitenin iç arama kayıtlarını incelerim; insanlar ne yazıyorsa etiket adayı odur. Ardından arama motorundaki sorgu verisini açarım. Hatta satış ekibinin telefonda en sık duyduğu kelimeleri de not ederim.

Etiket yazarken şu kurallar işime yarıyor:

1. Bir ya da iki kelimeyi geçmeyin; uzun etiketler satırı kırar.
2. Her etiket bir isim ya da net bir eylem olsun: "Fiyatlar", "Teklif Al".
3. Benzer anlamlı iki etiket yan yana durmasın: "Hizmetler" ve "Çözümler" gibi.
4. Marka dilini korusanız bile yaratıcı ama belirsiz ifadelerden kaçının.
5. İlk kelimeyi ayırt edici yapın; göz önce onu okur.

Bu kurallar, arayüz tasarımındaki UX hataları yazımda anlattığım belirsizlik sorununun en sık görülen kaynağını kapatır.

Menü öğelerinin sırası neden önemli?

Göz, yatay menüde en çok başı ve sonu fark eder. Bu nedenle en önemli öğeyi başa, en güçlü eylemi ise sona koyarım. Ortadaki öğeler daha az dikkat çeker; oraya destekleyici sayfaları yerleştiririm.

Pratikte kurumsal bir sitede sıralama genellikle şöyle olur: "Hizmetler" en başta, ardından "Referanslar" ya da "Projeler", sonra "Blog" ve "Hakkımızda", en sonda da ayrı stilde "İletişim" veya "Teklif Al" düğmesi. Böylece ziyaretçi soldan sağa bir karar yolculuğu yapar.

Sıralamayı bir kez kurup unutmayın. Örneğin sezonluk bir hizmet öne çıkacaksa, onu geçici olarak ikinci sıraya almak mantıklı olabilir. Ama menüyü sık sık karıştırmak, düzenli ziyaretçinin kas hafızasını bozar. Ben büyük sıralama değişikliklerini yılda bir ya da iki kez, ölçüm verisine bakarak yaparım.

Ayrıca eylem düğmesini menü öğelerinden görsel olarak ayırın. Aynı renkte ve aynı ağırlıkta duran bir "İletişim" linki, diğer öğelerin arasında kaybolur. Çerçeveli ya da dolgulu küçük bir düğme, ziyaretçiye "bir sonraki adım burada" der.

Mega menü ne zaman gerçekten gerekir?

Mega menü, bir üst öğenin altında çok sayıda alt sayfa olduğunda ve bu alt sayfaların gruplar hâlinde gösterilmesi gerektiğinde işe yarar. E-ticaret mağazaları, çok hizmetli şirketler ve geniş ürün kataloğu olan üreticiler bu grubun tipik örnekleridir.

Peki beş hizmeti olan bir danışmanlık firmasının mega menüye ihtiyacı var mı? Çoğu zaman yok. Basit bir aşağı açılan liste bu işi görür ve daha az bakım ister. Mega menüyü sırf modern görünsün diye kullanmak, ziyaretçiye gereksiz bir panel açtırır.

Benim kullandığım basit eşik şu: Bir üst öğenin altında sekiz ya da daha fazla alt sayfa varsa ve bunlar en az iki anlamlı gruba ayrılıyorsa, mega menü düşünürüm. Bu eşik saha tecrübesine dayalı bir başlangıç noktasıdır, kural değildir.

Mega menünün güçlü yanı, görsel hiyerarşidir. Grup başlıkları, kısa açıklamalar ve hatta küçük ikonlarla ziyaretçi tek bakışta seçeneklerin haritasını görür. Özellikle ürün gruplarını tanımayan yeni ziyaretçi için bu harita, kategori sayfalarını tek tek açmaktan çok daha hızlıdır. E-ticaret projelerinde bu kararı genellikle e-ticaret danışmanlığı sürecinin başında birlikte veririz.

Mega menü tasarlarken hangi hatalardan kaçınmalısınız?

En sık gördüğüm hata, mega menüyü site haritasına çevirmektir. Yüz linkli bir panel, ziyaretçiye seçim değil yük verir. Bu nedenle her grupta yalnızca en çok aranan beş ya da altı bağlantıyı gösterin, geri kalanı için "Tümünü gör" linki ekleyin.

İkinci hata, panelin istemeden açılıp kapanmasıdır. Fare menü çubuğunun üzerinden geçerken panel anında açılırsa, sayfanın üstü sürekli titrer. Ben küçük bir açılma gecikmesi ve paneli kapatmadan önce kısa bir tolerans eklerim; böylece fare çapraz hareket ettiğinde panel kaybolmaz.

Kaçındığım diğer hatalar şunlar:

• Grup başlıklarını tıklanamaz bırakmak; kullanıcı başlığa tıklamayı dener.
• Paneli ekran yüksekliğinden uzun yapmak; alt kısım ekran dışında kalır.
• Paneli ağır görsellerle doldurup açılış süresini uzatmak.
• Klavyeyle panele girilememesi ve Esc tuşunun paneli kapatmaması.
• Mobilde aynı paneli küçülterek göstermeye çalışmak.

Son madde kritik. Mega menü masaüstü için bir çözümdür; mobilde aynı içeriği farklı bir düzenle sunmanız gerekir.

Alt menü fareyle üzerine gelince mi, tıklayınca mı açılmalı?

Ben çoğu projede tıklamayla açılan menüyü tercih ederim. Çünkü tıklama, dokunmatik ekranlarda, klavyede ve fareyle aynı şekilde çalışır. Üzerine gelince açılan menü ise dokunmatik cihazda karşılığı olmayan bir davranışa dayanır.

Öte yandan masaüstünde hover davranışı hız kazandırabilir. Kararsız kaldığım projelerde ikisini birleştiririm: Fare üzerine gelince panel devreye girer, ama üst öğeye tıklandığında da açılıp kapanır. Böylece hiçbir kullanıcı grubu dışarıda kalmaz.

Burada bir tuzağa dikkat edin. Üst öğe hem bir sayfaya link hem de paneli açan düğme olursa, dokunmatik kullanıcı ilk dokunuşta ne olacağını bilemez. Bu yüzden ya üst öğeyi yalnızca düğme yaparım ve panelin içine "Tüm Hizmetler" linki eklerim, ya da etiketin yanına ayrı bir ok düğmesi koyarım.

W3C'nin erişilebilirlik ekibi de site navigasyonu için bu "açılıp kapanan bölüm" desenini örnekler. WAI-ARIA Authoring Practices içindeki navigasyon örneği, uygulama menüsü rolü yerine basit düğme ve liste yapısını gösterir. Ben de geliştirici ekiple bu örneği başlangıç noktası olarak paylaşırım.

Mobilde web sitesi menü yapısı nasıl kurmalısınız?

Mobilde web sitesi menü yapısı, masaüstünün küçük bir kopyası olmamalı. Ekran dar, parmak fareden kalın ve ziyaretçinin sabrı daha kısa. Bu nedenle mobil menüyü ayrı bir tasarım işi olarak ele alırım.

İlk kuralım, en önemli eylemi menünün dışına çıkarmaktır. Telefon araması, WhatsApp ya da "Teklif Al" düğmesi, menü kapalıyken de ekranda kalmalı. Ziyaretçi bu eylem için hamburger simgesine dokunmak zorunda kalmamalı.

İkinci kural, dokunma hedeflerinin rahat olmasıdır. WCAG 2.2 hedef boyutu ölçütü asgari olarak 24x24 CSS piksel hedef ya da yeterli boşluk ister. Ben menü satırlarını bunun belirgin biçimde üstünde tutarım, çünkü asgari ölçü rahat kullanım anlamına gelmez.

Üçüncü kural, alt menüleri akordeon ile açmaktır. Kullanıcı bir üst öğeye dokunduğunda alt öğeler hemen altında açılsın; yeni bir ekrana geçiş gerekiyorsa net bir "Geri" düğmesi olsun. Ayrıca açık menüde sayfa arka planda kaymamalı. Mobil deneyimin geri kalanı için mobil öncelikli tasarım yazıma göz atabilirsiniz.

Hamburger menü mü, alt sekme çubuğu mu daha iyi?

Hamburger menü yer kazandırır ama içeriği gizler. Ziyaretçi gizli şeyi daha az fark eder; bu da menüdeki önemli sayfaların daha az tıklanması demektir. Nielsen Norman Group'un gizli navigasyon üzerine yaptığı araştırmalar da görünür menünün daha kolay keşfedildiğini gösteriyor.

Alt sekme çubuğu ise en önemli üç ile beş hedefi sürekli görünür tutar. Başparmağın kolay eriştiği bölgede durduğu için sık kullanılan işlerde hız kazandırır. Ancak her site için uygun değildir; birkaç sayfalık bir kurumsal sitede alt çubuk gereksiz yer kaplar.

Benim pratik kararım şöyle: İçerik sitesi ya da mağaza gibi ziyaretçinin sık geri döndüğü yapılarda alt çubuğu düşünürüm. Kurumsal tanıtım sitelerinde ise hamburger menü ile birlikte üst bölgede görünür bir iletişim düğmesi kullanırım. Hatta bazen iki ya da üç kritik öğeyi hamburger simgesinin yanında açık yazarım.

Simge seçimini de hafife almayın. Üç çizgili simgenin yanına "Menü" yazmak, özellikle daha az teknoloji kullanan kitlelerde keşfedilebilirliği artırır. Bu küçük etiket bana hiçbir projede zarar vermedi.

Yardımcı menü neyi taşımalı?

Yardımcı menü, ana menünün üstünde ya da sağ köşesinde duran küçük bağlantı grubudur. Dil seçimi, müşteri girişi, telefon numarası, sepet ve arama gibi araçları taşır. Yani içerik değil, işlev sunar.

Bu ayrımı yapmak, ana menüyü sadeleştirmenin en kolay yoludur. Örneğin "Kariyer", "Basın" veya "Bayilik" gibi sayfalar ana ziyaretçi kitlesi için öncelikli değildir; ama onları arayan kişi yardımcı menüde kolayca bulur. Böylece ana menü satın alma kararına odaklanır.

Yardımcı menüde dikkat ettiğim noktalar:

• Görsel ağırlığı ana menüden az olsun; daha küçük yazı ve daha sakin renk kullanın.
• Dil seçiciyi bayrakla değil dil adıyla gösterin; bayrak ülkeyi, ad dili anlatır.
• Telefon numarasını mobilde tıklanabilir link yapın.
• Öğe sayısını dört ya da beşte tutun, aksi halde ikinci bir ana menü doğar.

Çok dilli sitelerde dil seçicinin yerini ve davranışını çok dilli web sitesi SEO yazımda daha ayrıntılı anlattım.

Footer menüyü nasıl planlamalısınız?

Footer, sayfanın sonuna kadar gelen ziyaretçinin son durağıdır. Bu kişi genellikle aradığını bulamamış ya da bir sonraki adımı arıyordur. Dolayısıyla footer'ı eski linklerin çöplüğü değil, ikinci bir navigasyon katmanı olarak planlarım.

İyi bir footer'da genellikle şu gruplar bulunur: hizmetler ya da ürün kategorileri, kurumsal sayfalar, destek ve yasal metinler, iletişim bilgileri. Her grubun kısa bir başlığı olur. Özellikle KVKK aydınlatma metni, gizlilik politikası ve mesafeli satış sözleşmesi gibi zorunlu sayfaların doğal yeri footer'dır.

Footer'da yaptığım en önemli şey, ana menüde yer bulamayan ama değerli olan sayfalara kapı açmaktır. Örneğin sık sorulan sorular, referanslar veya ücretsiz araçlar burada iyi durur. Bu sayfalar hem ziyaretçiye hem de site içi bağlantı yapısına katkı verir; konuyu iç linkleme stratejisi yazımda ayrıca anlattım.

Ama footer'ı yüzlerce anahtar kelimeli linkle doldurmayın. Bu, ziyaretçiye bir şey anlatmaz ve dağınık bir izlenim bırakır. Mobilde ise footer gruplarını akordeonla kapatmak, uzun kaydırmayı önler.

Menü türlerini birbirinden nasıl ayırırsınız?

Aşağıdaki tablo, sahada en sık karar verdiğim menü türlerini ne zaman kullandığımı özetliyor. Değerlendirmeler saha tecrübesine dayanır; her proje kendi verisiyle doğrulanmalıdır.

Tablodaki türleri birbirinin alternatifi gibi görmeyin. Çoğu sitede dört ya da beşi birlikte çalışır; önemli olan her birinin ayrı bir görevi üstlenmesidir.

Erişilebilir bir menü için hangi kurallar geçerli?

Erişilebilir menü, klavyeyle, ekran okuyucuyla ve büyük yazı ayarıyla da kullanılabilen menüdür. Bu hem yasal risk hem de gerçek kullanıcı meselesidir; üstelik iyi erişilebilirlik genellikle herkes için daha net bir arayüz üretir.

Geliştirici ekiple paylaştığım temel kontrol listesi:

1. Menü bir nav öğesi içinde olsun ve anlamlı bir etiketi bulunsun.
2. Paneli açan öğe gerçek bir düğme olsun ve açık ya da kapalı durumunu bildirsin.
3. Tab tuşuyla tüm öğelere sırayla ulaşılabilsin, odak halkası görünür kalsın.
4. Esc tuşu açık paneli kapatsın ve odağı düğmeye geri götürsün.
5. Mobil menü açıkken odak menünün içinde kalsın, kapanınca düğmeye dönsün.
6. Metin ile arka plan arasındaki kontrast yeterli olsun.

Bu listeyi test etmenin en hızlı yolu fareyi bir kenara koyup yalnız klavyeyle menüde gezinmektir. Beş dakikalık bu deneme, çoğu projede en az bir kırık nokta ortaya çıkarıyor. Ayrıca sitenin genel performansını ve erişilebilirlik puanını Google Lighthouse testi ile kontrol edebilirsiniz.

Web sitesi menü yapısı SEO'yu nasıl etkiler?

Web sitesi menü yapısı, arama motorunun sitenizdeki önemli sayfaları bulmasını ve onları önemli olarak algılamasını etkiler. Menüde yer alan sayfalar, sitenin neredeyse her sayfasından link alır. Bu yüzden menüye hangi sayfayı koyduğunuz, iç bağlantı dağılımını doğrudan belirler.

Teknik tarafta kritik nokta, linklerin taranabilir olmasıdır. Google Search Central bağlantı rehberi, Google'ın güvenilir biçimde takip edebildiği linklerin href özniteliği taşıyan a etiketleri olduğunu söyler. Yalnızca JavaScript tıklama olayıyla çalışan menü öğeleri bu nedenle risklidir.

Anchor metni de önemlidir. Menüde "Buraya tıklayın" gibi bir etiket kullanmazsınız, ama "Çözümler" gibi belirsiz etiketler de arama motoruna az bilgi verir. Açık ve açıklayıcı etiketler hem ziyaretçiye hem de tarayıcıya ne bulacağını söyler.

Öte yandan mega menüye yüzlerce link eklemek, her sayfanın gücünü dağıtabilir. Ben menüde yalnızca gerçekten öncelikli sayfaları tutarım, ikincil sayfaları kategori sayfaları ve içerik içi linklerle desteklerim. Menü ile SEO arasındaki dengeyi projelerde SEO danışmanlığı kapsamında birlikte ele alırız.

Aktif sayfa göstergesi ve site içi arama menüde nasıl kullanmalısınız?

Aktif sayfa göstergesi, ziyaretçiye "şu an buradasınız" der. Menüdeki ilgili öğenin altı çizili, kalın ya da farklı renkte olması yeterlidir. Ancak yalnız renge güvenmeyin; renk körlüğü olan kullanıcılar için ikinci bir işaret ekleyin.

Gösterge, özellikle iç sayfaya doğrudan inen ziyaretçi için değerlidir. Reklamdan bir hizmet sayfasına gelen kişi, menüde "Hizmetler" öğesinin vurgulandığını görünce sitenin hangi bölümünde olduğunu anlar. Böylece geri dönmek yerine komşu sayfalara geçer.

Site içi arama ise her site için gerekli değildir. On sayfalık bir kurumsal sitede arama kutusu çoğu zaman boş kalır. Buna karşılık yüzlerce ürünü veya yazısı olan sitelerde arama, menünün yükünü ciddi biçimde hafifletir.

Arama kutusu kullanacaksanız onu bir büyüteç simgesinin arkasına tamamen gizlemeyin, özellikle mağazalarda. Arama kayıtlarını da düzenli okuyun. Çünkü ziyaretçinin menüde bulamayıp aradığı her kelime, menünüz için bir iyileştirme önerisidir.

Yapışkan menü ne zaman faydalı, ne zaman rahatsız edici olur?

Yapışkan menü, sayfa kaydırıldığında ekranın üstünde sabit kalan menüdür. Uzun sayfalarda ziyaretçinin yukarı kaydırmadan başka bölüme geçmesini sağlar. Özellikle uzun hizmet ve ürün sayfalarında bu kolaylık işe yarar.

Ama bedeli ekran alanıdır. Mobilde yüksek bir yapışkan başlık, içeriğin görünen bölümünü belirgin biçimde daraltır. Bu nedenle mobilde yapışkan menüyü ince tutarım ya da aşağı kaydırırken gizleyip yukarı kaydırırken geri getiririm.

Dikkat ettiğim bir diğer konu, menünün açılırken sayfa düzenini kaydırmamasıdır. Menü sabitlendiği anda içerik yukarı zıplarsa, ziyaretçi okuduğu yeri kaybeder. Ayrıca bu kayma, Google'ın sayfa deneyimi ölçütlerinden düzen kaymasını da olumsuz etkileyebilir. Konuyu SEO ve UX uyumu yazımda Core Web Vitals bağlamında anlattım.

Kısacası yapışkan menü bir araçtır, varsayılan değildir. Kısa sayfalardan oluşan bir sitede sabit menüye çoğu zaman ihtiyaç duymazsınız.

Menünüzü yayına almadan önce nasıl test edersiniz?

En güvenilir test, gerçek kullanıcılara gerçek görevler vermektir. Beş kişiye "Kurumsal web sitesi fiyatını bulun" ya da "Bize teklif formu gönderin" gibi görevler verin ve ne yaptıklarını izleyin. Nerede duraksadıklarını not edin.

Daha hızlı bir yöntem, yalnızca menü etiketleriyle yapılan ağaç testidir. Katılımcı tasarımı görmez, sadece etiket listesini görür ve aradığı şeyin nerede olduğunu seçer. Böylece görsel süsten bağımsız olarak etiketlerin anlaşılırlığını ölçersiniz.

Yayından sonra ise veriye bakarım. Analitik aracında menü tıklamalarını olay olarak izlerim; hangi öğenin hiç tıklanmadığını, hangisinin beklenenden çok tıklandığını görürüm. Ardından ısı haritası ve oturum kayıtlarıyla bu tabloyu tamamlarım. Menüden gelen trafiği kampanyalardan ayırmak için linklerinizi temiz tutun; kampanya takibinde ise UTM oluşturucu işinizi kolaylaştırır.

Test sonucunu değerlendirirken tek bir metrikle karar vermeyin. Bir öğenin az tıklanması, onun gereksiz olduğunu değil, yanlış adlandırıldığını da gösterebilir.

Menü tasarımında en sık yapılan hatalar nelerdir?

Sahada düzelttiğim menülerde aynı hatalar tekrar tekrar karşıma çıkıyor. Bunların çoğu teknik değil, karar hatası. Yani doğru soruları sormadan menüye öğe eklemekten kaynaklanıyor.

En sık gördüklerim:

• Her departmanın kendi sayfasını ana menüye istemesi ve menünün şirket organizasyon şemasına dönüşmesi.
• Ana sayfa linkini hem logoya hem de ayrı bir "Ana Sayfa" öğesine koyup yer harcamak.
• Masaüstü ile mobil menünün farklı öğeler içermesi ve kullanıcının kafasının karışması.
• Eylem düğmesinin diğer linklerle aynı görünmesi.
• Menü etiketinin sayfa başlığıyla uyuşmaması.
• Yeni sayfa açıldıkça menünün yıllarca plansız büyümesi.

Son hatanın çözümü basit bir yönetim kuralıdır: Menüye bir öğe eklenecekse, bir öğe de çıkmalı ya da mevcut bir grubun altına girmeli. Bu kural, menünün zamanla şişmesini engeller.

Web sitesi menü yapısı için kısa bir kontrol listesi

Yeni bir site kurarken ya da mevcut menüyü düzeltirken bu listeyi sırayla işaretleyebilirsiniz. Her madde tek başına küçük bir ayrıntı; ancak birlikte uygulandığında menü belirgin biçimde netleşir.

1. Ziyaretçinin en sık yaptığı üç işi yazdınız mı?
2. Ana menüde her öğe farklı bir ihtiyaca karşılık geliyor mu?
3. Etiketleri ziyaretçinin kelimeleriyle mi yazdınız?
4. En önemli eylem ayrı bir düğme olarak görünüyor mu?
5. Mega menü gerçekten gerekli mi, yoksa basit liste yeter mi?
6. Mobilde ana eylem menü kapalıyken de görünüyor mu?
7. Menü klavyeyle ve dokunmatik ekranda aynı şekilde çalışıyor mu?
8. Linkler href taşıyan gerçek a etiketleri mi?
9. Footer ikincil sayfalara ve yasal metinlere düzenli kapı açıyor mu?
10. Menü tıklamalarını ölçen bir düzen kurdunuz mu?

Menü tasarımını yeni bir site projesinin parçası olarak ele almak istiyorsanız web tasarım hizmeti sayfama bakabilirsiniz. Menü, sitenin geri kalanıyla birlikte planlandığında en iyi sonucu veriyor.

Menü kararını verirken hangi sırayı izlemelisiniz?

Son olarak tüm bu kararları tek bir sıraya bağlayayım. Önce ziyaretçinin görevlerini belirlersiniz, sonra bu görevlere giden sayfaları seçersiniz. Ardından etiketleri yazar, sıralamayı kurar ve menü türüne karar verirsiniz. En son ise görsel tasarıma geçersiniz.

Bu sıra önemli, çünkü çoğu ekip tersinden başlıyor: Önce şık bir mega menü tasarlıyor, sonra içine ne koyacağını düşünüyor. Böyle başlayan projelerde menü, içerikten değil şablondan şekil alıyor. Sonuç da genellikle gereksiz paneller ve belirsiz etiketler oluyor.

Özetle iyi bir web sitesi menü yapısı; az ama doğru öğe, ziyaretçinin dilinde etiket, cihaza uygun etkileşim ve düzenli ölçümden oluşur. Bu dördünü sağladığınızda menü göze batmaz, işini sessizce yapar. Menü sonrası adım olarak sayfalarınızın dönüşüm hedeflerini de netleştirmek isterseniz dönüşüm hedefi belirleme yazım iyi bir devam noktası olur.