Apa Itu User Experience (UX) dan Mengapa Penting untuk Website?

BONESTUDIO - User Experience (UX) menjadi salah satu hal penting yang perlu dipahami ketika belajar desain website. Website tidak cukup hanya memiliki tampilan yang menarik. Pengunjung juga harus dapat memahami informasi, menemukan menu, membaca konten, dan menyelesaikan tindakan yang mereka inginkan dengan mudah.

Bayangkan Anda membuka sebuah website toko online dengan desain yang terlihat modern. Foto produknya bagus, warna yang digunakan menarik, dan animasinya terlihat canggih. Namun, Anda kesulitan menemukan harga produk, tombol beli tidak jelas, halaman membutuhkan waktu lama untuk dibuka, dan proses checkout membingungkan.

Secara visual website tersebut mungkin menarik, tetapi pengalaman menggunakannya belum tentu menyenangkan.

Di sinilah User Experience atau UX berperan.

Bagi desainer website pemula, memahami UX membantu mengubah cara berpikir dari sekadar “bagaimana membuat website terlihat bagus?” menjadi “bagaimana membuat website mudah dan nyaman digunakan?”

Lalu, apa itu User Experience, apa bedanya dengan UI, dan mengapa UX begitu penting dalam desain website? Mari kita pelajari dari dasarnya.

Apa Itu User Experience (UX)?

User Experience (UX) adalah keseluruhan pengalaman yang dirasakan pengguna ketika berinteraksi dengan sebuah produk, sistem, atau layanan. Dalam konteks website, UX berkaitan dengan pengalaman seseorang sejak membuka halaman, mencari informasi, melakukan navigasi, hingga menyelesaikan tujuan tertentu.

Tujuan tersebut bisa berbeda-beda.

Pengunjung website toko online mungkin ingin mencari dan membeli produk. Pengunjung website perusahaan mungkin ingin memahami layanan atau mencari kontak. Sementara pengunjung blog mungkin hanya ingin memperoleh jawaban dari artikel yang sedang dibaca.

Karena itu, UX tidak hanya membahas tampilan.

User Experience juga mempertimbangkan apakah sebuah website:

• mudah dipahami;
• mudah dinavigasi;
• memberikan informasi yang dibutuhkan;
• memiliki struktur yang jelas;
• nyaman digunakan;
• konsisten;
• responsif pada berbagai perangkat;
• dan membantu pengguna mencapai tujuannya.

Website dengan UX yang baik biasanya terasa mudah digunakan bahkan ketika pengguna baru pertama kali mengunjunginya.

Sebaliknya, UX yang buruk sering membuat pengguna harus berpikir terlalu keras untuk memahami apa yang harus dilakukan.

Mengapa User Experience Penting untuk Website?

Tujuan sebuah website pada dasarnya bukan hanya untuk dilihat, tetapi digunakan.

Website perusahaan digunakan untuk memperkenalkan bisnis dan menghasilkan inquiry. Website e-commerce membantu pengguna menemukan serta membeli produk. Landing page dirancang untuk menghasilkan tindakan tertentu. Blog membantu pembaca menemukan informasi.

Jika pengguna kesulitan melakukan hal-hal tersebut, desain website belum menjalankan fungsinya secara optimal.

UX membantu pengguna mencapai tujuan

UX yang baik mengurangi hambatan antara pengguna dan tujuan mereka.

Misalnya, seseorang mengunjungi website sebuah studio desain karena ingin mengetahui layanan pembuatan website.

Pengguna tersebut kemungkinan ingin menemukan informasi seperti:

1. layanan apa yang tersedia;
2. seperti apa hasil pekerjaan sebelumnya;
3. bagaimana proses pengerjaannya;
4. berapa perkiraan biaya atau bagaimana meminta penawaran;
5. bagaimana cara menghubungi penyedia jasa.

Struktur UX yang baik membantu pengguna menemukan informasi tersebut secara bertahap tanpa harus mencari terlalu lama.

UX membuat website lebih mudah dipahami

Ketika membuka website baru, pengguna belum tentu memahami struktur yang dibuat desainer.

Karena itu, desain sebaiknya tidak bergantung pada asumsi bahwa pengguna akan “mengerti sendiri”.

Navigasi, judul halaman, tombol, ikon, formulir, dan berbagai elemen interaktif perlu memberikan petunjuk yang cukup jelas mengenai fungsi masing-masing.

Semakin mudah sebuah website dipahami, semakin sedikit usaha yang dibutuhkan pengguna untuk menggunakannya.

UX dapat mengurangi frustrasi pengguna

Pernah menemukan tombol yang terlihat bisa diklik tetapi ternyata tidak?

Atau mengisi formulir panjang kemudian seluruh data hilang hanya karena satu kolom salah?

Masalah kecil seperti ini dapat menciptakan pengalaman yang buruk.

UX mencoba mengidentifikasi titik-titik yang berpotensi menimbulkan kebingungan dan mengurangi hambatan tersebut melalui keputusan desain yang lebih baik.

Perbedaan UX dan UI dalam Desain Website

Istilah UX (User Experience) dan UI (User Interface) sering digunakan secara bersamaan sehingga desainer pemula terkadang menganggap keduanya sama.

Padahal, keduanya memiliki fokus berbeda.

Apa itu UI?

User Interface atau UI berkaitan dengan antarmuka yang digunakan seseorang untuk berinteraksi dengan sebuah produk digital.

Dalam desain website, UI mencakup elemen seperti:

• warna;
• tipografi;
• tombol;
• ikon;
• card;
• input form;
• menu;
• layout visual;
• ilustrasi;
• dan berbagai komponen antarmuka lainnya.

UI banyak berhubungan dengan bagaimana sebuah interface terlihat dan disajikan.

Apa itu UX?

UX memiliki cakupan yang lebih luas karena membahas pengalaman pengguna selama berinteraksi dengan website.

Pertanyaannya bukan hanya:

“Apakah tombol ini terlihat bagus?”

Tetapi juga:

“Apakah pengguna memahami fungsi tombol ini, dapat menemukannya ketika dibutuhkan, dan mendapatkan hasil sesuai harapan setelah menekannya?”

Contohnya, sebuah tombol checkout dapat memiliki UI yang menarik. Namun, jika tombol tersebut sulit ditemukan setelah pengguna memasukkan produk ke keranjang, pengalaman pengguna tetap bermasalah.

Karena itu, UI dan UX sebaiknya tidak dipisahkan sepenuhnya. Visual interface yang baik perlu mendukung pengalaman penggunaan yang baik.

Elemen Penting dalam User Experience Website

UX memiliki cakupan yang cukup luas. Untuk pemula, beberapa aspek berikut dapat digunakan sebagai fondasi ketika mengevaluasi sebuah website.

1. Usability

Usability berkaitan dengan seberapa mudah website digunakan.

Pengguna seharusnya dapat memahami apa yang bisa dilakukan dan bagaimana melakukannya tanpa membutuhkan instruksi yang rumit.

Misalnya, pada website e-commerce pengguna perlu dapat:

• mencari produk;
• membuka detail produk;
• memilih variasi;
• menambahkan produk ke keranjang;
• melihat keranjang;
• dan melakukan checkout.

Semakin banyak kebingungan atau langkah yang tidak diperlukan, semakin besar kemungkinan pengalaman pengguna terganggu.

2. Navigasi yang Jelas

Navigasi membantu pengguna berpindah dari satu bagian website ke bagian lainnya.

Menu navigasi yang baik tidak harus memiliki banyak pilihan. Justru, terlalu banyak menu dapat membuat pengguna kesulitan menentukan pilihan.

Untuk website perusahaan sederhana, navigasi utama mungkin cukup berisi:

Beranda – Tentang – Layanan – Portfolio – Blog – Kontak

Nama menu sebaiknya mudah dimengerti dan sesuai dengan informasi yang akan ditemukan setelah pengguna mengkliknya.

Kreativitas tetap diperbolehkan, tetapi jangan sampai label navigasi menjadi teka-teki bagi pengguna.

3. Information Architecture

Information Architecture atau arsitektur informasi berkaitan dengan bagaimana informasi dikelompokkan dan disusun agar mudah ditemukan.

Bayangkan sebuah supermarket.

Produk tidak ditempatkan secara acak. Makanan, minuman, kebutuhan rumah tangga, dan produk lainnya dikelompokkan sehingga pelanggan lebih mudah menemukan barang.

Website bekerja dengan prinsip serupa.

Artikel blog dapat dikelompokkan berdasarkan kategori. Produk dapat disusun berdasarkan jenis. Layanan dapat dibagi berdasarkan kebutuhan pelanggan.

Struktur informasi yang jelas membantu pengguna memahami di mana mereka berada dan ke mana mereka harus pergi berikutnya.

4. Hierarki Visual

Hierarki visual membantu pengguna mengetahui elemen mana yang harus diperhatikan terlebih dahulu.

Ukuran, warna, posisi, kontras, dan ruang kosong dapat digunakan untuk menunjukkan tingkat kepentingan informasi.

Misalnya pada bagian hero sebuah landing page:

Judul utama
Penjelasan singkat mengenai layanan.
[Tombol Konsultasi]

Judul dapat dibuat paling dominan, penjelasan berada pada tingkat kedua, kemudian tombol diberikan kontras yang cukup agar mudah ditemukan.

Jika seluruh elemen memiliki bobot visual yang sama, pengguna akan lebih sulit menentukan fokus.

5. Readability

Website berisi banyak informasi dalam bentuk teks. Karena itu, keterbacaan merupakan bagian penting dari pengalaman pengguna.

Readability dapat dipengaruhi oleh:

• ukuran font;
• jenis font;
• kontras teks dan background;
• panjang baris;
• line-height;
• struktur paragraf;
• heading dan subheading;
• serta ruang kosong.

Hindari membuat paragraf panjang tanpa jeda.

Pengguna website sering memindai halaman terlebih dahulu sebelum memutuskan membaca lebih jauh. Heading, paragraf pendek, dan daftar dapat membantu mereka menemukan informasi penting dengan lebih cepat.

6. Konsistensi

Elemen yang memiliki fungsi sama sebaiknya memiliki tampilan dan perilaku yang konsisten.

Jika tombol utama menggunakan gaya tertentu pada halaman beranda, pengguna akan belajar mengenali pola tersebut.

Namun, jika setiap halaman menggunakan warna, bentuk tombol, navigasi, dan pola interaksi yang berbeda, pengguna harus mempelajari ulang interface setiap kali berpindah halaman.

Konsistensi dapat diterapkan pada:

• warna;
• tipografi;
• tombol;
• ikon;
• spacing;
• formulir;
• navigasi;
• card;
• hingga cara website memberikan feedback.

Design system biasanya membantu tim menjaga konsistensi tersebut pada website yang lebih besar.

7. Feedback dari Sistem

Setiap tindakan pengguna idealnya mendapatkan respons yang jelas.

Ketika tombol ditekan, pengguna perlu mengetahui bahwa tindakannya berhasil.

Contohnya:

“Pesan berhasil dikirim.”

“Produk telah ditambahkan ke keranjang.”

“Password yang Anda masukkan salah.”

Feedback menghilangkan ketidakpastian.

Tanpa feedback, pengguna mungkin menekan tombol berkali-kali karena tidak mengetahui apakah sistem sedang memproses tindakan atau tidak.

8. Responsive Design

Pengguna dapat mengakses website melalui desktop, laptop, tablet, atau smartphone.

Karena itu, pengalaman yang baik tidak boleh hanya tersedia pada satu ukuran layar.

Responsive design memastikan struktur halaman dapat beradaptasi terhadap perangkat pengguna.

Namun, responsive UX bukan hanya mengecilkan layout desktop.

Pada smartphone, desainer perlu mempertimbangkan kembali ukuran tombol, jarak antar elemen, panjang teks, navigasi, posisi CTA, hingga urutan informasi.

UX Bukan Hanya Membuat Website Lebih Sederhana

Salah satu kesalahpahaman yang cukup umum adalah menganggap UX yang baik selalu berarti membuat semuanya sesederhana mungkin.

Sederhana memang sering membantu, tetapi tujuan utama UX bukan menghilangkan sebanyak mungkin elemen.

Tujuannya adalah menghilangkan kompleksitas yang tidak diperlukan tanpa menghilangkan informasi atau fungsi yang dibutuhkan pengguna.

Formulir pendaftaran dengan dua kolom mungkin terlihat lebih sederhana daripada formulir dengan delapan kolom. Namun, jika sistem memang membutuhkan delapan informasi untuk memberikan layanan, menghapus enam kolom belum tentu menjadi solusi.

Desainer perlu memahami kebutuhan pengguna sekaligus kebutuhan sistem atau bisnis.

Bagaimana Proses UX Design untuk Website?

UX design biasanya merupakan proses berulang. Desainer mencoba memahami masalah, membuat solusi, mengujinya, kemudian memperbaikinya berdasarkan temuan.

Untuk desainer website pemula, proses tersebut dapat disederhanakan menjadi beberapa tahapan.

1. Memahami tujuan website

Mulailah dengan pertanyaan:

Website ini dibuat untuk apa?

Website portfolio, e-commerce, portal berita, landing page, dan website perusahaan memiliki tujuan berbeda.

Tujuan tersebut akan memengaruhi struktur dan fitur yang dibutuhkan.

2. Memahami pengguna

Selanjutnya, cari tahu siapa yang akan menggunakan website.

Pertimbangkan beberapa hal seperti:

• siapa target pengguna;
• informasi apa yang mereka cari;
• masalah apa yang ingin mereka selesaikan;
• perangkat apa yang mungkin digunakan;
• tindakan apa yang ingin mereka lakukan.

Hindari mendesain hanya berdasarkan preferensi pribadi.

Anda bukan selalu pengguna dari website yang sedang dibuat.

3. Menentukan user flow

User flow adalah alur yang dilalui pengguna untuk menyelesaikan tujuan.

Contohnya pada website jasa:

Homepage → Layanan → Detail Layanan → Portfolio → Kontak

Sedangkan pada toko online:

Homepage → Kategori → Produk → Keranjang → Checkout → Konfirmasi

User flow membantu desainer melihat apakah pengguna harus melewati terlalu banyak langkah atau menemui jalan buntu.

4. Membuat wireframe

Wireframe merupakan representasi sederhana dari struktur halaman.

Biasanya wireframe belum membutuhkan warna, foto final, atau detail visual yang rumit.

Fokusnya adalah menentukan:

• posisi konten;
• hierarki;
• navigasi;
• tombol;
• formulir;
• serta hubungan antarelemen.

Karena bentuknya sederhana, perubahan struktur dapat dilakukan lebih cepat dibandingkan ketika desain sudah memasuki tahap visual final.

5. Membuat prototype

Prototype memberikan gambaran mengenai bagaimana pengguna akan berinteraksi dengan desain.

Beberapa halaman dapat dihubungkan sehingga tombol dan navigasi dapat dicoba sebelum website benar-benar dikembangkan.

Prototype membantu desainer menemukan masalah interaksi lebih awal.

6. Melakukan usability testing

Desainer tidak selalu dapat memprediksi bagaimana pengguna sebenarnya berinteraksi dengan website.

Karena itu, desain perlu diuji.

Berikan tugas tertentu kepada pengguna, misalnya:

“Coba cari layanan pembuatan website dan temukan cara menghubungi perusahaan.”

Kemudian amati.

Apakah mereka langsung menemukan menu? Apakah ada bagian yang membuat mereka berhenti? Apakah tombol yang seharusnya jelas ternyata tidak diperhatikan?

Temuan seperti ini sangat berguna untuk memperbaiki desain.

7. Iterasi

UX design jarang selesai dalam satu percobaan.

Hasil testing dapat menunjukkan masalah yang sebelumnya tidak terlihat. Desainer kemudian memperbaiki desain dan mengujinya kembali.

Siklus sederhananya dapat berupa:

Riset → Desain → Test → Evaluasi → Perbaikan → Test kembali

Kemampuan melakukan iterasi merupakan bagian penting dalam proses UX.

Contoh UX Baik dan UX Buruk pada Website

Agar lebih mudah dipahami, bayangkan dua website restoran.

Website pertama menampilkan animasi besar ketika dibuka. Menu utama tersembunyi di balik ikon yang tidak familiar. Informasi alamat berada jauh di bagian bawah, sementara tombol reservasi sulit ditemukan.

Website kedua mungkin terlihat lebih sederhana. Namun, pengguna langsung melihat jenis restoran, lokasi, jam operasional, menu, dan tombol reservasi.

Untuk seseorang yang ingin memesan meja, website kedua kemungkinan memberikan pengalaman yang lebih efektif.

Contoh ini menunjukkan bahwa visual yang lebih kompleks tidak otomatis menghasilkan pengalaman yang lebih baik.

Desain seharusnya mendukung tujuan pengguna, bukan membuat pengguna bekerja untuk memahami desain.

Kesalahan UX yang Sering Dilakukan Desainer Website Pemula

Ada beberapa kebiasaan yang sebaiknya mulai dihindari sejak awal belajar desain website.

Mendesain berdasarkan selera sendiri

“Saya suka tombol kecil.”

“Saya lebih suka menu tersembunyi.”

“Menurut saya teks abu-abu terlihat lebih minimalis.”

Preferensi pribadi boleh menjadi bagian dari eksplorasi visual, tetapi keputusan UX sebaiknya memiliki alasan yang berhubungan dengan pengguna dan tujuan website.

Mengorbankan fungsi demi estetika

Website tetap perlu menarik secara visual, tetapi estetika tidak seharusnya menghambat fungsi.

Teks yang terlalu kecil, kontras rendah, navigasi tersembunyi, atau animasi berlebihan dapat terlihat menarik dalam mockup tetapi belum tentu nyaman digunakan.

Terlalu banyak pilihan

Memberikan terlalu banyak pilihan sekaligus dapat meningkatkan beban pengguna.

Kelompokkan informasi dan tentukan prioritas agar pengguna lebih mudah mengambil keputusan.

CTA tidak jelas

Setiap halaman sebaiknya memiliki tujuan yang cukup jelas.

Apakah pengguna diharapkan membaca artikel lain, menghubungi perusahaan, melihat portfolio, mendaftar, atau membeli produk?

CTA seperti “Hubungi Kami”, “Lihat Portfolio”, atau “Mulai Konsultasi” biasanya lebih informatif dibandingkan tombol yang hanya bertuliskan “Klik di Sini”.

Tidak menguji desain

Desain yang terlihat jelas bagi pembuatnya belum tentu jelas bagi pengguna.

Anda telah melihat desain tersebut puluhan kali dan mengetahui fungsi setiap komponennya. Pengguna baru tidak memiliki konteks yang sama.

Testing membantu melihat desain dari perspektif berbeda.

Cara Belajar UX untuk Desainer Website Pemula

Anda tidak harus langsung menguasai seluruh teori UX untuk mulai membuat website yang lebih baik.

Mulailah dengan mengubah kebiasaan ketika melihat sebuah website.

Jangan hanya bertanya:

“Apakah desain ini bagus?”

Cobalah bertanya:

“Mengapa menu ditempatkan di sini?”

“Apa yang harus dilakukan pengguna pada halaman ini?”

“Informasi apa yang pertama kali terlihat?”

“Apakah saya dapat menemukan informasi yang dicari tanpa kebingungan?”

“Apa yang terjadi setelah tombol ini ditekan?”

Anda juga dapat memilih website yang sering digunakan dan mencoba membuat user flow-nya. Catat perjalanan dari halaman pertama sampai sebuah tujuan selesai.

Latihan seperti ini membantu membangun pola pikir UX sebelum mempelajari metode yang lebih kompleks.

UX yang Baik Dimulai dari Memahami Pengguna

User Experience bukan sekadar tren dalam dunia desain website.

UX adalah cara berpikir yang menempatkan kebutuhan, tujuan, dan pengalaman pengguna sebagai bagian penting dari proses desain.

Website yang terlihat menarik tetapi sulit digunakan belum tentu berhasil menjalankan fungsinya. Sebaliknya, website yang dirancang dengan mempertimbangkan navigasi, struktur informasi, readability, konsistensi, responsive design, dan feedback dapat membantu pengguna menyelesaikan tujuan dengan lebih mudah.

Bagi desainer website pemula, Anda tidak perlu langsung menjadi UX researcher atau menguasai seluruh metode UX.

Mulailah dari prinsip sederhana:

Jangan hanya mendesain apa yang akan dilihat pengguna. Pikirkan juga apa yang akan dilakukan dan dirasakan pengguna ketika berinteraksi dengan desain tersebut.

Biasakan menentukan tujuan website, memahami kebutuhan pengguna, membuat user flow dan wireframe sebelum terlalu jauh mengerjakan visual. Setelah itu, uji desain kepada orang lain dan perhatikan bagian yang membuat mereka kebingungan.

Semakin sering proses tersebut dilakukan, semakin mudah Anda melihat bahwa desain website yang baik bukan hanya tentang estetika.

Desain website yang baik membantu pengguna memahami, menemukan, dan melakukan sesuatu dengan lebih mudah.