Arama Kutusu Tasarımı: Görünürlük, Kısayol ve Sorgu Performansı

Arama kutusu, kullanıcıyı menüyü öğrenme zorunluluğundan kurtaran tek arayüz öğesi. Yine de çoğu sitede kutu vardır ama arama yoktur: alan bir büyütecin arkasına saklanmıştır, sorgu her istekte tüm tabloyu tarar, sonuç sayfası neyin arandığını bile yazmaz. Kutuyu çizmek kolay kısım. İş, arkasındaki üç kararda: görünürlük, sorgunun nasıl çalıştığı ve sonuç sayfasının ne gösterdiği.

Önce şu soru: arama gerçekten gerekli mi?

Arama, içerik sayısı menüyle taranamayacak kadar büyüdüğünde devreye giren bir gezinme yöntemidir. Yirmi sayfalık bir kurumsal sitede arama kutusu koymak çoğu zaman zarar verir, çünkü o kutuya yazılan her sorgu boş dönme riski taşır ve boş sonuç, kullanıcıya "bu sitede aradığım yok" der. Oysa yüzlerce yazılık bir arşivde ya da ürün kataloğunda arama, ana yol haline gelir; menü orada sadece kategoriye giriş kapısıdır. Kutuyu koymadan önce içeriğin hangi tarafta olduğuna karar verin.

Görünürlük: kutu, ikon değil

En yaygın hata, arama alanını tıklandığında açılan bir büyüteç ikonuna indirgemek. İkon, kullanıcıya orada arama olduğunu söylemez; sadece bir düğme olduğunu söyler. Görünür bir metin alanı, ikonun arkasına saklanmış alandan belirgin şekilde daha fazla kullanılır. Alan üstte, her sayfada aynı yerde ve arka planla arasında gerçek bir kontrast olacak biçimde dursun.

Genişlik de kararın parçası. Site içi sorgular genelde iki üç kelimedir, dolayısıyla yazılanın tamamını gösterebilen otuz karakterlik bir alan işi görür. Daha dar bir kutuda kullanıcı yazdığını göremez, yazım hatasını fark etmez, sonucu suçlar. Mobilde alanı tamamen gizlemek yerine ikonla açılan tam genişlikte bir katman kullanın; açıldığı anda klavye de gelsin, kullanıcı ikinci kez dokunmak zorunda kalmasın.

Etiket, placeholder ve erişilebilirlik

Placeholder bir etiket değildir. Kullanıcı yazmaya başladığı anda kaybolur, yani alanın ne işe yaradığını hatırlatma görevini tam da ihtiyaç duyulduğu anda bırakır; ekran okuyucular için de güvenilir bir kaynak değil. Doğrusu, görsel olarak gizlenmiş de olsa gerçek bir label kullanmak ve placeholder'ı yalnızca örnek sorgu için ayırmaktır. Bir de tarayıcının varsayılan davranışıyla uğraşmayın: placeholder odaklanınca değil, ilk karakter yazılınca kaybolur ve bu zaten olması gereken davranıştır.

<form role="search" action="/ara" method="get"> <label for="q" class="gizli">Sitede ara</label> <input id="q" name="q" type="search" placeholder="Ürün adı ya da kod"> </form>

type="search" mobilde klavyeye "ara" tuşunu getirir ve alanı temizleme düğmesini ücretsiz verir. role="search" ise ekran okuyucu kullanıcısının doğrudan bu bölgeye atlamasını sağlar.

Kısayol tuşunu seçerken Ctrl+F'e dokunmayın

Site içi aramayı Ctrl+F ya da Cmd+F ile açma fikri sık önerilir ve yanlıştır. O kombinasyon tarayıcının sayfa içinde bul işlevidir; kullanıcı çoğu zaman gördüğü sayfada bir kelime arar, sizin arama katmanınızı değil. Beklediği davranışı elinden aldığınızda kazandığınız şey bir kısayol değil, bir kırgınlık.

Yerleşik ve çakışmayan iki seçenek var: eğik çizgi tuşu ve Cmd/Ctrl+K. İkisi de yaygın, ikisi de tarayıcının kendi kısayollarıyla kavga etmiyor. Tek koşul, dinleyicinin odak başka bir metin alanındayken devreye girmemesi; yorum yazan kullanıcının cümlesindeki eğik çizgi arama kutusunu açmamalı. Escape ile katmanı kapatmayı da unutmayın, açılan her şey kapanabilmeli.

Sonuç sayfası ve sıfır sonuçlu sorgular

Sonuç sayfası, arananı en üstte tekrar yazsın ve kaç kayıt bulunduğunu söylesin. Kullanıcı yazdığını orada görmezse yanlış sonucun sebebini anlayamaz. Sıralamayı alaka düzeyine göre kurun; tarihe göre sıralanan bir arama sonucu, aslında sıralanmamış demektir.

Asıl değerli kısım boş dönen sorgular. Sıfır sonuçlu aramaların kaydı, sitenizde olmayan ama aranan şeyin listesidir ve içerik planı için analiz araçlarındaki çoğu metrikten daha doğrudan konuşur. O listeye bakınca iki tür kayıt görürsünüz: gerçekten eksik içerik ve isim uyuşmazlığı. Birincisi yeni yazı demek, ikincisi eşanlamlı tablosu demek. Kullanıcı "kargo ücreti" yazıyor, sizin sayfanın adı "teslimat koşulları" ise sorun aramada değil, sözlükte.

Sorgu tarafı: LIKE ile kurulan arama bir gün yavaşlar

Arama kutusunun görünmeyen yarısı veritabanında. LIKE '%kelime%' biçiminde bir sorgu B-tree indeksini kullanamaz, çünkü joker karakter baştadır ve indeks ancak baştan eşleşmeyi tarayabilir. Yani LIKE 'kelime%' hızlıdır, başına yıldız koyduğunuz an tam tarama başlar. Küçük tabloda kimse fark etmez, tablo büyüdükçe süre satır sayısıyla doğru orantılı artar.

Bir müşteri sitesinde arama kutusu aylarca sorunsuz çalıştı, ürün sayısı kırk bini geçince aynı sorgu üç saniyeye çıktı; düzeltme arayüzde değil, tam metin indeksindeydi. MySQL tarafında FULLTEXT, PostgreSQL tarafında tsvector çoğu site için yeterli çözüm; kelime kökü, eşanlamlı ve yazım hatası toleransı gerekiyorsa ayrı bir arama motoruna geçmenin zamanı gelmiş demektir. Sıralamayı kendiniz kuracaksanız başlıkta geçen eşleşmeye gövdedekinden yüksek puan verin, tek başına bu bile sonuç kalitesini gözle görülür biçimde düzeltir.