Masaüstünde Hamburger Menü: Mobil Öncelikli Tasarımın Yanlış Okunması

Mobil öncelikli tasarım çoğu projede bir yöntem olmaktan çıkıp slogana döndü. 360 piksel için kurulmuş arayüz, 27 inçlik monitörde de aynen karşımıza geliyor: ekranın ortasında üç çizgi, altında bir buçuk ekran boşluk. Oysa mobile-first bir arayüz reçetesi değil, dar ekrandan başlayarak içeriği önceliklendirme yöntemiydi. Hamburger menünün masaüstüne taşınması, bu ayrımın nerede kaybolduğunun en görünür örneği.

Mobile-first ne demekti

Terim Luke Wroblewski'nin 2011 tarihli Mobile First kitabıyla yayıldı ve iki şey söylüyordu: dar ekran seni içeriği önem sırasına dizmeye zorlar, bu da zaten iyi bir disiplindir; ve CSS'i küçükten büyüğe kurmak, büyükten küçüğe kurmaktan daha temiz sonuç verir. Hiçbiri "aynı arayüz her yerde" anlamına gelmiyordu. Zorlayıcı bir kısıt altında bulduğun çözümü, kısıt ortadan kalktığında da taşımak yöntemin kendisi değil, yöntemin ezberlenmiş hali.

Gerekçe düşer, maliyet kalır

Hamburger menünün tek sağlam gerekçesi yer darlığıdır. Sekiz başlığı 360 piksele yan yana sığdıramazsın, o yüzden içerik-kroma oranını korumak için menüyü katlarsın. 1440 pikselde bu kısıt yok. Ama menüyü kapattığında ödediğin bedel duruyor: kullanıcı her gezinme için fazladan bir tıklama yapıyor ve daha önemlisi, tıklamadan önce ne bulacağını bilmiyor. Görünen menü aynı zamanda sitenin içerik haritasıdır; kapattığın anda ziyaretçi "burada ne var" sorusunu gözüyle cevaplayamaz.

Nielsen Norman Group'un gizli navigasyon üzerine testleri bu yönde sonuç veriyor. Yine de "araştırmalar gösteriyor ki hamburger kötüdür" cümlesini olduğu gibi almam. Kaç maddelik menü, ne tür bir site, ziyaretçi aradığını biliyor mu, hepsi sonucu değiştirir. Az sayıda hedefi olan, ziyaretçisinin doğrudan tek bir işe geldiği bir uygulama panelinde katlanmış menü masaüstünde de sorun çıkarmaz. Bilgi yoğun kurumsal bir sitede, kataloğunda ya da haber sitesinde çıkarır. Ayrım ekran boyutunda değil, menünün keşfedilme işlevi taşıyıp taşımadığında.

İki menüyü birden göndermek

Responsive kurulumların çoğu masaüstü ve mobil navigasyonu ayrı ayrı işaretlemeye basıp birini CSS ile gizler. Bir kurumsal sitede masaüstü menüsünü açığa çıkarmaya çalışırken kaynağa baktığımda tam olarak bunu gördüm: aynı bağlantı listesi belgede iki kez duruyordu.

Bunun iki bedeli var. Birincisi erişilebilirlik: gizleme display:none ile yapılıyorsa tarayıcı öğeyi erişilebilirlik ağacından da çıkarır ve sorun olmaz, ama tema panelleri genelde transform ya da opacity ile kaydırır. O zaman kapalı görünen menü klavye odak sırasında kalmaya devam eder, sekme tuşuyla ilerleyen kullanıcı ekranın dışındaki bağlantılara düşer. İkincisi bakım: menü artık tek kaynaktan gelmiyor. Yeni bir kategori eklendiğinde birinde görünür, diğerinde unutulur, hatayı da fark eden olmaz çünkü kimse iki görünümü aynı anda açmaz. Aynı içeriği göstermekle aynı arayüzü kullanmak farklı şeyler; bunu ayırmanın yeri işaretlemenin kendisi.

Yerine ne konur

Masaüstünde ana navigasyonu doğrudan görünür tut, etiketlerini kategori adıyla yaz. Aramayı simge yerine kutu olarak koy, çünkü kutu aynı zamanda "burada arama var" mesajını da veriyor. Menü listesi yatayda taşacak kadar uzunsa çözüm onu bir simgenin arkasına saklamak değil, kısaltmak: taşan bir menü bilgi mimarisi sorununun belirtisidir, saklandığında sorun kaybolmaz sadece görünmez olur.

Navigasyonu tek bir veri kaynağından üret, iki ayrı kalıp yerine aynı listeyi iki farklı biçimde bas. Kırılma noktalarını cihaz adına göre değil, menünün sığdığı genişliğe göre seç. Ve mobil için verdiğin her kararı masaüstüne taşımadan önce tek soruyu sor: bu kararın gerekçesi olan kısıt burada da var mı? Yoksa taşıma.