10 Tips dan Trik Dalam Membuat Desain UI/UX
Hal utama yang jadi cakupan UI atau user interface adalah seluruh aspek visual yang ditampilkan dalam situs web. Pekerjaan UI/UX sendiri yaitu membuat sebuah desain antarmuka yang baik dan penggunaan yang mudah serta dapat dimengerti oleh user. Untuk mendapatkan hasil yang baik seorang desainer UI/UX tidak secara instant membuat desain yang diinginkan tetapi harus mengikuti standar pemahaman desain UI/UX, dan inilah tips dan trik dalam membuat desain UI/UX.
User experience online sangat mirip dengan pengalaman yang kamu dapatkan saat pergi ke toko kelontong. Kamu ingin senang tanpa kerumitan tentunya. Kamu juga ingin dapat menavigasi toko dengan cepat, mendapatkan apa yang kamu butuhkan segera, menuju ke antrean checkout tanpa menunggu, dan kembali ke rumah.
Tentu kamu tidak ingin berurusan dengan kasir yang lambat, barang-barang yang tidak berada di tempat yang seharusnya atau kehabisan stok, karyawan yang tidak ramah, atau tempat parkir yang penuh sesak.
Toko memahami hal ini dan telah menghabiskan banyak waktu dan uang untuk membantumu menavigasi toko dengan lebih mudah, memastikan barang yang kamu inginkan tersedia, dan menyediakan jalur checkout yang cepat dan ramah.
Mungkin tampak klise untuk memikirkan desain UX dengan pergi ke toko, tetapi pengalamannya serupa. Pelanggan adalah pengunjung situs/aplikasi, dan bahan makanan adalah konten yang ada di situs/aplikasi tersebut.
Bagi kita yang pergi ke toko, akan mudah untuk menentukan hal-hal yang mengganggu atau harus diperbaiki. Namun, jika menyangkut pembuatan desain UI, kamu mungkin tidak dapat menunjukkan masalahnya sebelum user menggunakannya.
Kamu dapat memperbaikinya dengan mengambil langkah mundur dan mencari titik lemah dalam desain tersebut. Sehingga kamu tidak membuat user frustasi ketika masuk ke situs/aplikasi kamu saat mereka akan mencari konten.
Untuk membantu para desainer dalam melangkah mundur dan melihat desain UI dari mata pengunjung/user, mari kita lakukan beberapa hal yang harus dan tidak boleh dilakukan sehingga kamu dapat membantu mereka mendapatkan apa yang mereka inginkan tanpa susah payah karena pegaruh UX yang buruk.
- Do: Berikan experience/pengalaman yang serupa walaupun perangkat user berbeda-beda
User mengunjungi situs/aplikasi menggunakan berbagai jenis perangkat. Mulai dari desktop, laptop, tablet, ponsel, music player, game, bahkan sampai jam tangan. Salah satu tujuan utama UX itu adalah menghasilkan pengalaman yang sama tanpa gangguan walaupun user membuka situs/aplikasi yang sama dengan perangkat yang berbeda.
Ini berarti bahwa jika pengunjung melihat situs/aplikasi kamu di ponsel, mereka tetap dapat menemukan semua yang dibutuhkan tanpa adanya masalah seperti halnya mereka melihat situs di desktop. Pengalaman yang mulus di semua perangkat membantu menjaga user tetap di situs/aplikasi kamu terlepas dari perangkat yang mereka gunakan.
- Do: Menyediakan navigasi yang ramah, mudah dikenali dan digunakan
Kunci untuk memberikan pengalaman pengguna yang menyenangkan adalah memahami bahwa mereka sedang mencari konten. Mereka menginginkan informasi yang kamu berikan di situs/aplikasi. Setelah mereka sampai di situs/aplikasi, dengan menggunakan navigasi maka mereka akan mendapatkan konten yang dicari dengan cepat.
Buatlah sistem navigasi yang ramah pengguna, mudah dikenali dan mudah digunakan. Rancang navigasi sedemikian rupa sehingga mereka ingin pergi dengan jumlah klik sesedikit mungkin sambil tetap mudah untuk menemukan ke mana mereka harus pergi.
- Do: Jadikan hal terpenting sebagai titik fokus
User cenderung lebih memperhatikan layar dengan cepat daripada membaca semua informasi yang ada. Oleh karena itu, jika pengunjung atau pengguna ingin menemukan konten, mereka akan lebih banyak melihat layar sampai menemukan tujuannya.
Kamu dapat membantu mereka dengan merancang hirarki visual. Jadikan hal-hal penting seperti judul layar, formulir login, item navigasi, atau konten penting lainnya sebagai titik fokus sehingga pengunjung dapat langsung melihatnya.
- Do: Pastikan semua tombol dan link berfungsi sebagaimana mestinya
Pengguna situs akan merasa frustasi ketika mereka mengklik link yang rusak atau elemen visual yang terlihat seperti tombol tetapi tidak dapat diklik.
Saat user menelusuri konten, mereka mengharapkan setiap link akan membawa mereka ke tempat yang sesuai dan tanpa adanya kesalahan 404 atau dibawa ke halaman lain yang tidak mereka harapkan. Elemen visual yang terlihat seperti link atau tombol, tetapi tidak dapat diklik (yaitu kata-kata yang digarisbawahi yang bukan tautan, elemen yang memiliki ajakan bertindak tetapi tidak memiliki hyperlink) juga dapat membuat pengguna frustasi dan dapat menyebabkan mereka meninggalkan situs/aplikasi kamu.
- Do: Biarkan user mengontrol pengalaman menjelajah mereka
Beberapa gangguan umum baru-baru ini muncul di situs yang mengambil kendali dari pengguna, seperti video putar otomatis dan pembajakan scrolling. Saat kamu mendesain UI untuk situs/aplikasi, biarkan pengguna mengontrol penjelajahan dan pergerakan mereka melalui situs atau aplikasi.
Kita ketahui bersama bahwa hal-hal seperti pemutaran otomatis video, menghilangkan kemampuan pengguna untuk scrolling, musik atau suara di latar belakang, dan membuka link di tab/jendela baru membuat pengguna kesal. Elemen-elemen ini harus digunakan dengan bijak dan hanya digunakan jika sesuai keinginan dan harapan user.
- Don’t: Jangan sampai desain menutupi fitur
Desain UI jangan sampai mengganggu user untuk mengakses konten. Desain yang terlalu ramai dan memakai background, dapat menghambat keterbacaan situs/aplikasi kamu. Selain itu, jangan memakai skema warna yang mengurangi kontras tipografi pada layar (yaitu jenis latar belakang putih abu-abu terang). Fokus pada tipografi pastikan aspek seperti panjang garis, tinggi garis, kerning, dan pilihan font bisa menyorot konten yang dilihat dan dibaca.
- Don’t: Jangan menghalangi user untuk memperhatikan layar
User cenderung sering memperhatikan layar dengan cepat sebelum memutuskan untuk membaca. Pengguna sering memperhatikan isyarat visual seperti judul, gambar, tombol, dan blok untuk mengetahui di mana mereka harus memusatkan perhatian mereka.
Jika kamu mulai menghapus item tersebut, user akan kesulitan melihat konten yang mereka cari. User melihat layar untuk menemukan apa yang mereka butuhkan menggunakan judul yang sesuai dan mudah dilihat, gambar untuk mengilustrasikan poin, tombol untuk navigasi, dan blok konten yang unik atau menarik.
- Don’t: Jangan mengisi layar dengan konten yang tidak diperlukan
User menginginkan konten yang mereka butuhkan tanpa gangguan. Jika mereka masuk ke situs atau aplikasi kamu, mereka tidak ingin melihat iklan atau rekomendasi lain yang tidak sesuai dengan apa yang mereka cari muncul di layarnya.
- Don’t: Jangan buat pengunjung menunggu lama
Kesabaran user situs/aplikasi itu sangat kecil, jadi ketika mereka harus menunggu loading yang lama, mereka akan menjadi frustasi dan kemungkinan besar akan meninggalkan situs/aplikasi kamu jika tidak memuat cukup cepat.
Ingatlah dampak pilihan desain pada waktu upload situs. Gambar besar, banyak jQuery, animasi, dan memuat sumber daya dari situs pihak ketiga membuat loading situs menjadi lambat. Pengoptimalan dan keputusan desain utama yang mengurangi waktu pemuatan situs akan membantu menjaga pengunjung tetap di situs kamu.
- Don’t: Jangan menambahkan hal-hal yang sama untuk mendapatkan perhatian
Sama seperti ketika kamu mengisi situs dengan konten yang tidak relevan, mendesain elemen juga harus menarik perhatian. Terlalu banyak elemen yang sama terkadang dapat membingungkan user. Menggunakan hirarki visual untuk mendesain alur user di sekitar layar dapat mengurangi persaingan dari berbagai elemen.
Kamu juga dapat membantu mereka dengan membatasi berapa banyak call-to-action di layar, mengurangi atau memindahkan iklan di situs, meminimalkan flashing dan animasi, dan menggunakan heading dengan tepat.
Semoga dengan tips dan trik di atas bisa membantu kamu dan para desainer UI/UX lainnya, bisa dapat pencerahan dalam pengembangan situs dan aplikasi dengan user experience dan interface yang semakin baik, nih. Jadi, gak ada lagi tuh masalah “lola” alias loading lama dan masalah lainnya, di website yang teman-teman kembangkan. Semoga info ini bermanfaat, ya!
Untuk memperdalam skill kamu supaya makin kece, IDS |International Design School membuka sekolah desain yang akan menjadikanmu next professional designer!
Sumber: blog.prototypr.io