Navigasyon Menüsü: Kategori Sayısı, Sıralama ve Dokunmatik Sorunu
Menü tartışmaları neredeyse hep aynı üç soruda düğümlenir: kaç kategori, hangi sırayla, mobilde ne olacak. Üçünün de tek bir doğru cevabı yok, ama üçü de tahminle değil ölçümle çözülebiliyor. İşe şu soruyla başlamak daha verimli: kullanıcı aradığı şeyin adını biliyor mu?
Kategori sayısı aslında yanlış soru
Dolaşan "4-5 kategori idealdir" tavsiyesi büyük ölçüde Miller'ın 7±2 çalışmasından miras. O çalışma çalışma belleğinde tutulan öğelerle ilgiliydi, oysa menü ekranda duruyor. Kullanıcı listeyi ezberlemiyor, tarıyor. Peki menü dokuz kategoriyle daha net ayrılıyorsa ne olacak? Beşe indirmek için iki ilgisiz grubu birleştirmek, listeyi kısaltırken kararı zorlaştırır.
Ölçü sayı değil, tahmin edilebilirlik: bir kategorinin adına bakan kişi içinde ne olduğunu bilebiliyor mu, ve aradığı şey iki kategoriye birden düşüyor mu? "Çözümler" ile "Hizmetler" yan yana duruyorsa sorun kategori sayısında değil, örtüşmede. Bu tür çakışmaları menüye bakarak fark etmek zordur, çünkü yapıyı kuran kişi hangi şeyin nereye gittiğini zaten bilir.
Sıralama, kullanıcının ne bildiğine göre değişir
Alfabetik sıra tek bir durumda gerçekten işe yarar: kullanıcı aradığı öğenin adını biliyorsa. Ülke listesi, marka listesi, il listesi. Bir kurumsal sitede "kargo ücreti" arayan ziyaretçi hangi harfe bakacak? K mi, T mi, S mi. Aranan şeyin adı belli değilse alfabetik düzen sadece rastgele bir sıradır.
Adı bilinmeyen durumlarda sıklık sırası daha iyi çalışır: analitikten en çok tıklanan üç sayfayı alın, menünün başına koyun, gerisini konu bütünlüğüne göre gruplayın. Bir de şu var: yirmiden fazla kategori varsa o liste artık menüye ait değil. Orada gereken şey menü değil, arama kutusu ve filtre. Uzun listeyi alfabetik sıralayarak kurtarmaya çalışmak, kullanıcıyı gözle tarama işine mahkûm eder.
Hover menü dokunmatikte tam olarak nerede kırılıyor
Mesele "mobilde hover yok" cümlesinden biraz daha ince. Dokunmatik tarayıcılar geriye dönük uyumluluk için ilk dokunuşta sentetik bir mouseover üretir. Yani alt menü açılır, ama o ilk dokunuşun tıklaması üst seviyedeki bağlantıya ulaşmaz. Kullanıcı bağlantıya bastığını sanır, sayfa değişmez, ekranda bir katman belirir. İkinci kez dokunması gerektiğini kimse söylemez.
Bu yüzden üst seviye menü öğesi ya bir bağlantı olmalı ya bir açıcı, ikisi birden olmamalı. Alt menüsü olan başlıklarda temiz çözüm, açma işini ayrı bir ok düğmesine vermek ve o düğmeye en az 44 piksellik bir dokunma alanı bırakmak. Masaüstünde de küçük bir ayrıntı hayat kurtarır: imleç açılan panele çapraz inerken menü anında kapanmasın, kapanmaya 200-300 milisaniyelik gecikme koyun. Kullanıcılar fareyi düz çizgide hareket ettirmiyor.
Mobilde hamburger menü hâlâ makul bir çözüm (masaüstünde de hamburger kullanmayı gereksiz buluyorum). Ekranda yer varken menüyü saklamanın kullanıcıya bir faydası yok.
Menü kararını test etmenin ucuz yolu
Kart sıralama bu konuda refleks haline gelmiş bir yöntem, ama tek başına eksik. Kart sıralama size kullanıcıların içerikleri nasıl grupladığını söyler; menünüzün çalışıp çalışmadığını söylemez. İkincisi için ağaç testi (tree testing) daha doğrudan: kullanıcıya sadece menü hiyerarşisinin metnini gösterirsiniz, görsel yok, arama yok, "kargo ücretini nereden bulursunuz" dersiniz ve tıklama yolunu izlersiniz.
Çıkan iki sayı yeterince konuşur: görev başarı oranı ve ilk tıklamanın doğruluğu. İlk tıklama doğruysa görevin tamamlanma ihtimali belirgin biçimde yükselir, çünkü yanlış dalın içine giren kullanıcı genellikle geri dönmek yerine derinleşmeye devam eder. On beş katılımcı ve sekiz görev, bir öğleden sonrada toplanabilecek bir veri. Yeniden yapılandırmaya girişmeden önce mevcut menüyü de aynı testten geçirin, yoksa neyi iyileştirdiğinizi karşılaştıracak bir temeliniz olmaz.
Menü öğeleri gerçekten bağlantı olsun
Tasarım tarafında doğru görünen bir menü, uygulamada sadece bir tıklama dinleyicisine bağlı div yığınına dönüşebiliyor. Bu haliyle menü klavyeyle gezilemez, ekran okuyucu yapıyı liste olarak duyurmaz, orta tıklamayla yeni sekmede açılmaz, arama motoru bağlantıyı izlemez. Menü öğesi bir hedefe gidiyorsa gerçek bir <a href> olmalı, alt menü açıyorsa düğme olmalı ve durumu aria-expanded ile bildirmeli. Erişilebilirlik burada ek bir katman değil, zaten yapılması gereken işin doğru yapılmış hali.