Apa itu proximity dalam desain web dan bagaimana cara menggunakannya?

Diterbitkan: 2022-10-28

Sungguh menakjubkan bagaimana pikiran manusia bekerja. Pernahkah Anda bertanya-tanya tentang cara orang memandang dunia mereka secara visual?

Pada abad ke-20, psikolog Jerman Max Wertheimer, Kurt Koffka, dan Wolfgang Kohler mencoba menemukan jawaban atas pertanyaan ini. Mereka melakukan serangkaian penelitian, dan sebagai hasilnya, mereka mengembangkan prinsip gestalt, yang merupakan seperangkat pedoman sederhana yang menjelaskan bagaimana orang melihat dunia di sekitar mereka.

9 Cara UI/UX mengarahkan pertumbuhan situs web bisnis Anda

Kedekatan dianggap sebagai salah satu prinsip gestalt. Prinsip ini memiliki dampak signifikan pada estetika desain antarmuka pengguna kontemporer. Di blog ini, saya akan memberi tahu Anda apa arti kedekatan dalam Desain Web dan bagaimana Anda dapat menggunakannya.

Apa itu proximity dalam desain web?

Konsep kedekatan mengacu pada elemen-elemen yang perlu diatur secara visual dan tujuan untuk mencapai kebingungan sesedikit mungkin. Penting untuk memisahkan konten yang tidak terkait satu sama lain untuk menyoroti tidak adanya hubungan di antara mereka.

Misalnya, Anda pasti memperhatikan bahwa ikon untuk beberapa platform media sosial telah dikelompokkan bersama dan tidak tersebar di sebuah situs web. Ini lebih mirip dengan teknik meletakkan segala sesuatu di satu lokasi.

Tata letak yang menggunakan kedekatan untuk meminimalkan ambiguitas visual dan meningkatkan pemahaman lebih mudah dipahami. Kedekatan juga membantu dalam struktur tata letak situs web. Penerapan kedekatan yang tepat memiliki efek yang signifikan dan menguntungkan pada pengalaman pengguna.

Desainer mendapat manfaat dari prinsip kedekatan dengan dapat mencapai tujuan utama seperti membuat tata letak tampak kurang berantakan dan mengelompokkan variabel bersama yang terhubung secara kolektif.

Bagaimana cara menggunakan proximity dalam desain web?

Ruang Putih

Memahami pentingnya ruang putih dalam desain adalah langkah pertama untuk berhasil mengadopsi gagasan kedekatan dalam desain.

Kurangnya ruang putih dalam desain adalah masalah umum. Dalam hal pengalaman pengguna, ruang putih dapat memengaruhinya sama seperti konten sebenarnya di halaman. Ruang putih mengarahkan pandangan pengguna, menghasilkan kontras, dan meninggalkan dampak abadi pada pikiran pengguna.

Melalui desain, desainer mengkomunikasikan sifat situs web. Bisa melalui teks dan gambar. Tetapi desain yang efektif adalah sesuatu yang memiliki ruang putih yang terorganisir dengan baik yang dapat meningkatkan elemen dalam sebuah situs web.

Buat hierarki visual

Struktur situs web dan cara konten diatur dan disajikan adalah blok bangunan dari kedekatan yang efisien. Seorang desainer harus mampu membangun hierarki visual konten yang menarik untuk mencapai tujuan kedekatan yang efektif ini. Sangat penting untuk memberikan situs web Anda hierarki visual yang jelas, jadi penting untuk memanfaatkan ruang putih secara efisien dan mengatur elemen yang sebanding bersama-sama.

Pengelompokan dan sub-pengelompokan lebih lanjut bagian situs web adalah teknik terbaik untuk menjaga hierarki tetap di tempatnya. Pengguna lebih mampu memahami di mana mereka berada dan ke mana mereka ingin pergi sebagai hasil dari hierarki ini, yang juga membantu mengekspresikan tujuan situs web.

Fakta bahwa pengguna dapat melihat ini menunjukkan bahwa mereka mengetahui dan memahami di mana informasi terkait disimpan, yang menunjukkan bahwa Anda telah berhasil mengomunikasikan pesan dan tujuan situs web.

Tingkatkan pemahaman konten

Konten adalah raja. Untuk banyak produk, materi konten adalah motif mengapa manusia mulai menggunakannya sejak awal. Kejelasan yang baik (kenyamanan yang dapat digunakan pembaca untuk mengenali konten tekstual tertulis) dan keterbacaan (kenyamanan pembaca dapat memecahkan kode simbol) adalah rumah penting dari desain produk.

Banyak elemen yang dapat memberikan kontribusi pada kejelasan dan keterbacaan, yang mencakup jenis font, ukuran font, dan kontras konten tekstual. Tetapi cara Anda membentuk materi konten di halaman web juga tanpa penundaan mempengaruhi keterbacaan dan kejelasan materi konten.

Keterbacaan dapat melalui saat konten tekstual disediakan tanpa pemformatan. Dengan menyediakan materi konten dalam blok pendek yang mudah dipindai—mengelompokkan kalimat dalam paragraf atau bagian dan memisahkannya dengan sepotong spasi—Anda membantu pelanggan menguji dan mempelajari konten tekstual.

Memiliki tata letak yang dapat dipindai

Membaca dan memindai konten yang terstruktur dalam hierarki dan dikategorikan secara logis menjadi lebih sederhana. Saat membangun arsitektur dan desainnya, situs web harus menggunakan kedekatan agar tidak membebani pengguna dengan konten.

Oleh karena itu, terlepas dari kenyataan bahwa relatif mudah untuk menerapkan konsep kedekatan di situs web yang memiliki jumlah materi terbatas, kedekatan secara signifikan lebih penting di situs web yang memiliki banyak konten. Akibatnya, Anda harus memeriksa untuk melihat apakah tata letak Anda sederhana, dapat dibaca, dan dapat dipindai oleh pengguna.

Apa itu desain UI suara? Ketahui semua tentang tren desain web ini

Tekankan elemen tertentu

Penekanan adalah salah satu konsep vital maksimum dari desain pengalaman orang (UX). Mengutamakan faktor-faktor tertentu atau konten pada halaman web adalah salah satu tanggung jawab tempat paling umum untuk desainer.

Sementara desainer dapat menggunakan banyak strategi eksklusif untuk mendapatkan konsekuensi yang tepat—termasuk membuat detail menjadi besar atau menyertakan kontras ekstra—hal ini memungkinkan untuk mendapatkan konsekuensi yang sama tanpa mengubah detail asli. Sebagai gantinya, Anda bisa bermain dengan jumlah area yang buruk di seluruh detail.

Ada hubungan langsung antara daerah miskin dan kepentingan pribadi. Area ekstra buruk yang Anda unggah secara bulat dan detail, akan menjadi semakin penting bagi pemirsa. Ini terjadi secara alami—karena minat seseorang dapat diarahkan ke arah detail dengan area yang lebih buruk karena tidak ada hal lain di tempat itu yang menarik minat mereka.

Sangat layak untuk dikemukakan bahwa mungkin sulit untuk mengenali detail mana yang menarik minat maksimum pada halaman internet. Jadi dianjurkan untuk menerapkan program perangkat lunak tata letak internet untuk membuat prototipe tata letak Anda dan memvalidasinya dengan uji 5-2.

Tunjukkan prototipe Anda kepada orang-orang yang merupakan audiens Anda selama 5 detik, lalu tanyakan kepada mereka, “Apa faktor utama yang mungkin Anda ingat?” Jika mereka menyebut detail (atau faktor) yang Anda ingin mereka lihat, maka Anda baik-baik saja.

Pandu mata pemirsa melalui konten

Prinsip kedekatan membantu Anda menciptakan embusan angin sebagai cara yang baik untuk mengarahkan mata pemirsa dari satu faktor ke faktor lainnya. Dengan menyesuaikan ruang putih, Anda dapat dengan mudah membuat faktor fokus atau wilayah yang secara jelas menarik perhatian pengguna.

Membuat faktor fokus mulai berkembang dengan menumbuhkan grid tata letak internet cara yang baik untuk membiarkan Anda mengelilingi faktor tata letak (bersama dengan konten tekstual, gambar, atau kontrol praktis) selalu di dalam tata letak.

Setelah Anda mendapatkan kisi, Anda ingin menyiapkan faktor untuk pelanggan manual melalui bagian materi konten utama. Seperti yang dapat Anda lihat di bawah, itulah tepatnya yang dilakukan Evernote dengan bantuan memasangkan blok konten tekstual dengan ilustrasi. Akibatnya, mata pemirsa mengikuti rute zig-zag saat mereka menggulir halaman ini.

Membungkus

Berfokus pada jarak relatif di antara faktor-faktor UI sangat penting saat Anda mengatur tata letak untuk beragam monitor dan resolusi. Desain yang muncul tepat di monitor laptop besar tidak akan muncul tepat di monitor seluler kecil.

Ketika tata letak Anda diperkecil untuk menampung monitor yang lebih kecil, jarak antar faktor dapat diminimalkan, yang mungkin akan menghancurkan hubungan faktor UI yang seharusnya. Penting untuk memeriksa tata letak Anda pada beragam monitor dan resolusi untuk melihat apakah tata letak Anda berskala baik atau tidak. Ini layak untuk menerapkan peralatan Google Chrome Dev untuk mensimulasikan perangkat seluler.

Cara meningkatkan pengalaman pengguna situs web juga merupakan sesuatu yang mungkin ingin Anda ketahui lebih lanjut. Hubungi kami jika Anda ingin mendesain atau mendesain ulang halaman web Anda.