Prinsip Gestalt: Cara Mata Mengelompokkan Visual
Penjelasan prinsip Gestalt: kedekatan, kemiripan, closure, dan common region, plus tips praktis agar layout, UI, dan poster lebih jelas tanpa garis tambahan.
Lihat sebuah halaman selama satu detik, dan otakmu sudah memilahnya menjadi kelompok: ini menu, itu deretan kartu, tombol itu milik formulir ini. Padahal kamu belum membaca apa pun. Pemilahan instan ini mengikuti pola yang dijelaskan oleh prinsip Gestalt, dan desainer yang memahaminya bisa membuat layout lebih jelas dengan lebih sedikit garis, kotak, dan label.
Asal-usul Gestalt
Psikologi Gestalt lahir di Jerman pada awal abad ke-20 lewat para peneliti seperti Max Wertheimer, Wolfgang Köhler, dan Kurt Koffka. Kata "Gestalt" kurang lebih berarti "bentuk" atau "keseluruhan". Gagasan utamanya: kita melihat keseluruhan yang tertata lebih dulu, bukan tumpukan bagian yang terpisah.
Kini gagasan tersebut menjadi bagian inti dari desain visual dan antarmuka. Berikut prinsip yang paling sering kamu gunakan.
1. Proximity: kedekatan membentuk kelompok
Elemen yang diletakkan berdekatan terlihat saling berhubungan. Ini salah satu petunjuk pengelompokan paling kuat, sering kali lebih kuat dari warna atau bentuk, seperti dijelaskan Nielsen Norman Group dalam artikelnya tentang proximity.
Tips: buat jarak di dalam satu kelompok lebih kecil daripada jarak antarkelompok. Label formulir harus lebih dekat ke kolom isiannya sendiri daripada ke kolom di atasnya.
2. Similarity: tampilan sama, peran sama
Elemen yang berbagi warna, bentuk, ukuran, atau gaya dianggap satu keluarga. Lihat panduan NN/g tentang prinsip similarity untuk contoh di antarmuka.
Tips: beri semua tautan yang bisa diklik perlakuan yang sama, dan jangan pernah memberi gaya tautan pada teks biasa. Konsistensi mengajari pengguna fungsi setiap elemen. Palet terbatas, seperti dalam aturan warna 60-30-10, membuat kemiripan lebih mudah dikendalikan.
3. Closure: pikiran mengisi celah
Kita cenderung melihat bentuk utuh meski ada bagian yang hilang. Lingkaran yang digambar dari empat busur terputus tetap terbaca sebagai lingkaran.
Tips: closure membuat logo dan ikon tetap sederhana. Kamu bisa membuang detail dan membiarkan ruang negatif bekerja, selama bentuk keseluruhannya masih mudah dikenali.
4. Common region: wadah yang sama
Elemen di dalam batas yang sama, seperti kartu, panel, atau blok latar, dianggap satu kelompok meski jaraknya tidak terlalu dekat. NN/g membahasnya dalam artikel tentang prinsip common region.
Tips: gunakan kartu untuk konten yang harus dipahami sebagai satu kesatuan, misalnya produk beserta harga dan tombolnya. Hindari kotak di dalam kotak; terlalu banyak garis tepi justru menambah kebisingan visual.
5. Figure-ground dan continuity
Figure-ground
Kita memisahkan apa yang ada di depan (figure) dari latar di belakangnya (ground). Persepsi figure-ground inilah alasan overlay gelap membuat jendela pop-up menonjol. Kontras warna yang kuat menjaga figure tetap jelas.
Continuity
Mata mengikuti garis dan lengkungan. Elemen yang tersusun di sepanjang satu jalur, seperti deretan kartu atau timeline, terasa terhubung dan menuntun pembaca ke satu arah.
Cara menerapkannya
Mulai dari jarak. Sebelum menambah garis pemisah atau kotak, coba kelompokkan hanya dengan ruang kosong.
Lakukan tes menyipitkan mata. Buat pandanganmu buram dan lihat layout-nya. Kelompok yang terlihat harus sama dengan kelompok yang kamu maksud.
Jangan biarkan prinsip saling bertentangan. Jika dua elemen berdekatan tetapi gayanya berbeda, pengguna menerima sinyal yang membingungkan. Selaraskan proximity dan similarity.
Padukan dengan komposisi. Gestalt menentukan apa yang menjadi satu kelompok; komposisi menentukan ke mana mata melihat lebih dulu. Panduan rule of thirds kami membahas bagian kedua itu.
Untuk gambaran yang lebih luas, topik prinsip Gestalt dari Interaction Design Foundation dan Laws of UX adalah referensi yang bagus.
Layout yang baik tidak dibangun dari dekorasi yang lebih banyak, melainkan dari hubungan yang jelas.
Jelajahi lebih lanjut
Prinsip Gestalt berlaku untuk poster, slide, menu game, dan situs web. Padukan dengan pemilihan pasangan font yang tepat, atau lihat cara kami menerapkannya dalam proyek di Ryuartistry.