Navigasyon tasarımı hamburger, mega menü veya yapışkan çubuğu moda diye seçmek değildir. Site derinliği, görev türü ve ekran önceliği deseni belirler. Bu rehber görünür ve gizli katmanı ayırarak uygulanabilir bir seçim çerçevesi sunar.
Navigasyon tasarımı, menü ikonunu modernleştirmek veya çubuğu inceltilmek değildir. Kullanıcının bulunduğu yeri, gidebileceği destinasyonları ve sıradaki adımı hızlıca görmesini sağlayan bir karar katmanıdır. Hamburger menü, mega menü veya yapışkan çubuk moda olduğu için değil; site derinliği, görev türü ve ekran önceliği uyduğu için seçilir.
Yanlış desen destinasyonları gizler veya ekranı kalabalıklaştırır. Doğru desen ise bilgi mimarisini görünür kılar. Bu rehber, deseni trend listesinden değil işten seçmeniz için somut bir çerçeve sunar.
Navigasyon tasarımı neden bir desen kararıdır
Menü markanın vitrini değil, kullanıcının haritasıdır. Harita yanlış ölçeklenirse kişi kaybolur: ya çok az yol görür ya da her sokağı aynı anda görmeye çalışır. Desen bu ölçeği belirler. İkon stili, gölge ve hover rengi ancak ölçek doğruysa anlam taşır.
Karar üç soruya bağlanır. Site kaç katmanlı? Kullanıcı tek bir görevi mi tamamlıyor, yoksa kategori mi tarıyor? Öncelikli ekran dar mı geniş mi? Bu sorular yanıtlanmadan bir kalıbı kopyalamak, kapı kolunu boyamak gibidir. Kapı yine yanlış yere açılır.
Sığ bir hizmet sitesinde beş görünür madde çoğu zaman yeter. Çok kategorili bir katalogda aynı üst şerit, ağacı ezberletmeye çalışır. KepezWeb işlerinde deseni önce bu farktan okuruz; sonra görsel dile çeviririz. Önce ağaç, sonra kabuk.
Seçimi belirleyen üç eksen
Site derinliği
Derinlik, ana sayfadan hedef içeriğe inen adımları anlatır. Sığ yapılarda hizmetler, hakkımızda, iletişim ve blog gibi birkaç kapı vardır. Derin yapılarda ise kullanıcı hem üst kategoriyi hem alt kümeyi aynı bakışta görmek ister: belge merkezi, çok markalı mağaza, çözüm ve sektör matrisli kurumsal site buna örnektir.
Derinliği sayfa sayısıyla karıştırmayın. Yüz yazılık bir blog hâlâ sığ bir hiyerarşiye sahip olabilir. Asıl mesele zihindeki dallanmadır. “Ayakkabı, spor, koşu, erkek, numara” gibi bir yol varsa menü bu yolu kısaltmalıdır. Yol kısalmıyorsa sorun ikonda değil ağaçtadır.
Pratik bir kontrol sorun: kullanıcı hedefe varmak için menüyü kaç kez açmak, geri gelmek ve yeniden tahmin etmek zorunda? Tekrarlayan geri dönüşler, desenin değil dallanmanın bozulduğunu gösterir. Önce grupları sadeleştirin, sonra kabı seçin.
Görev türü
Görevler kabaca üçe ayrılır. Hedef odaklı işte kişi ne aradığını bilir: kargo takip, randevu, fatura, giriş. Keşif odaklı işte kategori tarar ve karşılaştırır. Karma işte önce bakar, sonra daraltır. Aynı sitede bu üçü birden bulunabilir; o zaman tek bir desen her sayfaya dayatılmaz.
Hedef odaklı akışta arama, kısa bir yardımcı menü ve sık kullanılan kısayollar öne çıkar. Keşifte görünür etiketler, gruplu panel veya filtrelenebilir kategori hub’ı daha doğrudur. Karma işte üstte harita, içeride daraltma araçları gerekir. Deseni “güzel duruyor” diye değil, görevin sürtünmesini düşürdüğü için seçin.
Görevi düz cümleyle yazmak etiketleri de temizler. “Kurumsal kimlik çözümlerimiz” yerine ziyaretçinin dediği kapıyı koyun: hizmet, fiyat listesi, randevu, mağaza. İç jargon menüde durdukça desen ne olursa olsun kişi yanlış kapıyı dener.
Ekran önceliği
Aynı hiyerarşi masaüstünde yatay sığabilir, telefonda sığmaz. Önce kritik görevin hangi genişlikte bittiğine bakın. Mobilde her şeyi hamburger’e tıkamak ekranı temizler gibi görünür; aslında birincil eylemi bir dokunuş uzağa iter. Temizlik, görevi gizlemenin başka adıdır.
Ekran önceliği yalnızca “mobil önce” sloganı değildir. Bir B2B teklif formunda kullanıcı çoğu zaman dizüstü bilgisayardadır. Bir yemek siparişinde ise tek eliyle telefona bakar. Desen o bağlamdaki bakış hattına ve başparmağa hizmet etmelidir. Trafiğin yüzde kaç olduğu bilinmese bile, paranın ve görevin bittiği cihaz yeterince yol gösterir.
Kırılma noktasında menüyü küçültmek ayrı, işi değiştirmek ayrıdır. Geniş ekranda mega menü doğru olsa bile dar ekranda aynı sütun düzeni okunmaz. Mobil karşılık çoğu zaman kademeli liste, alt sayfa veya alt sekme çubuğudur. Tek HTML’i zorlamak, iki kötü deneyim üretir.
Yaygın desenler ve gerçek işleri
Her desen bir işi hızlandırır, başka bir işi yavaşlatır. İsimler moda gibi dolaşır; iş koşulları ise sakin kalır. Aşağıdaki özet, kalıpları sloganla değil kullanım yeriyle yan yana koyar.
| Desen | Uygun derinlik | Uygun görev | Ekran notu | Başlıca risk |
|---|---|---|---|---|
| Görünür üst menü | Sığ veya orta | Hedef ve sınırlı keşif | Geniş ekranda güçlüdür | Öğe çoğalınca sıkışır |
| Hamburger / çekmece | Sığ veya ikincil katman | Seyrek gidilen sayfalar | Dar ekranda yer açar | Birincil görevi gizler |
| Mega menü | Orta ve derin | Kategori keşfi | Geniş ekranda okunur | Mobilde aynı düzen bozulur |
| Yapışkan çubuk | Görev sürekliyse | Arama, sepet, adım | Uzun kaydırmada işe yarar | İçeriği ve tıklamayı keser |
| Alt sekme çubuğu | Az sayıda eşit görev | Tekrarlayan mobil işler | Başparmak alanına yakındır | Çok öğede bozulur |
| Utility / hesap menüsü | Her derinlik | Giriş, dil, yardım | Küçük ve ayrı tutulmalı | Ana menüyle karışır |
Bu tablo bir yarış sonucu değildir. Bir sitede üstte görünür menü, yanında hesap menüsü, uzun üründe ince yapışkan çubuk birlikte durabilir. Koşul, her katmanın ayrı bir iş görmesi ve aynı kapıyı üç yerde tekrarlamamasıdır.
Hamburger, mega menü ve yapışkan çubuk ne zaman
Hamburger menü
Hamburger yer kazandırır; görünürlüğü düşürür. Dar ekranda yasal metinler, kurumsal sayfalar ve seyrek kullanılan araçlar çekmeceye alınabilir. Ara, sepete git, randevu al veya ara gibi birincil işleri ikonun arkasına saklamayın. Gizlenen şey “az önemli” değil, “unutulan” olur.
Şu durumda güçlüdür: az sayıda ana destinasyon vardır, marka alanı değerlidir, kullanıcı logoyu, aramayı veya alttaki sekme çubuğunu kullanarak ilerler. Şu durumda zayıftır: kategori keşfi asıl iştir ve kişi menüyü her seferinde açıp kapatmak zorunda kalır. Keşifte ekstra dokunuş, meraktan vazgeçirmektir.
Çekmece açılınca nereden geldiği ve nasıl kapandığı anlaşılmalıdır. Karartma, kapatma alanı ve odak yönetimi süs değil yön duygusudur. Menü durumu için microinteraction tasarımı geri bildirimi, “tıkladım mı?” belirsizliğini azaltır. Animasyon spekül değil, durum cümlesi olmalıdır.
Mega menü
Mega menü derin bir ağacı tek bakışta sergiler. Çok kategorili mağaza, çok hizmetli kurum ve belge kütüphanesi için uygundur. İyi bir panel rastgele bağlantı duvarı değildir. Grup başlıkları, kısa etiketler ve gerekirse birkaç öne çıkan giriş içerir. Kullanıcı sütunları taramalı, roman okumamalıdır.
Geniş ekranda işe yarar çünkü kişi haritayı hover veya tıklamayla görür. Aynı düzeni telefona indirmek hata olur. Mobil karşılık kademeli liste, kategori hub’ı veya filtrelenmiş geçiştir. Grup başlıkları korunur; sütun fantezisi bırakılır.
Çok kategorili bir e-ticaret sitesi kurarken paneli “büyük olduğu için kurumsal duruyor” diye seçmeyin. Önce ağacı budayın. Düzensiz bir hiyerarşi büyük yüzeyde daha korkutucu durur. Önce kardeş kategoriler netleşir, sonra geniş menü hak edilir.
Yapışkan çubuk
Yapışkan çubuk, kaydırırken de arama, sepet, adım göstergesi veya birincil eylemi erişilebilir tutar. Uzun ürün sayfası, karşılaştırma metni ve çok adımlı formda görev sürekliliği sağlar. Kişi yukarı koşmadan “neredeyim, şimdi ne yapacağım” sorusuna dönebilmelidir.
Her sayfada sabit başlık şart değildir. Kısa bir kurumsal metinde çubuk içeriği yerinden eder. Yükseklik abartılırsa özellikle telefonda okuma alanı daralır. Çubuk belirdiğinde veya gizlendiğinde sayfa zıplamamalıdır. Düzen kayması hem dikkati hem tıklanabilir alanı bozar.
İyi bir kural şudur: çubukta yalnızca o bağlamda tekrar gereken öğeler kalsın. Logo, bir birincil eylem ve belki arama yeter. Slogan, sosyal ikon ve kampanya şeridi yapışkan alana taşınmamalıdır. Sabitlenen her piksel, okunan her satırdan çalınır.
Karar çerçevesi: adım adım seçim
Deseni toplantıda oylamayın. Kısa bir iş sırası, tartışmayı zevkten göreve çeker. Aşağıdaki adımlar bir web tasarım işinde menüyü görsel denemeden önce kilitlemek içindir.
- Birincil görevleri düz cümleyle yazın.
- Hiyerarşiyi budayın; eşit ağırlıklı on iki madde bırakmayın.
- Görevin bittiği ekranı netleştirin.
- Görünür katman ile gizli katmanı ayırın.
- Deseni göreve eşleyin, tek kalıba aşık olmayın.
- Üç senaryoyu sesli yürütün ve gereksiz dokunuşları işaretleyin.
Görev cümleleri etiket üretir. “Koşu ayakkabısı bulmak”, “servis randevusu almak”, “fiyat listesini indirmek” gibi işler menüde karşılık ister. Karşılığı olmayan madde ya yanlış yerdedir ya da hiç durmamalıdır. Seyrek işler utility menüsüne, altbilgiye veya hesap altına inebilir.
Budama adımı çoğu ekibin atladığı yerdir. On iki üst madde varsa sorun desende değil ağaçtadır. Yakın olanları gruplayın. “Kurumsal”, “hakkımızda” ve “ekip” çoğu ziyaretçi için tek kapıdır. “Blog”, “haber” ve “içgörü” de öyle. Azalan görünürlük, azalan karar yorgunluğudur.
Eşleme pratik tutulabilir. Keşif ağırlıklı ve derinse geniş ekranda mega menü, dar ekranda kademeli kategori kullanın. Hedef ağırlıklı ve sığsa görünür üst menü yeter; mobilde birincil eylemler dışarıda, kalanı çekmecede dursun. Görev kaydırma boyunca sürüyorsa ince bir yapışkan çubuk ekleyin. Eşit ağırlıklı birkaç mobil görev varsa alt sekme daha doğrudur.
Senaryo turunda üç kişiyi hayal edin: ilk kez gelen, dönen müşteri, belirli bir ürünü veya hizmeti arayan. Her birinde hedefe kaç dokunuşta varıldığını not edin. Sihirli bir dokunuş hedefi dayatmayın. Asıl iş, geri dönüşleri ve tahmin etmeyi azaltmaktır. KepezWeb brifinglerinde bu tur, renk tartışmasından önce biter.
Sık yapılan hatalar
En sık tuzak, beğenilen bir sitenin menüsünü kopyalamaktır. O sitenin derinliği, stok yapısı ve görevleri sizinki olmayabilir. İkinci tuzak, aynı menüyü her kırılmada zorlamaktır. Üçüncü tuzak, etiketleri iç dilde yazmaktır. Dördüncüsü, yapışkan alanı reklam şeridine çevirmektir.
- Deseni trend diye almak, ağacı olduğu gibi bırakmak.
- Birincil eylemi hamburger’e gömmek.
- Mega menüye düzensiz bir kategori yığını dökmek.
- Yapışkan çubuğa slogan, ikon ve kampanya istiflemek.
- Aramayı ya menünün yerine koymak ya tamamen unutmak.
- Bulunulan sayfayı belirtmemek; kişi haritada kaybolur.
- Hesap, dil ve yardım bağlarını ana kategorilerle karıştırmak.
Kurumsal sitelerde sık görülen bir sapma, tüm hizmetleri eşit dizmektir. Kurumsal web tasarım işinde ziyaretçi genelde bir sorunu çözmeye gelir. Menü o sorunu karşılayan birkaç kapıyı öne çıkarmalı, gerisini gruplamalıdır. Her kapı eşitse hiçbiri bulunmaz.
Arama da bir desen kararıdır. Derin katalogda arama görünür olmalıdır; sığ hizmet sitesinde ise boş bir arama kutusu hayal kırıklığı üretebilir. Arama, kayıp bir hiyerarşinin yedeği değildir. Önce yolları düzeltin, sonra aramayı doğru yere koyun.
Sıkça Sorulan Sorular
Mobil sitede her zaman hamburger mi kullanılmalı?
Hayır. Dar ekranda yer kazanmak gerekebilir ama birincil görevler görünür kalmalıdır. Hamburger ikincil bağlantılar içindir. Sepet, ara, randevu veya sonraki adım gibi işleri bir ikonun arkasına saklamayın.
Bir sitede birden fazla navigasyon deseni kullanılabilir mi?
Evet, katmanlar farklı işler görüyorsa. Üstte kategori, altta sekme, köşede hesap menüsü durabilir. Aynı destinasyonu üç yerde tekrarlamayın. Tekrar, hız değil gürültü üretir.
Mega menü telefonda nasıl sunulmalı?
Aynı geniş paneli küçültmeyin. Kademeli liste, kategori hub’ı veya filtreli geçiş kullanın. Grup başlıklarını koruyun, sütun düzenini bırakın. Parmak büyük hedef ister; ince sütun istemez.
Yapışkan menü her sayfada açık kalmalı mı?
Hayır. Kısa sayfada gerekmez. Uzun kaydırmada ve tekrar erişilen eylemlerde ince tutun. Aşağı kaydırırken gizleyip yukarı çıkınca göstermek okuma alanını koruyabilir. Belirme ve gizlenme sayfayı zıplatmamalıdır.
Menüde kaç öğe görünür olmalı?
Sihirli bir sayı yoktur. Görünür öğeler birincil görevleri karşılamalı ve etiketleri birbirinden ayırt edilebilmelidir. Sığmıyorsa puntoyu küçültmeyin; ağacı sadeleştirin. Okunmayan menü, gizli menüden daha zararlıdır.
Navigasyon tasarımını sitenizin derinliği ve gerçek görevleriyle hizalamak istiyorsanız KepezWeb ekibi bilgi mimarisi ile arayüzü birlikte planlar. Mevcut menünüzü veya yeni bir siteyi konuşmak için teklif alın; deseni moda listesinden değil işinizden seçelim.
