Arama Fonksiyonu Nasıl Entegre Edilir?

Arama Kutusu Yerleşimi ve Tasarımı

Arama kutusu header'da olmalı: belirgin, kolay erişilebilir. Genellikle sağ üstte, logo ve menüden sonra. Mobilde arama ikonu görünür; tıklanınca input açılır ya da arama sayfasına yönlendirir.

Boyut masaüstünde 250-400px arası. Çok dar olursa kullanıcı uzun sorgu yazamaz, çok geniş olursa header şişer. Mobilde tam genişlik veya %80-90 uygun.

Placeholder "Ara...", "Ürün, kategori veya marka ara", "Ne arıyorsunuz?" gibi olabilir. Açıklayıcı ama kısa tutun. Input'a odaklanınca placeholder kaybolur, kullanıcı ne yazdığını görmeli.

Büyüteç ikonu evrensel. Sol tarafta görsel vurgu yapar, sağ tarafta buton gibi durur. Her iki durumda da tıklanabilir olmalı, Enter tuşu ile aynı işlevi yapmalı.

"Ara" butonu küçük sitelerde gereksiz, Enter yeterli. Büyük sitelerde (e-ticaret, haber) buton eklenebilir; görsel vurgu sağlar.

Input'a tıklanınca border rengi değişmeli, autocomplete açılmalı. Kullanıcı arama yapacağını anlar. Focus görünür olmalı; erişilebilirlik için kritik.

Autocomplete ve Öneri Sistemi

Kullanıcı yazmaya başladığında autocomplete öneriler gösterir. "mavi el" yazdı, "mavi elbise" öner. Dönüşümü %20-30 artırabilir.

Öneri kaynakları: popüler aramalar, son aramalar, ürün/içerik başlıkları, kategoriler. Popüler aramalar en çok aranan terimlerden gelir. Son aramalar kullanıcının geçmiş aramaları (cookie). Ürün başlıkları veritabanından gerçek zamanlı çekilir.

5-10 öneri yeterli. Daha fazlası kullanıcıyı bunaltır, scroll gerektirir. İlk 5 öneri en alakalı olmalı; algoritmayı buna göre optimize edin.

Öneri formatı: metin + ikon/görsel. "mavi elbise" + ürün görseli. Kategori önerisi: "Kadın Giyim" + kategori ikonu. Görsel öneriyi güçlendirir, tıklama artar.

Fuzzy search typo tolere eder. "mavi elise" → "mavi elbise". Levenshtein distance algoritması 1-2 karakter fark tolere eder. "Sonuç yok" mesajı azalır, deneyim iyileşir.

Synonym desteği: "ayakkabı" = "bot" = "terlik". Kullanıcı "bot" yazdığında "ayakkabı" sonuçları da gösterilir. Synonym listesi manuel oluşturulur veya machine learning ile öğrenilir.

Sıralama: popülerlik, alakalılık, yenilik. Popüler aramalar üstte, alakalı ürünler ortada, kategoriler altta. A/B test ile optimal sıralama bulunur.

Arrow tuşları ile öneriler arasında gezilir, Enter ile seçilir. Erişilebilirlik için önemli; klavye kullanıcıları fare kullanmaz.

Arama Algoritması Seçimi

Üç yaklaşım var: SQL LIKE, full-text search, search engine (Elasticsearch, Algolia).

SQL LIKE basit, hızlı kurulum. SELECT * FROM products WHERE name LIKE '%mavi%'. Küçük siteler için yeterli (100-1000 ürün). Ne var ki yavaş, typo tolere etmez, alakalılık sıralaması yok. 10.000+ üründe kullanılamaz.

Full-text search veritabanı özelliği (MySQL, PostgreSQL). Index oluşturulur, arama hızlanır. Alakalılık skoru, stemming (kök bulma), stop words destekler. Orta ölçekli siteler için uygun (1.000-50.000 ürün). Özellik seti sınırlı, typo tolere zayıf.

Search engine: Elasticsearch, Algolia, Typesense. Güçlü, ölçeklenebilir, zengin özellik. Typo tolere, synonym, faceted search, geo-search. Büyük siteler için şart (50.000+ ürün). Karmaşık, maliyet yüksek, bakım gerektirir.

Hangi yaklaşım? Küçük site SQL LIKE, orta site full-text, büyük site search engine. Başlangıçta basit, büyüdükçe geçiş yapın.

Elasticsearch açık kaynak, self-hosted. Güçlü, esnek, ücretsiz. Kurulum karmaşık, sunucu gerektirir, bakım zor. DevOps bilgisi şart. Ekipte bu yetkinlik yoksa Algolia veya Typesense daha mantıklı.

Algolia SaaS, yönetilen servis. Kolay entegrasyon, hızlı, güvenilir. Ücretli: 10.000 arama/ay ücretsiz, sonrası $1/1000 arama. Büyük sitede maliyet yüksek olabilir.

Typesense açık kaynak, Algolia alternatifi. Self-hosted, hızlı, kolay kurulum. Elasticsearch'ten basit, Algolia'dan ucuz. Orta yol arıyorsanız bakın.

Arama Sonuç Sayfası

Kullanıcı arama yaptı, sonuç sayfasına geldi. Kategori sayfasına benzer ama farklılıklar var.

"mavi elbise için 47 sonuç bulundu" gibi bir gösterim yapın. Kullanıcı ne aradığını hatırlar, sonuç sayısını görür. Arama terimini vurgulayın: bold veya farklı renk.

Alakalılık öncelikli sıralama. En alakalı ürün/içerik üstte. Alakalılık skoru: başlıkta geçme, açıklamada geçme, kategori, popülerlik, yenilik. Algoritmayı optimize edin, A/B test yapın.

Sonuçlar filtrelenebilir olmalı. Kategori, fiyat, marka. "mavi elbise" aradı, "Kadın" kategorisi filtresi ekledi. Sonuç daralır, kullanıcı aradığını bulur.

"mavi elbise" sonuç vermedi mi? "Benzer aramalar: kırmızı elbise, mavi bluz" önerin. Kullanıcıyı sitede tutun.

Boş sonuç durumunda "Sonuç bulunamadı" yerine yardımcı olun. "Arama önerileri: yazım hatası kontrol edin, daha genel terim deneyin". Popüler kategoriler veya ürünler gösterin.

Arama terimi sonuçlarda vurgulanmalı. "mavi elbise" aradı, ürün başlığında "mavi" ve "elbise" bold. Kullanıcı neden bu sonuç geldiğini anlar.

Performans ve Ölçeklenebilirlik

Arama hızlı olmalı. Kullanıcı yazdı, 100-200ms içinde sonuç görmeli. Yavaş arama deneyimi bozar.

Her tuş vuruşunda arama yapmayın. 300ms bekleyin, kullanıcı yazmayı bitirdi mi kontrol edin. Sonra arama yapın. Gereksiz istek azalır, sunucu yükü düşer.

Popüler aramaları cache'leyin. "mavi elbise" günde 100 kez aranıyor, sonucu cache'de tutun. 5-10 dakika cache süresi. Veritabanı yükü azalır.

Arama sütunlarını index'leyin. Ürün adı, açıklama, kategori. Full-text index veya search engine index. Yavaş arama varsa index eksik demektir.

Sonuçları sayfalayın. İlk 24 sonuç, sonra "Daha Fazla" veya sayfa numaraları. Tüm sonuçları tek seferde yüklemeyin, performans düşer.

Autocomplete asenkron çalışmalı. Kullanıcı yazıyor, arka planda API çağrısı yapılıyor. Sayfa donmaz, deneyim kesintisiz.

Arama API'si CDN'de cache'lenebilir. Popüler aramalar edge'de, latency azalır. Dikkat: stok ve fiyat değişirse cache invalidation gerekir.

Analytics ve Optimizasyon

Arama verileri değerli. Kullanıcılar ne arıyor? Hangi aramalar sonuç vermiyor? Bu verilerle aramayı optimize edin.

Her aramayı kaydedin. Arama terimi, sonuç sayısı, tıklanan sonuç, kullanıcı ID, timestamp. Veritabanı veya log dosyası.

En çok aranan terimleri belirleyin. "mavi elbise" günde 200 kez, "kırmızı ayakkabı" 150 kez. Bu terimler autocomplete'te öncelikli. Popüler aramalar için yeni ürün/içerik ekleyin.

Hangi aramalar sonuç vermiyor? "yeşil bot" günde 50 kez aranıyor, sonuç yok. Neden? Ürün yok mu, arama algoritması bulamıyor mu? Ürün ekleyin veya synonym ekleyin.

Arama sonuçlarında hangi ürünler tıklanıyor? İlk sonuç %40 CTR, ikinci %20, üçüncü %10. Düşük CTR alakalılık sorunu; algoritmayı optimize edin.

Arama yapan kullanıcılar ne kadar dönüşüm sağlıyor? Arama kullanan %5 dönüşüm, kullanmayan %2. Arama değerli, optimize edin.

Farklı arama algoritmalarını test edin. Elasticsearch vs Algolia. Fuzzy search açık vs kapalı. Hangi yaklaşım daha fazla dönüşüm sağlıyor?

Mobil Arama Deneyimi

Mobilde arama farklı. Ekran küçük, klavye ekranın yarısını kaplar. Deneyimi optimize edin.

Header'da arama ikonu belirgin olmalı. Tıklanınca tam ekran arama sayfası açılır veya input genişler. Kullanıcı arama yapacağını anlar.

Tam ekran arama mobilde iyi çalışır. Üstte input, altta autocomplete önerileri. Kullanıcı odaklanır, dikkat dağıtıcı unsur yok.

Sesli arama mobilde popüler. Mikrofon ikonu, tıklanınca sesli arama başlar. Web Speech API kullanılır. "Mavi elbise" sesli söylenir, metin olarak yazılır, arama yapılır.

Son aramalar mobilde önemli. Kullanıcı daha önce "mavi elbise" aradı, tekrar aramak istiyor. Son aramaları gösterin, tek tıkla arama tekrarlansın.

Öneriler büyük olmalı, dokunmatik hedef 44x44px. Küçük öneriler yanlış tıklamaya neden olur.

Farklı Site Tiplerinde Arama

E-ticaret: ürün adı, marka, kategori, özellikler aranır. Filtre entegrasyonu kritik. "Mavi elbise" aradı, fiyat ve beden filtresi ekledi.

Blog: yazı başlığı, içerik, etiket, yazar. Tarih filtresi: son 1 ay, son 1 yıl. Kategori filtresi: teknoloji, tasarım, iş.

Dokümantasyon: başlık, içerik, kod örnekleri. Versiyon filtresi: v1.0, v2.0. Dil filtresi: JavaScript, Python, Ruby.

Haber: haber başlığı, içerik, yazar, kategori. Tarih filtresi kritik: bugün, bu hafta, bu ay. Popülerlik sıralaması: en çok okunan haberler üstte.

Marketplace: ürün, satıcı, kategori. Satıcı filtresi: hangi satıcıdan? Konum filtresi: hangi şehirden? Fiyat karşılaştırması: en ucuz üstte.

Yaygın Hatalar

Hata 1: Typo tolere etmiyor. "mavi elise" sonuç vermiyor. Çözüm: fuzzy search, Levenshtein distance.

Hata 2: Autocomplete yok. Kullanıcı tüm terimi yazıyor, yavaş. Çözüm: autocomplete ekle, popüler aramalar göster.

Hata 3: Boş sonuç kötü. "Sonuç bulunamadı", alternatif yok. Çözüm: benzer aramalar öner, popüler kategoriler göster.

Hata 4: Yavaş arama. 2-3 saniye bekliyor. Çözüm: index optimize et, cache ekle, search engine kullan.

Hata 5: Mobilde kullanılamaz. Arama kutusu küçük, autocomplete sıkışmış. Çözüm: tam ekran arama, büyük öneriler.

Hata 6: Analytics yok. Hangi aramalar popüler bilmiyor. Çözüm: arama logları, analytics entegrasyonu.

Hata 7: Synonym yok. "Ayakkabı" aradı, "bot" sonuçları çıkmıyor. Çözüm: synonym listesi, machine learning.