--- title: "Menüyü bulmak bir yetenek değil." description: "Web sitesi menüsünde açık etiketler, klavye kullanımı, görünür odak ve doğru navigasyon yapısıyla yön bulmayı kolaylaştıran bir kontrol listesi." url: https://androverse.com.tr/blog/menuyu-bulmak-bir-yetenek-degil author: Androverse author_url: https://androverse.com.tr/yazar/androverse publisher: Androverse published_at: 2026-10-02 updated_at: 2026-10-15 language: tr --- # Menüyü bulmak bir yetenek değil. Web sitesi menüsünde açık etiketler, klavye kullanımı, görünür odak ve doğru navigasyon yapısıyla yön bulmayı kolaylaştıran bir kontrol listesi. ![Gümüş kenarlı cam katmanların açık bir sıra oluşturduğu yatay stüdyo kompozisyonu](https://androverse.com.tr/media/editorial/article-openings-2026-10-19/menuyu-bulmak-bir-yetenek-degil.webp) Sıra dışı bir arayüz yapmak istiyoruz. Ama bir sonraki adımı bulmak için kullanıcıdan tasarım diploması istemiyoruz. İyi bir deneyim hem karakter taşır hem yön gösterir. Başlık, buton ve geçişler birbiriyle konuşur; kullanıcı nereye geldiğini ve ne yapabileceğini bilir. Küçük sürprizlere yer var. Temel işlevleri saklamaya daha az. ## Meselenin özü Kullanışlı navigasyon; açık etiketler, anlamlı içerik grupları, görünür konum ve erişilebilir kontrollerle kurulur. Menünün dikkat çekmesi yeterli değildir: kişi aradığı yere gidebilmeli, geri dönebilmeli ve bunu fare kullanmadan da yapabilmelidir. Yaratıcı ifade temel yön bulma işini zorlaştırdığında, navigasyonun görevi yeniden ele alınmalıdır. ## Menü etiketi bir yön tabelasıdır Menüdeki sözcük, gidilecek yer hakkında beklenti kurar. 'Hizmetler' bir hizmet listesi; 'Çalışmalar' ise proje örnekleri bekletir. Yaratıcı bir ad kullanacaksak bu beklentiyi anlaşılır bağlamla destekleyelim. Kullanıcının farklı bir adın anlamını tahmin etmesini zorunlu tutmak, temel navigasyonu bir bilmecenin içine yerleştirebilir. Karakteri metnin çevresinde ve görsel dilde kurmak için yeterince alan var. ## Menü sadece fareyle çalışmaz Navigasyon bağlantıları klavyeyle ulaşılabilir olmalı; odak görünmeli ve sırası anlamlı ilerlemelidir. Açılır menüyü yöneten buton, açık veya kapalı durumunu yardımcı teknolojilere aktarmalıdır. W3C WAI, menü yapısı ve klavye davranışı için bu konuları ayrı ayrı ele alır. Mobilde dokunma alanını ve uzun etiketlerin taşmasını da kontrol et. Ekran daraldığında menü başlıklarını görünmez hale getirmek, aynı bilgiyi başka bir anlaşılır biçimde sunmayı gerektirir. - Tab ile her bağlantıya ulaş; odağın nereye gittiğini gör. - Menü butonunun adı ve açık/kapalı durumu anlaşılır olsun. - Kapatıldığında odağı menüyü açan kontrolün üzerine geri getir. - Ana içeriğe atlama bağlantısıyla tekrar eden navigasyonu geç. ## Bir ziyaretçinin rotasını çizelim. Örnek senaryo: Korseni Tasarla arayüzünü ilk kez gören biri koleksiyonları incelemek, ardından bir ürünün rengini seçmek istiyor. Menü ile sayfa içindeki seçimlerin aynı şey olmadığını görünür tutuyoruz. ### İlk öneri Simgesinin anlamı belirsiz bir kontrol, yaratıcı ama anlaşılmayan menü adları, açılınca arka planda kalan klavye odağı. ### Karar netleşince Adı belli bir menü kontrolü, “Korseler” ve “Koleksiyonlar” gibi içerik bağlantıları, ayrı bir renk seçimi ve görünür klavye odağı. ![Korseni Tasarla arayüzünde üst navigasyon ve ürüne ait renk seçenekleri](https://androverse.com.tr/media/projects/korseni-tasarla-atelier.webp) Korseni Tasarla: içerik menüsü üstte, ürünün renk seçimi kendi bağlamında. Bu rota üç parçadan oluşur: kişinin bulunduğu ürün dünyasını anlaması, bir içerik grubuna geçmesi ve seçtiği ürünün ayrıntısını açması. Her adımda geri dönüş yolu korunmalıdır. Korseni Tasarla görselinde üstteki menü ile ürünün yanındaki renk seçenekleri farklı alanlarda duruyor. İlk grup başka bir içeriğe götürürken ikincisi mevcut ürünün görünümünü değiştirir. Bu görev farkını etikette ve konumda açık tutmak, kullanıcıyı her kontrolde yeniden tahmin yürütmekten kurtaran bir tasarım hedefidir. Menü etiketini değerlendirirken kullanıcıya hedefin adını önceden söyleme. 'Koleksiyonlar bağlantısını bul' demek yerine 'Hangi ürün ailelerinin bulunduğunu öğrenmek istiyorsun' gibi bir ihtiyaç ver. Böylece etiketi hatırlama becerisini değil, içerik ilişkisini nasıl anladığını gözlemlersin. Statik görsel, klavye davranışını doğrulamaz; gerçek arayüzde odağın sırasını ve menünün kapanmasını ayrıca incelemek gerekir. Geri bildirimleri kaydet; küçük bir denemenin bütün ziyaretçiler adına sonuç verdiğini varsaymadan sonraki düzenlemeyi belirle. ## Nerede olduğunu da anlat Bir blog yazısına arama sonucundan gelen kişinin ana sayfayı görmüş olması gerekmez. Site kimliği, blog bağlantısı ve ekmek kırıntısı bu kişinin bulunduğu yeri anlamasına yardımcı olur. Sayfa içi gezinme ile başka sayfaya geçişi tutarlı kullan. İçindekiler bağlantısı ilgili başlığa giderken, blog menüsü bir dizine gitmelidir. Bağlantının etiketini hedefindeki içerikle uyumlu tut. ## Görev temelli bir navigasyon testi 'Web tasarım hizmetini bul ve görüşme yoluna ulaş' gibi bir görev seç. Kullanıcının ilk baktığı alanı, duraksadığı etiketleri ve geri dönme ihtiyacını gözlemle. Menü açıkken sayfanın kayması veya odağın arka planda kalması gibi davranışları kaydet. Otomatik bir erişilebilirlik puanı bu deneyimin tamamını doğrulamaz. Gerçek klavye kullanımı, ekran okuyucu incelemesi ve içerik etiketlerinin anlamı ayrıca değerlendirilmelidir. ## Keşif kalsın. Kaybolma hissi kalmasın. İçerik mimarisini, navigasyonu ve arayüz davranışını birlikte tasarlayalım. [Web yaklaşımımızı incele](https://androverse.com.tr/hizmetler/web-tasarim-yazilim) ## Menü çizmeden önce içeriği sırala Navigasyon tasarımı çoğu zaman başlık çubuğuyla başlar, fakat menünün arkasındaki sorun içerik ilişkisidir. Hangi sayfa hangi soruya cevap veriyor? Bir hizmet ile o hizmetin örneği aynı yerde mi, birbirine bağlı mı? Aynı içerik farklı adlarla tekrar mı açılıyor? Bu sorular cevaplanmadan menünün animasyonunu iyileştirmek sadece kapının kolunu parlatır. İçerinin planı hâlâ karışık kalabilir. Mevcut sayfaları kısa bir envantere dök. Her birinin başlığını, ziyaretçi amacını ve gitmesini beklediğin sonraki yeri yaz. Benzer amaçları grupla, fakat kurumun iç organizasyon şemasını ziyaretçiye zorunlu kılma. Kullanıcı şirketin hangi ekibinin ne ürettiğini bilmeyebilir. Grupların adı ziyaretçinin ihtiyaçlarından çıktığında menü, sitenin yapısını öğretmeye başlar. Gereksiz başlıkları gizlemek yerine içeriğin kendisini birleştirmek de bazen doğru çözümdür. ## Mobil menü küçültülmüş masaüstü değil Dar ekranda kullanılabilir alan azalırken kişinin bağlamı da değişebilir. Tek elle kullanım, dış ortam ve bağlantı koşulları aynı görevi etkiler. Bu nedenle mobil menüyü yalnız yazıları küçülterek çözmeyiz. Dokunma hedeflerinin ayrılması, açılma yönü, uzun etiketlerin satır davranışı ve kapanış yolu birlikte tasarlanır. Menü açıkken altında kalan içerik yanlışlıkla etkileşime girmemelidir. Bir alt başlığı görmek için hover bekleyen düzen dokunmatik kullanımda aynı karşılığı bulmayabilir. Ana bağlantıya gitmek ile alt grubu açmak ayrı davranışlarsa kontroller de bunu anlatmalıdır. W3C WAI menü rehberi, yapının anlamlı işaretlenmesini ve fare ile klavyede çalışmasını temel alır. Gerçek cihazda parmağın hedefi nasıl bulduğunu gözlemlemek, tasarım dosyasındaki ideal boşluklardan daha somut bilgi verir. ## Fareyi bir dakika kenara bırak. Siteyi Tab, Shift+Tab, Enter ve Escape ile dolaş. Aşağıdaki gözlemler otomatik bir erişilebilirlik raporunun yerine geçmez; görünür sorunları yakalamana yardım eder. ### Her adımda odağın nerede olduğunu görüyor musun? Odak işaretini gizleme. Menü açılıp kapanırken görünür ve anlamlı bir yere döndüğünü incele. ### Bağlantı adı hedefini önceden anlatıyor mu? Yalnız 'Keşfet' gibi belirsiz adlar yerine bağlamı belli hizmet, proje veya içerik adını kullan. ### Uzun bir yazıdan dizine geri dönebiliyor musun? Ekmek kırıntısı ve destekleyici içerik yollarını kontrol et. Geri dönüşü yalnız tarayıcıya bırakma. Temel rota görünür. Şimdi menüyü farklı görevler, ekran boyutları ve yardımcı teknolojilerle değerlendirmek gerekir. ## Sayfa içindeki yol ile sitedeki yol İçindekiler, uzun bir metnin bölümleri arasında dolaştırır. Ana menü ise farklı sayfalara geçiş sağlar. İkisini aynı görsel ağırlıkta ve aynı yerde göstermek, kişiye gereksiz seçim yükü yaratabilir. Yazının başında önce işe yarar bir açıklama sunmak, ardından okuma akışına bağlı bir içerik menüsü yerleştirmek daha doğal bir giriş oluşturabilir. Sabit bir yan sütun her içerik için gerekli değildir. Bölüm bağlantısının hedefi sabit başlığın altında saklanmamalı. Başlık metni menüdeki etiketle eşleşmeli ve sayfanın URL yapısı paylaşılabilir olmalıdır. Aynı tutarlılık ekmek kırıntısında da sürer: kişi bir yazının bloga, bir kavramın sözlüğe, bir projenin çalışmalar dizinine ait olduğunu anlayabilmeli. Tasarım bu bilgiyi sessizce taşıdığında gezinmek ayrı bir görev olmaktan çıkar; okumanın ve keşfetmenin doğal devamı olur. Menüye yeni bir sayfa eklemek için yalnız boş yer olup olmadığına bakma. Mevcut grup içinde anlamlı bir yeri var mı, başka bir sayfanın işini tekrarlıyor mu, başlık ziyaretçinin kullandığı sözcüklerle örtüşüyor mu? İçerik büyüdükçe navigasyonun bakımını yapmak gerekir. Eski ve yeni bağlantıları aynı anda biriktirmek, zamanla hiçbir şeyin öncelikli görünmediği bir menü yaratabilir. İçerik envanterini düzenli olarak gözden geçir; taşınan sayfalarda doğru yönlendirme ve anlaşılır yeni yollar planla. Böylece küçük eklemeler büyük bir yön bulma sorununa dönüşmez. ## Deneyimin yön tabelaları Dijital deneyim yazısının navigasyon kolu. Hareket ve geri bildirim yazıları, menünün davranışını tamamlıyor. - [“Biraz daha wow” kaç piksel?](https://androverse.com.tr/blog/biraz-daha-wow-kac-piksel) - [Her şey hareketli. Peki göz nereye?](https://androverse.com.tr/blog/her-sey-hareketli-peki-goz-nereye) - [“Bir tık”ın koordinatları.](https://androverse.com.tr/blog/bir-tik-in-koordinatlari) ## Kaynaklar - [W3C WAI — Menus Tutorial](https://www.w3.org/WAI/tutorials/menus/) ## Konuyu uygulamaya taşı - [Bilgi mimarisi](https://androverse.com.tr/sozluk/bilgi-mimarisi) — Menü etiketlerini içerik grupları ve sayfa ilişkileriyle birlikte kur. - [Klavye odağı](https://androverse.com.tr/sozluk/klavye-odagi) — Geçiş, açılma ve kapanma sırasında odağın nasıl izleneceğini açıkla. - [Web tasarım & yazılım](https://androverse.com.tr/hizmetler/web-tasarim-yazilim) — Navigasyon, içerik ve erişilebilirliği web tesliminin parçası yap. - [Mobil uygulama](https://androverse.com.tr/hizmetler/mobil-uygulama-tasarim) — Küçük ekrandaki ana görevi ve geri dönüş yolunu prototipleştir. - [“Biraz daha wow” kaç piksel?](https://androverse.com.tr/blog/biraz-daha-wow-kac-piksel) — Dünya ajanslarının ortak ölçü birimi. - [Her şey hareketli. Peki göz nereye?](https://androverse.com.tr/blog/her-sey-hareketli-peki-goz-nereye) — Bir sahnenin başrolü, bazen durduğu için görünür. - [“Bir tık”ın koordinatları.](https://androverse.com.tr/blog/bir-tik-in-koordinatlari) — Biraz daha premium. Biraz daha ne? [Yazar: Androverse](https://androverse.com.tr/yazar/androverse) · [Yayın ilkeleri](https://androverse.com.tr/yayin-ilkeleri)