Navigasyon tasarımı: site menüsü kalıpları

Kısaca

İyi bir menü iki soruya cevap verir: neredeyim ve nereye gidebilirim? Bu sayfada beş kalıbı anlatıyorum: görünür üst menü, mega menü, hamburger menü, alt sekme çubuğu ve breadcrumb.

Hangisini seçeceğiniz ana bağlantı sayısına ve cihaza bağlı. Menünün içine ne koyacağınız ise ayrı bir iştir. Buna bilgi mimarisi denir.

Görünür üst menü

Ana bölümler sayfanın üstünde yan yana durur. Kullanıcı hiçbir şeye dokunmadan sitenin neler sunduğunu görür. Masaüstü için varsayılan seçim budur.

NN/g, masaüstünde gizli menü kullanmamayı öneriyor. Ana bağlantıları sayfanın üstüne ya da sol kenarına koymanızı söylüyor.

Üst menünün sınırı yer darlığıdır. Etiketler uzadıkça ya da sayıları arttıkça satır taşar. O noktada etiketleri kısaltır ya da alt seviyeleri açılır panellere taşırsınız.

Mega menü

Mega menü, imleç bir ana başlığa gelince açılan geniş paneldir. Alt sayfaları gruplar halinde tek seferde gösterir. Nielsen ve Li (NN/g, 2017), çok sayıda seçenek olduğunda mega menüyü iyi bir seçim sayıyor.

Aynı yazı zamanlama için somut değerler veriyor:

• İmleç 0,5 saniye durmadan panel açılmasın.
• Açılacaksa 0,1 saniye içinde açılsın.
• İmleç başlıktan ve panelden çıktıktan sonra panel 0,5 saniye daha açık kalsın.

Panel üzerine gelince (hover), tıklayınca ya da dokununca açılabilir. Dokunmatik ekranda hover yoktur. Tıklamayla açılan bir düğme ise her cihazda çalışır.

Grupları tahminle değil kullanıcı verisiyle kurun. NN/g burada kart sıralamayı öneriyor; nasıl yapılacağını kart sıralama ve ağaç testi rehberinde anlattım. Her seçenek panelde yalnızca bir kez görünsün. Arama kutusu panelin içinde değil, sayfada sürekli görünür dursun.

Hamburger menü: ne kadar görünmez?

Hamburger menü, üç yatay çizgiden oluşan simgenin arkasına saklanan menüdür. Yer kazandırır, ama bir bedeli var. Kullanıcı menüyü görmediği için onu kullanmayı düşünmeyebilir.

Kara Pernice ve Raluca Budiu bunu 2016'da NN/g için ölçtü. 179 katılımcı, akıllı telefonda ve masaüstünde 6 canlı sitede çalıştı. Her sitede 2 görev yaptılar ve menü gizli, görünür ya da karmaydı.

NN/g 2016 çalışmasında gezinmenin kullanılma oranı

Cihaz	Gizli menü	Görünür menü	Karma (bir kısmı görünür)
Masaüstü	%27	%48	%50
Mobil	%57	test edilmedi	%86

Kaynak: Pernice ve Budiu, NN/g (2016). Oranlar, görevlerde gezinmenin kullanıldığı durumların payı.

Masaüstünde görünür ve karma menüler gizli menünün neredeyse iki katı kullanıldı. Menü gizlendiğinde içeriğin bulunabilirliği %20'den fazla düştü. Bu düşüş masaüstünde de mobilde de görüldü.

Süre de uzadı. Masaüstünde gizli menüyle çalışanlar görünür ya da karma menüye göre en az %39 yavaştı. Mobilde gizli menü, karma menüden %15 yavaştı.

Katılımcılar görevleri 1 (kolay) ile 7 (zor) arasında puanladı. Ortalama zorluk gizli menüde 2,6, karmada 2,3, görünür menüde 2,1 çıktı.

Mobilde tablo daha ılımlı: gizli menü %57 oranında kullanıldı. Yazarlara göre bu menü mobilde daha yaygın, insanlar ona daha alışkın olabilir.

Mobil için önerileri net. Dört ya da daha az ana bağlantı varsa hepsini gösterin. Fazlasını saklıyorsanız önemli sayfalara sayfa içinden de bağlantı verin.

Budiu'nun 2015 tarihli mobil gezinme yazısı da aynı sonuca varıyor. Ona göre gizli menü, en zor fark edilen düzen. Menüyü bir kez açan kişi bile oturumun ilerleyen bölümünde onu unutabiliyor.

Alt sekme çubuğu

Alt sekme çubuğu, ekranın altında sabit duran ve birkaç ana bölüme götüren çubuktur. Sayfayı kaydırırken de görünür kalır. Kullanıcı ana bölümler arasında her an geçebilir.

Budiu (NN/g) sekme çubuğunu uygulamalara özgü bir düzen olarak tanımlıyor. Sınırı sekme sayısıdır. NN/g'ye göre dokunma hedefleri rahat boyutta kalacaksa çubuğa beşten fazla seçenek sığdırmak zordur.

iOS ve Android'in bu çubuğu nasıl farklı çizdiğini iOS ve Android farkları rehberinde ayrıca anlattım.

Çubuğa sık kullanılan bölümleri koyun. Aşağıdaki demoda iade formu Hesabım sekmesinde duruyor. Kullanıcı Hesabım'ı ilk ekranda görür, ama iade formunun orada olduğunu tahmin etmesi gerekir.

Breadcrumb (içerik haritası)

Breadcrumb, bulunduğunuz sayfanın üst sayfalarını sırayla gösteren bağlantı dizisidir. "Ana sayfa > Mutfak > Tencere" gibi. Derin kataloglarda kullanıcıya bir seviye yukarı çıkmanın kısa yolunu verir.

Page Laubheimer'ın NN/g rehberinde bence en çok işe yarayan kurallar şunlar:

• Breadcrumb ana menüyü tamamlar, onun yerini tutmaz.
• Kullanıcının geçmişini değil sitenin hiyerarşisini gösterir.
• Son öğe bulunduğunuz sayfadır ve bağlantı değildir.
• Bir ya da iki seviyeli düz sitelerde gereksizdir.
• Mobilde birden fazla satıra taşmamalı. Yer yoksa yalnızca son seviyeleri göstermeyi düşünebilirsiniz.

Etiket dili

Kullanıcı etiketi anlamazsa en iyi menü düzeni bile işe yaramaz. Bağlantının arkasında ne olduğunu ona yalnızca etiket söyler.

NN/g'nin mega menü önerileri her menü için geçerli. Etiketi en bilgilendirici kelimeyle başlatın ve uydurma terimlerden kaçının. Yan yana duran iki etiket birbirine benzemesin.

Kurumsal sitelerde jargonun yarattığı etiket sorununu kurumsal web sitesi UX rehberinde örneklerle anlattım. Etiketleri ben önce ağaç testiyle sınarım, çünkü tasarım gerektirmez.

Aktif sayfa göstergesi

Kullanıcı menüye baktığında bulunduğu bölümü görmeli. Bunu iki katmanda yaparsınız: gözle görülen bir işaret ve ekran okuyucu için bir öznitelik.

Gözle görülen işaret yalnızca renk olmasın. WCAG 2.2'nin 1.4.1 ölçütüne (A düzeyi) göre renk, bilgiyi aktaran tek görsel araç olamaz. Ben aktif menü öğesinde renge ek olarak kalın yazı ve bir çizgi kullanırım.

Kodda bulunduğunuz sayfanın bağlantısına aria-current="page" eklersiniz. MDN'ye göre bir grup içinde yalnızca bir öğe current olarak işaretlenir. Çok adımlı bir akışta geçerli adım için step değeri kullanılır.

Erişilebilir menü kuralları

Ana menüyü <nav> öğesine koyun. Bu öğenin örtük ARIA rolü navigation, yani bir gezinme bölgesi (landmark). Sayfada birden fazla nav varsa her birine ayrı bir ad verin, örneğin "Ana menü" ve "İçerik haritası".

Açılır menü için W3C'nin ARIA Authoring Practices Guide'ı (APG) hazır bir örnek veriyor: Disclosure Navigation Menu. Bu örnekte her ana başlık bir düğmedir. Düğmede aria-expanded panelin açık olup olmadığını, aria-controls hangi paneli açtığını söyler.

Klavye davranışı basittir. Tab ile düğmeler ve açık paneldeki bağlantılar arasında gezilir. Enter ya da Boşluk paneli açıp kapatır. Esc açık paneli kapatır ve odağı panelin düğmesine geri götürür.

APG bu örnekte role="menu" kullanmıyor. Gerekçesi şu: tipik bir site gezinmesi, menu ve menubar deseninin tanımladığı klavye etkileşimlerinin hepsine ihtiyaç duymaz. Sıradan bir site menüsü için düğme ve bağlantılar yeterlidir.

Canlı örnek: üç menü, bir görev

Aşağıda aynı kurgusal mağazanın menüsü üç düzende var. Göreviniz iade talebi oluşturmak. Bir düzen seçin ve telefonun içindeki menüde gezinin.

Üç menü, bir görev

Bu demo JavaScript ile çalışır. Kapalıysa özeti şöyle: aynı mağazada iade formuna görünür üst menüde 2, hamburgerde 3, alt sekme çubuğunda 2 tıklamayla ulaşılıyor. Hamburgerde ilk ekranda hiçbir menü seçeneği görünmüyor.

Kurgusal bir mağaza; menü etiketleri uydurma. Her tıklama bir adım sayılır: menü açma, kapama, sekme ve bağlantı. Görünen seçenek, o an ekranda tıklanabilir menü öğelerinin sayısıdır; hamburger simgesi sayılmaz. Esc açık menüyü kapatır ve odağı düğmesine geri verir. Bu sizin kişisel denemeniz, bir test sonucu değil. Hiçbir şey kaydedilmez.

Üç düzende de en kısa yol iki ya da üç tıklama. Asıl fark ilk ekranda: hamburgerde hiçbir menü seçeneği görünmüyor. Kullanıcı simgeye dokunmayı düşünmezse yol hiç başlamıyor.

Menüler APG disclosure desenini izliyor. Klavyeyle deneyin: Tab ile gezin, Enter ile açın, Esc ile kapatın.

Hangi düzen ne zaman

Çoğu sitede birden fazla düzen birlikte çalışır. Örneğin masaüstünde mega menü ve breadcrumb, mobilde birkaç görünür bağlantı ve bir hamburger. Aşağıdaki tablo hangisinin nerede işe yaradığını özetliyor.

Navigasyon düzenleri ve kullanım yerleri

Düzen	Nerede iyi	Dikkat
Görünür üst menü	Masaüstü; mobilde 4 ya da daha az ana bağlantı	Yer kaplar, uzun etiket sığmaz
Mega menü	Çok kategorili kataloglar, büyük kurumsal siteler	Gruplama ve hover zamanlaması
Hamburger	Mobilde ikincil bağlantılar	Ana görevleri saklamayın
Alt sekme çubuğu	Uygulamalar, sık geçilen birkaç ana bölüm	5'ten fazla hedef zor sığar
Breadcrumb	Derin hiyerarşi, kategori sayfaları	Ana menünün yerini tutmaz

Bence çoğu sitede en dengeli seçim karma düzendir. En sık kullanılan iki ya da üç bölümü görünür tutun, gerisini menüye koyun.

Menüyü nasıl test edersiniz

Menüyü yayına almadan önce iki ayrı şeyi test edin. Birincisi yapı: doğru içerik doğru başlığın altında mı? İkincisi görünürlük: kullanıcı menüyü ekranda buluyor mu?

Yapıyı ağaç testiyle ölçersiniz. Kullanıcıya yalnızca etiketlerden oluşan bir ağaç verirsiniz ve "İade talebini nerede oluşturursunuz?" diye sorarsınız. Tasarım henüz yokken bile çalışır.

Görünürlüğü gerçek ekranda ölçmeniz gerekir. İlk tıklama testi kullanıcının görevin başında nereye dokunduğunu gösterir. Birkaç kişiyle yapılan bir kullanılabilirlik testi de hamburgeri hiç açmayan kişiyi hemen ortaya çıkarır.

Benim notum

Audit'lerde en sık gördüğüm menü hatası, ana görevin hamburgerin içinde kalması. Ekip menüyü her gün açtığı için orada bir şey saklandığını fark etmiyor. Yeni kullanıcı ise simgeye hiç dokunmuyor.

Ben menüye karar vermeden önce en sık yapılan beş görevi yazarım. Bu görevlerin ilk ekrandan görünür bir yolu olmalı. Geri kalan her şey menüye girebilir.

Kendi sitenizin menüsüne dışarıdan bakılmasını isterseniz UX Audit bir akışı baştan sona inceler ve önceliklendirilmiş bir düzeltme listesi verir.