UI UX Adalah: Perbedaan UI dan UX dengan Contoh Sederhana

Kamu sering lihat lowongan "UI/UX Designer" dan bingung: ini satu posisi atau dua? Istilah UI dan UX memang sering ditulis berdampingan, jadi wajar kalau terdengar seperti hal yang sama. Padahal keduanya berbeda, dan memahami bedanya menentukan skill apa yang perlu kamu pelajari lebih dulu.

Di artikel ini kita bahas arti UI UX adalah apa, bedanya dengan contoh sehari-hari, apa saja pekerjaan di masing-masing sisi, dan bagaimana kamu bisa mulai membuktikan kemampuan lewat portofolio walaupun belum pernah kerja di perusahaan.

Jawaban singkat

UI (User Interface) adalah tampilan yang kamu lihat dan sentuh di sebuah produk digital: tombol, warna, huruf, ikon, dan tata letak. UX (User Experience) adalah keseluruhan pengalaman pengguna saat memakai produk itu, mulai dari mudah tidaknya menemukan fitur sampai puas tidaknya setelah selesai. Menurut Nielsen Norman Group, UX mencakup semua aspek interaksi pengguna dengan perusahaan, layanan, dan produknya, sehingga UI hanyalah salah satu bagiannya. Tampilan yang cantik belum tentu memberi pengalaman yang baik, dan keduanya perlu dikerjakan bersama.

UI UX adalah apa? Penjelasan dengan contoh sehari-hari

Anggap kamu memesan makanan lewat aplikasi. Warna tombol "Pesan", ukuran huruf menu, dan foto makanan adalah urusan UI. Sedangkan UX adalah semua yang kamu rasakan dari awal sampai makanan tiba: apakah menu mudah dicari, apakah checkout cuma butuh tiga langkah, dan apakah kamu tahu posisi pesananmu sekarang.

ITS dalam salah satu artikel beritanya menggambarkan UI sebagai fungsi dan tampilan visual produk dari sisi permukaannya, sedangkan UX sebagai perjalanan pengguna dalam memecahkan masalahnya. Narasumber di artikel itu memakai analogi film: UI itu efek visual dan kostum tokoh, UX itu pengalaman yang dirasakan penonton.

Nielsen Norman Group juga menegaskan bahwa UI yang bagus tidak menjamin UX yang bagus. Contohnya situs ulasan film dengan pencarian yang mudah tetap memberi pengalaman buruk kalau film yang dicari pengguna tidak ada di databasenya. Sumbernya bisa kamu baca di definisi user experience dari Nielsen Norman Group.

Perbedaan UI dan UX dalam tabel: fokus, pertanyaan utama, hasil kerja, dan contoh

Perbedaan UI dan UX yang perlu kamu pahami

Cara paling mudah membedakan: UI menjawab "seperti apa tampilannya?", UX menjawab "apakah produk ini enak dan masuk akal dipakai?". UI bersifat visual dan bisa langsung kamu lihat. UX sebagian besar tidak terlihat karena berupa alur, struktur, dan keputusan di balik layar.

UI: lapisan yang kamu lihat dan sentuh

Elemen UI antara lain warna, tipografi, ikon, tombol, form, spasi, dan animasi kecil. Hasil kerjanya biasanya berupa desain visual final dan panduan desain (design system) supaya semua halaman terlihat konsisten.

UX: pengalaman dari awal sampai selesai

Pekerjaan UX meliputi riset kebutuhan pengguna, menyusun user flow (urutan langkah pengguna), membuat wireframe (kerangka halaman tanpa visual detail), dan menguji desain dengan pengguna. Tujuannya mengurangi kebingungan dan langkah yang tidak perlu.

Hubungan keduanya

UI adalah bagian dari UX. Alur yang rapi tapi tampilannya berantakan akan terasa tidak meyakinkan. Tampilan menarik tapi alurnya membingungkan akan membuat pengguna menyerah. Itu sebabnya banyak perusahaan mencari satu orang untuk kedua peran, terutama di tim kecil.

Tugas UI Designer dan UX Designer

Berdasarkan uraian ITS, pekerjaan yang biasanya dikelompokkan ke masing-masing peran adalah sebagai berikut. Pembagiannya bisa berbeda di tiap perusahaan, jadi selalu baca deskripsi lowongan dengan teliti.

UI Designer: membuat pedoman desain, merancang tampilan final, mengubah sketsa menjadi desain digital, dan membuat animasi atau interaksi kecil.
UX Designer: meneliti kebutuhan pengguna, menyusun user flow, membuat wireframe, dan menguji desain untuk melihat apakah mudah diakses dan dipahami.

Proses kerja UI UX dari ide sampai desain jadi

Walaupun detailnya berbeda di tiap tim, urutan umumnya mirip. Kamu bisa memakainya sebagai kerangka saat mengerjakan proyek latihan.

Lima langkah proses kerja UI UX: riset, user flow, wireframe, desain visual, uji

Riset: cari tahu siapa penggunanya dan masalah apa yang ingin diselesaikan.
User flow: gambar urutan langkah pengguna dari masuk sampai tujuan tercapai.
Wireframe: buat kerangka halaman tanpa warna supaya fokus ke susunan.
Desain visual (UI): tambahkan warna, huruf, ikon, dan komponen sesuai pedoman.
Uji: minta beberapa orang mencoba, lalu perbaiki bagian yang membuat mereka bingung.

Cara belajar UI UX untuk pemula

Kamu tidak perlu menunggu pekerjaan pertama untuk mulai. Pilih satu aplikasi yang sering kamu pakai, lalu bedah dua hal: bagian mana yang terasa mudah (UX) dan bagian mana yang tampilannya menarik atau mengganggu (UI). Catatan itu sudah latihan analisis yang nyata.

Setelah itu, kerjakan proyek kecil dari brief. Di Portolabs kamu bisa mengambil brief proyek di Portolabs dan mengerjakannya seperti klien sungguhan. Kalau belum punya klien, baca cara memakai fake project untuk portofolio supaya proyek latihanmu tetap layak ditampilkan.

Hasil kerja perlu dikemas sebagai studi kasus, bukan sekadar gambar layar. Panduannya ada di cara bikin studi kasus portofolio tanpa pengalaman kerja. Setelah itu pajang di portofolio online gratis dan pastikan kamu paham apa itu portofolio di mata rekruter. Jangan lupa cek CV-mu lewat CV Review Portolabs sebelum melamar.

Kesalahan umum saat memahami UI UX

Menganggap UI/UX hanya soal cantik. Cantik itu UI. UX menilai apakah orang berhasil menyelesaikan tugasnya.
Langsung membuka Figma tanpa riset. Desain tanpa memahami pengguna cuma tebakan.
Portofolio berisi gambar tanpa cerita. Rekruter ingin tahu masalah, keputusanmu, dan hasilnya.
Mengira satu istilah sama dengan satu pekerjaan. Di lowongan, "UI/UX Designer" sering berarti kamu mengerjakan keduanya.

FAQ

Apa kepanjangan UI dan UX? UI adalah User Interface (antarmuka pengguna) dan UX adalah User Experience (pengalaman pengguna).

Apakah UI dan UX itu sama? Tidak. UI adalah tampilan yang berinteraksi langsung dengan pengguna, sedangkan UX adalah keseluruhan pengalaman memakai produk. UI menjadi bagian dari UX.

Mana yang lebih dulu dipelajari, UI atau UX? Tidak ada aturan baku. Banyak pemula mulai dari UI karena hasilnya terlihat, tetapi dasar UX seperti user flow dan wireframe tetap perlu dipelajari bersamaan supaya desainmu tidak sekadar bagus dilihat.

Apakah UI UX hanya untuk aplikasi dan website? Prinsipnya berlaku untuk produk digital apa pun, dan definisi UX dari Nielsen Norman Group bahkan mencakup interaksi pengguna dengan layanan dan perusahaan secara luas.

Apakah perlu bisa coding untuk jadi UI UX designer? Pada uraian tugas yang dirangkum ITS, tugas inti berupa riset, user flow, wireframe, dan desain visual, bukan menulis kode. Memahami batasan teknis tetap membantu saat berdiskusi dengan developer.

Bagaimana cara membuktikan kemampuan UI UX tanpa pengalaman kerja? Kerjakan proyek dari brief, dokumentasikan prosesnya sebagai studi kasus, dan tampilkan di portofolio online.

Ringkasan

UI adalah tampilan produk, UX adalah pengalaman memakainya secara keseluruhan, dan UI merupakan bagian dari UX. UI Designer fokus pada visual, UX Designer fokus pada riset, alur, dan pengujian, tetapi banyak lowongan meminta keduanya. Mulailah dengan membedah aplikasi yang kamu pakai, kerjakan proyek dari brief, lalu kemas hasilnya sebagai studi kasus di portofolio.