Prinsip Gestalt adalah cara otak mengelompokkan apa yang dilihat, sebelum kamu sempat membaca satu kata pun. Bayangin meja prasmanan di kondangan. Lauk yang ditaruh berdekatan kamu anggap satu set. Piring yang bentuknya sama kamu anggap satu jenis. Kue di atas satu nampan kamu anggap satu kelompok. Antrean tamu berjalan mengikuti satu garis. Dan taplak putih membuat makanan menonjol dari meja di bawahnya. Gak ada yang menjelaskan semua itu ke kamu; matamu yang menyimpulkannya. Halaman web dibaca dengan cara yang sama.
🧪 Tebakan cepat: Di kartu pesan Bu Sri ada tiga pilihan malam. "1 malam" dan "3 malam" berbentuk kotak bergaris, tapi "2 malam" cuma tulisan hijau bergaris bawah. Tamu membaca ketiganya sebagai satu set pilihan, atau sebagai dua hal yang berbeda? Jawabannya ada di bagian "Similarity: yang mirip dibaca sejenis".
Dari mana prinsip ini datang
"Gestalt" adalah kata Jerman untuk bentuk utuh. Psikolog Max Wertheimer menulis aturan pengelompokan ini pada 1923: proximity (kedekatan), similarity (kesamaan), continuity (kesinambungan), dan closure (penutupan). Edgar Rubin menulis tentang figure/ground (figur dan latar) pada 1915. Lima ini yang biasa disebut lima prinsip Gestalt utama.
Ada satu lagi yang sangat berguna di UI: common region (wilayah bersama), dari Stephen Palmer pada 1992. Elemen di dalam satu kotak dibaca satu kelompok.
Kartu pesan Bu Sri, dibongkar per prinsip
Ini kartu Kamar Teras. Tiap aturan CSS di bawah memakai satu prinsip:
<main class="kabut">
<div class="photo" role="img" aria-label="Foto Kamar Teras"></div>
<h1>Homestay Kabut</h1>
<p class="room">Kamar Teras · 2 tamu</p>
<p class="price">Rp 350.000 / malam</p>
<div class="stay">
<p class="checkin">Check-in 12 Des</p>
<div class="nights">
<button aria-pressed="false">1 malam</button>
<button aria-pressed="true">2 malam</button>
<button aria-pressed="false">3 malam</button>
</div>
<p class="total">2 malam × Rp 350.000 = <b>Rp 700.000</b></p>
</div>
<button class="book">Pesan kamar, bayar di tempat</button>
<p class="note">Gratis batal sampai 3 hari sebelum check-in.</p>
</main>
<style>
/* figure/ground: kartu putih di atas latar abu-abu */
body { background: #f1f5f9; }
.kabut { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; }
/* proximity: rapat di dalam kelompok, renggang antar kelompok */
.room, .price { margin: 2px 0 0; }
.stay, .book { margin-top: 16px; }
/* common region: satu kotak untuk rincian menginap */
.stay { padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
/* continuity: tiga pilihan di satu baris lurus */
.nights { display: flex; gap: 8px; }
/* similarity: tiga pilihan berbentuk sama */
.nights button { padding: 0.5rem 0.875rem; color: #1f2937; background: #fff; border: 1px solid #475569; border-radius: 0.375rem; }
.nights button[aria-pressed="true"] { color: white; background: #15803d; border-color: #15803d; }
</style>
bodyabu-abu#f1f5f9dan.kabutputih bergaris: kartu terbaca sebagai benda di atas latar.margin: 2pxdi antara nama kamar dan harga,16pxsebelum kotak menginap dan tombol pesan: jarak kecil menyatukan, jarak besar memisahkan..staydiberi padding, latar#f8fafc, dan garis: check-in, pilihan malam, dan total jadi satu kelompok "rincian menginap"..nightsmemakai flex dengangap: 8px: tiga pilihan berjajar di satu garis.- Semua
.nights buttonpunya bentuk yang sama; yang terpilih diisi hijau, jadi beda dari dua lainnya tapi tetap satu keluarga.
Proximity: yang dekat dibaca satu kelompok
Aturannya: jarak di dalam kelompok lebih kecil dari jarak antar kelompok. Di pelajaran negative space kamu sudah memakainya: nama kamar ke harga 4px, harga ke tombol 16px.
Contoh yang sering salah: tiga kartu kamar (Kamar Teras, Kamar Loteng, Kamar Kebun) dengan jarak antar kartu 8px, dan di dalam kartu jarak harga ke tombol juga 8px. Mata gak bisa menentukan batas kartu: tombol "Pilih" itu milik harga di atasnya atau kartu di bawahnya? Perbaikannya: jarak antar kartu 24px, jarak di dalam kartu tetap 8px.
Similarity: yang mirip dibaca sejenis
Elemen yang sama warna, bentuk, atau ukurannya dibaca sebagai satu jenis. Tiga pilihan malam harus mirip satu sama lain, supaya dibaca "pilih salah satu dari ini".
Di versi tebakan, "1 malam" dan "3 malam" berbentuk kotak, sedangkan "2 malam" cuma teks hijau bergaris bawah. Teks bergaris bawah itu bentuk link. Jadi tamu membacanya sebagai dua hal berbeda: dua tombol pilihan, ditambah satu link yang entah ke mana. Itu jawaban tebakannya. Prinsip ini juga bekerja ke arah sebaliknya: tanggal check-in yang dibuat mirip tombol akan diketuk orang, seperti di pelajaran affordance.
Common region: yang satu kotak dibaca satu kelompok
Garis tepi, latar berbeda, atau kartu membuat semua yang ada di dalamnya terbaca satu kelompok. Palmer menunjukkan kotak bersama cukup kuat untuk mengalahkan jarak: dua titik yang berjauhan tapi berada di dalam satu kotak dibaca sekelompok. Di kartu Bu Sri, kotak .stay mengikat check-in, pilihan malam, dan total.
Pakai seperlunya. Kotak di dalam kotak di dalam kotak membuat halaman penuh garis, dan garisnya jadi gak berarti apa-apa. Coba jarak dulu, baru kotak.
Continuity: mata mengikuti garis
Mata mengikuti garis lurus atau lengkung yang mulus. Semua isi kartu yang rata kiri di satu garis dibaca dari atas ke bawah tanpa tersendat. Tiga pilihan malam di satu baris dibaca sebagai urutan 1, 2, 3. Kalau tepi kiri teks melompat-lompat atau salah satu tombol turun 14px dari baris, mata berhenti dan mencari arah baru.
Figure/ground: yang di depan dan latarnya
Otak selalu memisahkan figur (benda yang diperhatikan) dari latar (ground) di belakangnya. Kartu putih bergaris di atas halaman #f1f5f9 adalah figur. Kalau kartu diberi warna yang sama dengan halaman dan garisnya dihapus, isinya bercampur dengan teks lain di halaman. Modal dengan latar gelap di belakangnya memakai prinsip yang sama: yang terang di depan, yang lain mundur.
🎯 Closure: mata melengkapi yang terpotong
Otak melengkapi bentuk yang gak utuh. Lingkaran putus-putus tetap terbaca lingkaran. Di UI, ini dipakai untuk memberi tahu bahwa masih ada isi lagi: strip foto kamar yang menampilkan tiga foto penuh dan foto keempat terpotong di tepi memberi tahu tamu bahwa stripnya bisa digeser. Kalau foto ketiga pas berhenti di tepi, tamu mengira cuma ada tiga foto.
Cara mengecek: matikan satu per satu
Prinsip-prinsip ini saling menopang. Cara cepat melihat kerja tiap prinsip adalah mematikannya satu per satu, seperti di Lab:
| Dimatikan | Yang terjadi di kartu |
|---|---|
| Proximity (semua jarak 12px) | Harga mengambang: milik nama kamar atau milik kotak menginap? |
| Similarity (tiga pilihan beda gaya) | Pilihan malam gak lagi terbaca satu set |
Common region (kotak .stay hilang) |
Check-in, malam, dan total lepas dari satu sama lain |
| Continuity (tepi dan baris berantakan) | Mata tersendat, urutan 1, 2, 3 gak lagi jelas |
| Figure/ground (kartu sewarna halaman) | Kartu larut ke halaman, isinya bercampur dengan teks sekitarnya |
⚠️ Jebakan yang sering ketemu
- Jarak sama rata di mana-mana. Kalau jarak antar kartu sama dengan jarak di dalam kartu, gak ada kelompok yang terbaca. Jarak antar kelompok harus jelas lebih besar.
- Satu anggota set dibuat beda gaya. Tombol yang tampil seperti link, atau label yang tampil seperti tombol, dibaca sebagai jenis lain.
- Garis di mana-mana. Kotak untuk tiap hal membuat kotak gak berarti. Kelompokkan dengan jarak dulu.
- Kartu putih di halaman putih tanpa garis. Figur dan latar sama, jadi kartunya hilang.
TL;DR: Prinsip Gestalt menjelaskan bagaimana mata mengelompokkan sebelum membaca. Lima prinsip utama: proximity (yang dekat satu kelompok, jadi jarak di dalam kelompok lebih kecil dari jarak antar kelompok), similarity (yang mirip dibaca sejenis), closure (mata melengkapi bentuk yang terpotong), continuity (mata mengikuti garis), dan figure/ground (benda dipisahkan dari latarnya). Common region (Palmer, 1992) menambahkan: yang satu kotak dibaca satu kelompok. Cek desainmu dengan mematikan prinsip satu per satu: kalau kartunya masih terbaca, prinsip lain sedang menopangnya.
