1. Önerinin yapacağı işi belirleyin

Arama kutusu kategori, ürün adı veya ürün kodu önerebilir. Kullanıcı bir öneriyi seçtiğinde kelimeyi kutuya mı yazacak, sonuç listesine mi gidecek, yoksa doğrudan ürün sayfasını mı açacak? Bu üç davranışı tasarımda birbirine karıştırmayın. Örneğin “Masa” bir kategori, “Masa M-24” belirli bir ürün olabilir. Aynı görünümlü satırlar farklı hedeflere gidiyorsa küçük bir tür açıklaması yardımcı olabilir. Önce iki gerçek katalog örneğiyle beklenen davranışı yazın; görsel efekt ve animasyon kararlarını bunun ardından verin.

2. Elle seçim ile otomatik seçimi bilinçli ayırın

W3C’nin combobox örüntüsü, elle seçilen ve otomatik seçilen liste tamamlama biçimlerini ayrı tanımlar. Elle seçimde yazılan metin, kişi bir öneriyi kabul etmedikçe değer olarak kalır; otomatik seçim farklı bir davranıştır. Bu rehberde serbest katalog araması için elle kabulü başlangıç tercihi olarak öneriyoruz. Bu, her form için zorunlu tek yöntem değildir. “Masa” yazan kişinin başka bir alana geçtiğinde farklı bir ürün adıyla karşılaşmamasını hedefleyin. Otomatik seçim gerekiyorsa bunun nedenini ve görünür işaretini tasarım kararına ekleyin.

3. Klavyeyle vazgeçmeyi ve devam etmeyi deneyin

Kontrol senaryosunda kutuya metin yazın, öneriler arasında ok tuşlarıyla dolaşın ve birini kabul etmeden listeyi kapatın. W3C örüntüsünde Escape açık listeyi kapatır; seçili öneri Enter ile kabul edilebilir. Uygulamanızda bu davranışların kullanıcıya ne yaptığını kontrol edin. Listeyi kapatmak yazılmış aramayı istemeden silmesin. Klavye odağının nerede olduğu görülebilsin ve normal metin düzenleme tuşları çalışsın. Yalnız fareyle tıklanabildiğini görmek, bu etkileşimin tamamlandığı anlamına gelmez.

4. Telefonda dar alan ve geciken sonucu sınayın

Mobil klavye açıkken öneri satırları görülebiliyor mu, kullanıcı yanlış satıra dokunmadan seçim yapabiliyor mu inceleyin. Ardından bir sorguyu hızla değiştirin: önce “masa”, sonra “lamba” yazıldığında geç dönen ilk yanıt yeni önerilerin üzerine yazılmamalı. Bu, geliştirme ekibiyle kontrol edilecek bir senaryodur; belirli bir gecikme değeri veya evrensel performans sınırı önermiyoruz. Boş kutu, tek sonuç, hiç öneri olmaması ve uzun ürün adı için ayrı deneme yapın. Açılan liste ekranın dışında kalmamalı veya önemli düğmeleri erişilemez yapmamalı.

5. Kabul ölçütünü ürün bulma göreviyle yazın

Örnek görev şöyle olabilir: “M-24 ürününü öneriden seç, ardından öneri kullanmadan lamba ara.” Hangi tuşun ne yapacağını katılımcıya baştan söylemeden davranışı gözleyin. Yazılan metnin korunması, önerinin doğru hedefe gitmesi ve listeden vazgeçebilme ayrı kontrol maddeleri olsun. Sonuç gelmediğinde sonraki adımı sonuçsuz arama rehberi tamamlar. Yeni katalog planında bu etkileşimi web tasarım kapsamına işlev olarak yazın. Öneri listesi süslü bir ek değil, doğru ürünün bulunmasına hizmet etmesi gereken bir kontroldür.

Sık sorulan sorular

Her arama kutusunun öneri listesi olmalı mı?

Hayır. Küçük bir katalogda anlaşılır bir arama ve sonuç sayfası yeterli olabilir; önerinin hangi işi kolaylaştıracağını önce belirleyin.

İlk öneriyi vurgulamak onu seçmek anlamına gelir mi?

Her uygulamada aynı değildir. Görsel vurgu, klavye odağı ve kabul edilen değer arasındaki ilişki açıkça tasarlanıp test edilmelidir.

Kaynaklar ve ileri okuma

W3C WAI — Combobox pattern ↗
Web tasarım & geliştirmeBu hizmeti konuşalım ↗