Layar pertama website Anda adalah satu-satunya konten yang dijamin dilihat setiap pengunjung. Semua yang ada di bawah fold bersifat kondisional — hanya akan dilihat jika layar pertama berhasil memenangkan scroll. Kebanyakan website memperlakukan fold sebagai renungan desain dan kemudian bertanya-tanya mengapa bounce rate-nya tinggi.
Keputusan 5 Detik
Studi eye-tracking dan session recording secara konsisten menunjukkan bahwa pengguna membuat keputusan tinggal-atau-pergi dalam waktu lima detik setelah landing. Itu bukan waktu untuk membaca bagian tentang Anda, menjelajahi portofolio, atau menilai harga. Itu hanya cukup untuk menjawab tiga pertanyaan: Ini apa? Apakah ini untuk saya? Apakah ini layak untuk lebih banyak waktu?
Jika layar pertama tidak bisa menjawab ketiga pertanyaan tersebut, pengunjung pergi. Bukan karena produk Anda buruk, bukan karena harga Anda salah — karena desain gagal berkomunikasi dalam waktu yang tersedia.
Implikasinya tajam: keputusan desain yang dibuat dalam tinggi viewport pertama halaman Anda bernilai lebih dari semua keputusan desain di bawah fold digabungkan. Above-fold yang biasa-biasa saja bisa menghancurkan pengalaman below-fold yang brilian sebelum pengguna pernah mencapainya.
Indonesia adalah salah satu pasar mobile-first terbesar di dunia — 96% pengguna internet Indonesia mengakses web via smartphone (DataReportal 2025). Artinya, fold yang Anda desain di desktop mungkin bukan fold yang dilihat mayoritas pengunjung Anda. Mobile fold adalah prioritas nomor satu, bukan nomor dua.
Apa Arti “Fold” Sebenarnya di 2026
Istilah ini berasal dari surat kabar — konten yang terlihat di bagian atas koran yang dilipat. Dalam desain web, artinya konten yang terlihat tanpa scroll.
Fold bukanlah garis tetap. Ia berubah dengan setiap perangkat, ukuran layar, dan tinggi chrome browser. Tinggi viewport umum berdasarkan jenis perangkat:
- Desktop (monitor 1920×1080): ~900–940px tinggi terlihat setelah chrome browser
- Laptop (1366×768 atau 1440×900): ~600–768px tinggi terlihat
- iPhone (14/15): ~667–844px tergantung model dan status bar browser
- Android mid-range: ~680–780px
Wawasan kritis: desain untuk viewport terkecil yang umum dalam trafik aktual Anda, bukan yang terbesar. Jika Anda mendesain untuk desktop 900px dan analitik Anda menunjukkan 60% pengunjung berada di mobile dengan viewport 667px, sebagian besar konten “above the fold” Anda sebenarnya berada di bawah fold bagi mereka.
Cara menemukan tinggi fold spesifik Anda: Google Analytics → Reports → User → Tech → Screen Resolution. Urutkan berdasarkan sesi secara menurun. Lima resolusi layar teratas mencakup sebagian besar trafik Anda. Gunakan ketinggian terkecil dalam set tersebut sebagai target fold Anda.
Lima Elemen Wajib di Atas Fold
Untuk bisnis jasa, lima elemen ini semua harus muncul di atas fold secara bersamaan — tanpa scroll — atau fold Anda gagal:
(a) Nama Bisnis atau Logo
Pengunjung perlu tahu segera website siapa yang mereka kunjungi. Ini adalah orientasi dasar. Bisa relatif kecil — tinggi 24–36px untuk logo mark — karena tugasnya menetapkan kehadiran, bukan mendominasi.
(b) Apa yang Anda Lakukan — 10 Kata atau Kurang
Headline yang menjawab “website ini tentang apa?” Satu klaim yang dapat dipindai. Jika butuh lebih dari 10 kata untuk menyatakan nilai Anda, Anda belum memutuskan apa nilai inti Anda. “Website Custom yang Menempati Peringkat Google dan Mengonversi Pengunjung” adalah klaim yang jelas. “Memberdayakan Bisnis Melalui Solusi Transformasi Digital” tidak — itu bisa menggambarkan ratusan layanan berbeda.
(c) Untuk Siapa Layanan Ini
Subheadline yang mengkonfirmasi “ini untuk saya” kepada pengunjung yang tepat dan menyaring yang salah. Satu atau dua kalimat. “Kami membangun website untuk klinik, restoran, dan bisnis jasa di Indonesia yang lelah kehilangan pelanggan ke kompetitor dengan website yang lebih baik.” Kalimat itu menyertakan target audiensnya secara eksplisit. Pemilik klinik di Jakarta membacanya dan langsung berpikir: ini untuk saya.
(d) Satu CTA Utama
Satu tombol. Bukan dua yang sama-sama menonjol. Bukan tiga. Label harus dimulai dengan kata kerja dan menentukan hasilnya. “Mulai Sekarang” terlalu samar. “Konsultasi Gratis via WhatsApp” spesifik. Tombol harus secara visual dominan — terisi dengan warna kontras tinggi, bukan outline atau text link — dan harus terlihat tanpa scroll di setiap perangkat yang Anda pedulikan.
Ini sangat kritis untuk konteks Indonesia: tombol WhatsApp adalah CTA yang paling efektif untuk sebagian besar bisnis jasa lokal. Namun, dalam audit website bisnis lokal Indonesia, salah satu kesalahan paling umum adalah tombol WhatsApp yang tersembunyi di bawah fold — terkubur setelah hero image, setelah daftar layanan, atau bahkan hanya di footer. Tombol WhatsApp harus berada di atas fold, terlihat jelas.
(e) Minimal Satu Trust Signal
Trust signal mengurangi risiko yang dirasakan pengunjung dalam terlibat lebih jauh. Trust signal above-fold yang efektif: angka spesifik (“500+ website terkirim”), logo klien dari brand yang dikenal, jumlah ulasan dengan nama platform (“4,9 bintang · 87 Ulasan Google”), atau sertifikasi. Kata kuncinya adalah spesifik — “dipercaya banyak orang” berkinerja lebih buruk dari “digunakan oleh 430+ bisnis” karena spesifisitas memberi sinyal dapat diverifikasi.
Persyaratan Above-the-Fold Berdasarkan Jenis Website
Jenis website yang berbeda memiliki prioritas fold yang berbeda.
| Jenis Website | Wajib Muncul di Atas Fold | Boleh di Bawah Fold |
|---|---|---|
| Bisnis jasa | Value prop headline, CTA utama, trust signal | Langkah proses, testimoni lengkap, portofolio |
| E-commerce | Nav kategori, search, produk/promo utama | Grid produk lengkap, filter, rekomendasi |
| Portofolio | Nama, spesialisasi, 1–2 sampel karya unggulan | Arsip lengkap, form kontak, bio |
| Bisnis lokal | Jenis bisnis, lokasi, tombol telepon/WA | Daftar layanan lengkap, peta, jam operasional |
| Produk SaaS | Apa yang dilakukan software (bukan caranya), CTA trial/demo | Daftar fitur, harga, integrasi |
Latihan: buka website Anda dan tutup semua yang ada di bawah tinggi viewport pertama. Tanyakan kepada seseorang yang tidak mengenal bisnis Anda apa yang dilakukan website, untuk siapa, dan apa yang harus mereka lakukan selanjutnya. Jika mereka tidak bisa menjawab ketiga pertanyaan itu, fold Anda rusak.
Mobile Fold Adalah Masalah yang Berbeda
Layar mobile lebih sempit, lebih tinggi dalam rasio, dan memiliki pola interaksi yang berbeda dari desktop. Mode kegagalan fold di mobile berbeda dari kegagalan desktop.
Pajak nav-plus-logo: Di mobile, navigation bar di bagian atas biasanya menempati 56–72px. Logo atau nama brand di dalamnya mengambil 40–60px secara visual. Sebelum konten hero Anda dimulai, Anda sudah menghabiskan ~120px dari anggaran fold ~680px untuk infrastruktur header. Itu menyisakan sekitar 560px untuk headline, subheadline, CTA, dan trust signal Anda.
Masalah perpindahan hero image: Hero image yang diatur ke ketinggian tetap 300–350px di mobile mendorong semua teks dan CTA ke bawah fold. Ini adalah kegagalan fold mobile yang paling umum. Tombol CTA yang seharusnya mendorong enquiry berada di 580px — tidak terlihat sampai pengguna scroll, yang banyak tidak akan dilakukan.
Solusi untuk masalah hero image: Di mobile, gunakan salah satu dari ini:
- Hapus hero image berdiri sendiri dan gunakan sebagai background image dengan opacity 30–40% di belakang blok teks/CTA, sehingga overlay teks dan tombol tetap terlihat
- Atau batasi tinggi hero image maksimal 200–240px dan pastikan headline, subheadline, dan CTA masih muncul di atas 667px
Fold video autoplay: Video autoplay yang mengisi viewport tidak mengatakan apa-apa tentang apa yang dilakukan bisnis. Ini adalah gerakan visual tanpa informasi — fold yang menggunakan 100% anggarannya untuk suasana dan nol untuk komunikasi.
Teks-dahulu di mobile: Pola default untuk desain hero mobile harus teks-dahulu, visual-kedua. Headline. Subheadline. CTA. Kemudian gambar pendukung di bawahnya, atau tidak sama sekali.
Catatan khusus Indonesia: Mengingat bahwa 96% pengguna internet Indonesia berada di mobile (DataReportal 2025), mobile fold bukan lagi pertimbangan sekunder — ini adalah prioritas desain utama. Setiap keputusan fold harus divalidasi pada layar mobile terlebih dahulu, bukan setelahnya.
Enam Kegagalan Above-the-Fold yang Paling Umum
Ini adalah pola yang paling sering muncul saat mengaudit website, dalam urutan kasar seberapa besar kerusakan yang ditimbulkan:
1. Hero image yang indah tapi tidak informatif. Foto stok orang-orang bahagia, pemandangan kota, atau tekstur abstrak. Ia mengkonsumsi 40–60% ruang vertikal fold dan tidak mengkomunikasikan apa pun tentang bisnis. Ganti dengan gambar yang menunjukkan hasil yang didapat pelanggan, atau screenshot produk.
2. Navigasi yang mengkonsumsi tinggi viewport yang berlebihan. Nav bar dengan logo, lima item menu, pemilih bahasa, dan ikon pencarian setinggi 80px menghabiskan hampir 10% fold sebelum section hero bahkan dimulai. Kompresi navigasi ke ketinggian minimum yang layak. 56px di desktop sudah cukup.
3. Tiga CTA dengan bobot yang sama. “Hubungi Kami” | “Pelajari Lebih Lanjut” | “Dapatkan Penawaran” — semua ditampilkan dengan bobot visual yang sama. Pengunjung harus memilih sebelum mereka memutuskan untuk terlibat. Satu CTA utama. Semua yang lain subordinat.
4. Trust signal terkubur di bawah fold. Jumlah ulasan, logo klien, dan sertifikasi adalah elemen yang mengurangi keraguan — tetapi mereka hanya bekerja jika pengunjung melihatnya sebelum memutuskan untuk pergi. Pindahkan trust signal terkuat Anda ke atas fold.
5. Headline yang mendeskripsikan perusahaan, bukan manfaatnya. “Kami adalah Agensi Digital Full-Service” mendeskripsikan Anda. “Website yang Mendatangkan Pelanggan Saat Anda Tidur” mendeskripsikan manfaat bagi pengunjung. Headline fold harus berpusat pada pengunjung, bukan pada perusahaan.
6. Tombol WhatsApp tidak ada di atas fold. Untuk bisnis lokal Indonesia, WhatsApp adalah channel kontak utama — jauh lebih banyak enquiry datang melalui WA daripada form email. Namun dalam audit website UMKM Indonesia, tombol WA sering kali tersembunyi di bawah fold, di sidebar, atau hanya muncul sebagai floating button yang muncul setelah 3 detik. Tombol WA harus menjadi CTA utama atau sekunder yang terlihat langsung di atas fold.
F-Pattern dan Z-Pattern — Ke Mana Mata Bergerak Pertama
Riset eye-tracking (Nielsen Norman Group) menetapkan dua pola membaca dominan untuk halaman web.
F-pattern berlaku untuk halaman berat konten: situs berita, artikel blog, dokumentasi, halaman hasil pencarian. Pengguna membaca baris pertama sepenuhnya dari kiri ke kanan, membaca baris kedua sebagian, kemudian memindai ke bawah margin kiri. Sebagian besar sisi kanan halaman tidak pernah dilihat pada halaman berpola F.
Z-pattern berlaku untuk halaman marketing dan landing page: mata berjalan dari kiri atas ke kanan atas (melintasi bagian atas fold), kemudian diagonal ke bawah ke kiri bawah, kemudian melintasi ke kanan bawah. CTA yang ditempatkan di kanan bawah dari Z menerima kedatangan mata secara alami.
Aplikasi praktis:
- Landing page jasa → Z-pattern. Tempatkan logo di kiri atas, trust signal di kanan atas, CTA Anda di kanan bawah section hero.
- Halaman artikel blog → F-pattern. Headline dan paragraf pertama membawa hampir semua bobot; sisi kanan halaman di bawah scroll fold pertama adalah zona perhatian rendah.
- Homepage dengan banyak section → Kombinasi. Hero fold mengikuti Z; section berikutnya diatur ulang ke mini F-pattern saat pengguna memindai ke bawah.
Checklist Audit Layar Pertama
Gunakan ini pada website bisnis jasa apa pun:
- Nama bisnis atau logo terlihat tanpa scroll di mobile (tinggi 667px) dan desktop (minimum 600px)
- Headline dengan jelas menyatakan apa yang dilakukan bisnis dalam 10 kata atau kurang
- Subheadline menentukan untuk siapa layanan tersebut
- Satu tombol CTA utama terlihat di atas fold di semua perangkat target
- Minimal satu trust signal spesifik (angka, jumlah ulasan, atau logo klien) terlihat di atas fold
- Hero image (jika digunakan) mengkomunikasikan manfaat atau hasil, bukan foto lifestyle generik
- Tinggi navigasi tidak melebihi 64px di desktop atau 56px di mobile
- Di mobile, tombol CTA muncul di atas 580px dari bagian atas viewport
- Untuk bisnis lokal: tombol WhatsApp atau nomor telepon terlihat tanpa scroll
Referensi
- Nielsen Norman Group — “How People Read on the Web: The Eyetracking Evidence” — https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
- Nielsen Norman Group — “Scrolling and Attention” — https://www.nngroup.com/articles/scrolling-and-attention/
- DataReportal — “Digital 2025: Indonesia” — https://datareportal.com/reports/digital-2025-indonesia
- Baymard Institute — Above the Fold Homepage Design (reference only)
- CXL Institute — “5 Second Test and Above the Fold Optimization” — https://cxl.com/blog/first-impressions-matter-the-importance-of-great-visual-design/
Above the Fold — Pertanyaan Umum
Di mana tepatnya letak 'fold' di tahun 2026?
Tidak ada satu fold yang pasti — ia bervariasi per perangkat dan browser. Pendekatan praktis adalah mendesain untuk viewport terkecil yang umum dalam trafik Anda. Untuk sebagian besar bisnis jasa, itu berarti tinggi 600px untuk pengunjung desktop dan 667px untuk mobile. Cek Google Analytics di Reports → User → Tech → Screen resolution untuk melihat tinggi viewport pengunjung aktual Anda.
Apakah hero image saya dihitung sebagai salah satu elemen wajib di atas fold?
Hanya jika ia mengkomunikasikan sesuatu. Foto stok orang-orang yang tersenyum atau gambar abstrak yang indah tidak dihitung sebagai elemen wajib — itu dekorasi yang mengkonsumsi ruang fold tanpa menghasilkan nilai. Screenshot produk, foto yang menunjukkan hasil yang didapat klien, atau visual sebelum-sesudah yang memperkuat headline Anda — itu yang dihitung. Jika visual bisa dihapus dan fold masih mengkomunikasikan pesan yang sama, itu bukan elemen wajib.
Apakah salah memiliki lebih dari satu CTA di atas fold?
Dua CTA bisa diterima jika satu jelas primary dan satu jelas secondary. Primary: tombol terisi, kontras tinggi, label dimulai dengan kata kerja. Secondary: text link atau tombol outline dengan bobot visual lebih rendah. Yang tidak berhasil adalah tiga CTA dengan bobot visual yang sama — itu memaksa pengunjung membuat pilihan sebelum mereka memutuskan untuk terlibat, yang biasanya berarti mereka tidak memilih apa pun.
Bagaimana memperbaiki mobile fold tanpa mendesain ulang seluruh website?
Mulai dari section hero. Tiga perubahan spesifik mendapat sebagian besar keuntungan: (1) Jadikan headline elemen pertama yang terlihat — bukan logo, bukan hamburger menu. (2) Pindahkan tombol CTA utama langsung di bawah headline, bukan di bawah hero image. (3) Jika ada hero image, kurangi tingginya di mobile menjadi maksimal 200–240px, atau gunakan sebagai background dengan opacity 30–40% agar teks dan CTA tetap terlihat.