Halo, Sobat Kodi :D. Membuat sebuah desain web merupakan tugas yang menantang untuk desainer untuk menjadi leibh kreatif dan inovatif, selain dengan adanya aturan yang harus kamu pahami ketika membuat sebuah desain pada web, kamu juga perlu untuk membuat desain web semenarik mungkin. Berikut ini, Kodi telah menyusun 10 aturan terbaik desain UI yang wajib kamu gunakan pada proyek web, yang tentunya akan mempermudah kamu juga.

Bagi kamu yang bertanya-tanya tentang Perbedaan antara User Experience (UX) dan User Interface (UI), kamu bisa baca artikel tersebut terlebih dahulu.

1. Pahami Cara UI Agar Berkesinambungan dengan UX

Hal pertama yang pertama yang harus kamu pahami adalah kamu harus memahami cara UI agar dapat berkesinambungan dengan UX. Perancang UX atau ‘arsitek’ harus perlu mempertimbangkan beragam faktor seperti desain interaksi (interaction design) dan arsitektur, penciptaan taksonomi yang jelas, copywriting, koordinasi dengan perancang dan pemrogram, dan sebagainya.

Untuk menciptakan antarmuka yang hebat, perancang UI perlu mengandalkan informasi dari sudut pengalaman pengguna, seperti mengidentifikasi masalah mana yang perlu dipecahkan, bagaimana arus pengguna akan diputar, dan menentukan area produk utama dan hierarki. Idealnya, pekerjaan pada antarmuka akan dimulai setelah mendapatkan akses ke semua informasi, kemudian Mockup akan dibuat, diuji dan disetujui oleh perancang UX dan sebuah produk akan diluncurkan tanpa kendala.

2. Kenali Pengguna Kamu

Jika kamu melakukan proses perencanaan situs web, kamu pasti sudah memiliki gagasan tentang keinginan pengguna di masa depan. Kamu harus memiliki gambaran yang jelas tentang apa yang dibutuhkan yang akan membawa orang ke situs web kamu, dan bagaimana cara membuat desain yang akan menarik agar mereka tetap betah melihat tampilan web kamu.

Menggunakan pola desain yang nyaman bagi pengguna dapat membantu memudahkan mereka masuk ke situs web kamu, yang dapat kamu bedakan dengan kebutuhan kamu sendiri.

Begitu kamu mengidentifikasi pengguna, kamu dapat menguji bagaimana desain yang kamu buat bekerja pada pengguna dan pertimbangkan setiap umpan balik (feedback) dari pengguna. Umpan balik merupakan hal yang sangat berharga untuk desain antarmuka.

3. Buat Sederhana dan Konsisten

Ciri dari antarmuka yang baik adalah kesederhanaan. Pengguna seharusnya tidak memerlukan peta untuk menavigasi aplikasi atau situs web kamu. Untuk melakukannya, kamu dapat menggunakan beberapa elemen seperti warna, tipografi, pesan umpan balik, dan hierarki visual, yang semuanya dapat di lihat secara langsung.

Antarmuka harus tetap konsisten di setiap desain yang kamu buat. Pengguna harus dibuat nyaman dengan mereka secara progresif, dan pengguna harus merasa bahwa pengguna tersebut tidak merasa tidak nyaman karena pilihan gaya desain yang tidak konsisten.

4. Terapkan Hierarki Visual

Elemen terpenting dari sebuah antarmuka harus disorot agar pengguna dapat fokus pada hal tersebut, dan sebuah desain berfungsi untuk menyediakan hasil yang maksimal, agar efek tersebut terasa untuk pengguna.

Contoh paling sederhana dari teknik ini yang terlintas dalam pikiran adalah membuat elemen lebih besar untuk mengubahnya menjadi focal point. Contohlah Netflix misalnya – saat membuka halaman utamanya, kamu akan langsung disuguhi dengan beberapa rekomendasi yang menarik perhatian kamu karena hampir tidak mungkin diabaikan

Cara lain yang lebih terkini, yaitu melalui hierarki visual menggunakan ruang putih (whitespace) untuk menyoroti bagian penting pada antarmuka kamu.
Alternatif lainnya, kamu hanya cukup memperkenalkan elemen tak terduga ke dalam desain kamu dengan cara yang menyenangkan.

5. Manfaatkan Tipografi dengan Baik

Cara lain yang elegan untuk membangun hierarki visual adalah dengan menggunakan tipografi yang sesuai. Ini tidak sesederhana memilih font yang bagus, karena setiap font memiliki kepribadian yang berbeda-beda, sehingga untuk berbicara kepada pengguna, pilihan font harus dipengaruhi oleh karakteristik pengguna kamu.

Kamu dapat menggunakan tipe terbalik (reverse type) untuk membuat teks menonjol, dengan menggunakannya kamu dapat memanfaatkan latar belakang yang kontras untuk membuat teks keluar. Pada contoh di bawah ini, teks kontras digunakan dalam menu untuk menyorot halaman mana yang sedang dilihat saat ini (yang memiliki manfaat tambahan untuk menyederhanakan proses navigasi bagi pengguna kamu).

6. Gunakan Warna dan Kontras dengan Benar

Memilih warna yang tepat untuk desain yang diberikan adalah sains dalam dan dari dirinya sendiri. Warna dapat digunakan untuk menyampaikan hierarki visual, membangun hubungan antar elemen, dan umumnya meningkatkan desain kamu dan menarik perhatian pengguna.

Saat mengerjakan desain antarmuka, kamu pasti ingin mempertahankan keseragaman warna mana yang akan kamu gunakan untuk menyampaikan isyarat visual, dan menjaga skema warna yang relatif minimal.

Sejatinya, warna yang kontras bisa digunakan untuk efek yang hebat agar bisa menarik perhatian pengguna, seperti yang kami sebutkan di peraturan nomor lima saat membahas reverse type.

Aturan praktis yang bagus saat memilih warna mana yang akan digunakan pada antarmuka adalah warna yang lebih gelap cenderung membawa bobot visual yang lebih banyak, dan elemen semacam ini perlu diimbangi dengan warna yang lebih terang.

7. Pertimbangkan Pesan Umpan Balik (Feedback)

Pesan Umpan Balik (feedback) adalah sesuatu yang tidak boleh kamu lupakan selama proses perancangan. Salah satu keuntungan terbesar dari proyek web adalah kamu benar-benar dapat merancang pesan umpan balik yang menyampaikan informasi penting kepada pengguna kamu saat mereka melakukan tindakan.

Setiap antarmuka akan intuitif dan cukup cepat sehingga hal semacam ini tidak akan terjadi. Tapi percayalah, pengguna akan selalu menemukan cara baru dan inovatif untuk menghancurkan situs kamu. Memberikan umpan balik instan mengenai apa yang terjadi dengan cara yang intuitif adalah cara yang bagus untuk mengajarkan pengguna bagaimana antarmuka kamu dimaksudkan untuk digunakan.

8. Sederhanakan Form

Form adalah salah satu metode utama untuk berinteraksi dengan proyek web. Kamu harus dapat mengintegrasikan-nya ke dalam desain antarmuka, tanpa ada kesulitan yang menyebabkan pengguna tidak tertarik. Jika proyek kamu tidak mengharuskan pengguna untuk mendaftar, kenapa tidak membuat Form menjadi sesederhana mungkin saja?, contohnya adalah Twitter, mereka hampir tidak meminta informasi apa pun pada saat kamu membuka situsnya. Twitter, sekali lagi memberikan contoh bagus dengan form pendaftaran singkat dan manis.

9. Berkolaborasi

Bergantung pada lingkup proyek, pada titik tertentu mungkin kamu mendapati bekerja sebagai bagian dari tim, dan di beberapa kondisi tertentu, merupakan hal yang penting untuk membagikan informasi yang sama kepada semua tim, untuk membuat antarmuka yang sesuai dan dapat dipakai.

Ada banyak alat kolaborasi yang tersedia untuk membantu tim tetap berada di jalur yang terbaik, seperti Slack, InVision, Google Keep, Trello, dan Redpen.

10. Bawa Semua Hal Diatas

Merancang sebuah antarmuka bukanlah tugas yang sederhana. Kamu perlu mempertimbangkan berbagai disiplin ilmu dan juga mempersenjatai diri dengan informasi teknis mengenai pengguna kamu, dan merancang kebutuhan mereka untuk menciptakan sebuah desain yang akan memenuhi dan melampaui kebutuhan mereka.

Antarmuka yang kamu buat harus mudah digunakan, mudah dinavigasi, menggunakan warna yang tepat untuk pengguna kamu, menggunakan font yang tepat, mengintegrasikan pesan umpan balik yang berguna, dan tetap konsisten secara keseluruhan.

Nah, itu dia penjelasan 10 aturan terbaik desain UI yang wajib kamu gunakan pada proyek web, Apakah kamu punya info lainnya? Atau kamu punya pertanyaan soal User Interface atau User Experience, Kamu dapat berdiskusi berbagi di kolom komentar ya. Salam Belajar Koding!

Ditulis Oleh Galih Pratama dan Desi Ratnasari