Nielsen Norman Group menemukan bahwa pengguna menghabiskan 57% waktu mereka saat melihat halaman di bagian above-the-fold, dengan tingkat perhatian yang menurun drastis setelah layar pertama. Untuk landing page, angka ini bahkan lebih ekstrem — pengunjung memutuskan apakah akan tetap tinggal atau pergi (bounce) dalam waktu 2-3 detik.
Ini berarti desain above-the-fold Anda benar-benar merupakan satu-satunya kesempatan Anda untuk mempertahankan pengunjung.
Apa yang Diungkapkan oleh Studi Eye-Tracking
Studi eye-tracking oleh Djamasbi et al. (2010) mengidentifikasi elemen-elemen yang menarik perhatian di bagian above-the-fold:
| Elemen | Rata-rata Waktu Fiksasi | Fiksasi Pertama |
|---|---|---|
| Gambar hero / visual | 1.2s | 67% melihat ke sini pertama kali |
| Headline utama | 0.8s | 22% melihat ke sini pertama kali |
| Tombol CTA | 0.4s | 3% melihat ke sini pertama kali |
| Navigasi | 0.3s | 8% melihat ke sini pertama kali |
Visual hero menarik perhatian paling besar, namun konversi terjadi pada CTA. Tantangannya adalah merancang jalur visual dari hero → headline → CTA.
5 Elemen Fold dengan Konversi Tinggi
1. Visual Hero yang Menciptakan Keinginan
Gambar hero harus menunjukkan hasil akhir, bukan sekadar produk. Adaval & Wyer (1998) menunjukkan bahwa citra yang menggambarkan kondisi akhir (pelanggan yang bahagia saat menggunakan produk) menghasilkan niat beli 2x lebih besar dibandingkan foto produk saja.
2. Headline sebagai Janji Nilai Tunggal
Menurut riset conversion copywriting dari Copyhackers, headline yang sesuai dengan dialog internal pengunjung mengungguli proposisi nilai generik sebesar 3-5 kali lipat. Headline harus melengkapi kalimat: "Saya butuh sesuatu yang akan..."
3. Hierarki Visual yang Mengarahkan Mata
Penelitian oleh Faraday (2000) tentang hierarki visual dalam desain web menunjukkan bahwa ukuran, kontras, dan posisi menciptakan "urutan membaca" yang dapat diukur dan dioptimalkan. Alurnya haruslah: Jangkar visual → Masalah/solusi → CTA.
4. CTA dengan Kontras Maksimal
Ling & van Schaik (2006) menemukan bahwa tombol CTA dengan kontras warna tertinggi terhadap latar belakangnya menerima klik 21% lebih banyak, terlepas dari warna spesifik yang digunakan. Ini tentang kontras, bukan warna.
5. Social Proof di Bagian Above-the-Fold
Menempatkan sinyal kepercayaan (jumlah pelanggan, rating, barisan logo) di bagian above-the-fold mengurangi evaluasi risiko pada korteks prefrontal, seperti yang ditunjukkan dalam Klucharev et al. (2009). Satu baris kalimat seperti "Dipercaya oleh 10.000+ pemasar" dapat meningkatkan konversi sebesar 15-20%.
Uji Landing Page Anda
Tempelkan URL landing page Anda ke FlowDx untuk melihat ke mana tepatnya mata pengunjung tertuju. Heatmap perhatian akan mengungkapkan apakah CTA Anda berada di "zona panas" atau justru tenggelam dalam kebisingan visual.
Referensi
- 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.