Banyak rumah sakit kini memakai mesin antrean berlayar sentuh. Tombolnya besar, warnanya rapi, dan nomor antrean keluar dalam dua detik. Namun, setelah memegang kertas itu pasien tetap tidak tahu kapan dipanggil, di loket mana, dan apakah boleh pergi membeli minum. Mesinnya dirancang dengan baik, tetapi pengalaman menunggunya tetap buruk. Dua masalah yang berbeda ini punya nama masing-masing: UI dan UX.
Secara singkat, UI UX adalah dua lapisan desain dalam satu produk digital. UI (user interface) adalah bagian yang dilihat dan disentuh, sedangkan UX (user experience) adalah keseluruhan pengalaman saat memakai produk itu. Pada artikel ini kita akan membahas apa itu UI UX, asal istilahnya, serta perbedaan UI dan UX beserta contohnya. Kita juga akan melihat cara memilah masalah UI atau UX, hingga tugas seorang UI/UX designer.
UI UX Adalah Dua Lapisan dari Satu Produk
Mari mulai dari UI. User interface adalah titik temu antara manusia dan mesin: tombol, menu, warna, huruf, ikon, dan pesan di layar. Kalau bisa difoto dari layar, hampir pasti itu bagian dari UI.
UX jauh lebih luas. Menurut standar ISO 9241-210:2019, user experience adalah persepsi dan respons seseorang akibat menggunakan, atau berencana menggunakan, sebuah sistem, produk, atau layanan. Perhatikan kata "berencana". UX sudah dimulai sebelum aplikasi dibuka, misalnya saat membaca ulasan di toko aplikasi. UX juga berlanjut setelah aplikasi ditutup, misalnya saat menunggu barang pesanan datang.
Jadi, kalau ditanya apa itu UI/UX, jawaban singkatnya begini: UX adalah seluruh perjalanan pengguna, dan UI adalah bagian yang tampak di layar. Di dunia kerja, keduanya sering ditulis "UI/UX" karena dirancang oleh tim yang sama dan saling bergantung. Namun, ui/ux adalah singkatan gabungan, bukan satu disiplin tunggal. Pemisahan inilah yang membuat perbedaan UI dan UX layak dipahami.
Asal Istilah UX: Dari Kantor Don Norman di Apple
Istilah user experience dipopulerkan oleh Don Norman, ilmuwan kognitif yang bergabung dengan Apple pada awal 1990-an. Sekitar tahun 1993 ia memakai jabatan User Experience Architect. Profilnya dalam buku Bringing Design to Software (1996) mencatat bahwa ia sengaja memilih frasa itu karena urusan kantornya bukan sekadar antarmuka. Yang ia urus adalah seluruh pengalaman orang dengan produk, bukan hanya menu dan ikon di layar.
Pada 1998, Norman dan Jakob Nielsen menuliskan definisi yang masih dikutip sampai sekarang. Menurut mereka, user experience mencakup semua aspek interaksi pengguna akhir dengan perusahaan, layanannya, dan produknya. Mereka juga menegaskan bahwa UX harus dibedakan dari UI. Contoh mereka sederhana: fitur pencarian ulasan film bisa saja dirancang sempurna. Namun, kalau databasenya tidak memuat film yang dicari, pengalaman penggunanya tetap buruk.
Sejarah singkat ini menjelaskan satu hal penting. Sejak awal, UX memang dimaksudkan lebih besar dari UI, bukan sebagai pasangan yang setara.
Lima Lapisan UX dan Letak UI di Dalamnya
Cara paling jelas untuk melihat hubungan keduanya adalah model lima lapisan dari Jesse James Garrett. Model ini pertama kali ia terbitkan sebagai diagram pada tahun 2000, lalu dikembangkan dalam buku The Elements of User Experience. Garrett menyusun proses user experience design dari lapisan paling abstrak di bawah hingga paling konkret di atas. Dalam bahasa sehari-hari, UI UX design adalah pekerjaan merancang kelima lapisan ini secara berurutan, bukan hanya lapisan paling atas.
Agar mudah dibayangkan, kita pakai contoh toko online kecil yang menjual kopi bubuk:
- Strategi: untuk siapa toko ini dan apa tujuannya. Misalnya, pembeli kantoran yang ingin langganan kopi bulanan tanpa repot memesan ulang.
- Cakupan: fitur dan konten apa saja yang dibutuhkan. Contohnya fitur langganan otomatis, tanpa fitur lelang atau forum.
- Struktur: bagaimana halaman dan langkah saling terhubung. Misalnya, alur pesan cukup tiga langkah: pilih kopi, pilih jadwal, bayar.
- Kerangka: letak tombol, menu, dan kolom isian di tiap halaman. Di sini tata letak mulai ditentukan.
- Permukaan: warna, huruf, foto produk, dan ikon. Inilah yang pertama kali dilihat pembeli.
UI berada di dua lapisan teratas, yaitu kerangka dan permukaan. Tiga lapisan di bawahnya juga termasuk UX, tetapi tidak terlihat langsung di layar. Akibatnya, kesalahan di lapisan bawah tidak bisa ditambal dengan memperindah lapisan atas. Toko kopi yang alur pesannya tujuh langkah tetap terasa melelahkan, sebagus apa pun warnanya.
Perbedaan UI dan UX dalam Tujuh Aspek
Setelah melihat lapisannya, beda UI dan UX bisa dirangkum dalam tujuh aspek berikut. Tabel ini sekaligus menjawab pertanyaan yang sering muncul: apa bedanya UI dan UX dalam pekerjaan sehari-hari?
| Aspek | UI | UX |
|---|---|---|
| Pertanyaan | Layarnya jelas? | Tujuan tercapai? |
| Waktu kerja | Tengah–akhir desain | Sebelum desain–sesudah rilis |
| Hasil kerja | Mockup, komponen | Riset, peta alur |
| Ukuran sukses | Rapi, terbaca | Tugas selesai, cepat |
| Tampak di layar? | Ya | Sebagian besar tidak |
| Contoh salah | Tombol bayar samar | Ongkir muncul di akhir |
| Cara memperbaiki | Ubah tampilan | Ubah urutan, isi, aturan |
Baris terakhir adalah yang paling berguna dalam praktik. Ia menjadi dasar cara memilah masalah pada bagian berikutnya. Singkatnya, ui vs ux bukan soal mana yang lebih indah. Yang membedakan adalah di lapisan mana sumber masalahnya berada.
Masalah Ini Salah UI atau UX? Cara Mengujinya
Saat pengguna mengeluh, tim sering langsung mengubah tampilan. Padahal, banyak keluhan berakar di alur. Untuk memilahnya, ajukan satu pertanyaan: apakah masalah ini hilang kalau kita hanya mengubah tampilan, tanpa mengubah urutan, isi, atau aturan?
Contoh klasiknya adalah mesin ATM. Bayangkan ATM yang mengeluarkan uang lebih dulu, baru kemudian kartu. Banyak orang langsung pergi setelah mengambil uang, karena tujuan mereka sudah tercapai. Akibatnya, kartu tertinggal di mesin.
Apakah ini bisa diperbaiki dengan tulisan "JANGAN LUPA KARTU ANDA" yang lebih besar dan berwarna merah? Sedikit membantu, tetapi tidak menyelesaikan akar masalahnya. Perbaikan yang tuntas adalah menukar urutan: kartu keluar dulu, baru uang. Karena solusinya mengubah urutan, ini adalah masalah UX. Itulah sebabnya banyak ATM kini mengembalikan kartu sebelum mengeluarkan uang.
Contoh kedua adalah formulir checkout yang meminta alamat dua kali, untuk pengiriman dan untuk tagihan. Memperbesar kolom isian tidak mengurangi kerja pengguna. Perbaikannya adalah aturan baru: centang "alamat tagihan sama dengan alamat pengiriman" yang aktif secara bawaan. Sebaliknya, kalau pengguna gagal menemukan tombol "Lanjut" karena warnanya menyatu dengan latar, cukup ubah warnanya. Itu masalah UI.
Contoh UI UX pada Aplikasi dan Website Sehari-hari
Contoh UI UX design berikut memisahkan sisi UI dan sisi UX pada produk yang sama. Pola ini membantu Anda melatih mata untuk melihat keduanya sekaligus.
- Bayar dengan QR di aplikasi dompet digital: Sisi UI-nya adalah tombol "Scan" yang besar di tengah bawah layar, terjangkau ibu jari. Sisi UX-nya adalah jumlah langkah dari membuka aplikasi sampai pembayaran selesai. Standar QRIS membuat satu kode bisa dipindai banyak aplikasi, dan itu juga keputusan UX di tingkat ekosistem.
- Halaman checkout toko online: Sisi UI-nya adalah ringkasan belanja yang rapi dan tombol bayar yang menonjol. Sisi UX-nya adalah apakah total harga, termasuk ongkos kirim, sudah terlihat sebelum pembeli memasukkan data. Kejutan biaya di langkah terakhir adalah salah satu alasan e-commerce kehilangan pembeli. Rangkuman 50 studi oleh Baymard Institute mencatat rata-rata 70% keranjang belanja online ditinggalkan. Biaya tambahan seperti ongkir menjadi alasan bagi 40% pembeli yang batal, di luar yang sekadar melihat-lihat.
- Landing page promosi: Sisi UI-nya adalah judul besar, foto produk, dan satu tombol ajakan. Sisi UX-nya adalah kesesuaian isi halaman dengan iklan yang diklik pengunjung. Landing page yang cantik tetapi membahas produk lain dari yang diiklankan akan langsung ditinggalkan.
- Formulir pendaftaran akun: Sisi UI-nya adalah label yang jelas dan pesan kesalahan berwarna merah di bawah kolom yang salah. Sisi UX-nya adalah jumlah kolom yang benar-benar perlu. Data seperti tanggal lahir dan pekerjaan sering bisa ditanyakan nanti, setelah pengguna merasakan manfaat produknya.
Dari keempat contoh ui ux di atas, terlihat bahwa sisi UX hampir selalu berupa keputusan, bukan gambar.
Kenapa UI dan UX Penting untuk Website
Bagi pemilik website, dampak UI dan UX bisa dihitung, bukan sekadar soal selera. Ada tiga dampak yang paling mudah diamati:
- Konversi: setiap langkah tambahan dalam alur pemesanan memberi pengunjung satu kesempatan lagi untuk berhenti.
- Beban layanan pelanggan: pertanyaan berulang seperti "di mana saya melihat status pesanan?" adalah tanda alur yang membingungkan.
- Aksesibilitas: kontras warna dan ukuran teks menentukan apakah pengguna lansia atau berpenglihatan rendah bisa memakai situs Anda.
Hubungan dengan SEO bersifat tidak langsung. Google menilai pengalaman halaman lewat sinyal seperti kecepatan muat dan kenyamanan di ponsel. Namun, desain yang bagus tidak otomatis menaikkan peringkat. Konten yang menjawab pertanyaan tetap menjadi syarat utamanya.
Untuk menilai UX secara lebih utuh, Peter Morville pada 2004 merumuskan tujuh pertanyaan yang dikenal sebagai UX honeycomb. Produk yang baik itu berguna, mudah dipakai, diinginkan, mudah ditemukan, dapat diakses semua orang, dapat dipercaya, dan bernilai. Ketujuh kata ini bisa langsung Anda pakai sebagai daftar periksa saat meninjau website sendiri.
Sisi Lain UI UX: Kelemahan dan Hal yang Perlu Dipertimbangkan
Investasi di UI dan UX tidak selalu mulus. Ada beberapa konsekuensi yang perlu Anda perhitungkan sebelum memulai:
- Riset UX butuh waktu dan biaya: wawancara pengguna, uji prototipe, dan analisis data bisa memakan dua sampai empat minggu sebelum satu layar pun digambar. Untuk proyek kecil dengan tenggat ketat, tahap ini sering dipangkas.
- Redesign bisa merugikan pengguna lama: tampilan baru yang lebih modern memaksa pengguna setia belajar ulang. Memindahkan menu utama, misalnya, membuat kebiasaan yang terbentuk bertahun-tahun mendadak tidak berlaku.
- Peran gabungan menyusutkan UX: satu orang "UI/UX designer" yang dikejar tenggat cenderung menghabiskan waktunya di Figma. Akibatnya, riset terlewat dan UX menyempit menjadi gambar layar yang rapi.
- Hasil UX sulit dibuktikan cepat: perbaikan alur baru terlihat dampaknya setelah beberapa minggu data terkumpul. Hal ini sering membuat manajemen lebih memilih perubahan visual yang hasilnya langsung terlihat.
Kelemahan ini bukan alasan untuk mengabaikan UX. Namun, skala usahanya sebaiknya disesuaikan. Website profil usaha kecil cukup dengan uji sederhana ke lima calon pembeli. Aplikasi dengan jutaan pengguna memang membutuhkan tim riset tersendiri.
UI/UX Designer Adalah Siapa dan Apa Tugasnya?
Di lowongan kerja Indonesia, UI UX designer adalah peran yang memegang kedua lapisan sekaligus. Mereka meneliti kebutuhan pengguna, menyusun alur, lalu menggambar tampilan akhirnya. Di perusahaan yang lebih besar, peran ini biasanya dipecah menjadi beberapa spesialis. Misalnya, UX researcher adalah orang yang khusus menjalankan UX research, sedangkan UX writer adalah penulis teks di dalam produk:
| Peran | Fokus utama |
|---|---|
| UX researcher | Wawancara, survei, dan uji pengguna untuk menemukan masalah nyata |
| UX designer | Alur, struktur informasi, dan wireframe |
| UX writer | Teks di dalam produk: label tombol, pesan kesalahan, petunjuk singkat |
| UI designer | Tampilan visual, komponen, dan design system (kumpulan aturan dan komponen baku) |
Tugas mingguan seorang ui ux designer umumnya berputar di empat kegiatan. Ia berbicara dengan pengguna, menyusun user flow (peta langkah pengguna), membuat wireframe UI UX dan prototipe, lalu mendampingi developer saat implementasi. Alat yang paling umum dipakai adalah Figma, yang berjalan langsung di browser.
Batas kerjanya dengan developer juga perlu dipahami. Desainer menentukan apa yang dibangun dan seperti apa tampilannya. Developer front-end menulis kode yang mewujudkannya di browser. Desainer yang memahami dasar HTML dan CSS biasanya lebih mudah diajak berdiskusi, karena tahu mana rancangan yang realistis untuk dibangun.
Cara Mulai Belajar UI UX
Belajar desain UI UX tidak harus dimulai dari kursus berbayar. Empat langkah berikut bisa Anda kerjakan dengan alat gratis.
Langkah #1: Bedah Tiga Aplikasi yang Anda Pakai
Pilih tiga aplikasi yang Anda buka setiap hari. Untuk masing-masing, tulis satu tugas yang sering Anda lakukan, hitung langkahnya, lalu catat setiap titik di mana Anda ragu. Gunakan uji sebab di atas untuk menandai mana yang masalah UI dan mana yang masalah UX.
Langkah #2: Wawancarai Lima Orang
Jakob Nielsen menunjukkan bahwa menguji dengan lima pengguna sudah cukup untuk menemukan sebagian besar masalah kegunaan. Minta lima teman mengerjakan satu tugas di aplikasi yang sama, tanpa Anda bantu. Catat di mana mereka berhenti atau bertanya.
Langkah #3: Rancang Ulang Satu Alur
Ambil satu alur yang bermasalah, lalu gambar versi perbaikannya. Mulailah dari sketsa di kertas, baru pindahkan ke Figma. Batasi diri pada satu alur, misalnya pendaftaran atau checkout, supaya selesai dalam satu sampai dua minggu.
Langkah #4: Tulis Studi Kasus
Susun hasilnya menjadi satu studi kasus untuk portofolio Anda: masalah awal, temuan dari lima orang, keputusan desain, dan alasannya. Perekrut desainer umumnya lebih tertarik pada alasan di balik keputusan daripada pada gambar yang cantik.
Pertanyaan Seputar UI UX
Mana yang lebih penting, UI atau UX?
Keduanya tidak bisa dipisahkan, tetapi urutannya jelas. UX menentukan apakah produk menyelesaikan masalah yang tepat, sedangkan UI menentukan apakah solusi itu mudah dipakai. UI yang bagus di atas UX yang salah tetap gagal. Sebaliknya, UX yang tepat dengan UI seadanya masih bisa dipakai, walaupun terasa kurang nyaman.
Apakah UI/UX designer harus bisa coding?
Tidak wajib. Kebanyakan lowongan UI/UX designer tidak mensyaratkan kemampuan menulis kode produksi. Namun, pemahaman dasar HTML, CSS, dan cara kerja tata letak responsif sangat membantu. Desainer yang paham batas teknis jarang menyerahkan rancangan yang mustahil dibangun.
Berapa gaji UI/UX designer di Indonesia?
Tidak ada angka resmi. Kisaran dari situs dan kampus yang memantau iklan lowongan menyebut sekitar Rp5–8 juta per bulan untuk junior dan Rp8–15 juta untuk tingkat menengah. Angka ini merujuk pada Loker.id (2024) dan BINUS Bandung (2026). Posisi senior dan lead di perusahaan teknologi besar bisa jauh di atasnya, tergantung kota dan jenis perusahaan.
Apakah AI akan menggantikan UI/UX designer?
Alat berbasis AI kini bisa membuat draf tampilan dari perintah teks dalam hitungan detik. Hal ini mempercepat lapisan permukaan dan kerangka. Namun, tiga lapisan di bawahnya, yaitu memahami pengguna, memilih fitur, dan menyusun alur, tetap membutuhkan keputusan manusia yang memahami konteks bisnisnya.
Kesimpulan
UI dan UX adalah dua lapisan dari satu produk. UI adalah bagian yang tampak dan disentuh, sedangkan UX adalah keseluruhan pengalaman, dari sebelum produk dibuka sampai setelah tugas selesai. Model lima lapisan Garrett menunjukkan bahwa UI berada di puncak UX, sehingga masalah di lapisan bawah tidak bisa ditutup dengan tampilan yang indah.
Saat menghadapi keluhan pengguna, mulailah dengan uji sebab: kalau cukup mengubah tampilan, itu masalah UI; kalau harus mengubah urutan, isi, atau aturan, itu masalah UX. Untuk website kecil, uji ke lima orang sudah memberi gambaran yang memadai sebelum Anda berinvestasi lebih jauh.
Semoga artikel ini membantu.
