Teori dan Prinsip Gestalt Dalam Desain UI


Pernahkah kamu melihat ke langit dan melihat awan yang bentuknya tidak biasa, menyerupai binatang atau benda? Pernahkah kamu bertanya-tanya, mengapa atau bagaimana kamu membuat refleksi gambar tersebut di otakmu hanya dengan melihat gumpalan gas yang mengembang? Begitulah cara kerja otak kamu! Secara sederhana begitulah pengertian dari Teori Gestalt ini. Gestalt merupakan teori yang untuk pertama kalinya dilontarkan oleh para psikologi Jerman pada tahun 1920an yang bernama Kurt Koffka, Max Wertheimer, and Wolfgang Köhler. 

Teori Gestalt telah berusia hampir 100 tahun, teori psikologis ini menjelaskan mengenai persepsi manusia tentang bagaimana manusia mengelompokkan elemen yang serupa, mengenali pola, dan menyederhanakan gambar yang kompleks saat mengamati objek. Desainer UI menggunakan prinsip-prinsip ini untuk mengatur konten desain antarmuka pengguna supaya lebih user friendly. Kata Gestalt sendiri memiliki arti sebagai kesatuan utuh, sehingga teori ini mengeksplorasi persepsi visual pengguna tentang elemen dalam hubungannya satu sama lain. Setidaknya ada enam Prinsip Gestalt: Good Figure, Similarity, Closure, Proximity, Continuation, Symmetry.


Enam Prinsip Gestalt, gambar bersumber dari UXHints.com

Good Figure

Prinsip ini menunjukkan kecenderungan mata untuk memisahkan objek dari latar belakangnya. Apabila objek dijadikan satu kelompok, mata manusia cenderung melihatnya sebagai satu kesatuan yang utuh yang memisah dari latar belakangnya.

Similarity

Jika pengguna melihat objek yang terlihat mirip satu sama lain, maka pandangan mata mereka secara otomatis melihatnya sebagai elemen individu dari satu grup. Kesamaan antar elemen biasanya ditentukan oleh bentuk, warna, ukuran, tekstur atau nilai. Kesamaan ini memberi pengguna rasa koherensi antara elemen desain.

Closure

Closure adalah teknik yang didasarkan pada kecenderungan mata manusia untuk melihat bentuk tertutup. Bisa teman-teman lihat contohnya pada gambar di atas, mata pengguna akan cenderung bertumpu pada bidang segiempat dari pada empat lingkaran lainnya.

Proximity

Saat objek ditempatkan dalam jarak yang dekat, mata melihatnya sebagai satu kelompok daripada dilihat secara individual meskipun tidak serupa.

Continuation

Mata manusia bergerak secara alami dari satu objek ke objek lainnya. Contohnya pada garis silang pada contoh gambar di atas, mata manusia cenderung bergerak dari garis pojok kiri atas menuju pojok kanan bawah, begitu pula sebaliknya.


Sumber gambar toptal.com

Contohnya lagi pada garis lengkung dan lurus di atas, apabila melihat garis merah maka mata manusia cenderung mengikuti dari garis merah bagian kiri atas menuju garis abu-abu kanan bawah. Mata manusia cenderung tidak terganggu oleh perbedaan warna yang ada, begitu pula pada garis lurus tersebut.

Symmetry

Orang cenderung melihat objek sebagai bentuk simetris. Sudah menjadi sifat manusia untuk mencari keteraturan di antara kekacauan. Namun, simetri di sini tidak harus diartikan secara harfiah agar efektif. Keseimbangan simetris dapat dibuat dengan menggunakan skema warna harmonis atau dengan kelompok elemen yang serupa.

Perlu teman-teman ketahui, penerapan Teori Gestalt ini tidak hanya dalam desain antarmuka saja namun kesemua bidang. Akan tetapi, untuk kali ini penulis membahas penerapannya secara khusus dalam desain UI saja, karena penulis sudah pernah membahas Golden Ratio pada desain logo.

Prinsip Similarity, kita cenderung melihat elemen yang mirip satu sama lain sebagai kelompok atau pola. Kita juga cenderung berpikir bahwa mereka memiliki tujuan/fungsi yang sama. Kemiripan dapat membantu kita dalam mengatur dan mengklasifikasikan objek dalam sebuah grup dan menghubungkannya pada fungsi tertentu.

Ada berbagai cara untuk membuat elemen dianggap serupa dan terkait satu sama lain. Hal ini termasuk kesamaan warna, ukuran, bentuk, tekstur, dimensi, dan orientasi. Ketika Similarity terjadi, suatu objek dapat ditekankan dengan membuatnya menjadi berbeda dari yang lain; objek ini disebut 'Anomali' dan dapat digunakan untuk membuat kontras atau bobot visual supaya tampak menonjol dan dapat menarik perhatian pengguna ke bagian tertentu dari halaman antarmuka tersebut.


Dalam desain UI, desainer dapat menggunakan prinsip Similarity dalam navigasi, tautan/link, tombol, judul, call of action, dan lainnya.

Prinsip Closure, sederhananya, membuat celah tampak menonjol dengan berbagai bentuk di sekelilingnya. Closure dapat membantu meminimalkan gangguan visual dan menyampaikan pesan, memperkuat konsep dalam ruang yang cukup kecil. Pengaplikasiannya dalam desain UI bisa diaplikasikan dalam ikon yang digunakan dalam halaman antarmuka. Bagaimana dengan Continuity? Aplikasi Prinsip Continuity/Continuation dalam desain UI membantu pengguna menafsirkan arah dan gerakan melalui komposisi visual. Prinsip Continuity menyelaraskan elemen, hal ini dapat membantu mata bergerak dengan mulus dan pengguna tidak bingung dalam membacanya. Prinsip Continuity memperkuat persepsi informasi yang dikelompokkan, menciptakan keteraturan, dan memandu pengguna mengakses konten yang berbeda. 


Susunan linier baris dan kolom adalah contoh bagus dari penerapan Continuity. Kita dapat menggunakannya dalam menu dan sub-menu, daftar, pengaturan produk, layanan ata, tampilan saat proses terjadi

Lantas, bagaimana penerapan Symmetry dan Proximity dalam desain UI? 

Elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama terlepas dari jaraknya, memberikan kesan solid dan teratur.

Komposisi simetris memang memuaskan mata, tetapi kalau berlebihan bisa membuat bosan dan statis. Simetri visual cenderung lebih dinamis dan menarik. Menambahkan elemen asimetris ke desain simetris dan sebaliknya dapat membantu menarik perhatian pengguna ke objek tersebut.


Sebaiknya gunakan Prinsip Symmetry pada halaman yang penuh konten.

Elemen-elemen yang diatur dekat satu sama lain, menurut Prinsip Proximity, dianggap lebih terkait daripada yang ditempatkan lebih jauh. Proximity dalam desain UI digunakan untuk mengelompokkan informasi yang serupa, mengatur konten, dan mengatur tata letak. Penggunaannya yang benar akan berdampak positif pada komunikasi visual dan UX pengguna.

Berdasarkan Prinsip Proximity, elemen yang bekaitan satu sama lain dibuat lebih dekat, sedangkan elemen yang tidak ada kaitannya satu sama lain harus dibuat terpisah lebih jauh. White space memainkan peran penting di sini karena menciptakan kontras yang mengarahkan mata pengguna ke arah yang diinginkan. 


Penerapan Prinsip Proximity dapat dilakukan pada elemen apa saja mulai dari navigasi, teks isi, dan penomoran halaman

Dari penjabaran prinsip di atas, tentunya teman-teman sudah mendapat bayangan bagaimana aplikasi Gestalt Principles pada deain UI. Desain UI tidak hanya grafik yang membuat mata nyaman, tetapi lebih dari itu. Terutama tentang komunikasi, kinerja, dan kenyamanan pengguna dalam mengaksesnya. 

Teman-teman bisa ikuti blog ini supaya mendapat update tiap bulannya.

Post a Comment

0 Comments