Mendesain muka/tampilan suatu media yang dinamis seperti situs web memiliki tantangan tersendiri, karena tidak sekedar estetika tetapi juga melibatkan interaksi dengan pengunjung situs, bahasa kerennya user interface (UI) design.

Ada beberapa rambu utama yang bisa dijadikan panduan di kala mendesain untuk situs web.

1. User-centered design: kenali target pengguna situs web

Kembali pada prinsip dasar desain komunikasi visual yaitu kenali siapa target audience-nya, atau tepatnya target pengunjung situs web, alias user-centered design.

Dengan mengenal siapa target pengguna, tidak hanya memberi masukkan untuk segi estetika atau selera desain (estetika), tetapi juga mengetahui bagaimana karakter dan kebiasaan (user behaviour) dalam berinteraksi dan memperoleh informasi online.

Kenapa user behaviour penting bagi desainer? Dengan pengetahuan ini, kamu dapat mendesain layout dan menentukan informasi mana yang perlu ditampilkan, atau information design (alur transfer informasi), yang sesuai tujuan dari situs webnya.

BACA JUGA: 11 Things every designer Needs To Know About Mobile App Interaction

Bekal informasi ini membantu digital designer menata dan desain yang ramah dan mudah digunakan bagi si target audience.

PRO TIPS: Bagi situs web yang memiliki target pengguna yang luas, seperti website korporasi atau organisasi secara umum, targetting bisa difokuskan pada kelompok mayoritas yang berpotensi mengakses situs web, contoh: demografi pengguna internet terbesar, target klien/ nasabah/ pembeli/ donor, dsb.

2. Hirarki visual yang jelas

Information design dilakukan dengan memahami hirarki dan tujuan dari setiap konten dalam halaman dari situs web yang perlu didesain.

Hirarki visual yang jelas dan mudah dipahami menjadi pertimbangan utama dalam user interface design.

Keberhasilan kamu dalam mendesain situs web tercapai ketika pengunjung dapat dengan mudah memahami, secara sadar dan tidak sadar, hirarki tampilan dari elemen visual di layarnya.

Pahami betul manakah informasi primer dan sekunder, hal ini akan membantu dalam menentukan fokus dan prioritas, dimana perhatian pengguna harus ditujukan.

Ingat, ada banyak elemen desain dalam satu tampilan/layar, pastikan kamu memusatkan perhatian pengguna pada informasi primer, selebihnya pengguna dapat bebas mengeksplorasi informasi sekunder.

2. Navigasi dan instruksi: mudah dipahami dan ringkas

Sebelum mulai desain setiap tampilan/halaman, selalu tanyakan: apa yang user akan lakukan disini? — dari sanalah kamu mulai membangun sistem dan langkah-langkah agar user melakukan kegiatan/mencapai tujuan tadi.

Gunakan kerangka berpikir sederhana dalam mendesain navigasi dan “instruksi” untuk setiap kegiatan tadi, yaitu pola beginning-middle-ending.

Contohnya bisa diambil dari laman utama Facebook, kegiatan yang user lakukan pada beranda akun facebooknya beragam, mulai dari sharing foto, video, curhatan, cerita, tertukar pesan dan menerima undangan, dan masih banyak lagi.

Perhatikan dengan saksama, bahwa setiap elemen dalam tampilan facebook ini dapat memberikan user akses untuk melakukan beragam kegiatan tadi.

Jika user ingin berbagi foto maka user bisa mulai (tahap beginning) dengan klik “create post” atau langsung letakkan kursornya pada kotak status; tahap middle-nya adalah dimana pengguna memilih opsi yang sesuai, klik photo/videos jika ingin berbagi gambar yang bisa disertai caption dengan emoticon. Dan tahap terakhir (ending), setelah semua kegiatan di tahap middle selesai, user mengklik tombol “post”

PRO TIPS: Ada 2 prinsip utama dalam mendesain navigasi situs web, yaitu (1) pengguna harus selalu mengetahui dimana mereka berada, beberapa teknik umum yang digunakan dengan menandai menu/heading, breadcrumbs trail, dsb; (2) sistem navigasi harus konsisten dari satu halaman ke halaman berikutnya, hal ini meningkatkan kenyamanan pengguna bereksplorasi di situs web.

KISS: Keep it simple and stupid

Prinsip KISS ini memposisikan digital designer di sudut pandang pengguna (first visitor maupun returning visitor), untuk dapat mendesain kondisi sesederhana mungkin hingga mudahkan pengguna menavigasi dan mencapai tujuan.

User interface design yang baik dapat diukur dari semakin sederhana dan ringkas interaksi yang diperlukan bagi user untuk melakukan kegiatannya di layar atau mencapai tujuannya.

Panduan yang membantu kamu dalam menerapkan prinsip KISS:

• Jelas dan konsisten, secara garis besar sudah dibahas di poin navigasi tadi yaaa
• Setiap elemen harus memenuhi 2 fungsi: estetika dan informatif. Ingat, perhatian pengguna dan ruang terbatas, jadi maksimalkan fungsi elemennya.
• Pengambilan keputusan yang mudah, bisa dilakukan dengan memberikan user opsi sebanyak-banyaknya (facebook) atau sesedikit mungkin (google search engine)—istilah kerennya minimalis, less is more.

Teks VS Gambar

Elemen teks dan gambar idealnya memiliki komposisi seimbang.

Permasalahan yang paling sering dihadapi adalah teks dan visual tidak seimbang komposisinya. Kerap kali jumlah teks mendominasi konten hingga bisa membuat pengguna enggan eksplorasi atau bahkan memutuskan keluar dari situs web.

Jadi kerapkali pertanyaan yang diajukan: berapa banyakkah jumlah teks yang bisa ditampilkan dalam satu tampilan? Sayangnya tidak ada batasan yang baku, semua disesuaikan dengan tujuan laman dan situs webnya. Maka selalu kembali pada prinsip KISS dan panduannya.

PRO TIPS: Trik yang umum digunakan untuk menyiasati jumah teks yang banyak adalah dengan memunculkan sepenggalan teksnya lalu menambahkan tombol “read more” dengan demikian pengguna memiliki pilihan dan kontrol terhadap konten yang ingin dilihatnya, sekaligus tidak mengorbankan estetika desain.

Sumber bacaan lebih lanjut:

• https://www.mockplus.com/blog/post/web-user-interface-design-principle
• https://webflow.com/blog/10-essential-ui-design-tips
• https://www.awwwards.com/understanding-web-ui-elements-principles.html
• https://www.smashingmagazine.com/2018/02/comprehensive-guide-to-mobile-app-design/

Semoga bermanfaat!