Proximity dalam Desain Web – Pada awal abad ke-20, psikolog Jerman Max Wertheimer, Kurt Koffka, dan Wolfgang Köhler mengeksplorasi bagaimana orang memandang dunia secara visual.
Proximity dalam Desain Web
webdesignpractices – Berdasarkan hasil eksperimen mereka, mereka telah mendefinisikan prinsip gestalt seperangkat aturan yang menjelaskan bagaimana orang menafsirkan dunia kompleks di sekitar mereka. Proximity adalah salah satu prinsip gestalt. Desain grafis dan antarmuka pengguna modern sangat bergantung pada prinsip ini.
Melansir adobe, Artikel ini akan mengeksplorasi Proximity dalam desain, dan melihat secara mendalam bagaimana menerapkan prinsip ini dalam desain visual.
Baca juga : 12 Tren Desain Web yang Menginspirasi untuk Tahun 2022
Apa yang dimaksud dengan Proximity dalam desain?
Bagaimana orang memutuskan apakah elemen tertentu merupakan bagian dari kelompok yang lebih besar atau tidak? Mereka melihat objek, dan jika objek terletak dekat satu sama lain, mereka melihatnya sebagai satu kesatuan. Lihatlah gambar di bawah ini. Anda mungkin akan melihat dua kelompok elemen daripada delapan belas objek individu. Semua objek identik, dan satu-satunya yang membedakannya adalah ruang putih yang memisahkannya.
Orang-orang mengikuti pendekatan yang sama ketika mereka berinteraksi dengan produk fisik dan digital. Misalnya, ketika kita memeriksa halaman web atau layar ponsel, kita biasanya melihatnya sebagai komposisi objek daripada objek individual. Persepsi ini menawarkan desainer antarmuka pengguna (UI) peluang yang sangat baik—karena memungkinkan untuk mengelompokkan objek bersama-sama yang memiliki fungsionalitas atau properti yang serupa.
Bagaimana Anda menggunakan Proximity dalam desain?
Prinsip Proximity membantu desainer mencapai dua tujuan utama, yang mencakup membuat tata letak tampak tidak terlalu ramai dan mengelompokkan elemen terkait.
Mengisi seluruh halaman web dengan konten dan elemen fungsional adalah salah satu kesalahan umum di antara desainer. Sangat menggoda untuk memberikan informasi sebanyak mungkin dan mengisi setiap bagian tata letak dengan teks dan gambar.
Namun penting untuk dipahami bahwa pengguna memiliki rentang perhatian yang terbatas, dan dengan menambahkan terlalu banyak konten dan elemen fungsional, Anda membanjiri pengguna dengan terlalu banyak detail. Akibatnya, menjadi lebih sulit bagi mereka untuk memahami apa yang penting dan apa yang tidak, dan ini mencegah pengguna mencerna informasi dengan benar. Penerapan Proximity yang cermat dalam desain membantu mengurangi kekacauan visual dan meningkatkan pemahaman.
Proximity juga membuat halaman lebih terorganisir. Desainer menggunakan prinsip Proximity untuk memberikan isyarat visual kepada pengguna. Dengan mengelompokkan elemen bersama-sama, desainer mengirimkan sinyal yang jelas kepada pengguna bahwa elemen tersebut terkait. Ruang negatif, atau ruang di sekitar dan di antara elemen, adalah alat yang dapat digunakan desainer untuk itu. Menambah atau mengurangi ruang negatif antar elemen dapat menyatukan atau memisahkannya.
Berikut adalah empat contoh praktis Proximity dalam desain:
1. Desain bentuk yang lebih baik
Mengisi formulir adalah salah satu bagian interaksi pengguna yang paling tidak menyenangkan. Namun, formulir merupakan bagian penting dari hampir semua pengalaman produk. Baik itu desain seluler atau web , sangat penting untuk mendesain formulir dengan cara yang memungkinkan pengguna untuk mengisi semua data dengan mudah. Ada tiga area utama di mana prinsip Proximity dapat membantu menciptakan pengalaman yang lebih baik bagi pengguna: label bidang, bidang masukan, dan format masukan.
Label bidang dan penempatannya memainkan peran luar biasa dalam betapa mudahnya pengguna memindai formulir. Kita tahu bahwa label rata atas cenderung mengurangi waktu penyelesaian formulir karena mata pengguna bergerak ke satu arah (dari atas ke bawah). Tetapi dengan menempatkan label di dekat bidang formulir yang sesuai, Anda mempermudah pengguna untuk memindai formulir. Ini sangat penting untuk formulir yang lebih panjang (formulir dengan tujuh bidang atau lebih) karena ketika hubungan antara label dan bidang formulir tidak terlihat, pengguna harus menghabiskan waktu ekstra untuk mencari tahu label apa yang termasuk dalam bidang mana.
Formulir panjang dengan banyak bidang mungkin tampak sulit untuk diisi. Aturan umum adalah untuk menghilangkan semua bidang opsional dan hanya meminta pengguna untuk memberikan informasi yang perlu Anda gunakan. Tapi apa yang harus Anda lakukan ketika formulir membutuhkan beberapa bidang input? Jawabannya sederhana: Anda dapat mengubah persepsi pengguna tentang formulir menggunakan prinsip Proximity.
Dengan mengelompokkan bidang terkait, Anda dapat membantu pengguna memahami mengapa mereka perlu mengisi informasi ini. Lihatlah contoh di bawah ini. Kedua formulir memiliki jumlah bidang yang sama, tetapi bidang dalam formulir yang tepat dikategorikan ke dalam tiga kelompok. Jumlah input pengguna sama di kedua contoh, tetapi kesan pada pengguna sama sekali berbeda.
Akhirnya, dimungkinkan untuk menggunakan Proximity dalam desain untuk memformat input data. Anda dapat menggunakan chunking untuk beberapa jenis data. Misalnya, ketika Anda meminta pengguna untuk memberikan nomor telepon mereka, akan lebih mudah untuk menampilkan nomor dalam potongan karena akan memudahkan mereka untuk memindai dan memvalidasi data input. Bandingkan “+18005550123” dengan “+1 (800) 555-0123.” Potongan data yang digunakan dalam contoh kedua lebih mudah untuk dipindai, divalidasi, dan dipanggil kembali di masa mendatang.
2. Tingkatkan pemahaman konten
Konten adalah raja. Untuk banyak produk, konten adalah alasan mengapa orang mulai menggunakannya sejak awal. Keterbacaan yang baik (kemudahan pembaca untuk memahami teks tertulis) dan keterbacaan (kemudahan pembaca untuk memecahkan kode simbol) adalah sifat penting dari desain produk. Banyak faktor yang dapat berkontribusi pada keterbacaan dan keterbacaan, termasuk jenis font, ukuran font, dan kontras teks. Tetapi cara Anda menyusun konten pada halaman juga berdampak langsung pada keterbacaan dan keterbacaan konten.
Keterbacaan dapat terganggu ketika teks disajikan tanpa pemformatan apa pun. Dengan menyajikan konten dalam blok pendek yang mudah dipindai—mengelompokkan kalimat dalam paragraf atau bagian dan memisahkannya dengan sedikit spasi—Anda membantu pengguna memindai dan membaca teks.
3. Tekankan elemen tertentu
Penekanan adalah salah satu prinsip terpenting dari desain pengalaman pengguna (UX) . Memberi prioritas pada elemen atau konten tertentu pada halaman adalah salah satu tugas paling umum bagi desainer. Meskipun desainer dapat menggunakan banyak teknik berbeda untuk mencapai hasil yang baik—seperti membuat elemen menjadi lebih besar atau menambahkan lebih banyak kontras—hal ini memungkinkan untuk mencapai hasil yang sama tanpa mengubah elemen aslinya. Sebagai gantinya, Anda dapat bermain dengan jumlah ruang negatif di sekitar elemen.
Ada hubungan langsung antara ruang negatif dan perhatian pengguna. Semakin banyak ruang negatif yang Anda tambahkan di sekitar elemen, semakin terlihat bagi pemirsa. Ini terjadi secara alami—karena perhatian pengguna akan diarahkan ke elemen dengan lebih banyak ruang negatif hanya karena tidak ada hal lain di area itu yang menarik perhatian mereka.
Perlu disebutkan bahwa mungkin sulit untuk mengetahui elemen mana yang paling menarik perhatian di halaman web. Jadi disarankan untuk menggunakan perangkat lunak desain web untuk membuat prototipe desain Anda dan memvalidasinya dengan uji lima detik. Tunjukkan prototipe Anda kepada orang-orang yang mewakili audiens target Anda selama lima detik, dan kemudian tanyakan kepada mereka, “Apa elemen utama yang dapat Anda ingat?” Jika mereka menyebutkan elemen (atau elemen) yang Anda ingin mereka lihat, maka Anda semua baik-baik saja.
4. Bimbing mata pemirsa melalui konten
Prinsip Proximity dapat membantu Anda menciptakan alur yang akan memandu mata pemirsa dari satu titik ke titik lainnya. Dengan menyesuaikan ruang putih, Anda dapat dengan mudah membuat titik fokus atau area yang secara alami menarik perhatian pengguna. Membuat titik fokus dimulai dengan membuat kisi desain web yang memungkinkan Anda menempatkan elemen desain (seperti teks, gambar, atau kontrol fungsional) secara konsisten di dalam tata letak. Setelah Anda memiliki kisi, Anda perlu mengatur elemen untuk memandu pengguna melalui bagian konten utama. Seperti yang Anda lihat di bawah, inilah yang dilakukan Evernote dengan memasangkan blok teks dengan ilustrasi. Akibatnya, mata pemirsa mengikuti jalur zig-zag saat mereka menelusuri halaman ini.
Proximity dan desain responsif
Berfokus pada jarak relatif antara elemen UI penting saat Anda mendesain untuk berbagai layar dan resolusi. Desain yang terlihat bagus di layar desktop besar mungkin tidak terlihat bagus di layar ponsel kecil. Saat desain Anda diperkecil untuk mengakomodasi layar yang lebih kecil, jarak antar elemen dapat diminimalkan, yang mungkin merusak hubungan yang dimaksudkan elemen UI. Sangat penting untuk menguji desain Anda di berbagai layar dan resolusi untuk melihat apakah skala desain Anda baik. Dimungkinkan untuk menggunakan alat Google Chrome Dev untuk menyimulasikan perangkat seluler .
Manfaatkan prinsip Proximity dalam desain Anda
Tujuan utama menggunakan Proximity dalam desain adalah untuk mengatur informasi dan membuat hierarki visual yang membantu kegunaan produk Anda dengan lebih baik. Desainer harus memanfaatkan Proximity untuk membuat grup yang bermakna sehingga pengguna dapat dengan mudah memahami antarmuka mereka. Dan semakin mudah orang menggunakan produk Anda, semakin banyak pengalaman menyenangkan yang akan mereka dapatkan.
