Büyüteç İkonu: Arama Alanını Ne Zaman Gizlemeli?

Büyüteç ikonunun ne anlama geldiği tartışmalı değil; kullanıcılar onu tanıyor. Tartışılması gereken şey ikonun tek başına mı duracağı yoksa açık bir giriş alanıyla mı geleceği. Bu karar bir stil tercihi gibi görünür, oysa arayüzde ölçülebilir bir maliyeti var: fazladan bir dokunuş, kayan bir yerleşim, odaklanmayan bir input.

Masaüstünde alanı açık bırakın

Masaüstünde ekranın darlığı gerçek bir kısıt değil. Arama alanını genelde açık bırakır, büyüteci de yalnızca gönderme düğmesi olarak kullanırım. Kullanıcı alanı görür, tıklar, yazar. Arada adım yok.

Alanı ikonun arkasına saklamak masaüstünde iki şeye mal olur. Birincisi keşif: arama özelliğinin varlığı, ikonlar sırasının içinde kaybolur ve site içi arama trafiği düşer. İkincisi ritim: bir tıklama, bir animasyon, sonra yazmaya başlama. Tek başına küçük görünen bu gecikme, arama yapan kullanıcının niyetli ve aceleci olduğu düşünülünce büyür.

Yerleşim konusunda alışkanlığı zorlamayın. Sağ üst köşe ya da üst şeridin ortası; bunun dışına çıkan her konum kullanıcıya arama alanını aratır, ki bu da kendi başına ironik bir kullanılabilirlik sorunudur.

Mobilde ikon yeterli, ama odak kendiliğinden gelmiyor

Küçük ekranda ikonun tek başına durması makul, hatta çoğu zaman tek seçenek. Burada işi bozan şey ikonun kendisi değil, dokunmadan sonra olanlar.

Alan açıldığında input'a programatik olarak odaklanmıyorsanız kullanıcı iki kez dokunmak zorunda kalır: bir kez ikona, bir kez de açılan kutuya. Bunu input.focus() ile hallederseniz klavye de birlikte gelir. iOS tarafında bu çağrının kullanıcı etkileşimiyle aynı olay döngüsünde olması gerekir, gecikmeli bir setTimeout içinde klavye açılmaz.

İki küçük ayar daha var, ikisi de tek satır: type="search" alanı temizleme düğmesiyle getirir, enterkeyhint="search" ise sanal klavyedeki gönder tuşunu "ara" olarak etiketler.

Genişleyen kutunun hesabı

Genişleyen arama kutusu genellikle "alan kazandırıyor" diye önerilir, ama aynı metinlerde birkaç satır önce "tek başına ikon fazladan tıklama maliyeti getirir" yazar. İkisi aynı anda doğru olamaz; genişleyen kutu tam olarak o fazladan tıklamayı satın alarak alan kazanır.

Takas şöyle değerlendirilir: masaüstünde kazandığınız yer 200-250 piksel civarındadır ve bunun için her arama yapacak kullanıcıdan bir tıklama alırsınız. Kötü bir alışveriş. Mobilde kazandığınız yer başlık şeridinin yarısıdır, alternatif ise menüyü ve logoyu sıkıştırmaktır. Orada aynı takas mantıklı hale gelir. Yani genişleyen kutu bir prensip değil, ekran genişliğine bağlı bir karar.

Genişlerken yerleşimi kaydırmamaya dikkat edin. Kutu açılınca logo ya da menü öğeleri yer değiştiriyorsa kullanıcı bir an neye baktığını kaybeder; alanı üst katmanda (overlay) açmak bu sorunu bitirir.

Erişilebilirlik: düğmenin bir adı olsun

İçinde sadece SVG olan bir button, ekran okuyucu için adsızdır. Kullanıcı "düğme" diye duyar, ne düğmesi olduğunu duymaz. Çözüm aria-label="Ara" ya da görsel olarak gizlenmiş bir metin; ikisi de tek satır ve hiçbir tasarım tavizi gerektirmiyor.

Enter tuşuyla aramanın çalışması için de JavaScript yazmanıza gerek yok. Alanı gerçek bir form içine koyup düğmeyi type="submit" yaparsanız hem Enter hem tıklama aynı yola girer. Tarayıcının bedava verdiği davranışı yeniden yazan tuş dinleyicileri, sonradan mobil klavyelerde tuhaf davranmasıyla ünlüdür.

Son olarak ikonun kendisi: dolgusuz, ince detaysız, sap açısı belirgin bir büyüteç küçük boyutta tanınır. Dokunma hedefini ikonun görsel boyutundan bağımsız düşünün, ikon 16 piksel olabilir ama tıklanabilir alan 44 piksele yakın olmalı.