Menjelajahi Prinsip Desain Gestalt

Diterbitkan: 2022-03-11

Dengarkan versi audio dari artikel ini

Ruang negatif telah lama menjadi bahan pokok desain yang baik. Meninggalkan ruang putih di sekitar elemen desain adalah hal pertama yang biasanya muncul di pikiran. Tapi kemudian ada desain yang menggunakan ruang putih itu untuk menyimpulkan elemen yang sebenarnya tidak ada (panah yang tersembunyi di antara E dan X di logo FedEx langsung muncul di benak sebagai contoh).

ruang negatif adalah salah satu elemen kunci dan prinsip desain — "E" dan "x" di logo FedEx membuat panah di dalam ruang negatif di antara keduanya.

Otak manusia sangat pandai mengisi kekosongan dalam gambar dan menciptakan keseluruhan yang lebih besar daripada jumlah bagian-bagiannya. Itu sebabnya kita melihat wajah pada benda-benda seperti dedaunan pohon atau retakan trotoar.

Prinsip ini adalah salah satu ide mendasar yang paling penting di balik prinsip gestalt persepsi visual. Proposal awal yang paling berpengaruh yang ditulis tentang teori ini diterbitkan oleh Max Wertheimer dalam hukum Gestalt 1923 tentang organisasi perseptualnya , meskipun diskusi Wolfgang Kohler tahun 1920 tentang Gestalten Fisik juga mengandung banyak ide berpengaruh tentang subjek tersebut.

Terlepas dari siapa yang pertama kali mengusulkan ide (ada esai sejak tahun 1890), prinsip gestalt adalah seperangkat ide penting untuk dipelajari oleh desainer mana pun, dan implementasinya dapat sangat meningkatkan tidak hanya estetika desain, tetapi juga fungsionalitas dan keramahan pengguna.

Dalam istilah yang paling sederhana, teori gestalt didasarkan pada gagasan bahwa otak manusia akan berusaha untuk menyederhanakan dan mengatur gambar atau desain kompleks yang terdiri dari banyak elemen, dengan secara tidak sadar mengatur bagian-bagian menjadi sistem terorganisir yang menciptakan keseluruhan, bukan hanya sebuah serangkaian elemen yang berbeda. Otak kita dibangun untuk melihat struktur dan pola agar kita lebih memahami lingkungan tempat kita tinggal.

Ada enam prinsip individu yang umumnya diasosiasikan dengan teori gestalt: kesamaan , kelanjutan , penutupan , kedekatan , figur/tanah , dan simetri & keteraturan (juga disebut pragnanz ). Ada juga beberapa prinsip tambahan yang lebih baru yang terkadang dikaitkan dengan gestalt, seperti nasib bersama.

Kesamaan

Itu sifat manusia untuk mengelompokkan hal-hal seperti bersama-sama. Dalam gestalt, elemen serupa dikelompokkan secara visual, terlepas dari kedekatannya satu sama lain. Mereka dapat dikelompokkan berdasarkan warna, bentuk, atau ukuran. Kemiripan dapat digunakan untuk menyatukan elemen-elemen yang mungkin tidak bersebelahan dalam sebuah desain.

Tentu saja, Anda dapat membuat sesuatu yang berbeda jika Anda ingin membuatnya menonjol dari keramaian. Itu sebabnya tombol untuk ajakan bertindak sering kali dirancang dengan warna yang berbeda dari halaman lainnya—sehingga menonjol dan menarik perhatian pengunjung ke tindakan yang diinginkan.

Dalam desain UX, menggunakan kesamaan memperjelas kepada pengunjung Anda item mana yang serupa. Misalnya, dalam daftar fitur yang menggunakan elemen desain berulang (seperti ikon yang disertai 3-4 baris teks), prinsip kesamaan akan memudahkan untuk memindainya. Sebaliknya, mengubah elemen desain untuk fitur yang ingin Anda soroti membuatnya menonjol dan memberi mereka lebih penting dalam persepsi pengunjung.

Bahkan hal-hal sederhana seperti memastikan bahwa tautan di seluruh desain diformat dengan cara yang sama bergantung pada prinsip kesamaan dalam cara pengunjung Anda akan melihat organisasi dan struktur situs Anda.

Kelanjutan

Hukum kontinuitas menyatakan bahwa mata manusia akan mengikuti jalur paling halus saat melihat garis, terlepas dari bagaimana garis itu sebenarnya ditarik.

contoh prinsip kontinuitas gestalt — Mata cenderung ingin mengikuti garis lurus dari satu ujung gambar ini ke ujung yang lain, dan garis lengkung dari atas ke bawah, bahkan ketika garis berubah warna di tengah jalan.

Kelanjutan ini bisa menjadi alat yang berharga ketika tujuannya adalah untuk mengarahkan mata pengunjung ke arah tertentu. Mereka akan mengikuti jalur paling sederhana di halaman, jadi pastikan bagian paling vital yang harus mereka lihat berada di jalur itu.

Karena mata secara alami mengikuti garis, menempatkan item dalam rangkaian dalam garis secara alami akan menarik perhatian dari satu item ke item berikutnya. Slider horizontal adalah salah satu contohnya, seperti juga daftar produk terkait di situs seperti Amazon.

Penutup

Penutupan adalah salah satu prinsip gestalt paling keren dan yang sudah saya singgung di awal bagian ini. Ini adalah gagasan bahwa otak Anda akan mengisi bagian-bagian yang hilang dari sebuah desain atau gambar untuk menciptakan keseluruhan.

Dalam bentuknya yang paling sederhana, prinsip penutupan memungkinkan mata Anda mengikuti sesuatu seperti garis putus-putus sampai ke ujungnya. Tetapi aplikasi yang lebih kompleks sering terlihat pada logo, seperti itu untuk World Wildlife Fund. Potongan besar garis besar panda tidak ada, tetapi otak Anda tidak akan kesulitan mengisi bagian yang hilang untuk melihat seluruh hewan.

Prinsip penutupan gestalt diilustrasikan dengan indah dalam logo panda World Wildlife Fund. Otak melengkapi bentuk putih, meskipun tidak terdefinisi dengan baik.

Penutupan cukup sering digunakan dalam desain logo, dengan contoh lain termasuk untuk Jaringan USA, NBC, Sun Microsystems, dan bahkan Adobe.

Contoh lain yang sangat penting dari penutupan di tempat kerja dalam desain UX dan UI adalah ketika Anda menunjukkan sebagian gambar memudar dari layar pengguna untuk menunjukkan kepada mereka bahwa ada lebih banyak yang dapat ditemukan jika mereka menggesek ke kiri atau kanan. Tanpa sebagian gambar, yaitu, jika hanya gambar penuh yang ditampilkan, otak tidak segera menafsirkan bahwa mungkin ada lebih banyak yang dapat dilihat, dan oleh karena itu pengguna Anda cenderung tidak menggulir (karena penutupan sudah terlihat).

Dicari desainer UI lepas penuh waktu yang berbasis di AS

Kedekatan

Kedekatan mengacu pada seberapa dekat elemen satu sama lain. Hubungan kedekatan terkuat adalah hubungan antara subjek yang tumpang tindih, tetapi hanya mengelompokkan objek ke dalam satu area juga dapat memiliki efek kedekatan yang kuat.

Kebalikannya juga benar, tentu saja. Dengan menempatkan ruang di antara elemen, Anda dapat menambahkan pemisahan meskipun karakteristik lainnya sama.

Ambil grup lingkaran ini, misalnya:

prinsip gestalt kedekatan diilustrasikan dengan kelompok lingkaran — Satu-satunya hal yang membedakan kelompok di sebelah kiri dari yang di sebelah kanan adalah kedekatan garis. Namun otak Anda menafsirkan gambar di sebelah kanan sebagai tiga kelompok yang berbeda.

contoh prinsip gestalt kedekatan dalam tindakan merusak ux — Contoh formulir PDF USPS di mana prinsip proximity gestalt merusak UX. Karena label bidang lebih dekat ke bidang di bawahnya, orang akan keliru percaya bahwa di situlah informasi berlaku untuk "c." dan "d." Namun, informasi tersebut seharusnya disediakan di bidang di atas label teks.

Dalam desain UX, kedekatan paling sering digunakan untuk membuat pengguna mengelompokkan hal-hal tertentu bersama-sama tanpa menggunakan hal-hal seperti batas keras. Dengan menempatkan hal-hal seperti lebih dekat, dengan ruang di antara setiap kelompok, pemirsa akan segera memahami organisasi dan struktur yang Anda ingin mereka pahami.

Gambar/Tanah

Prinsip angka/dasar mirip dengan prinsip penutupan karena mengambil keuntungan dari cara otak memproses ruang negatif. Anda mungkin pernah melihat contoh prinsip ini beredar di meme di media sosial, atau sebagai bagian dari logo (seperti logo FedEx yang telah disebutkan).

Otak Anda akan membedakan antara objek yang dianggap berada di latar depan sebuah gambar (gambar, atau titik fokus) dan latar belakang (area di mana gambar berada). Hal yang menarik adalah ketika latar depan dan latar belakang sebenarnya berisi dua gambar yang berbeda, seperti ini:

contoh elemen pembentuk hubungan figur-ground dan prinsip-prinsip desain — Beberapa orang akan langsung melihat pohon dan burung saat melihat logo Pittsburgh Zoo & PPG Aquarium, sementara yang lain akan melihat gorila dan singa saling menatap.

contoh yang bagus dari prinsip gestalt figure-ground — Contoh hebat lainnya dari prinsip gestalt figure/ground.

Contoh yang lebih sederhana dapat dilihat dengan gambar ini, dari dua wajah yang membuat kandil atau vas di antara mereka:

contoh sederhana prinsip figure-ground, prinsip desain gestalt — Dalam ilusi terkenal yang dikembangkan oleh psikolog Denmark Edgar Rubin ini, penonton biasanya disajikan dengan dua interpretasi bentuk—dua wajah atau vas. Ini adalah contoh bagus lainnya dari prinsip figure/ground.

Secara umum, otak Anda akan menafsirkan area gambar yang lebih besar sebagai tanah dan yang lebih kecil sebagai gambar. Namun, seperti yang ditunjukkan pada gambar di atas, Anda dapat melihat bahwa warna yang lebih terang dan lebih gelap dapat memengaruhi apa yang dilihat sebagai sosok dan apa yang dilihat sebagai tanah.

Prinsip figure/ground bisa sangat berguna saat desainer produk ingin menyorot titik fokus, terutama saat aktif atau sedang digunakan—misalnya, saat jendela modal muncul dan sisa situs memudar ke latar belakang, atau saat bilah pencarian diklik dan kontras meningkat antara bilah pencarian dan bagian situs lainnya.

Berlangganan ke blog desain Toptal dan terima eBook kami

Simetri dan Orde

Hukum simetri dan keteraturan juga dikenal sebagai pragnanz , kata Jerman untuk "sosok yang baik." Apa yang dikatakan prinsip ini adalah bahwa otak Anda akan melihat bentuk yang tidak jelas dengan cara yang sesederhana mungkin. Misalnya, versi monokrom dari logo Olimpiade terlihat sebagai rangkaian lingkaran yang tumpang tindih daripada kumpulan garis lengkung.

Berikut ini contoh bagus lainnya dari prinsip desain gestalt “ pragnanz ”:

contoh kompleks dari prinsip pragnanz, prinsip gestalt lainnya

Otak Anda akan menafsirkan gambar di sebelah kiri sebagai persegi panjang, lingkaran, dan segitiga, bahkan ketika garis luar masing-masing tidak lengkap karena itu adalah bentuk yang lebih sederhana daripada gambar keseluruhan.

Nasib Umum

Sementara nasib umum awalnya tidak termasuk dalam teori gestalt, sejak itu telah ditambahkan. Dalam desain UX, kegunaannya tidak bisa diabaikan. Prinsip ini menyatakan bahwa orang akan mengelompokkan hal-hal yang menunjuk atau bergerak ke arah yang sama.

Di alam, kita melihat ini dalam hal-hal seperti kawanan burung atau kumpulan ikan. Mereka terdiri dari sekelompok elemen individu, tetapi karena mereka bergerak seolah-olah menjadi satu, otak kita mengelompokkannya dan menganggapnya sebagai satu stimulus.

sekawanan burung menggambarkan prinsip nasib bersama — Sekawanan burung dipandang sebagai satu kesatuan ketika terbang ke arah yang sama dan dengan demikian berbagi nasib yang sama. (oleh Martin Adams di Unsplash)

Ini sangat berguna di UX karena efek animasi menjadi lebih umum dalam desain modern. Perhatikan bahwa elemen sebenarnya tidak harus bergerak untuk mendapatkan manfaat dari prinsip ini, tetapi mereka harus memberi kesan gerakan.

Prinsip Gestalt dalam Desain UX

Seperti prinsip psikologis lainnya, belajar menggabungkan prinsip persepsi visual gestalt ke dalam karya desain Anda dapat sangat meningkatkan pengalaman pengguna. Memahami cara kerja otak manusia dan kemudian mengeksploitasi kecenderungan alami seseorang menciptakan interaksi yang lebih mulus yang membuat pengguna merasa nyaman di situs web, bahkan jika itu adalah kunjungan pertama mereka.

Prinsip-prinsip Gestalt relatif mudah untuk dimasukkan ke dalam hampir semua desain dan dapat dengan cepat meningkatkan desain yang tampak serampangan atau seperti memperebutkan perhatian pengguna ke desain yang menawarkan interaksi yang mulus dan alami yang memandu pengguna ke arah tindakan yang Anda ingin mereka lakukan.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

Prinsip Desain: Pengantar Hirarki
Praktik Terbaik Desain UI dan Kesalahan Umum
Cara Menggunakan Prinsip Gestalt yang Kuat dalam Desain (dengan Infografis)
Panduan Komprehensif untuk Arsitektur Informasi
Tingkatkan UX Anda dengan Prinsip Desain Interaksi yang Sukses Ini