Web sitesi menüsü (navigasyon) nasıl tasarlanır?

İyi bir web sitesi menüsü; ziyaretçinin aradığını tahmin etmeden bulabileceği, genellikle 5-7 ana öğeden oluşan, sade ve tanıdık etiketler kullanan, ana çağrı butonunu görünür tutan ve mobilde, klavyeyle ve ekran okuyucuyla sorunsuz çalışan bir menüdür. Menü tasarımı bir süsleme işi değil, sitenin bilgi mimarisinin görünen yüzüdür.

Menü, ziyaretçinin ana sayfadan sonra en çok baktığı yerlerden biridir. Kafa karıştıran bir menü, en iyi içeriğin bile bulunmamasına ve hazır müşterinin siteden çıkmasına yol açar. Bu yazıda öğe sayısını, etiketleri, mega menüyü, mobil menüyü, sabit başlığı, footer ve breadcrumb kullanımını ve menü erişilebilirliğini ele alıyoruz.

Web sitesi menüsünde kaç öğe olmalı?

Web sitesi menüsünde genellikle 5-7 ana öğe iyi bir hedeftir. Bu kesin bir kural değil, pratik bir yönergedir: öğe sayısı arttıkça ziyaretçinin menüyü tarayıp doğru seçeneği bulması zorlaşır, her öğenin görünürlüğü azalır. Çoğu hizmet işletmesi için hizmetler, hakkımızda, iş örnekleri, blog ve iletişim yeterli bir çekirdektir.

• —Ziyaretçilerin en çok aradığı sayfaları belirleyin: Analytics'te en çok görüntülenen sayfalar ve site içi arama verisi iyi bir başlangıçtır.
• —Benzer sayfaları tek bir üst başlık altında toplayın; örneğin her hizmeti ayrı menü öğesi yapmak yerine 'Hizmetler' altında listeleyin.
• —Ana menüye girmesi gerekmeyen sayfaları (KVKK, çerez politikası, kariyer gibi) footer'a taşıyın.
• —Öğeleri önem sırasına göre dizin; ziyaretçiler genellikle ilk ve son öğeleri daha kolay fark eder, iletişim ya da ana eylem sona yakışır.

Menü etiketleri nasıl yazılmalı?

Menü etiketleri, ziyaretçinin tıklamadan önce sayfada ne bulacağını tahmin edebileceği sade ve tanıdık kelimelerle yazılmalıdır. 'Hizmetler', 'Fiyatlar', 'İletişim' gibi herkesin bildiği ifadeler, 'Keşfet', 'Dünyamız' ya da 'Çözüm Evreni' gibi yaratıcı ama belirsiz etiketlerden her zaman daha iyi çalışır.

• —Kısa tutun: bir ya da iki kelime yeterlidir.
• —Ziyaretçinin dilini kullanın: sektör jargonu yerine müşterinin aradığı kelimeyi seçin.
• —Tutarlı olun: menüdeki etiket ile açılan sayfanın başlığı aynı ya da çok yakın olmalıdır.
• —Aynı kelimeyle başlayan birçok öğeden kaçının: 'Kurumsal', 'Kurumsal Çözümler', 'Kurumsal Destek' gibi etiketler taramayı zorlaştırır.

Mega menü ne zaman kullanılmalı?

Mega menü, bir üst başlık altında çok sayıda alt sayfanın gruplanması gerektiğinde kullanılmalıdır; örneğin onlarca kategorisi olan bir e-ticaret sitesinde ya da birçok hizmet ve sektör sayfası olan büyük bir kurumsal sitede. Beş-altı sayfalık bir işletme sitesinde mega menü gereksiz karmaşa yaratır, basit bir açılır liste yeterlidir.

Mega menü kullanılacaksa alt öğeler başlıklarla gruplanmalı, her grup birkaç öğeyle sınırlı tutulmalı ve menü yalnızca fareyle üzerine gelince değil, tıklamayla ve klavyeyle de açılabilmelidir. Mobilde mega menü aynı şekilde gösterilemez; burada gruplar genellikle açılıp kapanan bölümlere (akordeon) dönüştürülür.

Mobilde hamburger menü mü, görünür sekme çubuğu mu?

Mobilde hamburger menü, çok sayıda sayfası olan siteler için alan kazandıran pratik bir çözümdür ama içindeki öğeler görünmediği için daha az keşfedilir. Az sayıda ve sık kullanılan bölümü olan sitelerde ekranın altında ya da üstünde görünür bir sekme çubuğu, en önemli sayfaları her an erişilebilir tutar.

• —Hamburger menü uygundur: sayfa sayısı fazla, ziyaretçiler çoğunlukla Google'dan doğrudan bir iç sayfaya geliyor.
• —Görünür sekme çubuğu uygundur: 3-5 ana bölüm var ve ziyaretçiler bu bölümler arasında sık geçiş yapıyor.
• —Karma çözüm: hamburger menünün yanında ana eylem butonunu (telefon, WhatsApp ya da teklif) her zaman görünür tutun.
• —Hamburger ikonunun yanına 'Menü' yazısı eklemek, özellikle daha az teknoloji kullanan ziyaretçiler için anlaşılırlığı artırır.

Sabit başlık ve menüdeki çağrı butonu nasıl kullanılmalı?

Sabit (sticky) başlık, kullanıcı sayfayı kaydırırken menünün ve ana çağrı butonunun ekranın üstünde kalmasını sağlar ve uzun sayfalarda iletişime geçmeyi kolaylaştırır. Sabit başlık ince tutulmalı, özellikle mobilde ekranın küçük bir kısmını kaplamalı ve menüdeki çağrı butonu diğer öğelerden görsel olarak ayrılmalıdır.

Menüdeki çağrı butonu tek olmalıdır: 'Teklif alın', 'Randevu' ya da 'WhatsApp' gibi işletmenin ana hedefini temsil eden bir eylem. Bu buton diğer menü öğeleri gibi düz metin değil, renk ya da çerçeveyle ayrışan bir buton olarak tasarlanmalıdır. 404 Ajans sitesinde de WhatsApp butonu sabit başlıkta, menüden ayrışan bir çağrı olarak durur.

Footer menüsü ve breadcrumb ne işe yarar?

Footer menüsü, ana menüye sığmayan ama ziyaretçinin arayabileceği sayfaları (yasal metinler, kariyer, tüm hizmetler, bölgeler) sayfanın sonunda toplar. Breadcrumb ise ziyaretçiye sitenin hangi bölümünde olduğunu 'Ana Sayfa > Hizmetler > Web Tasarım' gibi bir yol ile gösterir ve üst sayfalara tek tıkla dönmeyi sağlar.

Breadcrumb özellikle üç ya da daha fazla seviyesi olan sitelerde, e-ticaret kategorilerinde ve bloglarda faydalıdır. BreadcrumbList yapılandırılmış verisiyle birlikte kullanıldığında, arama motorlarının sayfa hiyerarşisini anlamasına da yardımcı olur. Footer ve breadcrumb bağlantıları aynı zamanda önemli sayfalara düzenli iç bağlantı sağlar.

Menü erişilebilirliği nasıl sağlanır?

Menü erişilebilirliği; menünün fare olmadan klavyeyle kullanılabilmesi, ekran okuyucuların menünün açık ya da kapalı olduğunu anlayabilmesi ve dokunmatik ekranlarda öğelerin rahatça seçilebilmesiyle sağlanır. Erişilebilir bir menü engelli kullanıcıların yanı sıra herkes için daha kullanışlıdır ve WCAG yönergelerinin temel beklentilerinden biridir.

• —Menüyü nav öğesiyle işaretleyin; birden fazla menü varsa aria-label ile ayırın (örneğin 'Ana menü', 'Alt menü').
• —Tab tuşuyla tüm öğelere ulaşılabilmeli, Enter ya da Space ile alt menüler açılabilmeli, Esc ile kapanabilmelidir.
• —Hamburger ve açılır menü düğmeleri gerçek button öğesi olmalı ve aria-expanded ile açık ya da kapalı durumunu bildirmelidir.
• —Odak göstergesi (focus) gizlenmemeli; klavye kullanıcısı hangi öğede olduğunu görebilmelidir.
• —Alt menüler sadece fareyle üzerine gelince açılmamalı; dokunmatik ve klavye kullanıcıları hover yapamaz.
• —Dokunma hedefleri yeterince büyük olmalı; WCAG 2.2 AA en az 24x24 CSS pikseli şart koşar, pratikte 44 piksel civarı daha rahattır.
• —Sayfanın başına 'İçeriğe geç' bağlantısı ekleyerek klavye kullanıcılarının menüyü her sayfada tekrar gezmesini önleyin.