Website Development
UI UX Adalah Apa? Pentingnya Desain Pengalaman Pengguna di Website
UI UX adalah dua lapisan desain yang berbeda: UI (user interface) adalah tampilan yang dilihat dan disentuh pengunjung, sedangkan UX (user experience) adalah keseluruhan pengalaman mereka saat mencoba menyelesaikan sesuatu di website Anda. Tombol biru yang rapi adalah urusan UI. Apakah pengunjung berhasil memesan konsultasi dalam dua menit dari HP adalah urusan UX. Artikel ini menjelaskan bedanya dengan contoh website usaha, cara membaca gejala masalah, dan uji sederhana yang bisa Anda jalankan minggu ini tanpa menyewa desainer.
UI dan UX itu apa, dan di mana batasnya
Nielsen Norman Group, firma riset usability yang didirikan Jakob Nielsen dan Don Norman, mendefinisikan UX sebagai semua aspek interaksi pengguna dengan perusahaan, layanannya, dan produknya (NN/g). Definisinya sengaja luas. UX mencakup layar, tetapi juga isi, kecepatan, dan apa yang terjadi setelah tombol ditekan.
UI lebih sempit. Isinya warna, huruf, ukuran tombol, ikon, jarak antarelemen, dan susunan menu.
Contoh di website klinik gigi: UI menentukan tombol "Buat janji" berwarna hijau, berukuran besar, dan terletak di pojok kanan atas. UX menentukan apakah tombol itu membawa pasien ke formulir yang menanyakan tanggal dan jam, apakah slot Sabtu pagi yang sudah penuh disembunyikan, dan apakah pasien menerima konfirmasi di WhatsApp. Website bisa punya UI yang cantik dengan UX yang buruk. Kebalikannya juga sering terjadi: tampilan sederhana, tetapi semua orang berhasil memesan.
Itulah sebabnya "UI/UX" ditulis berdampingan. Di proyek website kecil, keduanya biasanya dipegang satu orang, dan memisahkannya berguna terutama untuk menemukan sumber masalah.
Gejala yang menunjukkan masalah UI atau masalah UX
Pemilik usaha jarang berkata "UX kami buruk". Yang mereka katakan adalah "banyak yang chat menanyakan harga, padahal sudah ada di website" atau "formulir jarang diisi". Gejala seperti itu bisa dipetakan ke sumbernya.
| Gejala | Lebih sering masalah | Cara cek dalam 10 menit |
|---|---|---|
| Pengunjung bertanya harga yang sudah tertulis | UX (letak informasi) | Minta 2 orang mencari harga paket termurah, catat berapa ketukan |
| Tombol sering salah ketuk di HP | UI (ukuran dan jarak) | Ukur tombol, target minimal 24 x 24 piksel |
| Formulir dibuka tetapi tidak dikirim | UX (jumlah kolom, pesan error) | Hitung kolom wajib, isi dengan nomor HP berformat salah |
| Teks abu-abu sulit dibaca di luar ruangan | UI (kontras) | Cek rasio kontras teks terhadap latar |
| Pengunjung keluar dari halaman layanan | UX (isi tidak menjawab) | Bandingkan isi halaman dengan 5 pertanyaan chat terbanyak |
Dua angka di tabel itu berasal dari standar aksesibilitas WCAG 2.2. Target sentuh minimal 24 x 24 piksel CSS untuk level AA (W3C, SC 2.5.8), dan teks biasa membutuhkan kontras minimal 4,5:1 terhadap latarnya, atau 3:1 untuk teks besar (W3C, SC 1.4.3). Abu-abu muda #999999 di atas latar putih, warna yang sering dipilih karena terlihat elegan, hanya mencapai sekitar 2,8:1.
Pentingnya desain pengalaman pengguna saat website masih dibangun
Desain pengalaman pengguna paling murah dikerjakan sebelum ada desain visual. Mengubah urutan halaman di sketsa kertas hanya butuh lima menit. Mengubahnya setelah website live berarti desain ulang, penulisan ulang teks, dan pengujian ulang di tiga ukuran layar.
Dalam praktik, pekerjaan UX di website usaha terdiri dari empat keputusan. Pertama, siapa pengunjung utamanya: calon pelanggan baru, pelanggan lama yang mencari nomor rekening, atau pelamar kerja. Kedua, tindakan apa yang Anda inginkan dari masing-masing. Ketiga, informasi apa yang mereka butuhkan sebelum mau bertindak. Keempat, berapa langkah terpendek dari halaman depan ke tindakan itu.
Contoh untuk jasa servis AC di Bekasi: pengunjung dari Google biasanya sedang kepanasan dan ingin tahu tiga hal, yaitu apakah daerahnya dilayani, kisaran biaya cuci AC, dan kapan teknisi bisa datang. Halaman depan yang membuka dengan sejarah perusahaan sejak 2009 memaksa mereka menggulir jauh. Halaman yang membuka dengan daftar kecamatan, tarif mulai, dan tombol jadwal langsung menjawab niat mereka.
Uji lima tugas dengan lima orang
Anda tidak perlu laboratorium. Jakob Nielsen menunjukkan bahwa uji dengan 5 pengguna menemukan sekitar 85% masalah usability, dan menyarankan beberapa putaran kecil daripada satu uji besar (NN/g). Untuk website usaha, caranya seperti ini:
- Tulis 5 tugas nyata, misalnya "cari harga paket untuk 20 orang", "kirim pertanyaan lewat formulir", "temukan jam buka hari Minggu".
- Pilih 5 orang di luar tim yang belum pernah membuka website Anda. Saudara atau teman kantor tetangga sudah cukup.
- Minta mereka memakai HP mereka sendiri dengan data seluler, bukan laptop dengan Wi-Fi kantor.
- Diam dan catat. Tulis di mana mereka ragu, salah ketuk, atau bertanya "ini maksudnya apa?".
- Perbaiki tiga masalah yang paling sering muncul, lalu uji lagi dengan orang yang berbeda.
Bagian tersulit adalah langkah keempat. Pemilik usaha cenderung menunjuk tombol yang benar begitu penguji terlihat bingung, padahal kebingungan itulah datanya.
Kapan uji ini belum cukup? Bila website Anda menangani transaksi ratusan kali sehari atau alur pendaftaran yang panjang, misalnya penerimaan siswa baru, layanan konsultan UX dengan riset yang lebih terstruktur mulai sepadan. Untuk website profil dengan 5 sampai 10 halaman, uji lima tugas biasanya sudah menemukan masalah terbesar.
Hal UX yang biasanya terlupa sampai minggu terakhir
Dari sisi pembuat website, desain halaman utama hampir selalu dibahas panjang. Yang jarang dibahas adalah keadaan di luar jalur normal, padahal di situ pengunjung paling mudah menyerah:
- Pesan error formulir yang hanya berbunyi "input tidak valid" tanpa menyebut kolom mana dan formatnya seperti apa.
- Formulir yang menghapus semua isian setelah satu kolom salah, sehingga pengunjung harus mengetik ulang alamat lengkapnya.
- Halaman 404 kosong tanpa tautan kembali ke layanan atau kontak.
- Hasil pencarian katalog yang kosong tanpa saran, misalnya ketika pengunjung mengetik "kursi lipet" alih-alih "kursi lipat".
- Teks tombol yang umum seperti "Submit" atau "Klik di sini". "Kirim pertanyaan" dan "Lihat harga paket" memberi tahu apa yang akan terjadi.
Kecepatan juga bagian dari UX. Contoh: halaman katalog yang baru tampil setelah 6 detik di HP dengan sinyal 4G pas-pasan akan terasa rusak bagi pengunjung, secantik apa pun UI-nya. Target angka dan cara mengukurnya kami bahas di artikel keamanan dan kecepatan website. Daftar fitur yang memang perlu dipasang ada di artikel fitur website bisnis.
Cara Zsite membantu
Zsite adalah layanan pembuatan website dari Zonaku. Sesuai halaman produknya, website Zsite dibuat dengan desain responsif untuk desktop dan HP, kecepatan akses tinggi, struktur ramah SEO, serta pilihan halaman profil, katalog produk, formulir kontak, dan toko online. Kontennya bisa diperbarui sendiri lewat CMS tanpa bantuan developer, dan tersedia dalam tiga paket: Dasar, Standar, dan Premium.
Langkah berikutnya: tulis lima tugas yang paling sering ingin diselesaikan pengunjung Anda, lalu jalankan uji di atas dengan lima orang sebelum akhir pekan. Bila ingin dibantu, bawa catatan hasilnya ke halaman Zsite di atas: catatan itu lebih berguna bagi pembuat website daripada kumpulan referensi desain.
Pertanyaan yang sering diajukan
Apakah UI UX hanya untuk aplikasi, bukan website?
Tidak. Prinsipnya sama untuk website, aplikasi mobile, bahkan mesin kasir. Bedanya hanya pada alat dan pola interaksi, misalnya gulir dan tautan di website dibandingkan gestur geser di aplikasi.
Apa contoh UI UX yang baik di website kecil?
Halaman layanan yang menampilkan tarif mulai, area layanan, dan satu tombol jadwal di layar pertama HP. Tampilannya boleh sederhana. Yang membuatnya baik adalah pengunjung tidak perlu bertanya lewat chat untuk mengambil keputusan.