Kısaca: Menü, ikon ve kart, web arayüzlerinin en sık kullanılan üç öğesidir. Masaüstünde ana menüyü görünür tutun; NN/g’nin araştırmasında hamburger menünün arkasına saklanan navigasyon masaüstünde yarı yarıya daha az kullanıldı. İkonları mümkün olduğunca yazılı etiketle birlikte kullanın; ev ve arama dışındaki ikonların anlamı çoğu kullanıcı için açık değildir. Kartlar ise farklı içerikleri aynı yapıda sunmak içindir: görsel, başlık, kısa açıklama ve tek bir eylem.
Kısa cevap
Bir sitenin kullanılabilir olup olmadığını büyük ölçüde bu üç öğe belirler: Ziyaretçi aradığını menüden bulabiliyor mu, ikonların ne işe yaradığını anlıyor mu, kartlar arasında karşılaştırma yapabiliyor mu? Bu yazıda her biri için araştırmalara dayanan temel kuralları anlatıyorum.
Menü (navigasyon)
Hamburger menü ne zaman sorun olur?
Üç yatay çizgiden oluşan hamburger simgesi, menüyü bir tıklamanın arkasına saklar. Telefonda yer darlığı yüzünden çoğu zaman kaçınılmazdır. Sorun, aynı çözümün masaüstüne taşınmasıdır. Nielsen Norman Group’un 179 kişiyle yaptığı karşılaştırmalı araştırmada, masaüstünde gizli menüler görevlerin yalnızca %27’sinde kullanıldı; görünür ya da kısmen görünür menüler ise neredeyse iki kat daha sık (%48–50) kullanıldı. Gizli menüde görevler daha uzun sürdü ve kullanıcılar görevleri daha zor buldu (NN/g).
NN/g’nin daha yeni bir çalışması, hamburger simgesinin artık çoğu kullanıcı tarafından tanındığını gösteriyor (NN/g). Ama tanınmak, kullanılmak demek değil: Gizlenen şey yine daha az görülüyor.
İyi bir menü için kurallar
- Masaüstünde görünür menü: Ana bölümler doğrudan başlıkta yer alsın.
- Az ve net öğe: Ana menüde genellikle 5–7 öğe yeterlidir. Her öğe kısa ve ne olduğunu söyleyen bir kelime olsun: “Çözümlerimiz” yerine “Hizmetler”.
- Mobilde menüyü belirgin yapın: Hamburger simgesinin yanına “Menü” yazmak keşfedilebilirliği artırır. En önemli bir iki öğeyi (örneğin “Teklif al”) dışarıda bırakabilirsiniz.
- Bulunduğu yeri göstersin: Aktif sayfa menüde vurgulanmalı.
- Logo ana sayfaya götürsün: Kullanıcılar bunu bekler.
- Alt bilgi (footer) menüsü: Sayfanın sonuna gelen kullanıcıya ikinci bir yön bulma şansı verir.
İkon
İkonlar yer kazandırır ve arayüzü sadeleştirir; ama yalnızca anlamları açık olduğunda. NN/g’ye göre evrensel olarak tanınan ikon sayısı çok azdır: ev (ana sayfa), büyüteç (arama) ve birkaç benzeri. Kalp, yıldız, ok gibi ikonların anlamı siteden siteye değişir. Bu yüzden NN/g, ikonların yanında yazılı etiket kullanılmasını öneriyor (NN/g).
İkon kullanım kuralları
- Etiket ekleyin: Özellikle navigasyonda ikonun altına ya da yanına kısa bir kelime yazın.
- Tek bir ikon seti kullanın: Farklı setlerden ikonlar çizgi kalınlığı ve köşe yapısı bakımından uyuşmaz.
- Tutarlı olun: Aynı ikon sitenin her yerinde aynı anlamı taşısın.
- Dokunma alanını unutmayın: Küçük ikonlar bile en az 44 piksellik bir tıklanabilir alanın içinde olmalı.
- Ekran okuyucuyu düşünün: Etiketsiz ikon butonlarına
aria-labelekleyin. WebAIM’in 2026 raporuna göre en popüler bir milyon ana sayfanın %30,6’sında içi boş (adsız) buton bulunuyor.
Dokunma alanı ve buton tasarımını buton ve form tasarımı yazısında anlattım.
Kart
Kart, tek bir konuyla ilgili bilgiyi (bir blog yazısı, bir ürün, bir hizmet) bir çerçeve içinde toplayan arayüz öğesidir. Gücü tekrarından gelir: Bütün kartlar aynı yapıda olduğunda kullanıcı onları hızla tarayıp karşılaştırabilir.
Kart ne zaman doğru seçimdir?
- Benzer türde, birbirinden bağımsız içerikleri listelerken: blog yazıları, ürünler, projeler.
- İçeriklerin görselle birlikte taranması gerektiğinde.
- Farklı ekran boyutlarına uyum gerektiğinde: Kartlar masaüstünde üçlü, mobilde tekli diziye kolayca dönüşür.
Sıralı ve karşılaştırmalı bilgiler için (örneğin teknik özellikler ya da fiyat karşılaştırması) kart yerine liste ya da tablo daha uygundur. Kartlar taramayı kolaylaştırır, ama satır satır karşılaştırmayı zorlaştırır.
İyi bir kart için kurallar
- Bütün kartlarda görsel oranı ve öğe sırası aynı olsun.
- Başlık kartın en güçlü öğesi olsun; açıklama 2–3 satırı geçmesin.
- Tek bir ana eylem olsun. Kartın tamamı tıklanabilir yapılabilir; o zaman içinde ayrı ayrı tıklanan çok sayıda bağlantı bulunmamalı.
- Kartlar arası boşluk, kart içi boşluktan büyük olsun.
Kartları gruplayan boşluk kurallarını boşluk ve düzen yazısında, kartların farklı ekranlarda nasıl dizildiğini responsive tasarım yazısında bulabilirsiniz.
Sık sorulan sorular
Mega menü kullanmalı mıyım?
Çok sayıda kategorisi olan e-ticaret ve kurumsal sitelerde, alt kategorileri gruplar hâlinde gösteren mega menüler işe yarar. Az sayfalı sitelerde ise gereksiz karmaşa yaratır.
Sabit (yapışkan) menü iyi mi?
Uzun sayfalarda kaydırırken üstte kalan menü, navigasyona her an erişim sağlar. Mobilde ekranın çok büyük bir kısmını kaplamamasına dikkat edin.
İkon için hangi seti kullanmalıyım?
Tek bir açık lisanslı set seçip tutarlı kullanmak, farklı setlerden ikon toplamaktan iyidir. Ücretsiz ve geniş setler bulunur; lisans koşullarını kontrol edin.
Bu yazı Kasım 2026 itibarıyla geçerli bilgilere dayanır.
