Pernah membuka sebuah website lalu bingung harus mengklik apa?
Informasinya mungkin lengkap, desainnya terlihat modern, dan warnanya menarik. Tetapi ketika ingin mencari sesuatu, kita tidak tahu harus mulai dari mana.
Masalah seperti ini biasanya bukan karena desainnya kurang bagus. Bisa jadi masalahnya ada pada UX (User Experience) atau pengalaman pengguna.
Website yang baik bukan hanya terlihat menarik. Website juga harus membantu pengunjung memahami informasi dan menyelesaikan tujuannya dengan mudah.
Apa yang Akan Dipelajari?
Dalam artikel ini, kita akan membahas prinsip dasar UI/UX website, termasuk:
- Perbedaan UI dan UX.
- Pentingnya visual hierarchy.
- Cara membuat navigasi yang mudah dipahami.
- Penggunaan typography dan spacing.
- Cara membuat CTA yang jelas.
- Pentingnya desain untuk perangkat mobile.
Apa Itu UI dan UX?
UI (User Interface) adalah bagian visual yang dilihat dan digunakan oleh pengunjung.
Contohnya:
- Warna
- Typography
- Button
- Icon
- Layout
- Form
- Komponen interaktif
Sementara UX (User Experience) berkaitan dengan pengalaman seseorang ketika menggunakan website.
Sederhananya:
UI menentukan bagaimana website terlihat. UX menentukan bagaimana website terasa ketika digunakan.
Keduanya saling berhubungan.
Website bisa memiliki UI yang menarik tetapi UX yang buruk. Sebaliknya, website yang sederhana secara visual bisa memiliki UX yang sangat baik jika mudah digunakan.
1. Buat Visual Hierarchy yang Jelas
Ketika seseorang membuka halaman website, tidak semua informasi memiliki tingkat kepentingan yang sama.
Judul utama harus lebih menonjol daripada paragraf.
CTA utama harus lebih mudah ditemukan daripada link sekunder.
Inilah yang disebut visual hierarchy, yaitu cara mengatur elemen agar pengguna memahami mana informasi yang paling penting terlebih dahulu.
Beberapa hal yang dapat digunakan untuk membuat hierarchy:
- Ukuran
- Warna
- Kontras
- Spacing
- Posisi
- Typography
Contohnya, pada landing page, judul utama sebaiknya langsung menjelaskan apa yang ditawarkan. Setelah itu, informasi pendukung dan CTA dapat mengikuti.
Pengunjung tidak seharusnya menebak-nebak apa yang ingin disampaikan halaman tersebut.
2. Buat Navigasi yang Mudah Dipahami
Navigasi bukan tempat untuk memasukkan semua halaman yang tersedia.
Tujuannya adalah membantu pengunjung menemukan informasi dengan cepat.
Gunakan nama menu yang familiar.
Misalnya:
About, Services, Work, Contact
lebih mudah dipahami daripada menggunakan istilah kreatif yang tidak menjelaskan isi halaman.
Jangan membuat pengguna berpikir terlalu keras hanya untuk menemukan halaman yang mereka butuhkan.
3. Gunakan Typography yang Mudah Dibaca
Typography memiliki pengaruh besar terhadap pengalaman membaca.
Font yang terlihat bagus belum tentu nyaman digunakan untuk teks panjang.
Perhatikan beberapa hal seperti:
- Ukuran font.
- Line height.
- Panjang baris.
- Kontras antara teks dan background.
- Jumlah jenis font yang digunakan.
Paragraf yang terlalu lebar bisa melelahkan untuk dibaca. Sebaliknya, ukuran teks yang terlalu kecil membuat pengguna harus berusaha lebih keras.
Dalam UI/UX, keterbacaan seharusnya lebih penting daripada sekadar memilih font yang terlihat menarik.
4. Manfaatkan White Space
White space adalah ruang kosong di antara elemen desain.
Ruang kosong bukan berarti ruang yang terbuang.
White space membantu memisahkan informasi, membuat layout lebih lega, dan membantu pengguna memahami hubungan antar elemen.
Misalnya, jika judul, paragraf, gambar, dan button ditempatkan terlalu berdekatan, semuanya akan terlihat seperti satu kelompok besar.
Dengan spacing yang tepat, struktur halaman menjadi lebih mudah dipahami.
5. Buat CTA yang Jelas
CTA atau Call to Action adalah elemen yang mengajak pengguna melakukan tindakan tertentu.
Contohnya:
- Get Started
- Contact Us
- View Project
- Download
- Sign Up
CTA yang baik menjelaskan apa yang akan terjadi setelah pengguna mengkliknya.
Bandingkan:
Klik di sini
dengan:
Lihat Portfolio
Pilihan kedua memberikan konteks yang lebih jelas.
CTA juga sebaiknya memiliki prioritas. Jika semua button dibuat sama menonjol, pengguna akan kesulitan mengetahui tindakan mana yang paling penting.
6. Jangan Membuat Pengguna Mengingat Terlalu Banyak
Website yang baik membantu pengguna mengingat lebih sedikit.
Misalnya, ketika pengguna mengisi form, jangan meminta informasi yang sebenarnya tidak diperlukan.
Begitu juga dengan navigasi. Jangan membuat pengguna harus mengingat di mana sebuah informasi berada.
Prinsip sederhananya:
Jika website bisa memberikan petunjuk, jangan memaksa pengguna untuk mengingat.
Semakin sedikit beban berpikir yang dibutuhkan untuk menggunakan website, semakin mudah pengalaman tersebut dirasakan.
7. Prioritaskan Mobile Experience
Website tidak hanya digunakan melalui desktop.
Banyak pengunjung mengakses website menggunakan smartphone. Karena itu, desain mobile sebaiknya tidak dianggap sebagai versi desktop yang diperkecil.
Periksa hal-hal seperti:
- Ukuran teks.
- Jarak antar tombol.
- Navigasi.
- Ukuran gambar.
- Panjang paragraf.
- Posisi CTA.
Sebuah layout yang terlihat bagus di layar besar belum tentu nyaman digunakan di layar kecil.
8. Konsistensi Membuat Website Lebih Mudah Dipahami
Gunakan pola desain yang konsisten.
Jika satu button menggunakan gaya tertentu, button dengan fungsi yang sama sebaiknya memiliki tampilan yang serupa.
Begitu juga dengan heading, spacing, warna, icon, dan komponen lainnya.
Konsistensi membuat pengguna tidak perlu mempelajari ulang cara kerja setiap bagian website.
Kesalahan UI/UX yang Sering Terjadi
Beberapa kesalahan yang cukup umum antara lain:
- Terlalu banyak elemen dalam satu halaman.
- Menggunakan terlalu banyak warna.
- CTA tidak jelas.
- Font terlalu kecil.
- Kontras teks rendah.
- Navigasi sulit dipahami.
- Animasi digunakan hanya untuk dekorasi.
- Desain desktop bagus tetapi mobile diabaikan.
Kesalahan-kesalahan tersebut biasanya muncul ketika fokus terlalu besar pada tampilan dan terlalu sedikit pada kebutuhan pengguna.
Bagaimana Menilai Apakah Website Mudah Digunakan?
Coba lakukan tes sederhana.
Berikan website kepada seseorang yang belum pernah melihatnya sebelumnya.
Kemudian minta mereka melakukan tugas sederhana, misalnya:
“Cari informasi tentang layanan yang tersedia.”
Perhatikan apakah mereka langsung tahu harus melakukan apa.
Jika mereka berhenti, bingung, atau bertanya ke mana harus pergi, mungkin ada bagian UX yang perlu diperbaiki.
Tidak selalu membutuhkan riset UX yang kompleks. Bahkan observasi sederhana bisa menemukan masalah yang sebelumnya tidak terlihat oleh pembuat website.
Kesimpulan
UI/UX bukan hanya tentang membuat website terlihat modern.
UI membantu menciptakan antarmuka yang jelas dan menarik, sedangkan UX memastikan antarmuka tersebut mudah digunakan dan membantu pengguna mencapai tujuannya.
Mulailah dari hal-hal dasar: buat hierarchy yang jelas, gunakan navigasi yang familiar, jaga keterbacaan, gunakan spacing dengan baik, buat CTA yang jelas, dan pastikan website nyaman digunakan di mobile.
Website yang baik bukan yang membuat pengguna kagum selama lima detik, tetapi yang membuat mereka berhasil melakukan apa yang mereka inginkan tanpa kebingungan.
