Bilgi Arama Görevleri: Edinme, Kıyaslama ve Anlama
Aynı sitede üç ayrı kullanıcı dolaşıyor: saniyeler içinde tek bir cevap isteyen, iki ürün arasında karar vermeye çalışan, konuyu baştan öğrenmek isteyen. Üçü de arama kutusuna bir şey yazıyor ama sayfadan bekledikleri birbirini tutmuyor. Tek bir düzeni üçüne birden uydurmaya çalışırsan üçünü de yarım karşılarsın.
Üç görev, üç farklı beklenti
Bilgi arama görevleri kabaca üçe ayrılır ve kullanıcıdan istedikleri çaba birbirinden çok uzaktır:
- Edinme: tek bir bilgiye hızlı erişim. Saat kaç, CPR nasıl yapılır, kargo kaç günde gelir.
- Kıyaslama: seçenekler arasında karar. Fiyat, özellik, yorum.
- Anlama: konuyu derinlemesine öğrenme. Uykusuzluğun nedenleri, bir yöntemin nasıl uygulandığı.
Sayfanı yazmadan önce hangisi için yazdığını bil. Gerisi bu karardan çıkıyor.
Edinme: cevabı başa koy, tıklamadan vazgeç
Bu görevde kullanıcı sitende kalmak istemiyor. Cevabı alıp gidecek. Cevabı ilk ekrana, giriş paragrafının önüne koy; ısınma cümlesi yazarsan arama sonuçlarına geri döner.
Burada rahatsız edici bir denge var. Cevabı arama motorunun kaldırabileceği netlikte yazarsan öne çıkan snippet'e girersin, ama ziyaret hiç gerçekleşmez. Cevabı saklayıp tıklamaya zorlarsan ziyaret olur, kullanıcı ilk üç saniyede aradığını bulamayınca geri döner ve bir daha gelmez. İkisi arasında tercih yapman gerekiyorsa cevabı ver. Geri dönüşün maliyeti, kaçırılan tıklamanın maliyetinden yüksek.
Edinme sayfasında kazanan şey kısalık: net başlık, iki cümlelik cevap, altında isteyene ayrıntı.
Kıyaslama: tablo mobilde kırılıyor
Karar verecek kullanıcı yan yana görmek ister. Fiyatı ve temel özellikleri yukarı al, tarafsız dur, kaybeden seçeneğin eksiğini de yaz. Satış diliyle yazılmış kıyaslama metni okunduğu anda güvenini bitirir.
Asıl sorun tabloda. 375 piksellik bir telefon ekranında yanlardan 16'şar piksel boşluk düştükten sonra elinde 343 piksel kalır. Özellik adlarını taşıyan ilk sütuna 120 piksel verdiğinde geriye 220 piksel kalıyor, bu da ancak 110'ar piksellik iki ürün sütunu demek. Üçüncü ürünü eklediğin anda tablo yatay kaydırmaya girer ve kaydırdığında da satır başlıkları ekrandan çıkar, kullanıcı hangi sayıya baktığını kaybeder. Masaüstünde gayet iyi görünen altı sütunlu kıyaslama tablosu, trafiğinin çoğunun geldiği yerde işe yaramıyor.
Bunu çözmek için üçüncü parti tablo bileşeni kurmana gerek yok. Mobilde tabloyu display: block yap, her hücreye data-label ver ve ::before ile o etiketi hücrenin soluna bas; satırlar alt alta kart gibi dizilir, başlık her değerin yanında kalır. Otuz satır CSS, bakımı da sende.
Karşılaştırma sayısını da sınırla. Kullanıcıya sekiz seçenek sunmak yardım değil, kararı ona havale etmek. Filtreyi sen daralt, üç iyi adayla bitir.
Anlama: derinlik iyi, kaydırma değil
Uzun araştırma sayfalarında bilgiyi parçalayıp beş ayrı yazıya bölmek okuyucuyu yorar, doğru. Ama tek sayfada toplamak tek başına yetmiyor: 3000 kelimelik bir metni içindekiler bloğu olmadan yayımlarsan kullanıcı aradığı bölümü kaydırarak aramak zorunda kalır.
Başa bağlantılı bir içindekiler listesi koy. Başlıkları gerçek h2 ve h3 etiketleriyle yaz, kalınlaştırılmış paragrafla değil. Ekran okuyucu kullananlar sayfada başlıktan başlığa atlayarak geziyor ve bu gezinme etiketin kendisine bağlı; puntoyu büyütmek o kullanıcı için hiçbir şey ifade etmez.
Reklam varsa metnin ortasına değil bölüm aralarına koy. Anlama görevindeki kullanıcı sayfada en uzun kalan kullanıcıdır, onu kaçırmak en pahalısı.
Bir sayfa üçünü birden taşımaz
Sayfanın hangi göreve hizmet ettiğine karar ver, sonra düzeni ona göre kur. Trafiğin gerçekten karışıksa sıralama şöyle olsun: en üstte edinme cevabı, altında kıyaslama, en altta derinlemesine açıklama. Hızlı kullanıcı zaten ilk ekranda ayrılıyor, aşağıya inmesi gerekmiyor; derin okuyucu ise nasılsa aşağı iniyor, üstteki iki cümle onu yavaşlatmıyor. Ters sırada kurarsan sadece birinci grubu kaybedersin.