Bayangkan kamu membuka sebuah aplikasi baru. Dalam hitungan detik, matamu langsung tertuju pada tombol besar berwarna mencolok di tengah layar, jarimu tahu ke mana harus menekan, dan begitu kamu menekannya, aplikasi langsung memberi tanda bahwa aksi tersebut berhasil. Semua terasa wajar dan tidak perlu dipikirkan. Padahal, di balik kesan “mudah” itu ada dua disiplin desain yang bekerja sama: desain visual yang membuat tampilan enak dilihat, dan desain interaksi yang membuat perilaku produk mudah ditebak. Memahami keduanya adalah pintu masuk untuk membuat produk digital yang benar-benar nyaman dipakai.

Apa itu Desain Visual?

Desain visual adalah lapisan UX yang menentukan bagaimana sebuah produk terlihat, namun tujuannya bukan sekadar mempercantik tampilan. Desain visual yang baik justru mendukung kemudahan penggunaan (usability), bukan bersaing dengannya. Hal ini dicapai melalui penggunaan elemen-elemen dasar secara sengaja, yaitu garis, bentuk, warna, tekstur, tipografi, dan wujud (form). Setiap layar yang dibuat oleh seorang desainer pada dasarnya adalah susunan dari keenam elemen ini, dan memahami satu per satu adalah langkah pertama sebelum bisa menggunakannya dengan penuh kesadaran.

Bagaimana Elemen-Elemen Bergabung Menjadi Prinsip Desain

Setelah memahami elemen dasarnya, langkah berikutnya adalah mempelajari cara menggabungkan elemen-elemen tersebut sesuai prinsip-prinsip desain visual yang sudah diakui secara luas. Prinsip-prinsip ini bukan sekadar selera estetika, melainkan pola yang secara konsisten membuat sebuah tampilan lebih mudah dibaca, dipindai, dan dijelajahi.

  • Unity (Kesatuan): seluruh elemen pada satu halaman terasa menyatu karena warna, font, dan jarak antar elemen dijaga konsisten di seluruh tampilan.
  • Hierarchy (Hierarki): ukuran, ketebalan, dan posisi digunakan untuk menunjukkan elemen mana yang paling penting, sehingga mata pengguna terarah ke konten utama lebih dulu.
  • Contrast (Kontras): perbedaan warna, ukuran, atau bentuk dibuat secara sengaja agar elemen penting seperti tombol atau notifikasi langsung terlihat menonjol dari sekitarnya.
  • Balance and Space (Keseimbangan dan Ruang): konten disusun agar halaman tidak terasa berat sebelah, dan ruang kosong (negative space) diperlakukan sebagai alat desain yang aktif, bukan sekadar area kosong yang harus diisi.
  • Gestalt: pengguna melihat sebuah desain secara keseluruhan sebelum menyadari bagian-bagiannya satu per satu, sehingga pengelompokan dan perataan elemen sangat menentukan kesan pertama.

Nielsen Norman Group merangkum gagasan yang sama melalui lima prinsip yang saling melengkapi, yaitu scale (skala), visual hierarchy (hierarki visual), balance (keseimbangan), contrast (kontras), dan prinsip Gestalt. Lembaga ini menekankan bahwa kelima prinsip tersebut berakar dari penelitian tentang persepsi manusia, sehingga akan meningkatkan kemudahan penggunaan apabila diterapkan dengan tepat. Prinsip Gestalt sendiri masih bisa diperluas lagi dengan konsep-konsep seperti proximity (kedekatan), similarity (kemiripan), closure (penutupan), common region (kesamaan area), dan continuation (kesinambungan), yang semuanya menjelaskan bagaimana otak manusia secara otomatis mengelompokkan elemen-elemen yang saling berkaitan di sebuah layar.

Desain Interaksi: Bagaimana Pengguna Bertindak di Layar

Jika desain visual mengatur tampilan, maka desain interaksi mengatur perilaku. Setiap interaksi yang berhasil selalu mengikuti pola tiga langkah yang sama: pengguna harus mengenali bahwa sebuah elemen bisa diklik atau disentuh, kemudian melakukan aksi tersebut, dan akhirnya menerima respons dari sistem yang menegaskan bahwa aksinya benar-benar terjadi. Jika salah satu dari ketiga langkah ini gagal, seluruh interaksi pun gagal, sekalipun tampilannya sangat menarik.

  • Goal-driven design (desain berbasis tujuan pengguna): keputusan desain harus diambil lebih dulu dan tidak boleh dibatasi oleh apa yang secara teknis lebih mudah dibangun. Tanggung jawab desain dan pemrograman dipisahkan secara jelas agar kebutuhan pengguna tidak dikorbankan demi jalan pintas pengembangan.
  • Primary persona (persona utama): setiap produk sebaiknya dirancang dengan fokus pada satu jenis pengguna yang jelas, sebab mencoba memuaskan semua orang sekaligus biasanya justru tidak memuaskan siapa pun secara maksimal.

 

Psikologi dan Interaksi Multimodal

Desain antarmuka yang baik banyak meminjam cara berpikir yang sudah dimiliki manusia sejak awal. Ada tiga konsep psikologi yang terus berulang dalam desain interaksi, yaitu mental model, metafora antarmuka, dan affordance.

  • Mental model: pengguna membawa harapan dari pengalaman sebelumnya ke setiap antarmuka baru, sehingga ikon keranjang belanja diharapkan berperilaku seperti keranjang belanja sungguhan.
  • Interface metaphor (metafora antarmuka): objek dunia nyata yang sudah familiar, seperti tempat sampah untuk aksi menghapus, digunakan agar tindakan digital yang asing menjadi langsung dipahami.
  • Affordance: sebuah elemen perlu menunjukkan secara visual apa fungsinya; tombol yang terlihat menonjol mengundang untuk ditekan, sementara label yang datar tidak mengundang aksi apa pun.

Produk-produk modern sering menggabungkan lebih dari satu cara berinteraksi untuk menyelesaikan satu tugas, pola ini disebut interaksi multimodal. Mencari restoran lewat ponsel, misalnya, bisa melibatkan kombinasi mengetik, pencarian suara, dan gerakan mencubit untuk memperbesar tampilan (pinch-to-zoom), semuanya dalam satu alur yang sama. Sistem yang dirancang dengan baik akan mengantisipasi perpaduan ini, bukan memperlakukan setiap mode input sebagai fitur yang berdiri sendiri.

Kesimpulan

Desain visual dan interaksi bukanlah dua disiplin terpisah yang saling memperebutkan perhatian, melainkan dua sudut pandang atas masalah yang sama. Sebuah tombol perlu terlihat jelas dan berbeda dari elemen lain (desain visual), dan tombol itu juga perlu berperilaku sesuai harapan begitu diklik (desain interaksi). Penguasaan sejati datang dari penerapan kedua sudut pandang ini secara bersamaan: sebuah desain yang tampak rapi tetapi berperilaku tidak terduga akan tetap gagal, sama seperti desain yang berperilaku benar tetapi sulit dibaca secara visual.

Penulis:

D7267 – Samson Ndruru

Daftar Pustaka:

  • Nielsen Norman Group. (n.d.). 5 Principles of Visual Design in UX [Artikel blog]. Diakses dari https://www.nngroup.com/articles/principles-visual-design/. Menjelaskan prinsip scale, hierarchy, balance, contrast, dan Gestalt dengan contoh antarmuka nyata seperti formulir pendaftaran Uber.
  • Nielsen Norman Group. (n.d.). The Principle of Common Region [Artikel blog]. Diakses dari https://www.nngroup.com/articles/common-region/. Menjelaskan bagaimana latar belakang dan batas yang dibagi bersama menciptakan kesan pengelompokan, salah satu konsep Gestalt yang penting untuk menyusun sebuah layar.
  • Survei arXiv. (n.d.). Designing Security and Privacy Requirements in IoT. Diakses dari https://arxiv.org/pdf/1910.09911. Merangkum prinsip-prinsip dasar interaksi dari Don Norman, yaitu affordance, signifier, mapping, feedback, dan conceptual model.