Menü Tasarımı: Görünürlük, Etiket ve Erişilebilirlik Kararları
Menü, sitenin içindekiler tablosu değil; kullanıcının siteyi zihninde nasıl kurduğunun özeti. İyi kurulmuş bir menü çoğu zaman fark edilmez, kötü kurulmuş olanı iyi içeriğin bile önünü keser. Aşağıdakiler numaralı ipucu listesi değil, birbirine bağlanan birkaç karar ve her birinin bedeli.
Masaüstünde neden gizliyoruz?
Hamburger simgesi mobilde alan sıkıntısının makul cevabı. Peki geniş ekranda ne işe yarıyor? Menüyü bir etkileşim geriye itiyor, etiketleri görünmez kılıyor ve karşılığında kazanılan boşluk zaten kıt olmayan bir kaynak. Sadelik görüntüsü uğruna gezinmeyi saklamak, çoğu sitede kötü bir takas.
Yerleşim konusunda alışkanlıklara direnmenin de karşılığı yok. Kullanıcı ana menüyü sitelerde üstte, uygulamalarda solda arıyor:
- Ana menü: üstte, uygulamalarda sol kenarda
- Yardımcı menü (hesap, dil, arama): ana menünün üzerinde ya da sağ uçta
- Bölüm içi menü: iç sayfalarda sol sütun
- Alt menü: sayfanın en altında, ana menünün kopyası değil tamamlayıcısı
Etiketler menünün kendisidir
Menü tasarımının en çok konuşulan tarafı görsel, en belirleyici tarafı ise kelimeler. "Çözümler" başlığı kullanıcıya ne söylüyor? Şirketin iç bölümlenmesini yansıtan, kurum dilinden alınma etiketler kullanıcının aradığı kelimeyle örtüşmüyor ve tarama sırasında hiçbir şey yakalatmıyor.
Etiketleri kullanıcının kullandığı kelimelerle yaz, anahtar kelimeyi başa al. "Kurumsal Fiyatlandırma" yerine "Fiyatlandırma" daha hızlı taranır, çünkü göz sol kenardan aşağı iniyor ve ilk iki kelimeden sonrasını çoğu zaman okumuyor. Espri ve mecaz burada pahalıya patlıyor.
Hover, dokunma ve klavye
Üzerine gelince açılan alt menüler masaüstünde bile sorunlu. İmleç açılan panele köşegen bir yol izlediğinde araya giren kardeş öğelerin üzerinden geçiyor ve menü kapanıyor. Büyük e-ticaret sitelerinin kopyalana kopyalana yayılan çözümü, imlecin gittiği yönü tahmin eden bir üçgen ve kısa bir kapanma gecikmesi. Yani sorunu çözmek için ek bir katman yazılıyor.
Peki ya dokunmatik? Orada hover diye bir durum yok; ilk dokunuş çoğu tarayıcıda hover gibi yorumlanıyor ve bağlantı iki dokunuş uzağa düşüyor. Klavyeyle gezenler içinse panelin Tab ile ulaşılabilir, Escape ile kapanabilir olması gerekiyor. Alt menüyü tıklamayla açmak bu üç durumu tek davranışla çözüyor, bu yüzden varsayılan tercih o olmalı.
Dokunma hedeflerini de küçültme. Sıkışık bir menüde yan yana duran iki bağlantının arasındaki birkaç piksel, mobilde yanlış sayfaya giden her tıklamanın kaynağı.
Mega menü ne zaman işe yarar
Mega menü, kategoriler birbirine denk ve kullanıcı ne aradığını biliyorsa iyi çalışıyor. Site haritasının panele boşaltılmış hali olduğunda ise taranmıyor, sadece yer kaplıyor. İki yüz bağlantılı bir panel her sayfada işleniyor, her düzende bakımı yapılıyor ve kimse ilk on maddeden ötesine bakmıyor.
Derin bir kataloğunuz varsa sığ bir menü artı iyi çalışan bir arama, geniş bir mega menüden daha isabetli. Menüyü büyütmek genelde arama kutusunun zayıflığını gizleme girişimi oluyor.
Sabit menü ve "neredeyim" sorusu
Sabit başlık her kaydırmada ekranın bir kısmını götürüyor. 768 piksel yüksekliğinde bir dizüstü ekranında 80 piksellik bir bar, görüntü alanının yüzde onundan fazlası demek ve bu pay okuma boyunca hiç geri gelmiyor. Sticky menüyü sabit yükseklikte bırakma: aşağı kaydırırken daralt ya da gizle, yukarı kaydırınca geri getir. Birkaç satır CSS ve tek bir kaydırma dinleyicisiyle çözülür, hazır kütüphaneye gerek yok.
Kullanıcının konumunu göstermek ise ucuz ve karşılığı yüksek. Aktif menü öğesini yalnızca renkle değil, kontrastı yeterli ikinci bir işaretle de belirt; renk körlüğü olan biri için tek başına renk sinyal sayılmıyor. İz yolu ise ancak gerçekten derin bir hiyerarşi varsa yerini hak ediyor. Üç sayfalık bir blogda iz yolu, olmayan bir yapıyı varmış gibi gösteren süsten ibaret.