Mengenal Apa itu Hukum Proximity dalam Desain UI

Hi people with the spirit of learning! Dalam pengebangan produk digital tentunya sangat memperhatikan aspek desain seperti UI/UX. Sebagai seorang Desainer penting untuk memahami bagaimana aplikasi yang akan kita rilis dapat disukai pengguna baik dari segi tampilan dan pengalaman saat menggunakannya. Dalam artikel ini akan membahas apa itu hukum proximity dan bagaimana pengaruhnya terhadap pengguna.

Mengenal Apa itu Hukum Proximity dalam Desain UI

Hukum Proximity atau disebut dengan Hukum Kedekatan adalah prinsip desain grafis yang menyatakan bahwa elemen-elemen yang ditempatkan dekat satu sama lain cenderung dianggap sebagai kelompok yang berkaitan atau memiliki hubungan yang erat.

Dalam desain user interface (UI), hukum ini berbicara tentang bagaimana penempatan elemen-elemen UI dapat mempengaruhi cara pengguna memahami dan memproses informasi. Hukum Proximity didasarkan pada asumsi bahwa pengguna cenderung mencari pola dan hubungan antara elemen-elemen visual.

Contoh penggunaan Whitespace dalam hukum Proximity untuk memisahkan elemen menjadi dua pengelompokan yang berbeda

Ketika elemen-elemen ditempatkan dekat satu sama lain, pengguna akan cenderung mengasosiasikan mereka sebagai satu kelompok dan menganggap bahwa mereka memiliki fungsi atau makna yang berkaitan. Sebaliknya, ketika elemen-elemen ditempatkan secara terpisah, pengguna mungkin menganggap mereka sebagai elemen yang terpisah dengan fungsi yang berbeda.

Mengapa hukum ini penting dalam desain UI?

Hukum Proximity penting dalam desain antarmuka pengguna (UI) karena memiliki dampak signifikan pada pemahaman dan interaksi pengguna. Berikut adalah beberapa alasan mengapa Hukum Proximity penting dalam desain UI.

Pembuatan wireframe untuk desain UI

1. Memudahkan pemahaman informasi

Dengan menempatkan elemen-elemen yang berfungsi serupa secara dekat satu sama lain, akan membantu pengguna dalam memahami hubungan dan hierarki informasi yang ada dalam interface. Pengguna akan mengasosiasikan elemen yang berdekatan sebagai kelompok yang berkaitan dan memiliki fungsi yang serupa. Hal ini mengurangi kebingungan dan mempermudah pemahaman informasi yang disajikan.

2. Mempercepat navigasi

Hukum Proximity membantu pengguna dalam menemukan tindakan yang mereka cari dengan lebih cepat. Ketika elemen-elemen yang memiliki hubungan fungsi ditempatkan dekat satu sama lain, pengguna dapat dengan mudah melihat dan mengidentifikasi pilihan yang relevan. Ini mengurangi waktu yang dibutuhkan untuk mencari dan mempercepat proses navigasi pada produk.

3. Meningkatkan fokus pengguna

Contoh hukum Proximity yang emnempatkan elemen terkait secara berdekatan

Dengan menggunakan Hukum Proximity, desainer dapat mengarahkan perhatian pengguna pada elemen yang penting atau perlu diperhatikan. Dengan menempatkan elemen-elemen terkait dalam jarak yang dekat, Desainer dapat menciptakan kelompok visual yang menarik perhatian pengguna.

4. Meningkatkan pengalaman pengguna

Dengan menerapkan Hukum Proximity secara konsisten dalam desain UI, pengguna akan lebih cepat memahami pola dan aturan dalam tata letak UI, sehingga meminimalkan kesalahan dan memperkuat interaksi yang efektif. Hal ini meningkatkan pengalaman pengguna secara keseluruhan dan meningkatkan kepuasan pengguna terhadap produk atau layanan yang disediakan.

Bagaimana implementasi hukum Proximity dalam desain UI?

Terdapat beberapa cara konkrit untuk menerapkan Hukum Proximity dalam desain UI. Berikut adalah beberapa contoh implementasinya:

1. Kelompokkan elemen terkait

Contoh penerapan hukum Proximity pada tampilan UI Email

Jika kita memiliki beberapa elemen yang berhubungan atau memiliki fungsi yang serupa, kita dapat mengelompokkannya secara visual. Misalnya, dalam sebuah aplikasi email, kita dapat mengelompokkan tombol-tombol yang terkait dengan tindakan pada email (misalnya, 'Kirim', 'Balas', 'Teruskan') di sekitar kotak pesan atau di panel samping.

2. Berikan jarak pada elemen yang tidak terkait

Contoh penerapan hukum Proximity pada halaman artikel

Elemen-elemen yang tidak berhubungan sebaiknya ditempatkan dengan jarak yang cukup jauh. Misalnya, pada halaman artikel atau blog, kita dapat memberikan jarak yang cukup antara paragraf-paragraf teks, judul, gambar, dan elemen lainnya. Ini membantu pembaca memahami struktur konten dengan lebih baik dan memudahkan mereka dalam membaca dan menyerap informasi.

3. Gunakan Whitespace secara efektif

Contoh penerapan hukum Proximity dengan menggunakan Whitespace

Whitespace adalah area kosong antara elemen-elemen di UI. Dengan menggunakan whitespace secara efektif, kita dapat menciptakan kelompok dan pemisahan visual antara elemen-elemen yang berbeda. Misalnya, dalam website, kita dapat menggunakan whitespace untuk memisahkan header dari konten utama atau untuk memberikan jarak yang jelas antara menu navigasi dan area konten.

4. Buat elemen terkait menyatu

Contoh penerapan hukum Proximity pada UI Figma

Jika terdapat elemen yang dianggap sebagai satu kesatuan, kita dapat mengelompokkannya dengan menggunakan elemen visual seperti bingkai atau latar belakang yang sama. Misalnya, dalam sebuah aplikasi grafis, dapat dikelompokkan alat-alat penggambaran seperti pensil, kuas, dan penghapus dengan memasukkannya dalam satu panel dengan latar belakang yang sama.

5. Pertimbangkan hirarki visual

Contoh penerapan hukum Proximity pada website BuildWithAngga

Selain menyatukan elemen-elemen yang terkait, kita juga perlu mempertimbangkan hirarki visual untuk mengkomunikasikan tingkat pentingnya atau hubungan yang lebih dekat. Gunakan ukuran, warna, dan penempatan untuk menunjukkan tingkat pentingnya elemen-elemen tersebut.

Kesimpulan

Nah itu dia penjelasan mengenai hukum Proximity dalam desain UI. Dengan memperhatikian hukum Proximity ini akan membantu pengguna mengenai cara menyajikan informasi dan fungsi yang terkait secara visual dan memperkuat struktur dan pengorganisasian elemen-elemen dalam desain UI menjadi lebih efektif.

Kamu juga dapat mengikuti kelas terkait UI/UX desain untuk memperdalam pemahaman kamu dibidang ini. BuildWithAngga menyediakan kelas UI/UX Design: Gestalt Principle untuk kamu coba.