Gizli İçeriği Ne Zaman Açmalı: Hover ve Tıklama Zamanlaması

Mega menü, ipucu kutusu, açılır filtre paneli. Hepsinde aynı soru var: kullanıcı gerçekten bunu açmak mı istedi, yoksa faresi oradan geçerken mi oldu? Cevabı milisaniyeler belirliyor ve bu değerler tahminle değil, niyet sinyalinin ne kadar güvenilir olduğuna bakılarak seçiliyor.

Tıklama açık bir sinyal, hover değil

Tıklama ve dokunma niyet bildirir. Kullanıcı parmağını oraya götürmüş, basmış; başka yorumu yok. Bu yüzden tıklamayla açılan içerikte gecikme aramanın anlamı yok, panel hemen açılmalı ve kullanıcı başka bir yere tıklayana kadar açık kalmalı.

Hover ise bir sinyal bile sayılmaz. Fare imleci ekranın bir ucundan diğerine giderken yoluna çıkan her şeyin üzerinden geçer. Menü başlığının üzerinde bulunmak, o menüyle ilgilenmek anlamına gelmiyor. Zamanlama meselesi tam burada başlıyor: hover'ı niyete çevirmek için imlecin orada kalması gerekiyor.

Hangi değer nereye

Pratikte üç ayrı eşik var ve hepsi farklı işi yapıyor:

• Görsel geribildirim: gecikmesiz. İmleç tetikleyicinin üzerine girdiği anda arka plan ya da ikon değişsin. Bu "burada bir şey var" demektir, henüz içeriği açmaz.
• Açılış: 200-400 ms bekleme. İmleç bu süre boyunca alanda kaldıysa panel açılır. Küçük ipucu kutularında alt sınıra, ekranın yarısını kaplayan mega menülerde üst sınıra yaklaşın; panel ne kadar çok yeri kapatıyorsa yanlış açılmanın bedeli o kadar yüksek.
• Kapanış: 300-500 ms tolerans. İmleç panelden çıktığı anda kapatırsanız, tetikleyiciden panele geçerken aradaki birkaç piksellik boşluğa denk gelen kullanıcı menüyü kaybeder.

Bu toleransı üçüncü parti bir kütüphaneye bağlamana gerek yok. mouseleave içinde bir setTimeout kur, mouseenter içinde clearTimeout ile iptal et; iş bu kadar, çünkü çözülen problem "kullanıcı geri döndü mü" sorusundan ibaret.

Çapraz hareket sorunu

Yan yana açılan menülerde klasik bir hata var. Kullanıcı sol taraftaki listeden bir maddenin üzerindeyken sağdaki panele ulaşmak ister ve imleci çapraz hareket ettirir. Bu yol boyunca alttaki maddelerin üzerinden geçer, her geçtiğinde panel değişir, hedeflediği içerik kaybolur.

Çözüm bekleme süresini uzatmak değil; uzatırsanız menünün tamamı hantallaşır. Doğru yaklaşım imlecin yönüne bakmak: imleç panele doğru ilerliyorsa, yani imlecin son konumu ile panelin üst ve alt köşeleri arasında kalan üçgenin içindeyse, alttaki maddeler tetiklenmez. Kullanıcı aşağı doğru düz inmeye başladığında üçgenden çıkar ve normal davranış geri gelir.

Ben Kamens'in Amazon menüsünü inceleyen yazısı bu tekniği ayrıntısıyla anlatıyor.

Dokunmatikte hover diye bir şey yok

Buraya kadarki değerlerin tamamı fare varsayıyor. Telefonda imleç yok, dolayısıyla hover ile açılan bir menü orada ya hiç açılmaz ya da tarayıcının taklit ettiği tek seferlik bir hover ile tuhaf davranır.

Asıl tuzak, üst menü maddesinin hem bağlantı hem tetikleyici olduğu durum. Masaüstünde üzerine gelince alt menü açılıyor, tıklayınca kategori sayfasına gidiliyor. Aynı madde dokunmatikte tek bir davranış seçmek zorunda: ilk dokunuş ya alt menüyü açar ve kategori sayfası erişilemez hale gelir, ya da doğrudan gider ve alt menü hiç görünmez. İkisini birden isteyemezsiniz.

Karar vermek yerine iki yol var. Ya alt menünün içine kategori sayfasının kendi bağlantısını ilk madde olarak koyarsınız, ya da açma işini ayrı bir ok düğmesine verirsiniz. Birincisi daha az yer kaplar ve daha az açıklama gerektirir.

Klavyeyi unutmayın

Klavyeyle gezen kullanıcıda da hover yok, odak var. :focus-within ile paneli açık tutmak çoğu menü için yeterli sonucu verir ve zamanlayıcı gerektirmez; odak panele girdiği sürece panel açık kalır, çıkınca kapanır. Ayrıca Esc tuşuyla kapanmayı ekleyin, odağı tetikleyiciye geri gönderin.

Açılış animasyonunu da 150-200 ms bandında tutun. Daha uzunu, hover gecikmesinin üzerine binince menü yavaş hissettirmeye başlar. prefers-reduced-motion tanımlıysa animasyonu tamamen kaldırın, bekleme süreleri kalsın.