Law of Proximity untuk Landing Page Bisnis Indonesia: Cara Atur Whitespace agar Konversi Naik Tanpa Tambah Elemen di 2026

TL;DR: Law of Proximity adalah prinsip Gestalt yang menyatakan elemen yang berdekatan dipersepsi sebagai satu kelompok. Diterapkan ke landing page bisnis Indonesia, prinsip ini memungkinkan grouping visual hanya dengan whitespace, tanpa tambah border atau warna. Hasil dari beberapa proyek: scan time turun, scroll depth naik, dan tombol CTA lebih mudah ditemukan.

Dalam beberapa bulan terakhir, saya audit landing page beberapa klien personal branding dan UMKM. Pola yang sama muncul: terlalu banyak kotak. Setiap testimoni di-border. Setiap fitur punya background warna sendiri. Setiap section dipisahkan garis. Akibatnya halaman terasa ramai meski jumlah teks sebenarnya tidak banyak.

Solusinya bukan menambah elemen visual, tapi menghapus dan mengandalkan jarak.

Apa itu Law of Proximity dan Kenapa Penting di Landing Page

Law of Proximity adalah salah satu prinsip Gestalt yang berumur lebih dari seabad. Otak manusia secara default mengelompokkan objek berdasarkan jarak. Yang dekat dianggap saling berhubungan, yang jauh dianggap terpisah.

Untuk landing page, ini berarti hubungan antara judul dan paragraf, antara harga dan tombol, antara label dan input, semua bisa dikomunikasikan tanpa garis. Cukup dengan mengatur margin dan padding yang konsisten.

Di 2026, landing page bersaing dengan attention span yang makin pendek. Riset Nielsen Norman Group menunjukkan rata-rata pengguna hanya membaca sekitar 20 sampai 28 persen teks di sebuah halaman. Sisanya scan. Grouping visual yang benar mempercepat scan, dan scan yang lancar meningkatkan peluang pengguna mencapai CTA.

Aturan Praktis Whitespace 1:2:3

Pendekatan yang konsisten saya pakai di proyek klien adalah aturan rasio whitespace bertingkat.

Rasio ini bekerja karena otak menangkap hierarki dari kontras jarak, bukan dari jarak absolut. 8 piksel terasa kecil jika dikelilingi 24 piksel, tapi terasa besar jika dikelilingi 4 piksel.

Pendekatan serupa dipakai di sistem desain populer seperti Tailwind CSS dengan skala spacing 4, 8, 16, 24, 48, 96.

Studi Kasus: Yuanita Sekar dan Atmo

Saat redesign landing page personal branding Yuanita Sekar, versi awal punya border tipis di setiap card testimoni. Setelah border dihapus dan jarak antar card dibuat 48 piksel, sementara jarak antara foto dan nama dalam card hanya 8 piksel, halaman terasa jauh lebih lega. Scroll depth dari 50 persen ke 80 persen naik berdasarkan data heatmap.

Pola yang sama saya pakai di Atmo, platform LMS. Pricing card awalnya punya border tebal yang membedakan setiap tier. Setelah border dihilangkan dan jarak antar card dijaga 24 piksel, sementara harga dan tombol CTA dalam satu card dirapatkan 8 piksel, persepsi tier "rekomendasi" jadi lebih jelas tanpa perlu badge berwarna.

Keduanya tidak menambah copy atau elemen baru. Hanya mengubah satu hal: jarak.

Anti-pattern yang Sering Muncul

Border untuk semua. Setiap card punya border 1 piksel. Pengguna jadi sulit membedakan mana yang penting karena semua diberi penekanan visual yang sama.

Padding seragam. Semua container dapat padding 24 piksel. Tidak ada hierarki, tidak ada grup.

Background warna sebagai pengganti jarak. Section dipisahkan dengan abu-abu, biru muda, dan putih bergantian. Solusi ini bekerja sebatas, tapi menambah cognitive load karena otak harus memproses dua sinyal sekaligus: warna dan posisi.

Solusi yang lebih bersih: hapus border, atur padding berdasarkan rasio, biarkan whitespace bekerja.

Pertanyaan Umum

Apakah Law of Proximity bisa dipakai bareng Law of Similarity?

Bisa dan sering perlu. Proximity untuk grouping berdasarkan jarak, similarity untuk grouping berdasarkan kemiripan visual. Untuk daftar fitur produk, proximity mengelompokkan tiap fitur dengan iconnya, similarity mengelompokkan semua icon dengan style sama.

Berapa minimum whitespace antar section?

Tidak ada angka mutlak. Aturan praktisnya, jarak antar section minimum 2 sampai 3 kali tinggi baseline teks utama. Untuk teks 16 piksel dengan line-height 24, ini berarti 48 sampai 72 piksel.

Bagaimana di mobile dengan ruang sempit?

Rasio tetap berlaku, hanya skalanya dikecilkan. Misalnya 1:2:3 jadi 4 piksel, 8 piksel, 24 piksel di mobile, dan 8, 16, 48 di desktop.

Apakah border benar-benar harus dihapus?

Tidak harus. Border masih berguna untuk komponen interaktif seperti input form atau button. Yang sering berlebihan adalah border untuk layout structural seperti card display.

Audit Cepat untuk Landing Page Anda

Ambil screenshot landing page utama. Tutup semua teks dengan kotak abu-abu. Apakah grouping masih terlihat hanya dari jarak? Jika ya, Law of Proximity bekerja. Jika tidak, evaluasi: mana yang sebenarnya butuh border, dan mana yang sekadar tradisi.

Yang membuat landing page konversi tinggi bukan jumlah elemen visual, tapi seberapa cepat mata pengguna menemukan jalan menuju aksi.