Web ve Mobilde Navigasyon Menüsü Tasarlamak: Kalıp, Etiket, Test
İyi menü, kullanıcıya burada neler olduğunu, nerede olduğunu ve oraya nasıl gideceğini gösterir. Kalıp seçimi, etiketleme, konum ipuçları ve mobil davranış için uygulamalı rehber.
Bir bakışta
- Menü, bilgi mimarisinin yüzüdür. Gruplar ve adlar kullanıcının zihinsel modeline göre kurulmadan menü çizilmez.
- Kalıp, bölüm sayısına ve derinliğe göre seçilir. Üst menü, mega menü, kenar çubuğu ve alt sekme çubuğu farklı yapılara uyar.
- Kart sıralama ve ağaç testi yapıyı sınar. Kullanıcı gruplaması taslak çıkarır, ağaç testi zayıf yolları gösterir.
- Konum her zaman görünür olmalıdır. Aktif öğe, ekmek kırıntısı ve tutarlı sayfa başlığı kullanıcıyı yönlendirir.
- Dokunma ve klavye baştan düşünülür. Fareyle üzerine gelme dokunmatikte çalışmaz; menü klavyeyle de gezilebilmelidir.
Menü, bilgi mimarisinin kullanıcıya görünen yüzüdür
Navigasyon menüsü, bir sitenin ya da uygulamanın nelerden oluştuğunu ve kullanıcının nerede olduğunu gösteren yapıdır. Güzel çizilmiş bir menü, arkasındaki içerik organizasyonu karışıksa kullanıcıyı kurtarmaz; bu yüzden menü tasarımı bilgi mimarisinden başlar. İçerik gruplarını ve adlarını kullanıcının zihinsel modeline göre kurmadan, menü çizmeye geçmek erken bir adımdır.
İyi bir menü kullanıcıya şu soruları yanıtlar: burada neler var, şu an neredeyim, istediğim yere nasıl giderim. Bu sorulardan birine cevap vermeyen menü, kullanıcıyı arama kutusuna ya da çıkışa iter.
Navigasyon aynı zamanda bir önceliklendirme kararıdır. Her şeyi birincil menüye koymak, hiçbir şeyi öne çıkarmamak demektir. Hangi hedeflerin en sık ve en kritik olduğunu kullanıcı görevlerinden çıkarın; menüde yer, bu önceliğe göre dağıtılır.
Menü kalıpları ve ne zaman hangisi
Üst yatay menü, az sayıda ana bölümü olan siteler için en tanıdık kalıptır; her zaman görünür, öğrenmesi gerekmez. Bölüm sayısı arttıkça yatay alan yetmez ve başlıklar sıkışır. Mega menü, çok sayıda kategorisi ve alt kategorisi olan sitelerde (katalog, e-ticaret, kurumsal) bir paneli açarak grupları birlikte gösterir; ancak dikkatsiz kurulursa seçeneklerin sayısıyla kullanıcıyı boğar.
Kenar çubuğu (yan menü), derin hiyerarşisi olan uygulamalarda ve yönetim panellerinde işe yarar; dikey liste, uzun etiketleri ve çok sayıda öğeyi daha rahat taşır. Mobil uygulamalarda alt sekme çubuğu, az sayıda ve eşit önemde ana bölümü başparmakla erişilebilir tutar. Hamburger menü (üç çizgi simgeli çekmece) ise yer kazandırır, fakat seçenekleri gizlediği için keşfedilebilirliği düşürür; en sık kullanılan hedefleri çekmeceye gömmemek gerekir.
Bunlara ek olarak ekmek kırıntısı (breadcrumb) derin yapılarda konumu ve geri yolu gösterir, altbilgi (footer) ise ikincil bağlantıları toplar. Kalıplar birbirinin yerine geçmez, çoğunlukla birlikte kullanılır: üst menü genel gezinmeyi, yerel menü bölüm içi gezinmeyi, ekmek kırıntısı konumu sağlar.
Menü kalıbı, bölüm sayısına ve hiyerarşinin derinliğine göre seçilir
Kalıp seçimi
- Az sayıda ana bölüm, geniş ekranÜst yatay menüHer zaman görünür; öğrenmesi gerekmez.
- Çok kategori ve alt kategori (katalog, kurumsal site)Mega menüGrupları başlıklarla ayırın; öğe sayısını sınırlayın.
- Derin hiyerarşili uygulama ya da panelKenar çubuğuUzun etiketler ve bölümler dikey listede rahat taşınır.
- Mobil uygulama, az sayıda eşit önemde bölümAlt sekme çubuğuBaşparmakla erişilir; her sekme kalıcı bir hedeftir.
Etiket ve gruplama
Menü etiketleri kullanıcının dilini konuşmalıdır. Kurum içi bölüm adları, ürün kod adları ve süslü ifadeler kullanıcıda karşılık bulmaz. Etiket, tıklamadan önce içeriği tahmin etmeyi sağlayacak kadar açık, ama menüye sığacak kadar kısa olmalıdır. Hem "Çözümler" hem "Hizmetler" gibi birbirine yakın başlıklar kullanıcıyı tereddüte iter; bunlardan birini seçip tutarlı olun.
Gruplamada kart sıralama (card sorting) yöntemi işe yarar: kullanıcılara içerik kartlarını verip kendi gruplarına ayırmalarını ve adlandırmalarını isteyin. Elde ettiğiniz gruplar, menü başlıkları için sağlam bir ham taslaktır. Yapıyı oturttuktan sonra ağaç testi (tree testing) ile sınayın: kullanıcıdan yalnızca metin hiyerarşisi üzerinde bir hedefi bulmasını isteyin. Başarısız olan yollar menünün zayıf noktalarıdır.
Seviye sayısını kısa tutun. Derinleştikçe kullanıcı kaybolur; çok yatay olduğunda ise seçenekler dikkat dağıtır. Bu iki yön arasındaki denge, içerik hacmine ve kullanıcı görevlerine göre kurulur.
Navigasyon, ortak bir hiyerarşide katmanlanır
Menü katmanları
- Genel menüHer sayfada görünen ana bölümler.
- Yerel menüBulunulan bölümün alt sayfaları.
- Konum ipucuEkmek kırıntısı ve seçili menü öğesi.
- Yardımcı bağlantılarArama, hesap, destek ve altbilgi.
Konum, durum ve geri dönüş
Kullanıcı hangi sayfada olduğunu her an görebilmelidir. Aktif menü öğesi belirgin biçimde işaretlenir (renk tek başına yetmez, kalınlık ya da çizgi de eklenir) ve derin sayfalarda ekmek kırıntısı ile üst seviyeye dönüş yolu verilir. Başlık ile menüde seçili öğenin adı birbiriyle tutarlı olmalı; kullanıcı "Siparişlerim" tıkladıysa sayfa başlığı da bunu söylemelidir.
Mobilde geri hareketi ve geri düğmesi öngörülebilir olmalıdır. Bir sekmeden diğerine geçildiğinde önceki sekmenin durumunun korunup korunmayacağı baştan karar verilmesi gereken bir konudur; kullanıcıyı her seferinde en başa atmak sinir bozar.
Arama, menüyü tamamlayan bir yoldur ama onun yerine geçmez. Kullanıcı bazen ne aradığını bilir (arama), bazen göz gezdirmek ister (menü). İçeriği çok olan sitelerde ikisi birlikte sunulur ve menü yapısı arama sonuçlarında da yansıtılır.
Açılır menüler ve mobil davranış
Fareyle üzerine gelince açılan menüler dokunmatik cihazlarda çalışmaz; üzerine gelme yok, yalnızca dokunma vardır. Açılır menüyü tıklamayla ya da dokunmayla da açılacak biçimde tasarlayın. Fare ile üzerine gelme kullanıyorsanız, kısa bir gecikme ve diyagonal fare hareketine tolerans, yanlışlıkla kapanmayı önler.
Dokunma hedefleri parmakla rahat basılabilecek büyüklükte ve yan yana öğeler arasında yeterli boşlukla tasarlanır. Küçük ekranda mega menü, akordiyon biçimine ya da adım adım derinleşen listeye dönüşür; kullanıcı her seviyede nerede olduğunu ve nasıl geri döneceğini görebilmelidir.
Küçük ekranlarda en sık kullanılan hedefleri her zaman görünür tutun. Alt sekme çubuğu ile arama simgesi ya da sepet gibi sık kullanılan eylemleri ekranda bırakıp, nadir kullanılanları çekmeceye almak dengelidir.
Klavye ve erişilebilirlik
Menü yalnızca klavyeyle de gezilebilmelidir. Sekme tuşu menü öğeleri arasında mantıklı bir sırayla ilerlemeli, açılır menüler klavyeyle açılıp kapanabilmeli, odak göstergesi her zaman görünür kalmalıdır. Sayfa başına atla (skip link) bağlantısı, klavye ve ekran okuyucu kullanıcılarının tekrarlayan menüyü her sayfada baştan geçmesini engeller.
Menü bölgesi, yardımcı teknolojilerin tanıyacağı biçimde işaretlenmeli, aktif sayfa ve açık/kapalı durum programatik olarak bildirilmelidir. Bu işin ayrıntıları ARIA ve erişilebilirlik ilkelerinde yer alır. Menü bileşenini erişilebilirlik gözüyle baştan kurmak, sonradan yamamaktan çok daha ucuzdur.
Sık yapılan hatalar ve test
Sık görülen hatalar: kurum yapısını kullanıcı yapısı sanmak, her şeyi ana menüye koymak, belirsiz etiketler, keşfedilemeyen gizli menüler, yalnız fareyle çalışan açılır menüler, aktif sayfanın işaretlenmemesi ve masaüstü menüsünü mobile olduğu gibi küçültmek.
Test için görev bazlı sınama yapın: kullanıcıdan belirli bir hedefi bulmasını isteyin ve ilk tıkladığı yeri, tereddütünü, kaç denemede ulaştığını gözleyin. İlk tıklama genellikle sonucu öngörür: ilk tıklama doğruysa kullanıcı hedefe ulaşma olasılığı yüksektir. Analitikte menü tıklamaları ve arama sorguları, kullanıcıların menüde bulamadığı şeyleri ortaya çıkarır.
Mindset programlarında nerede çalışılır
Navigasyon tasarımı, UX/UI eğitimlerinde bilgi mimarisi başlığının uygulamalı karşılığıdır. Kart sıralama, ağaç testi ve menü yapısı çalışmaları, web ya da mobil üründe gezinmeyi kurgulayan UX tasarımcısı ve içerik stratejisiyle uğraşan ekipler için doğrudan işe yarar.
İlgili Mindset programı
UX/UI Bootcamp
Sık sorulan sorular
Hamburger menü kötü müdür?
Kötü değildir, ama seçenekleri gizlediği için keşfedilebilirliği azaltır. Nadir kullanılan hedefler için uygundur. En sık kullanılan bölümler çekmeceye gömülürse kullanım düşebilir. Mobilde sık hedefleri görünür tutup geri kalanını çekmeceye almak dengeli bir çözümdür.
Menüde kaç öğe olmalı?
Sabit bir üst sınır yoktur. Öğe sayısı arttıkça etiketlerin ayırt ediciliği düşer ve kullanıcı taramakta zorlanır; bu yüzden öğeleri anlamlı gruplara bölerek ilerlemek gerekir. Yatay menü sıkışıyorsa mega menü ya da kademeli yapı gibi alternatifler değerlendirilir; karar, ağaç testinin sonuçlarına dayandırılmalıdır.
Mobil ve masaüstü menüsü aynı olmalı mı?
Yapı ve etiketler tutarlı olmalı, sunum biçimi cihaza uymalı. Masaüstündeki mega menü mobilde akordiyona ya da adım adım derinleşen listeye dönüşebilir. Aynı hedeflere her cihazda erişilmesi, ayrı mimariler kurmaktan daha önemlidir.
Arama kutusu varsa menüye gerek var mı?
Evet. Arama ne aradığını bilen kullanıcıya, menü ise göz gezdirmek ve içeriğin kapsamını anlamak isteyen kullanıcıya hizmet eder. Menü aynı zamanda sitenin neler sunduğunu anlatır. Birlikte sunulurlar ve aralarındaki yapı tutarlı olur.
Menü tasarımının doğru olup olmadığını nasıl anlarım?
Görev bazlı testle: kullanıcıya bir hedef verin, ilk tıkladığı yeri ve ulaşma yolunu gözleyin. Ağaç testi hiyerarşideki zayıf yolları, analitik ise menü tıklamalarını ve arama sorgularını gösterir. Bulguların ortak çıkardığı sorunlar önceliklendirilir.