Dropdown Menü Tasarımı: Hover, Gecikme ve Dokunmatik
Dropdown menü çizmek kolay, çalıştırmak zor. Tasarım dosyasında her şey yerli yerindeyken menü, gerçek bir kullanıcının faresi köşegen bir yol izlediğinde ya da ekranda fare hiç yokken dağılır. Aşağıda menünün açılma biçimi, kapanma gecikmesi, dokunmatik davranışı ve klavye üzerinden bu dağılmanın tam olarak nerelerde olduğuna bakıyorum.
Menü türü kararı, davranış kararından önce gelir
Üç yaygın biçim var: tek düzeyli açılır liste, alt kırılımları olan çok düzeyli menü, ve tüm kategori haritasını tek panelde açan mega menü. Aralarındaki fark görsel değil, kaç tane etkileşim durumu yönetmek zorunda kalacağınızla ilgili. Tek düzeyli menüde açık ve kapalı olmak üzere iki durum vardır. Çok düzeyli menüde her katman kendi açılma, kapanma ve odak durumunu taşır, üstelik bu durumlar birbirini tetikler.
Mega menü bu açıdan sürpriz biçimde ucuzdur: katman yoktur, tek panel açılır, içindeki gruplama tamamen düzen meselesine iner. Çok düzeyli menüyü mega menüden daha kırılgan bulurum; ikisi de sonuçta aynı içeriği gösteriyor, ama biri iç içe geçmiş zamanlayıcılarla, diğeri tek bir açık durumla çalışıyor.
Hover mu, tıklama mı?
Fareyle üzerine gelince açılan menü hızlı hissettirir. Peki kullanıcı o menüyü açmak istemediyse? Sayfanın üst şeridinden geçen her fare hareketi paneli açar, kapatır, yeniden açar. Bunu küçük bir açılma gecikmesiyle törpüleyebilirsiniz: imleç başlığın üzerinde yaklaşık 100 ms kalmadıysa panel hiç açılmasın.
Tıklamayla açılan menüde bu sorun baştan yoktur, karşılığında bir tık maliyeti vardır. Ana başlığın kendisi de bir bağlantıysa karar zorlaşır, çünkü tek tıklama artık iki iş birden yapmak zorunda kalır.
Kapanma gecikmesi neyi çözmez
Sık verilen tavsiye şu: kullanıcı menüden çıkınca 200 ms bekle, paneli hemen kapatma. Tavsiye doğru, ama sandığınız sorunu çözmüyor. Kapanma gecikmesi yalnızca menüden yanlışlıkla çıkma durumunu kurtarır. Asıl kırılma noktası başka yerde: alt panel sağa açılıyorsa ve kullanıcı imleci başlıktan panele köşegen bir çizgide götürüyorsa, o çizgi alttaki kardeş başlıkların üzerinden geçer. Kardeş başlığın hover işleyicisi bunu yeni bir seçim diye okur ve paneli değiştirir. Kullanıcı aslında hiçbir yerden çıkmamıştır, gecikme devreye bile girmez.
Geometrik olarak güvenli bölge, imlecin bulunduğu nokta ile panelin kullanıcıya bakan iki köşesi arasında kalan üçgendir. İmleç bu üçgenin içinde ilerlerken açık paneli sabit tutun, üçgenin dışına çıktığı anda kardeş başlıkların hover olaylarını yeniden dinleyin. İmleç konumunu izleyen küçük bir kontrol yeter, hazır menü kütüphanesi getirmeye gerek yok. Kaçınmanın daha ucuz bir yolu da var: alt paneli sağa değil başlığın tam altına açarsanız köşegen yol diye bir şey kalmaz.
Dokunmatikte hover diye bir şey yok
Telefonda ilk dokunuş hover değildir. Menü başlığı aynı zamanda bağlantıysa dokunuş kullanıcıyı doğrudan sayfadan götürür, alt seçenekler hiç görünmez. Çözüm sıkıcı ama çalışıyor: başlığı bağlantı değil buton yapın, açık olup olmadığını aria-expanded ile bildirin, kategorinin kendi sayfasına giden bağlantıyı panelin ilk satırına koyun. Böylece Ayakkabı başlığına dokunmak paneli açar, panelin içindeki Tüm ayakkabılar satırı kategoriye götürür, iki niyet birbirine karışmaz.
Klavye ve odak
Panel açıldığında odağın nereye gittiği çoğu projede hiç düşünülmemiş oluyor. Sekme tuşu paneli atlayıp sayfanın gövdesine düşüyorsa o panel klavye kullanıcısı için yok demektir. Escape paneli kapatmalı ve odağı paneli açan başlığa geri vermeli. Ok tuşlarıyla gezinme hoş bir ek, ama önce bu ikisi çalışsın.
Kaç kategori sığar
Ana kategori sayısı onu geçmesin gibi yuvarlak sayılar dolaşıyor. Sayı yanlış yerde duran bir kısıt. Birbirinden net ayrılan on başlık rahat taranır; birbirine benzeyen beş başlık kullanıcıyı ikisi arasında gidip gelmeye zorlar. Ürünler, Çözümler, Hizmetler, Platform ve Sistemler yan yana durduğunda listenin kısalığı kimseyi kurtarmaz. Sorun uzunluk değil, ayırt edilebilirlik.
Kart sıralama (card sorting) tam olarak bunu ölçer: kullanıcılara içerikleri verirsiniz, kendi gruplarını kurarlar, çıkan grup adları sizin başlık listenizden uzaksa menüyü yeniden yazmanız gerekiyordur. Peki ya farklı kullanıcılar birbirine hiç benzemeyen gruplar kurarsa? O zaman içeriğin doğal bir hiyerarşisi yok demektir, menüyü zorlamak yerine aramaya yatırım yapmak daha akıllıca olur.