(Part 1) Tingkatkan Desainmu Dengan Mengupas Prinsip Similarity dan Proximity

Proses persepsi memungkinkan kita untuk melihat dunia melalui indera penglihatan, bau, suara, rasa dan sentuhan. Secara khusus, sistem visual kami memproses sejumlah besar informasi di lingkungannya. Daripada memahami elemen secara terpisah, otak kita mengatur pola, benda dan bentuk menjadi bentuk utuh yang bisa kita pahami.

Prinsip pengelompokan Gestalt dari persepsi visual menggambarkan organisasi ini sebagai seperangkat prinsip yang menjelaskan bagaimana kita melihat dan mengatur jumlah besar ini rangsangan visual. Prinsip Gestalt – similarity, proximity, closure, figure/ground, continuance dan common fate – adalah alat-alat populer yang digunakan oleh desainer untuk mengatur informasi visual. Sebagai seorang desainer visual, dan sekarang seorang desainer interaksi, saya menerapkan prinsip ini secara teratur untuk menciptakan hubungan dan perbedaan antara elemen dalam desain saya. Memahami bagaimana prinsip ini bekerja, dan bagaimana menggunakannya dalam desain Anda, menghasilkan pekerjaan yang lebih kuat dan lebih menarik.

Apakah Anda siap untuk meningkatkan desain Anda? Mari kita mulai dengan menggali lebih dalam mengenai Similarity.

Similarity/Kesamaan

Prinsip Gestalt tentang similarity mengatakan bahwa elemen yang serupa dianggap lebih terkait daripada elemen yang berbeda. Similarity membantu kita mengatur objek dengan relatitas mereka ke objek lain dalam kelompok dan dapat dipengaruhi oleh atribut warna, ukuran, bentuk dan orientasi.

MENGGUNAKAN WARNA UNTUK MENETAPKAN HUBUNGAN

Similarity ini paling dipengaruhi oleh warna. Dalam contoh di bawah ini, perhatikan bagaimana bentuk berwarna memiliki efek yang kuat dalam menetapkan pengelompokan atau relasi, bahkan ketika bentuk yang berbeda disertakan.

Using color to assign similarity — No other attribute can beat color when it comes to assigning relationships.

MENGGUNAKAN UKURAN UNTUK MENETAPKAN HUBUNGAN

Ukuran adalah alat lain yang berguna yang bisa kita gunakan dalam menciptakan similarity. Dalam contoh di bawah ini, similarity dalam ukuran menyebabkan bentuk yang lebih besar untuk menonjol dan membentuk kelompok, meskipun semua bentuknya sama.

Using size to assign similarity — Size makes the larger squares appear more important than the surrounding shapes.

MENGGUNAKAN BENTUK UNTUK MENETAPKAN HUBUNGAN

Bentuknya berguna dalam pengelompokan similarity, tetapi memiliki efek pengelompokan yang paling lemah jika dibandingkan dengan warna dan ukuran. Dalam contoh yang terlihat di sini, bentuknya menyebabkan kita menafsirkan elemen sebagai kolom lingkaran dan kotak, berlawanan dengan deretan lingkaran dan bujur sangkar bergantian.

Using shape to assign similarity — It’s much easier to see columns of similar shapes than rows of dissimilar shapes.

MENGGUNAKAN ORIENTASI UNTUK MENETAPKAN HUBUNGAN

Orientasi dapat digunakan untuk mengelompokkan similarity juga. Dengan mengubah beberapa kotak dalam kelompok ini dengan 45 derajat, kelompok terpisah yang dibuat dianggap sebagai terkait. Mereka hampir tampak bergerak bersama dalam arah yang sama dibandingkan dengan bentuk di sekitar mereka. Ini sebenarnya menyentuh pada prinsip Gestalt common fate, sebuah prinsip yang akan kita bahas kedepannya. Tapi Anda dibebaskan untuk melompat lebih dulu dan mencarinya di Google (setelah Anda membaca artikel ini, tentu saja!). Ini adalah prinsip menarik yang sering terjadi di sekitar Anda.

Using orientation to assign similarity — Difference in orientation creates strong relationships.

LEBIH PADA WARNA

Seperti disebutkan sebelumnya, similarity ini paling dipengaruhi oleh warna dan dapat menimpa atribut lain. Sebagai contoh, kita dapat menimpa contoh similarity dalam bentuk dengan menambahkan warna. Sekarang kita melihat baris bergantian dari bentuk merah dan putih sebagai lawan dari kolom lingkaran dan kotak. Mencobanya. Cobalah untuk melihat kolom lingkaran dan kotak. Mungkin bisa tapi cukup sulit, bukan?

Alternating rows of red and white shapes — It’s difficult not to see alternating rows of red and white now.

Selain itu, warna dapat menimpa ukuran. Ketika kita menambahkan warna pada contoh similarity dalam ukuran, kita membuat dua pengelompokan terpisah satu sama lain. Sekarang kita melihat kelompok kotak merah besar sebagai satu kelompok dan persegi putih besar tunggal sebagai terpisah, tidak berhubungan (dan kesepian).

Two separate groups created using color — Color trumps size in assigning relationships.

Kedua contoh ini mengilustrasikan bagaimana warna yang kuat dapat dalam menetapkan hubungan antar elemen. Cobalah menggunakan warna dalam pekerjaan Anda untuk membedakan elemen dan Anda akan kagum pada seberapa kuat pengelompokan Anda.

SIMILARITY DALAM PRAKTEK

Ketika kita mendesain kita dapat menggunakan similarity untuk menyampaikan organisasi dan asosiasi dengan menunjukkan elemen mana yang berhubungan, atau tidak berhubungan, satu sama lain. Misalnya, dua bagian yang ditampilkan di situs Salon di bawah dikelompokkan berdasarkan ukuran relatifnya. Kita jelas melihat dua kelompok terpisah, dengan cerita atas di sebelah kiri dan paling banyak dibaca di sebelah kanan. Meskipun kedua bagian menyediakan fungsi yang sama – menampilkan artikel untuk dibaca – pengelompokan berdasarkan ukuran menetapkan lebih banyak arti – lebih memiliki arti penting jika melakukan pengelompokan kiri, yang memungkinkan Salon untuk mengarahkan perhatian pada cerita atas mereka.

Salon.com articles grouped by their relationships in size differences. — Attention is guided to Salon’s top stories through the use of similarity in size. (View large version)

Sebaliknya, kurangnya ukuran perbedaan dalam contoh ini dari Amazon tidak menetapkan kepentingan khusus untuk satu bagian. Meskipun demikian, kesamaan masih dicapai melalui penggunaan pengulangan ukuran dan bentuk yang sama, menyebabkan kita untuk melihat deretan item.

Lack of size differences in product images. — When images are the same size, no emphasis is given to any one section. (View large version)

PENGGUNAAN WARNA YANG SERUPA

Kita tahu bahwa warna adalah indikator yang kuat di similarity, bisa membantu untuk mengatur dan membuat konten agar lebih dimengerti. Dalam contoh ini dari Cars.com, penggunaan warna yang serupa membantu kita membedakan antara apa yang dimaksud dengan judul, body copy, dan teks link. (Pengungkapan penuh: saya bekerja di Cars.com sebagai perancang interaksi.) Dengan menggunakan warna yang berbeda untuk masing-masing elemen ini, kita mengharapkan mereka untuk berfungsi sama dan, dalam kasus teks link biru, untuk berperilaku sama.

Similar color use helps us to understand the function and behavior of elements. (View large version)

Proximity/Kedekatan

Prinsip Gestalt proximity mengatakan bahwa elemen yang lebih dekat bersama-sama dianggap lebih terkait daripada elemen yang terpisah jauh. Seperti similarity, proximity membantu kita mengatur objek dengan keterkaitan mereka dengan objek lain. proximity adalah prinsip terkuat untuk menunjukkan keterkaitan objek, membantu kami memahami dan mengatur informasi lebih cepat dan lebih efisien.

Contoh lingkaran di bawah menunjukkan bagaimana proximity dapat digunakan untuk membantu kita melihat objek yang berhubungan. Seperti yang kita lihat di sini, lingkaran tersebar, menunjukkan tidak ada hubungan, dengan masing-masing dianggap sebagai objek terpisah.

Circles with no spacial proximity — These shapes exhibit no relation.

Namun, ketika lingkaran ditarik menjadi proximity dengan jarak dekat satu sama lain, mereka memiliki hubungan dan tidak lagi dianggap sebagai objek terpisah.

Circles with strong spacial proximity — Shapes exhibit relation when in close proximity.

RUANG PUTIH/SPASI

Ruang putih adalah alat yang sangat berharga untuk menciptakan proximity. Mengambil kelompok yang sama lingkaran dan menambahkan spasi membantu kita memahami hal yang berbeda. Sekarang, di sebelah kiri, bentuk proximity menyebabkan kita untuk melihat dua kelompok sebagai kolom, masing-masing kelompok sendiri. Di sebelah kanan, bentuk proximity menyebabkan kita melihat dua kelompok sebagai baris, sekali lagi masing-masing kelompok sendiri. Gunakan ruang putih/spasi putih dalam desain Anda untuk memperkuat pengelompokan serta untuk membedakan mereka dari elemen lain.

Columns and rows of circles — By adding white space between elements, we change the perception of the groupings.

KEKUATAN PROXIMITY

Proximity cukup kuat untuk mengalahkan elemen lain dari variasi. Perhatikan bagaimana proximity masih menang bahkan ketika atribut lain, seperti warna dan bentuk, ditambahkan. Coba karena mereka mungkin, warna dan bentuk tidak mengalahkan proximity di sini dan setiap pengelompokan masih dianggap sebagai elemen terpisah.

PROXIMITY DALAM PRAKTEK

Ketika kita mengatur informasi dalam desain kita, kita dapat menggunakan proximity untuk menciptakan hubungan antara elemen untuk membantu dalam memahami informasi yang disajikan. Misalnya, dengan mengelompokkan gambar ini dari Apple Store bersama dalam jarak dekat, kami menetapkan hubungan ke seluruh grup. Kami menganggap mereka sebagai terkait dan mengharapkan konten serupa.

Images grouped together displaying relation. — Images grouped together are perceived as being related. (View large version)

Namun, ketika kita menghapus kolom tengah, tiba-tiba kita melihat dua kelompok terpisah dan memiliki harapan konten yang berbeda di antara mereka.

Two separate groups of images — Two separate groups are created by removing the center column. (View large version)

MENGGABUNGKAN PROXIMITY DAN SIMILARITY

Pengelompokan oleh proximity juga dapat dikombinasikan dengan similarity untuk menciptakan hubungan yang lebih kuat. Dilihat dalam contoh ini dari Amazon, pengelompokan oleh proximity dan similarity dalam ukuran menyebabkan kita untuk melihat dua pengelompokan terpisah dan menetapkan lebih menonjol ke kelompok kiri.

Books grouped by proximity and similarity. — Grouping by both proximity and similarity creates stronger relationships between elements. (View large version)

PROXIMITY DAN HIRARKI

Proximity sangat baik untuk mengatur elemen hirarkis. Dalam contoh ini dari Crate & barrel, pilihan dikelompokkan bersama di bawah judul umum, menciptakan hubungan, yang membuat pemindaian dan menemukan informasi jauh lebih mudah.

Kitchen items grouped under headings. — Finding information is easier when options are grouped under headings. (View large version)

Ketika judul dihapus dan pilihan dikelompokkan tanpa proximity, kita akan kehilangan hubungan yang diciptakan dan jadi jauh lebih sulit untuk dengan cepat memindai dan menemukan informasi yang diinginkan. Cobalah sendiri. Pergi ke depan dan melihat seberapa cepat Anda dapat menemukan cangkir kopi dalam pengelompokan dengan judul versus pengelompokan tanpa judul. Sedikit lebih sulit untuk cepat melompat ke sana, bukan?

Kitchen items with the headings removed. — Without headings, finding information quickly is difficult. (View large version)

Kesimpulan

Memahami bagaimana menggunakan similarity dan proximity untuk mempengaruhi hubungan antara elemen dalam pekerjaan Anda akan membantu Anda membuat desain yang memungkinkan organisasi lebih mudah dan meningkatkan kegunaan pekerjaan Anda. Gunakan similarity dan proximity untuk membuat hubungan dan perbedaan antara elemen dalam desain Anda. Bereksperimen dengan penggunaan ruang putih, warna, ukuran, bentuk dan orientasi elemen dan campuran kedua prinsip bersama-sama untuk menghasilkan hubungan yang sangat kuat dan menarik.

Pada bagian selanjutnya dari seri ini, kita akan melihat closure dan figure/Ground, dan menjelajahi bagaimana kedua prinsip Gestalt ini menggunakan ruang positif dan negatif untuk menciptakan hubungan yang sederhana namun kuat.

sumber: smashingmagazine.com