Tampilan · FiturUser Experience · User Interface · pengalaman pengguna · susunan tampilan
UX · UI
UI adalah elemen layar yang terlihat oleh pelanggan, seperti tombol · tulisan · warna, sedangkan UX adalah keseluruhan pengalaman pelanggan saat memakai situs web.
UI itu desain papan menu, UX itu alur pelanggan sejak masuk, memesan, membayar, hingga keluar.
Lebih detail
Meskipun UI-nya cantik, jika tombol reservasi sulit ditemukan atau langkahnya banyak, berarti UX-nya buruk. Sebaliknya, meski tidak mewah, jika hal yang dicari langsung ketemu, UX-nya baik.
UX situs web usaha umumnya bisa dirangkum menjadi tiga hal: apakah pengunjung langsung tahu ini tempat apa, apakah informasi yang dicari (harga · lokasi · jam) mudah ditemukan, dan apakah menghubungi · reservasi itu mudah.
Apa sebenarnya perbedaan UX dan UI?
UI menangani ‘bagaimana tampilannya’, sedangkan UX menangani ‘bagaimana dipakainya’. Untuk tombol reservasi yang sama, warna · bentuk · tulisannya adalah urusan UI, sedangkan apakah tombol itu ada di tempat yang dicari pelanggan adalah urusan UX.
Keduanya bukan pekerjaan yang terpisah. Biasanya alur pelanggan dan urutan layar ditentukan lebih dulu lewat UX, lalu warna dan tulisan diberikan lewat UI. Jika urutannya terbalik, situs web mudah jadi cantik tetapi tidak nyaman dipakai.
Saat melihat draf desain, memisahkan keduanya membuat masukan jauh lebih mudah. ‘Warnanya kurang cocok’ adalah masukan UI, sedangkan ‘harganya sulit ditemukan’ adalah masukan UX.
UX juga mencakup pengalaman di luar layar. SMS konfirmasi setelah reservasi dan seberapa cepat pertanyaan dijawab, bagi pelanggan semuanya adalah ‘pengalaman memakai jasa usaha ini’.
Geser tabel ke samping untuk melihat isinya
| Aspek | UX (pengalaman pengguna) | UI (susunan tampilan) |
|---|---|---|
| Pertanyaan yang diajukan | Bisakah pelanggan menyelesaikan yang diinginkan dengan mudah? | Apakah tampilannya enak dilihat dan mudah dibaca? |
| Yang ditangani | Urutan menu, alur halaman, jumlah langkah, teks petunjuk | Warna, ukuran huruf, bentuk tombol, tata letak foto, ruang kosong |
| Kapan terutama dibuat | Tahap wireframe (kerangka layar) | Tahap draf desain |
| Cara mengecek | Minta kenalan mencoba reservasi dan cari bagian yang membuat tersendat | Lihat langsung di ponsel · komputer dan cari bagian yang sulit dibaca |
Dengan kriteria apa UX yang baik dinilai?
UX yang baik adalah kondisi ketika pelanggan bisa menyelesaikan yang diinginkan ‘tanpa perlu berpikir’. Lembaga riset kegunaan Nielsen Norman Group merangkumnya menjadi 10 prinsip (heuristik kegunaan), dan banyak desainer memakainya seperti daftar periksa.
Jika disesuaikan untuk situs web usaha, beberapa poin di bawah ini sangat penting. Bukan teori yang sulit, hampir sama dengan akal sehat saat melayani pelanggan di toko.
Tidak perlu menghafal semua prinsip. Saat melihat draf desain, cukup terus tanyakan satu hal, ‘Apakah pelanggan yang baru datang langsung tahu harus melakukan apa di layar ini?’, dan sebagian besar masalah akan tersaring.
- Beri tahu posisi saat ini: saat reservasi, tampilkan kemajuan seperti ‘langkah 1 dari 2’.
- Pakai bahasa pelanggan: gunakan kata yang dicari pelanggan seperti ‘menu perawatan · harga’, bukan ‘profil layanan’.
- Mudah dibatalkan: tanggal yang salah tekan tidak perlu dipilih ulang dari awal.
- Yang sama dibuat sama: bentuk dan posisi tombol tidak berubah di tiap halaman.
- Cegah kesalahan sejak awal: misalnya hari libur sama sekali tidak bisa dipilih.
- Tampilkan hanya yang perlu: alih-alih memasukkan semua informasi ke layar pertama, tampilkan yang terpenting lebih dulu.
Bagaimana cara mengecek UX situs web usaha saya?
Cara paling pasti adalah mengamati orang lain yang benar-benar mencobanya. Tanpa pengetahuan desain pun, dengan urutan di bawah ini dalam 30 menit cukup banyak bagian yang perlu diperbaiki akan terlihat.
Saat mengecek, penting untuk tidak menjelaskan atau membantu. Pelanggan memakai situs web sendirian, tanpa ada yang memberi tahu di sampingnya.
Anda juga bisa mengeceknya dengan angka. Jika melihat di statistik kunjungan berapa persen orang yang sampai ke halaman reservasi benar-benar menyelesaikannya, Anda bisa menduga di tahap mana pelanggan pergi.
- 01Pilih dua-tiga kenalan yang kurang mengenal usaha Anda. Lebih baik jika usianya berbeda-beda.
- 02Berikan ponsel dan beri satu tugas sekali waktu, seperti ‘Coba reservasi untuk Sabtu sore ini’ atau ‘Cari tahu ada parkir atau tidak’.
- 03Amati diam-diam di samping mereka dan catat bagian tempat mereka ragu, salah tekan, atau menekan tombol kembali.
- 04Setelah selesai, tanyakan singkat ‘Bagian mana yang membingungkan?’.
- 05Jika beberapa orang tersendat di tempat yang sama, perbaiki bagian itu lebih dulu.
- 06Setelah diperbaiki, minta orang baru melakukan tugas yang sama untuk mengeceknya.
Apakah hal yang perlu diperhatikan dalam UX berbeda per jenis usaha?
Ya, ‘hal pertama yang ingin dilakukan’ pelanggan saat masuk ke situs web berbeda di tiap jenis usaha. Inti perancangan UX adalah membuat hal itu selesai lewat jalur terpendek.
Karena itu, meski memakai kerangka desain yang sama, urutan menu dan tombol di layar pertama harus disesuaikan dengan jenis usaha. Jika meniru mentah-mentah situs web jenis usaha lain, mungkin tidak cocok bagi pelanggan Anda.
Di jenis usaha yang sama pun berbeda tergantung kelompok pelanggan. Untuk usaha yang banyak pelanggan lansianya, tulisan besar dan tombol telepon di depan mungkin tepat; untuk usaha yang banyak pelanggan usia 20-an, tautan KakaoTalk · Instagram di depan mungkin lebih tepat.
- Kafe: yang pertama dicari lokasi · jam buka · foto menu. Sebaiknya peta dan ‘petunjuk arah’ ada di bagian atas.
- Salon: pelanggan membandingkan harga per perawatan dan desainer, lalu memesan. Alur dari daftar harga langsung ke reservasi itu penting.
- Studio kerajinan: pelanggan mengecek jadwal kelas dan sisa tempat, lalu mendaftar. Layar memilih tanggal harus mudah.
- Penjualan online: pelanggan membandingkan produk dan memasukkan ke keranjang. Tahap pencarian · kategori · pembayaran harus singkat.
Apakah UX juga memengaruhi visibilitas di pencarian?
Secara tidak langsung, ya. Google Search Central menyebutkan bahwa mereka berusaha memberi nilai lebih pada halaman dengan pengalaman halaman yang baik (pemuatan cepat, tampilan nyaman di ponsel, koneksi aman, dan lain-lain).
Namun Google juga menjelaskan bahwa meski pengalaman halaman agak kurang, konten yang paling relevan dengan kata pencarian tetap ditampilkan lebih dulu. Artinya pengalaman halaman bisa jadi pembeda saat banyak konten yang sama baiknya, jadi memuat informasi yang dicari pelanggan secara lengkap adalah yang utama.
Efek yang lebih langsung daripada peringkat pencarian adalah jumlah pertanyaan · reservasi. Dengan jumlah pengunjung yang sama, jika UX-nya baik, makin banyak pelanggan yang berlanjut sampai menghubungi Anda.
Apa kesalahan umum soal UX · UI saat bekerja dengan pembuat situs?
Kesalahan paling umum adalah memutuskan setelah langsung melihat draf desain. Jika kerangka layar (wireframe) dilewati, perhatian tersedot ke warna dan foto sehingga masalah penting seperti urutan menu atau posisi tombol mudah terlewat.
Selain itu, draf desain sering hanya dicek di layar komputer. Kebanyakan pelanggan usaha datang lewat ponsel, jadi pastikan draf juga dibuka di ponsel.
Masukan soal selera UI sebaiknya disertai contoh. Daripada ‘dibuat mewah’, tunjukkan situs referensi seperti ‘ruang kosongnya luas dan tulisannya tipis seperti situs ini’, maka jumlah revisi berkurang.
UX terus disempurnakan bahkan setelah rilis. Pertanyaan yang sering ditanyakan pelanggan lewat telepon adalah tanda informasi itu sulit ditemukan di situs web, jadi cukup pindahkan konten itu ke tempat yang lebih menonjol.
- Apakah kerangka layar (wireframe) ditunjukkan lebih dulu sebelum draf desain?
- Apakah draf tampilan ponsel dibuat terpisah?
- Bisakah dijelaskan berapa kali pelanggan harus menekan sampai reservasi · pertanyaan?
- Apakah ada pengecekan dengan mencoba langsung di ponsel sungguhan sebelum rilis?
- Apakah ada cara memperbaiki situs setelah melihat respons pelanggan pasca rilis (jumlah revisi · pemeliharaan)?
Contohnya
- Masalah UI: tulisan abu-abu muda tidak terbaca di ponsel di bawah sinar matahari.
- Masalah UX: untuk reservasi harus melewati empat langkah, yaitu menu → info reservasi → tautan eksternal → login.
Cukup periksa ini
- Apakah pengunjung baru bisa tahu jenis usaha Anda dalam 5 detik
- Apakah harga · lokasi · jam buka bisa ditemukan dalam dua kali klik
- Berapa kali harus menekan sampai ke reservasi · pertanyaan
Untuk usaha saya?
Untuk situs web apa pun, perhatikan kedua hal ini saat melihat draf desain.
Di ISSYMO
Kami tetapkan alur lebih dulu lewat wireframe, lalu merapikan elemen layar di draf desain. Kami rancang agar reservasi · pertanyaan langsung terlihat di layar pertama.
Pertanyaan umum
Sumber rujukan
Terakhir diperbarui