Menggunakan Hukum Gestalt dari Organisasi Perseptual dalam Desain UI

Gestalt adalah kata dalam bahasa Jerman yang berarti ‘bentuk’ atau ‘bentuk’. Psikologi Gestalt didirikan oleh psikolog Jerman Max Wertheimer, Wolfgang Kohler, dan Kurt Koffka dan berfokus pada bagaimana orang menafsirkan dunia. Wertheimer, Kohler dan Koffka menetapkan beberapa prinsip dasar, juga dikenal sebagai “hukum organisasi perseptual.” Prinsip-prinsip menggambarkan cara kita memandang dunia.

Dalam artikel ini, saya ingin membagikan tujuh undang-undang gestalt dan menunjukkan bagaimana menerapkannya dalam praktik.

1. Hukum Kesamaan

Elemen-elemen yang memiliki tampilan visual serupa tampaknya lebih terkait.

Pada gambar di bawah ini, Anda mungkin melihat pengelompokan lingkaran berwarna sebagai baris daripada hanya kumpulan lingkaran individu.

Image for post

Similarity principle

Cara menerapkan ini pada desain UI

Elemen-elemen secara visual dapat dikelompokkan bersama jika mereka memiliki kesamaan visual. Dimungkinkan untuk membuat kesamaan menggunakan ukuran, warna, dan bentuk.

Image for post

Pengguna mengelompokkan item berdasarkan properti visual mereka
2. Hukum Simetri

Pikiran kita menyukai objek simetris karena simetri menciptakan kesan stabilitas dan keteraturan.

Image for post

Asimetri vs simetri
Cara menerapkan ini pada desain UI

Saat Anda mengatur Elemen UI agar simetris satu sama lain, Anda menyederhanakan proses pemindaian untuk pengguna. Misalnya, menu navigasi simetris cenderung dianggap lebih stabil daripada yang tidak simetris.

Image for post

Image for post

Menu asimetris vs menu simetris

Catatan cepat: Tata letak simetris bisa terlihat membosankan. Jadi, Anda mungkin ingin memperkenalkan beberapa asimetri dalam desain untuk membuatnya lebih dinamis.

3. Hukum Wilayah Bersama

Elemen cenderung dipersepsikan ke dalam kelompok jika mereka berbagi area dengan batas yang jelas.

Image for post
Hukum wilayah bersama
Cara menerapkan ini pada desain UI

Dengan menambahkan batas di sekitar elemen (atau sekelompok item), Anda memisahkannya dari elemen sekitarnya. Periksa kartu pada gambar di bawah ini. Bayangan halus dan batas yang terlihat jelas menciptakan kesan objek individu.

Image for post

4. Figur-Ground

Prinsip figur-ground mengacu pada kemampuan manusia untuk memisahkan objek secara visual pada berbagai lapisan fokus. Kita tahu elemen mana yang ditempatkan di latar depan dan yang di latar belakang secara intuitif.

Image for post

Setiap kali pengguna melihat popup modal, mereka menyaksikan efek Figure-Ground. Kotak munculan di situs web Airbnb.
Cara menerapkan ini pada desain UI

Ada beberapa teknik untuk membedakan rencana fokus: Anda dapat menggunakan overlay semi-transparan, bayangan atau mengaburkan elemen di latar belakang.

Desain material mengklasifikasikan ketinggian sumbu Z, yang dapat digunakan untuk merancang overlay. Ketinggian dibuat menggunakan overlay dan drop shadow.

Image for post

Lapisan sumbu Z dalam Desain Material

Perancang aplikasi iOS sering mengandalkan blur untuk membedakan rencana fokus.

Image for post

Buram di iOS
5. Hukum Kedekatan

Objek yang berdekatan satu sama lain tampaknya dikelompokkan bersama.

Ruang putih memainkan peran penting dalam prinsip. Pada gambar berikut, lingkaran di sebelah kiri tampak menjadi bagian dari satu grup sedangkan yang di sebelah kanan tampaknya menjadi bagian dari yang lain.

Image for post

Prinsip kedekatan.
Cara menerapkan ini pada desain UI

Prinsip kedekatan membantu desainer untuk membuat konten lebih nyaman untuk dilihat oleh pengguna. Tempatkan benda terkait berdekatan satu sama lain untuk membuat koneksi.

Image for post
Jika Anda membandingkan contoh kiri dan kanan, akan jelas bahwa blok konten di sebelah kanan lebih mudah dibaca dan dipahami.

Prinsip ini juga dapat mengurangi tingkat kesalahan elemen-elemen interaktif karena meningkatkan hubungan antar elemen.

Image for post
Kiri: Diperlukan upaya ekstra dari sisi pengguna untuk mencocokkan tombol dan produk yang sesuai. Kanan: Menggunakan prinsip kedekatan Anda menghubungkan tombol ke item tertentu
6. Hukum Kesinambungan

Persepsi kita cenderung melihat objek yang tersusun dalam garis atau kurva sebagai terkait atau dikelompokkan. Ini terjadi karena objek yang dihubungkan oleh garis lurus atau lengkung terlihat dengan cara yang mengikuti jalur paling halus.

Pada gambar di bawah ini, garis-garis yang dibuat dari lingkaran dipandang sebagai milik bersama.

Image for post
Prinsip kesinambungan.
Cara menerapkan ini pada desain UI

Arahkan mata pengguna dengan membuat koneksi visual antar item. Gunakan prinsip ini saat Anda mendesain menu.

Image for post
Jika Anda membandingkan contoh menu kiri dan kanan, akan terlihat jelas bahwa menu di sebelah kanan lebih nyaman untuk dipindai dan dipahami
7. Hukum Penutupan

Otak kita cenderung mengisi kekosongan dalam informasi.

Pada gambar di bawah ini, Anda mungkin melihat dua objek (lingkaran dan bintang) karena otak Anda mengisi celah yang hilang untuk membuat gambar yang bermakna.

Image for post

Prinsip penutupan
Cara menerapkan ini pada desain UI

Setiap kali Anda mendesain indikator pemuatan atau bilah kemajuan, ingat hukum penutupan.

Image for post

Spinner Bahan oleh Tom Johnson
8. Prinsip Nasib Umum

Ketika elemen bergerak ke arah yang sama, otak kita menganggapnya sebagai bagian dari kelompok yang sama.

Image for post

Contoh prinsip nasib bersama
Cara menerapkan ini pada desain UI

Prinsip ini sangat mendasar dalam desain gerak. Animasi fungsional menggunakan takdir umum untuk memandu mata pengguna.

Image for post

Nasib umum membantu menghubungkan titik-titik
Pelajari cara mendesain antarmuka pengguna

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

sumber:uxpro.cc uxplanet.org

Latest articles

12.6k Followers
Follow

Related articles