Nielsen Norman Group, kullanıcıların sayfa görüntüleme sürelerinin %57'sini ekranın üst kısmında (above the fold) geçirdiğini ve ilginin ilk ekran görüntüsünden sonra keskin bir şekilde düştüğünü saptadı. Açılış sayfaları için bu rakam daha da kritiktir; ziyaretçiler sayfada kalıp kalmayacaklarına 2-3 saniye içinde karar verirler.
Bu, ekranın üst kısmındaki tasarımınızın, bir ziyaretçiyi sayfada tutmak için sahip olduğunuz tek şans olduğu anlamına gelir.
Göz İzleme Çalışmaları Neleri Ortaya Koyuyor?
Djamasbi et al. (2010) tarafından yapılan göz izleme çalışmaları, ekranın üst kısmında dikkat çeken unsurları belirledi:
| Öğe | Ort. Odaklanma Süresi | İlk Odaklanma |
|---|---|---|
| Hero görseli / görsel | 1.2s | %67'si ilk buraya bakıyor |
| Ana başlık | 0.8s | %22'si ilk buraya bakıyor |
| CTA butonu | 0.4s | %3'ü ilk buraya bakıyor |
| Navigasyon | 0.3s | %8'i ilk buraya bakıyor |
Hero görseli en çok dikkati çeker, ancak dönüşüm CTA'da gerçekleşir. Buradaki zorluk; hero görselinden başlığa, oradan da CTA'ya uzanan görsel bir yol tasarlamaktır.
Yüksek Dönüşüm Sağlayan Bir Giriş Ekranının 5 Öğesi
1. Arzu Uyandıran Hero Görseli
Hero görseli ürünü değil, sonucu göstermelidir. Adaval & Wyer (1998), nihai durumları (ürünü kullanan mutlu müşteri) tasvir eden görsellerin, sadece ürün çekimlerine kıyasla 2 kat daha fazla satın alma niyeti oluşturduğunu kanıtlamıştır.
2. Tekil Değer Vaadi Olarak Başlık
Copyhackers'ın dönüşüm odaklı metin yazarlığı araştırmasına göre, ziyaretçinin iç diyaloğuyla eşleşen başlıklar, genel değer vaatlerinden 3-5 kat daha iyi performans gösteriyor. Başlık şu cümleyi tamamlamalıdır: "Şöyle bir şeye ihtiyacım var..."
3. Gözü Yönlendiren Görsel Hiyerarşi
Faraday (2000) tarafından web tasarımında görsel hiyerarşi üzerine yapılan araştırma; boyut, kontrast ve konumun ölçülebilir ve optimize edilebilir bir "okuma sırası" oluşturduğunu göstermektedir. Akış şu şekilde olmalıdır: Görsel çıpa → Problem/çözüm → CTA.
4. Maksimum Kontrasta Sahip CTA
Ling & van Schaik (2006), arka planıyla en yüksek renk kontrastına sahip CTA butonlarının, kullanılan renklerden bağımsız olarak %21 daha fazla tıklama aldığını buldu. Önemli olan renk değil, kontrasttır.
5. Ekranın Üst Kısmında Sosyal Kanıt
Klucharev et al. (2009) çalışmasında gösterildiği gibi, ekranın üst kısmına bir güven sinyali (müşteri sayısı, derecelendirme, logo barı) yerleştirmek, prefrontal korteksin risk değerlendirmesini azaltır. "10.000'den fazla pazarlamacı tarafından güveniliyor" gibi tek bir satır, dönüşümü %15-20 oranında artırabilir.
Açılış Sayfanızı Test Edin
Ziyaretçilerin gözlerinin tam olarak nereye gittiğini görmek için açılış sayfası URL'nizi FlowDx'e yapıştırın. Dikkat ısı haritası, CTA'nızın "sıcak bölgede" mi yoksa gürültü içinde mi kaybolduğunu ortaya çıkarır.
Kaynaklar
- Nielsen Norman Group. Scrolling and Attention.
- Djamasbi, S. et al. (2010). Generation Y, web design, and eye tracking. Int. Journal of Human-Computer Studies.
- Klucharev, V. et al. (2009). Reinforcement learning signal predicts social conformity. Neuron.