Program Studi Bisnis Digital • FEB UNDIP

Desain UI & UX

Pertemuan 1 — Pengantar UI/UX untuk Bisnis Digital

Definisi UI vs UX, sejarah singkat disiplin ini, dan mengapa keduanya menentukan konversi & retensi pengguna produk digital.

RPS MINGGU 1 • 2 × 50 MENIT

Tujuan Pembelajaran Hari Ini

Setelah pertemuan ini, Anda diharapkan mampu memahami fondasi UI/UX sebagai disiplin bisnis digital (Sub-CPMK 1). Secara rinci:

CAPAIAN 1 — DEFINISI

UI vs UX

Membedakan secara tegas User Interface dan User Experience, dua istilah yang sering tertukar.

CAPAIAN 2 — SEJARAH

EVOLUSI DISIPLIN

Menjelaskan evolusi antarmuka dari command-line hingga touch, serta asal-usul istilah "UX".

CAPAIAN 3 — KONVERSI

DAMPAK BISNIS

Menghitung bagaimana perbaikan UX memengaruhi conversion rate produk digital.

CAPAIAN 4 — RETENSI

LOYALITAS PENGGUNA

Menjelaskan hubungan kualitas UX dengan retensi dan biaya churn pengguna.

Mengapa UI/UX Bukan Sekadar "Tampilan Cantik"?

Bayangkan Anda membuka aplikasi belanja UMKM lokal untuk membeli batik. Anda ingin checkout, tapi tombol bayar tersembunyi dan formulir alamat error terus.

SKENARIO A — UI/UX BURUK

FRUSTRASI & TINGGALKAN

Anda mencoba tiga kali, gagal, lalu menutup aplikasi dan beralih ke kompetitor seperti Shopee. Produk bagus, tapi penjualan hilang karena alur yang membingungkan.

SKENARIO B — UI/UX BAIK

LANCAR & PERCAYA

Tombol bayar jelas terlihat, formulir alamat otomatis terisi dari lokasi Anda. Transaksi selesai dalam hitungan detik — Anda bahkan kembali lagi minggu depan.

Bagi bisnis digital, UI/UX bukan hiasan — ia adalah faktor penentu apakah pengunjung menjadi pembeli, dan pembeli menjadi pelanggan setia.

Bagian 1 dari 3

Definisi: UI vs UX

Dua istilah yang sering tertukar, padahal punya cakupan dan tujuan yang berbeda.

User Interface User Experience Hubungan Keduanya

Apa itu User Interface (UI)?

UI adalah seluruh titik kontak visual dan interaktif antara pengguna dan sistem — segala sesuatu yang Anda lihat dan sentuh di layar.

ELEMEN UTAMA UI

Tata letak (layout): susunan tombol, teks, dan gambar di layar.
Tipografi & warna: font, ukuran teks, palet warna aplikasi.
Komponen interaktif: tombol, formulir, ikon, menu navigasi.
Konsistensi visual: gaya yang seragam di seluruh aplikasi.

GLOSARIUM

INTERFACE

"antarmuka" / titik temu

Dalam bahasa Indonesia, interface berarti antarmuka — lapisan tempat manusia dan sistem digital "bertemu" dan berinteraksi.

Contoh: warna hijau tombol "Bayar Sekarang" di Gojek, atau bentuk ikon keranjang di Tokopedia — semuanya adalah keputusan UI.

Apa itu User Experience (UX)?

UX adalah keseluruhan perasaan dan pengalaman pengguna saat berinteraksi dengan produk — mudah, membingungkan, memuaskan, atau membuat frustrasi.

CAKUPAN UTAMA UX

Alur pengguna (user flow): langkah-langkah menyelesaikan tugas.
Kegunaan (usability): seberapa mudah tugas diselesaikan.
Riset pengguna: memahami kebutuhan & masalah nyata pengguna.
Emosi & kepercayaan: apakah pengguna merasa nyaman & percaya.

GLOSARIUM

EXPERIENCE

"pengalaman" menyeluruh

UX mencakup sebelum, saat, dan sesudah pengguna memakai produk — termasuk kesan pertama dan alasan mereka kembali lagi.

Contoh: mengapa proses top-up e-wallet hanya butuh 3 langkah, bukan 7 — itu adalah hasil kerja UX, jauh sebelum tombolnya diwarnai.

UI vs UX: Analogi Restoran

Cara termudah membedakan keduanya — bayangkan Anda makan di sebuah restoran.

LANGKAH 1 — UI

TAMPILAN MENU

Desain buku menu: font elegan, foto makanan menggugah selera, tata letak harga yang rapi. Ini murni soal visual.

LANGKAH 2 — UX

PENGALAMAN MAKAN

Seberapa cepat pelayan datang, apakah kursi nyaman, apakah pesanan sesuai harapan, apakah Anda ingin kembali lagi. Ini soal keseluruhan perjalanan.

Menu yang indah (UI bagus) tidak berguna jika pelayanan lambat dan makanan salah (UX buruk) — begitu pula sebaliknya, aplikasi yang mulus tapi tampilannya kacau tetap membuat pengguna ragu.

UI dan UX Saling Melengkapi, Bukan Menggantikan

UI adalah bagian dari UX — lapisan visual yang mewujudkan strategi pengalaman yang sudah dirancang.

CARA MENGINGAT

UX = STRATEGI, UI = EKSEKUSI VISUAL

UX designer menjawab "apa yang harus terjadi & mengapa". UI designer menjawab "seperti apa bentuknya di layar". Tim yang solid mengerjakan keduanya secara beriringan.

Bagian 2 dari 3

Sejarah Singkat UI/UX

Dari perintah teks yang kaku hingga sentuhan jari yang alami di layar ponsel.

Evolusi Antarmuka Lahirnya Istilah UX

Evolusi Antarmuka: Dari Teks ke Sentuhan

Setiap generasi antarmuka lahir untuk mengurangi hambatan antara manusia dan mesin.

TAHAP 1 — CLI (1960an–70an)

COMMAND-LINE

Pengguna mengetik perintah teks yang tepat (mis. DIR, COPY). Butuh hafalan — hanya bisa dipakai teknisi terlatih.

TAHAP 2 — GUI (1980an–90an)

GRAFIS & MOUSE

Apple Macintosh & Windows memperkenalkan ikon, jendela, dan mouse. Konsep "klik" membuat komputer bisa dipakai orang awam.

TAHAP 3 — WEB (1990an–2000an)

BROWSER & HYPERLINK

Internet membuka era situs web; navigasi lewat tautan (link) dan menu — lahir kebutuhan desain informasi yang jelas.

TAHAP 4 — TOUCH (2007–kini)

SENTUH & MOBILE

iPhone (2007) memulai era layar sentuh; gestur "geser" & "cubit" menjadi bahasa universal aplikasi seperti Instagram & Gojek.

Lahirnya Istilah "User Experience"

Istilah "User Experience" pertama kali dipopulerkan oleh Don Norman, seorang ilmuwan kognitif yang bekerja di Apple pada awal 1990an.

MENGAPA ISTILAH BARU DIBUTUHKAN

Istilah lama seperti "usability" (kegunaan) dianggap terlalu sempit — hanya soal mudah/tidaknya dipakai.
Don Norman ingin mencakup seluruh interaksi: kemasan produk, cara mempelajarinya, layanan purnajual.
Ia menegaskan bahwa "pengalaman" mencakup emosi & persepsi, bukan hanya fungsi teknis.

TOKOH KUNCI

DON NORMAN

"User Experience Architect" di Apple, awal 1990an

Penulis buku The Design of Everyday Things — salah satu rujukan paling dihormati dalam dunia desain hingga sekarang.

Garis Waktu Singkat Evolusi Antarmuka

Rangkuman visual empat lompatan besar yang membentuk dunia digital yang kita pakai hari ini.

Sejak era mobile-first, UI/UX menjadi kompetensi wajib bagi startup Indonesia — dari Gojek, Tokopedia, hingga UMKM digital.

Bagian 3 dari 3

UI/UX, Konversi, & Retensi

Menghubungkan kualitas desain dengan angka bisnis yang nyata — penjualan dan loyalitas pengguna.

Konversi Retensi Peran Desainer

UI/UX sebagai Penentu Konversi

Conversion rate adalah persentase pengunjung yang menyelesaikan tindakan yang diinginkan (membeli, mendaftar, memesan). Setiap hambatan di alur (UX) menggerus angka ini.

Contoh nyata: mengurangi jumlah langkah checkout dari 5 menjadi 2 layar terbukti secara konsisten menaikkan penyelesaian transaksi di berbagai platform e-commerce.

Hitung dari Nol: Dampak UX pada Konversi Checkout

Toko daring UMKM batik menerima 10.000 pengunjung/bulan. Rata-rata nilai pesanan Rp 150.000. Tim redesain checkout dari 5 langkah menjadi 2 langkah.

Langkah	Perhitungan	Nilai
Conversion rate sebelum	—	2%
Transaksi/bulan sebelum	10.000 × 2%	200 transaksi
Revenue/bulan sebelum	200 × 150.000	Rp 30.000.000
Conversion rate sesudah	—	3%
Transaksi/bulan sesudah	10.000 × 3%	300 transaksi
Revenue/bulan sesudah	300 × 150.000	Rp 45.000.000

KENAIKAN REVENUE/BULAN

+Rp 15,0 jt

45,0 jt − 30,0 jt = +50%

Hanya dengan mengurangi 3 langkah checkout — tanpa menambah anggaran iklan sepeser pun.

UI/UX sebagai Penentu Retensi

Retensi adalah kemampuan produk mempertahankan penggunanya dari waktu ke waktu. Kebalikannya, churn, adalah persentase pengguna yang berhenti memakai produk.

PENYEBAB CHURN AKIBAT UX BURUK

Navigasi membingungkan — pengguna tidak menemukan fitur yang dicari.
Notifikasi berlebihan yang terasa mengganggu, bukan membantu.
Proses berulang yang melelahkan (login ulang terus-menerus).
Bug & loading lambat yang merusak kepercayaan.

GLOSARIUM

CHURN RATE

tingkat pengguna berhenti

Mempertahankan pengguna lama jauh lebih murah daripada terus-menerus mengakuisisi pengguna baru lewat iklan.

Hitung dari Nol: Biaya Churn Akibat UX Buruk

Aplikasi dompet digital lokal punya 5.000 pengguna aktif/bulan, nilai rata-rata per pengguna (ARPU) Rp 20.000/bulan. Churn turun setelah audit UX & redesain navigasi.

Langkah	Perhitungan	Nilai
Churn rate sebelum	—	8%/bulan
Pengguna hilang sebelum	5.000 × 8%	400 pengguna
Churn rate sesudah	—	5%/bulan
Pengguna hilang sesudah	5.000 × 5%	250 pengguna
Pengguna terselamatkan	400 − 250	150 pengguna
Nilai terselamatkan/bulan	150 × 20.000	Rp 3.000.000

NILAI TERSELAMATKAN/TAHUN

Rp 36 jt

3,0 jt × 12 bulan

Dari perbaikan navigasi & pengurangan login berulang — tanpa fitur baru sama sekali.

Peran UI/UX dalam Tim Bisnis Digital

Di startup dan perusahaan digital Indonesia, peran ini biasa terbagi (atau merangkap di tim kecil) sebagai berikut:

Peran	Fokus Kerja	Contoh Output
UX Researcher	Memahami masalah & kebutuhan pengguna	Wawancara, survei, persona
UX Designer	Merancang alur & struktur informasi	User flow, wireframe
UI Designer	Mewujudkan tampilan visual final	Mockup high-fidelity, design system
UX Writer	Menulis teks di dalam produk	Label tombol, pesan error

Di perusahaan seperti Traveloka atau Bukalapak, keempat peran ini bekerja bersama product manager & developer dalam satu tim produk.

Rangkuman Pertemuan 1

Konsep Kunci	Inti Pemahaman
UI	Lapisan visual & interaktif — apa yang dilihat & disentuh pengguna
UX	Keseluruhan pengalaman & perasaan pengguna terhadap produk
Sejarah	CLI → GUI (1984) → istilah "UX" (Don Norman, 1993) → mobile-first (2007–kini)
Konversi	UX yang lebih ringkas → conversion rate naik → revenue naik (contoh: +50%)
Retensi	UX yang lebih jelas → churn turun → nilai pengguna terselamatkan (contoh: Rp 36 jt/tahun)

Sebelum Pertemuan Berikutnya

MINGGU DEPAN (P2)

Proses Design Thinking — kerangka kerja lima tahap merancang solusi berpusat pengguna.
Mulai mengenal tahap Empathize sebagai fondasi riset pengguna.
Kaitannya langsung dengan konsep UX yang sudah kita pelajari hari ini.

TUGAS RINGAN (SEBELUM P2)

Pilih 1 aplikasi lokal yang sering Anda pakai (Gojek, Tokopedia, BCA mobile, dsb).
Catat 3 contoh keputusan UI dan 3 contoh keputusan UX yang Anda temukan.
Bawa catatan ini ke kelas — akan didiskusikan di awal P2.

Tidak perlu laporan formal — cukup catatan singkat untuk melatih "mata desain" Anda mengenali UI vs UX di kehidupan sehari-hari.