TEORI GESTALT UNTUK UX YANG EFISIEN: PRINSIP KESAMAAN

Banyak desainer dapat membanggakan memiliki intuisi kreatif dan mata yang tajam: mereka menambahkan banyak gairah dan perasaan ke dalam tata letak situs web atau aplikasi masa depan sebagai pemikiran dan pengukuran rasional. Dalam banyak kasus, itu tidak menyombongkan diri tetapi keterampilan nyata untuk melihat semua detail bersama-sama, merasakan kemungkinan jebakan aliran pengguna, untuk menemukan solusi asli yang tidak merusak kegunaan. Namun, tidak ada keajaiban dalam hal ini: keterampilan ini tidak hanya didasarkan pada bakat tetapi juga pengalaman praktis dan ketekunan dalam mempelajari teori, standar, dan pedoman yang dengan cepat berubah seiring dengan teknologi dan perangkat. Bahkan eksperimen kreatif didasarkan pada pengetahuan tentang mekanisme interaksi dan faktor-faktor yang memengaruhinya: untuk melanggar aturan, Anda harus mengetahuinya dengan baik.

Hirarki visual dalam antarmuka web dan seluler termasuk dalam domain yang mengetahui desainer mana yang memperkuat potensi kreatif mereka. Menjelajahi cara orang memahami informasi dan menggunakannya untuk membangun navigasi yang baik, salinan yang mudah dicerna, dan pilihan warna yang efektif memiliki dampak besar pada kegunaan produk – dan kemampuan pemindaian sebagai bagian penting. Jadi, hari ini kita akan kembali ke dasar: mari kita mulai merevisi bagaimana prinsip pengelompokan Gestalt dapat memengaruhi antarmuka pengguna secara positif.

Apa itu Teori Gestalt?

Pada dasarnya, Gestalt adalah istilah yang berasal dari kata Jerman Gestalt [????talt] yang berarti "bentuk, bentuk". Ini digunakan terutama dalam psikologi kognitif untuk bidang yang mengeksplorasi hukum persepsi yang bermakna dari data yang terus-menerus diperoleh orang dari dunia yang tampaknya sangat kacau. Ide dasar di balik gerakan ini dapat ditangkap melalui ungkapan terkenal oleh psikolog Gestalt Kurt Koffka: "Keseluruhan adalah selain jumlah dari bagian-bagian". Ketika orang melihat objek kompleks yang terdiri dari banyak elemen, mereka menerapkan metode sadar atau bawah sadar untuk mengatur bagian-bagian ke dalam sistem yang terorganisir secara keseluruhan, bukan hanya kumpulan objek sederhana. Ini bekerja pada tingkat persepsi yang berbeda, tetapi bagian visual tampaknya menjadi yang paling menarik bagi desainer yang membuat antarmuka.

Mengapa desainer bisa tertarik dengan masalah ini? Karena membantu memahami psikologi pengguna aplikasi atau situs web dengan lebih baik. Ketika Anda mengetahui faktor-faktor yang mempengaruhi persepsi visual, itu membuat proses desain UX jauh lebih mahir memberikan tingkat interaksi yang sukses lebih tinggi dan menurunkan tingkat kesalahpahaman yang bisa didapat pengguna dengan cara ini. Di antara berbagai tingkat pendekatan ini, prinsip (atau hukum) pengelompokan mungkin yang paling penting untuk dipertimbangkan oleh desainer. Prinsip-prinsip ini didasarkan pada gagasan bahwa orang mengatur apa yang mereka lihat bersama dengan beberapa pola yang diatur ke dalam lima kategori global: Kedekatan, Kesamaan, Kontinuitas, Penutupan, dan Keterhubungan. Berikut adalah salah satu infografis yang ditawarkan oleh blog Vertical Measures dan memvisualisasikan deskripsi inti untuk beberapa prinsip.

Dalam antarmuka pengguna, prinsip pengelompokan yang diterapkan dengan cermat membuat persepsi elemen tata letak lebih cepat dan lebih mudah serta menetapkan prioritas di berbagai tingkat interaksi. Hari ini kita akan mempertimbangkan prinsip kesamaan pengelompokan yang banyak digunakan dalam praktik desain.

Prinsip kesamaan

Prinsip kesamaan didasarkan pada gagasan bahwa hal-hal yang memiliki karakteristik visual yang sama seperti bentuk, ukuran, warna, tekstur, nilai atau orientasi akan terlihat sebagai milik bersama. Artinya, jika seseorang mempersepsikan sekumpulan elemen, dia cenderung mengelompokkan elemen-elemen yang memiliki satu atau beberapa ciri yang sama sebagai item-item yang terkait. Oleh karena itu, dengan memberikan elemen tata letak yang berbeda yang identik atau fitur visual yang serupa, desainer merangsang pengguna untuk mengatur koneksi yang sesuai dan memahami keseluruhan skema dengan lebih cepat.

Kemiripan dapat didasarkan pada berbagai parameter visual seperti warna, bentuk, ukuran, dan orientasi. Mari kita periksa beberapa contoh praktis antarmuka yang dirancang oleh tim Tubik.

Warna

Berikut adalah contoh umum penerapan kesamaan warna di aplikasi kalender sederhana. Huruf-huruf yang menandai hari dalam seminggu pada layar kalender secara visual dikelompokkan dengan satu warna yang berbeda dari warna yang digunakan untuk angka-angka dalam kisi kalender. Oleh karena itu, pandangan sekilas sudah cukup untuk memisahkan jenis simbol ini – warna menyederhanakan proses pemindaian pertama. Tingkat kesamaan warna berikutnya terjadi di bidang angka: tanggal pada minggu yang dipilih pengguna terlihat lebih cerah sedangkan tanggal lainnya dalam bulan terlihat lebih pudar. Zona interaktif utama diwarnai dengan cerah dan menghadirkan aksen visual yang langsung terlihat dan tidak dapat dilewatkan. Jadi, warna memungkinkan desainer untuk membuat jalan yang mudah darina vigasiuntuk pengguna dengan efektif hierarki visualmelalui prinsip pengelompokan.

Satu contoh lagi di sini menunjukkan bagaimana pengelompokan berdasarkan warna dapat diterapkan secara efektif untuk salinan dalam antarmuka grafis. Anda dapat melihat layar aplikasi yang harus dilakukan di mana posisi yang sudah ditandai sebagai selesai ditampilkan dalam warna yang berbeda dibandingkan dengan tugas yang sedang berlangsung. Ini memungkinkan pengguna untuk memindai daftar dengan cepat dan mengelompokkan jenis tugas dalam hitungan detik.

Penerapan prinsip pengelompokan berdasarkan warna yang lebih kompleks adalah menandai kategori dan blok konten. Ini bekerja sangat baik di antarmuka yang penuh dengan berbagai konten yang diatur pada beberapa tingkatan seperti, katakanlah, blog, e-commerce atau sumber daya pendidikan, dll. Penanda warna menyederhanakan navigasi dan menjaga konsistensi desain yang memungkinkan pengguna untuk mengingat petunjuk warna dan menemukan konten yang mereka inginkan dengan mudah. Contoh di atas menunjukkan aplikasi blog yang menerapkan prinsip ini: berbagai posting diatur di sekitar kategori global dan ditandai dengan warna yang dapat Anda lihat di ikon, tab berwarna pada posting dan statistik cepat koresponden dari posting di profil pengguna. Prinsip yang sama diterapkan di Aplikasi Moneywise yang ditunjukkan di bawah ini.

Ukuran

Prinsip kesamaan yang mengelompokkan elemen berdasarkan ukuran adalah landasan lain dalam menciptakan antarmuka yang intuitif dan ramah pengguna karena menetapkan dasar untuk hierarki visual yang kuat yang mendukung pengguna. Pendekatan ini membantu untuk menetapkan prioritas dan membuat konten yang paling penting terlihat. Pengelompokan elemen konten serupa dengan prinsip ini mengatur koneksi di antara mereka, seringkali lebih cepat daripada pengguna dapat membaca salinan atau melihat semua detailnya

Contoh menampilkan situs web perusahaan dari perusahaan arsitektur. Blok salinan yang menyajikan manfaat dan pendekatan perusahaan didukung dengan kata kunci yang menerapkan dua prinsip pengelompokan secara bersamaan: mereka menggunakan ukuran yang berbeda dan orientasi teks yang berbeda. Dalam proses interaksi, mereka jelas dianggap sebagai elemen terkait. Juga, halaman menu yang diperluas menunjukkan hierarki tipografi yang mengelompokkan elemen salinan berdasarkan ukuran: kata kunci, kategori, dan subkategori.

Berikut adalah contoh lain dari pengelompokan berdasarkan ukuran dan warna. Kita dapat melihat konsep bilah tab di mana elemen interaktif yang sama pentingnya diberikan dalam ukuran yang sama dan warna pudar sementara elemen interaktif inti –tombol plus– dibuat menonjol melalui warna cerah dan ukuran lebih besar. Selain itu, mencoba menambahkan konten melalui tombol ini, pengguna ditawari tiga opsi untuk berbagai jenis konten. Dan lagi, mengelompokkan tiga tombol yang muncul yang menggunakan warna yang sama dengan tombol induk tetapi ukurannya lebih kecil, antarmuka memungkinkan pengguna untuk mengatur koneksi dan hierarki elemen navigasi dengan mudah berdasarkan operasi tipikal persepsi kognitif.

Membentuk

Satu lagi cara untuk mengelompokkan elemen pada halaman web atau layar adalah dengan menandainya denganmembentuk

Contoh menunjukkan aplikasi yang menggunakan kartu dengan bentuk yang sama untuk mensimulasikan interaksi dengan objek fisik – dasar kartu data. Pendekatan ini memungkinkan pengguna untuk melihat kumpulan blok konten yang terkait. Antarmuka untuk aplikasi Homey yang ditampilkan di atas juga menyajikan contoh pengelompokan berdasarkan bentuk secara konsisten dari satu layar ke layar lainnya: tombol yang menandai ruangan menggunakan bentuk bujur sangkar sedangkan tombol berbagai indikator dalam layar ruangan tertentu menggunakan bentuk bulat. Ini mengatur koneksi yang jelas antara elemen tata letak terkait serta navigasi global di aplikasi.

Meskipun kami baru saja mulai merevisi penggunaan teori Gestalt dalam desain, sudah jelas bahwa mengetahui prinsip-prinsip sederhana namun efektif ini dapat menghemat banyak upaya bagi pengguna dan mendukung antarmuka yang ramah pengguna dengan mekanisme yang bekerja sesuai dengan kemampuan kognitif manusia dan pola psikologis. Ikuti pembaruan untuk memeriksa penjelasan dan contoh prinsip pengelompokan lainnya:kedekatan, simetri, kelanjutan, dan lain-lain.