Web arayüzlerinde araç ipucu gecikmesi kullanıcı deneyimini iyileştiriyor
Öne çıkanlar
- İlk araç ipucu için uygulanan 200 milisaniyelik gecikme kazara açılmaları engelliyor.
- Kapanışın ardından başlayan 300 milisaniyelik tolerans süresinde diğer ipuçları anında açılıyor.
- Tolerans süresi dolduğunda sayfa durumunu sıfırlayarak 200 milisaniyelik gecikmeyi yeniden devreye sokuyor.
Web geliştiricisi Master Dev, FrontPrep adlı platformundaki şirket logolarında yer alan araç ipuçlarının (tooltip) fare imleci geçerken anında açılmasının yarattığı görsel karmaşayı çözmek için yeni bir etkileşim modeli geliştirdi. Araç ipuçlarının anında açılmasını engellemek amacıyla eklenen 200 milisaniyelik gecikme, yan yana duran simgeler arasında geçiş yaparken kullanıcı deneyimini yavaşlattı.
Sorunu aşmak amacıyla 'sıcak sayfa' (warm window) mekanizması kuruldu. İlk fare hareketinde 200 milisaniyelik açılış gecikmesi uygulanıyor ve ipucu açıldığında sayfa durumu 'sıcak' olarak işaretleniyor. Kullanıcı fareyi öğeden çektiğinde ipucu hemen kapanıyor ve 300 milisaniyelik bir bekleme sayacı başlıyor. Bu 300 milisaniyelik süre içinde başka bir öğenin üzerine gelinirse, yeni araç ipucu gecikme ve animasyon olmadan anında görüntüleniyor.
Süreç, React üzerinde durum yönetimi (useRef ve useContext) ile CSS veri öznitelikleri (data-instant) birleştirilerek uygulandı. Geliştirici, 150 milisaniyenin altındaki gecikmelerin kazara tetiklenmeleri önleyemediğini, 250 milisaniyenin üzerinin ise arayüzde yavaşlık hissi yarattığını kaydetti.
Bu özet yapay zekâ ile hazırlanmıştır; ayrıntılar ve doğrulama için orijinal kaynağa başvurun.