# UI UX Adalah: Pengertian, Perbedaan, dan Contohnya

> UI UX adalah gabungan desain antarmuka dan pengalaman pengguna. Pahami singkatan, beda UI dan UX, proses desain, 10 prinsip usability, dan contohnya.

**URL:** https://www.ciptadusa.com/blog/ui-ux-adalah  
**Type:** blog  
**Author:** PT Cipta Dua Saudara  
**Category:** Teknologi  
**Published:** 2026-10-22  
**Cover:** https://www.ciptadusa.com/media/uploads/blog/2026-10/1792635448430-ui-ux-adalah-20261022.webp  

## Article

UI/UX adalah gabungan dua disiplin dalam desain produk digital. UI (user interface) adalah antarmuka yang dilihat dan disentuh pengguna, seperti tata letak, tombol, warna, dan huruf. UX (user experience) adalah keseluruhan pengalaman pengguna saat berurusan dengan sebuah produk atau layanan. Figma menjelaskan UI sebagai interaktivitas, tampilan, dan nuansa sebuah layar produk atau halaman web, sedangkan UX mencakup pengalaman pengguna secara keseluruhan dengan produk atau website tersebut ([sumber](https://www.figma.com/resource-library/difference-between-ui-and-ux/)).

Singkatnya, UI menjawab "seperti apa tampilannya dan bagaimana cara berinteraksi dengannya", sedangkan UX menjawab "apakah pengguna bisa mencapai tujuannya dengan mudah". Artikel ini membahas pengertian UI dan UX, singkatannya, perbedaan keduanya, proses desain UI/UX, prinsip usability yang bisa dipakai untuk menilai desain, contoh dalam aplikasi bisnis, serta posisi UI/UX dalam proyek pembuatan software.

## UI UX Adalah Singkatan dari Apa?

UI adalah singkatan dari user interface, atau antarmuka pengguna. UX adalah singkatan dari user experience, atau pengalaman pengguna. Keduanya ditulis berdampingan sebagai "UI/UX" karena dalam proyek website dan aplikasi, pekerjaan keduanya saling bergantung, walaupun fokusnya berbeda.

## Pengertian UI (User Interface)

UI adalah semua elemen di layar yang menjadi titik interaksi antara pengguna dan sistem. Figma menyebut empat pertimbangan utama dalam desain UI ([sumber](https://www.figma.com/resource-library/difference-between-ui-and-ux/)):

- **Tata letak halaman.** Susunan header, konten, ruang kosong, dan navigasi di layar web atau aplikasi.
- **Warna dan pilihan huruf.** Dipilih demi konsistensi, aksesibilitas, dan keselarasan dengan merek.
- **Elemen interaktif.** Tombol, menu dropdown, formulir, dan komponen lain yang membuat alur pengguna terasa jelas.
- **Tingkat detail wireframe dan prototipe.** Desainer UI mengubah wireframe dan prototipe dasar menjadi mockup berdetail tinggi yang interaktif.

Dalam praktik, hasil kerja UI berupa desain layar, komponen yang bisa dipakai ulang, dan panduan gaya (style guide) agar tampilan tetap konsisten saat aplikasi bertambah besar.

## Pengertian UX (User Experience)

Nielsen Norman Group mendefinisikan user experience sebagai semua aspek interaksi pengguna akhir dengan perusahaan, layanannya, dan produknya. Syarat pertama UX yang baik adalah memenuhi kebutuhan pelanggan secara tepat tanpa merepotkan ([sumber](https://www.nngroup.com/articles/definition-user-experience/)).

Definisi ini lebih luas dari sekadar layar. Nielsen Norman Group memberi contoh website ulasan film: walaupun antarmuka pencarian filmnya sempurna, pengalaman pengguna tetap buruk bagi orang yang mencari film independen kecil jika databasenya hanya berisi film dari studio besar ([sumber](https://www.nngroup.com/articles/definition-user-experience/)). Artinya, UX juga dipengaruhi data, alur bisnis, kecepatan sistem, dan layanan di belakang aplikasi.

Pekerjaan UX mencakup riset pengguna, penyusunan arsitektur informasi, pemetaan alur, wireframe, prototipe, dan pengujian dengan pengguna ([sumber](https://www.figma.com/resource-library/difference-between-ui-and-ux/)).

## Perbedaan UI dan UX

Figma menyebut UI sebagai bagian khusus dari UX ([sumber](https://www.figma.com/resource-library/difference-between-ui-and-ux/)). Tabel berikut merangkum perbedaannya:

| Aspek | UI (User Interface) | UX (User Experience) |
| --- | --- | --- |
| Fokus | Tampilan dan interaksi di layar | Pengalaman pengguna secara keseluruhan |
| Pertanyaan utama | Apakah layar ini jelas dan konsisten? | Apakah pengguna bisa menyelesaikan tugasnya? |
| Cakupan | Layout, warna, huruf, ikon, komponen | Riset, alur, arsitektur informasi, pengujian |
| Hasil kerja | Desain layar, design system, mockup | Persona, user flow, wireframe, laporan pengujian |
| Kapan dikerjakan | Setelah alur dan struktur disepakati | Sejak awal proyek dan berlanjut setelah rilis |

UI dan UX tidak bisa dipisahkan sepenuhnya. Tampilan yang rapi tidak menolong jika alurnya membingungkan, dan alur yang logis tetap terasa berat jika tombol dan teksnya sulit dibaca.

### UI/UX, Usability, dan Utility

Ada dua istilah lain yang muncul dalam pembahasan UI/UX. Nielsen Norman Group mendefinisikan usability sebagai atribut kualitas yang menilai seberapa mudah antarmuka dipakai, dan utility sebagai kemampuan desain menyediakan fungsi yang dibutuhkan pengguna. Gabungan keduanya menentukan apakah produk itu berguna ([sumber](https://www.nngroup.com/articles/usability-101-introduction-to-usability/)).

Usability diukur dari lima komponen ([sumber](https://www.nngroup.com/articles/usability-101-introduction-to-usability/)):

1. **Learnability:** seberapa mudah pengguna menyelesaikan tugas dasar saat pertama kali mencoba.
2. **Efisiensi:** seberapa cepat pengguna menyelesaikan tugas setelah terbiasa.
3. **Memorability:** seberapa mudah pengguna kembali lancar setelah lama tidak memakai.
4. **Error:** berapa banyak kesalahan yang terjadi, seberapa parah, dan seberapa mudah dipulihkan.
5. **Kepuasan:** seberapa menyenangkan desain itu dipakai.

## Proses Desain UI/UX

Figma menguraikan lima langkah desain UX ([sumber](https://www.figma.com/resource-library/difference-between-ui-and-ux/)). Berikut versi ringkasnya, ditambah tahap desain UI:

1. **Riset pengguna dan kompetitor.** Memahami siapa pengguna, masalah yang mereka hadapi, dan perilaku mereka saat memakai aplikasi. Temuan riset dirangkum dalam persona.
2. **Arsitektur informasi.** Menyusun navigasi, hierarki konten, fitur, dan alur utama, termasuk titik keputusan pengguna dalam flowchart.
3. **Wireframe dan prototipe.** Mengubah struktur menjadi kerangka layar, lalu prototipe yang bisa dicoba.
4. **Desain UI.** Menerapkan warna, huruf, komponen, dan aturan visual pada wireframe yang sudah disepakati.
5. **Pengujian dan perbaikan.** Jika pengujian menemukan navigasi, menu, atau formulir yang membingungkan, tim memperbaikinya sebelum rilis.
6. **Pembaruan berkelanjutan.** Desain terus disesuaikan setelah produk dipakai.

### Wireframe, Wireflow, dan Prototipe

Wireframe menunjukkan ide tata letak di level halaman, sedangkan flowchart mendokumentasikan alur kerja dan tugas pengguna. Untuk aplikasi yang hanya punya beberapa halaman inti dengan konten yang berubah sesuai interaksi, Nielsen Norman Group memperkenalkan wireflow, yaitu gabungan wireframe dan flowchart ([sumber](https://www.nngroup.com/articles/wireflows/)).

Prototipe adalah hipotesis, yaitu kandidat solusi desain untuk masalah tertentu. Cara langsung untuk menguji hipotesis itu adalah mengamati pengguna memakainya. Prototipe bisa berupa sketsa kertas sampai mockup detail, statis atau bisa diklik. Nielsen Norman Group mengingatkan bahwa membongkar kode itu mahal, sedangkan membuang prototipe tidak, terutama jika masih di kertas ([sumber](https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/)).

### Berapa Banyak Pengguna untuk Uji Usability?

Jakob Nielsen merekomendasikan uji usability dengan tidak lebih dari 5 pengguna per putaran, lalu menjalankan beberapa putaran kecil. Dalam data yang ia analisis, 5 pengguna menemukan sekitar 85% masalah usability, dan anggaran untuk 15 pengguna lebih baik dipakai untuk 3 putaran berisi 5 pengguna agar perbaikan bisa diuji ulang ([sumber](https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/)).

Rekomendasi ini berlaku untuk kelompok pengguna yang sejenis. Jika aplikasi dipakai kelompok yang sangat berbeda, misalnya bagian pembelian dan tim sales, Nielsen menyarankan 3 sampai 4 pengguna dari tiap kelompok untuk dua kelompok, dan 3 pengguna per kelompok untuk tiga kelompok atau lebih ([sumber](https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/)).

## 10 Prinsip Usability untuk Menilai Desain

Jakob Nielsen menyusun 10 heuristik usability yang dipakai untuk mengevaluasi antarmuka ([sumber](https://www.nngroup.com/articles/ten-usability-heuristics/)). Pemilik bisnis bisa memakainya sebagai daftar periksa saat meninjau desain dari vendor:

1. **Visibilitas status sistem.** Pengguna diberi tahu apa yang sedang terjadi lewat umpan balik yang tepat waktu, misalnya indikator "sedang menyimpan".
2. **Kesesuaian sistem dengan dunia nyata.** Gunakan bahasa pengguna, bukan istilah internal tim.
3. **Kontrol dan kebebasan pengguna.** Sediakan jalan keluar yang jelas, seperti tombol batal dan fitur undo.
4. **Konsistensi dan standar.** Kata, tindakan, dan tampilan yang sama punya arti yang sama, mengikuti kebiasaan platform.
5. **Pencegahan error.** Cegah kesalahan sebelum terjadi, misalnya dengan konfirmasi sebelum tindakan penting.
6. **Mengenali lebih baik daripada mengingat.** Tampilkan pilihan dan informasi agar pengguna tidak harus menghafal.
7. **Fleksibilitas dan efisiensi.** Sediakan jalan pintas bagi pengguna yang sudah mahir tanpa membingungkan pengguna baru.
8. **Desain estetis dan minimalis.** Jangan tampilkan informasi yang tidak relevan dengan tugas pengguna.
9. **Bantu pengguna mengenali, memahami, dan pulih dari error.** Pesan error ditulis dengan bahasa sederhana dan menunjukkan solusinya.
10. **Bantuan dan dokumentasi.** Sediakan panduan yang mudah dicari saat dibutuhkan.

### Aksesibilitas sebagai Bagian dari UX

Pengalaman yang baik juga harus bisa dinikmati pengguna dengan disabilitas. Web Content Accessibility Guidelines (WCAG) dari W3C adalah standar teknis untuk membuat konten web lebih mudah diakses, dan juga bisa diterapkan pada aplikasi native dan software ([sumber](https://www.w3.org/WAI/standards-guidelines/wcag/)). Prinsipnya dikelompokkan menjadi empat: perceivable (bisa dipersepsi), operable (bisa dioperasikan), understandable (bisa dipahami), dan robust (kompatibel dengan berbagai alat bantu). Contohnya menyediakan teks alternatif untuk konten non-teks dan memastikan semua fungsi bisa dipakai dengan keyboard ([sumber](https://www.w3.org/WAI/standards-guidelines/wcag/glance/)).

## Contoh UI/UX dalam Aplikasi Bisnis

Contoh berikut adalah ilustrasi, bukan data proyek tertentu. Sebuah distributor ingin membuat aplikasi pemesanan untuk tim sales lapangan.

| Masalah yang ditemukan | Termasuk ranah | Perbaikan |
| --- | --- | --- |
| Sales harus membuka 4 menu untuk membuat satu pesanan | UX (alur dan arsitektur informasi) | Alur pesanan dipadatkan menjadi satu layar dengan langkah bertahap |
| Tombol "Kirim" dan "Hapus" berdampingan dengan warna sama | UI (elemen interaktif) | Tombol utama dibedakan warna dan posisinya, tindakan hapus diberi konfirmasi |
| Pesanan gagal terkirim saat sinyal lemah tanpa pemberitahuan | UX (status sistem dan error) | Aplikasi menampilkan status "tersimpan, menunggu sinyal" lalu mengirim ulang |
| Teks harga terlalu kecil dibaca di bawah sinar matahari | UI (huruf dan kontras) | Ukuran huruf dan kontras warna dinaikkan |
| Nama produk di aplikasi beda dengan istilah di gudang | UX (bahasa pengguna) | Istilah disamakan dengan yang dipakai tim gudang dan sales |

Perhatikan bahwa sebagian masalah baru terlihat saat aplikasi diuji langsung oleh sales di lapangan, bukan saat desain ditinjau di ruang rapat.

## Posisi UI/UX dalam Proyek Pembuatan Software

Dalam [SDLC](https://www.ciptadusa.com/blog/sdlc-adalah), UI/UX berada di tahap analisis dan desain, sebelum pengembangan dimulai. Pada model [agile](https://www.ciptadusa.com/blog/agile-adalah), desain bisa dikerjakan bertahap per fitur dan diuji ulang di sprint berikutnya. Saat membangun [MVP](https://www.ciptadusa.com/blog/mvp-adalah), UI/UX membantu menentukan alur inti yang harus bisa dipakai di rilis pertama.

UI/UX juga terkait dengan [UAT](https://www.ciptadusa.com/blog/uat-adalah). Uji usability dilakukan pada prototipe agar masalah alur ditemukan lebih awal, sedangkan UAT memastikan software yang sudah dibangun sesuai kebutuhan bisnis sebelum dipakai.

Dari sisi anggaran, desain adalah salah satu komponen yang menentukan [biaya pembuatan aplikasi berbasis web](https://www.ciptadusa.com/blog/biaya-pembuatan-aplikasi-berbasis-web). Nielsen Norman Group mengingatkan bahwa membongkar kode itu mahal, sedangkan membuang prototipe tidak. Karena itu, perubahan alur sebaiknya ditemukan di tahap prototipe ([sumber](https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/)).

### Yang Perlu Disiapkan Pemilik Bisnis

1. **Tujuan bisnis dan pengguna utama.** Siapa yang akan memakai aplikasi dan tugas apa yang utama bagi mereka.
2. **Akses ke pengguna nyata.** Siapkan beberapa calon pengguna dari tiap kelompok untuk wawancara dan uji prototipe.
3. **Contoh dokumen dan istilah kerja.** Formulir, laporan, dan istilah yang dipakai sehari-hari membantu desainer memakai bahasa pengguna.
4. **Panduan merek.** Logo, warna, dan huruf yang sudah dipakai perusahaan, jika ada.
5. **Kriteria persetujuan desain.** Sepakati siapa yang menyetujui desain dan berdasarkan apa, misalnya hasil uji prototipe, bukan selera pribadi.

Pertanyaan lain untuk menilai vendor ada di [panduan memilih jasa pembuatan software di Jawa Barat](https://www.ciptadusa.com/blog/pilih-jasa-pembuatan-software-jawa-barat-20260907). Jika Anda belum yakin perlu software custom, baca [kapan bisnis butuh software custom](https://www.ciptadusa.com/blog/kapan-bisnis-butuh-software-custom-2026).

## FAQ

### UI UX adalah apa?

UI (user interface) adalah tampilan dan elemen interaktif di layar, seperti tombol, layout, warna, dan huruf. UX (user experience) adalah keseluruhan pengalaman pengguna dengan produk atau layanan ([sumber](https://www.figma.com/resource-library/difference-between-ui-and-ux/)).

### UI UX adalah singkatan dari apa?

UI adalah singkatan dari user interface (antarmuka pengguna), dan UX adalah singkatan dari user experience (pengalaman pengguna).

### Apa perbedaan UI dan UX?

UI berfokus pada tampilan dan interaksi di layar, sedangkan UX berfokus pada apakah pengguna bisa mencapai tujuannya dengan mudah, termasuk riset, alur, dan pengujian. Figma menyebut UI sebagai bagian khusus dari UX ([sumber](https://www.figma.com/resource-library/difference-between-ui-and-ux/)).

### Apa yang dikerjakan UI/UX designer?

UX designer melakukan riset pengguna, menyusun arsitektur informasi, membuat wireframe dan prototipe, lalu mengujinya. UI designer mengubah wireframe menjadi desain visual berdetail tinggi yang interaktif ([sumber](https://www.figma.com/resource-library/difference-between-ui-and-ux/)). Di tim kecil, kedua peran ini bisa dipegang satu orang.

### Apakah UX sama dengan usability?

Tidak. Usability adalah atribut kualitas antarmuka, yaitu seberapa mudah dipelajari, efisien, dan menyenangkan dipakai. UX adalah konsep yang lebih luas ([sumber](https://www.nngroup.com/articles/definition-user-experience/)).

### Kapan UI/UX dikerjakan dalam proyek aplikasi?

Sejak awal, setelah tujuan bisnis dan lingkup rilis disepakati, dan sebelum pengembangan dimulai. Pengujian prototipe lebih murah daripada membongkar kode ([sumber](https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/)). Setelah rilis, desain tetap diperbarui berdasarkan pemakaian nyata.

## Rancang dan Bangun Aplikasi Bersama CDS

PT Cipta Dua Saudara memulai setiap proyek software custom dengan tahap Discover untuk menyepakati tujuan bisnis dan lingkup rilis pertama, lalu tahap Design dari wireframe ke prototipe yang bisa diklik dan diuji dengan pengguna nyata sebelum masuk pengembangan ([sumber](https://www.ciptadusa.com/services/software)). Lihat detail layanan [pengembangan software custom](https://www.ciptadusa.com/services/software), atau mulai dari [konsultasi IT](https://www.ciptadusa.com/services/consulting) untuk memetakan proses dan alur pengguna. Kami juga mengembangkan produk sendiri seperti [Zetta CRM](https://www.ciptadusa.com/incubating/zetta-crm), dan Anda bisa melihat hasil kerja kami di [portofolio](https://www.ciptadusa.com/works).


---

*Markdown version of https://www.ciptadusa.com/blog/ui-ux-adalah — generated for AI agents and LLM crawlers.*