Mata Kuliah Lab Pemrograman • Bisnis Digital

Desain UI/UX untuk Aplikasi Mobile & Web

Pertemuan 2 — Antarmuka Pengguna (UI) dan Pengalaman Pengguna (UX)

Sebelum satu baris kode pun ditulis, aplikasi yang baik dirancang dulu di atas kertas dan layar. Hari ini Anda belajar merancang tampilan yang enak dilihat (UI) dan mudah dipakai (UX) — fondasi sebelum kita membangun komponen HTML/CSS/JavaScript di Pertemuan 3.

RPS MINGGU 2 • DURASI 2 × 50 MENIT

Tujuan Pembelajaran Hari Ini

Melanjutkan rumusan ide proyek dari Pertemuan 1, hari ini Anda akan mengubah ide tersebut menjadi rancangan visual yang siap dikembangkan:

CAPAIAN 1 — KONSEP

MEMBEDAKAN UI & UX

Memahami perbedaan dan keterkaitan UI (tampilan) dan UX (pengalaman), serta tahapan proses desainnya.

CAPAIAN 2 — PRAKTIK

MERANCANG WIREFRAME

Menerapkan prinsip kontras, hierarki, dan grid untuk membuat wireframe sederhana dari ide aplikasi Anda.

Sub-CPMK Minggu 2: mahasiswa mampu merancang desain antarmuka pengguna (UI) dan pengalaman pengguna (UX) untuk aplikasi mobile/web berdasarkan kebutuhan bisnis digital yang telah diidentifikasi.

Bagian 1 dari 3

UI vs UX — Dua Sisi yang Sering Tertukar

Sebelum merancang, Anda perlu mengenal perbedaan mendasar antara "yang terlihat" dan "yang terasa".

Analogi: Restoran — Interior vs Pengalaman Makan

UI — USER INTERFACE

INTERIOR RESTORAN

Meja rapi, pencahayaan hangat, warna dinding serasi. Ini adalah tampilan visual yang langsung dilihat mata — tombol, warna, ikon, dan tata letak pada layar aplikasi.

UX — USER EXPERIENCE

PENGALAMAN MAKAN

Seberapa cepat dilayani, apakah menu mudah dipahami, apakah alur pesan-bayar lancar. Ini adalah keseluruhan rasa memakai aplikasi dari awal sampai selesai.

Glosarium — UI (User Interface): seluruh elemen visual yang dilihat dan disentuh pengguna pada layar (tombol, warna, tipografi, ikon). UX (User Experience): keseluruhan kesan dan kemudahan yang dirasakan pengguna saat berinteraksi dengan aplikasi dari awal hingga tujuannya tercapai.

Mengapa UI/UX Penting bagi Bisnis Digital?

Desain yang buruk bukan cuma soal "kurang cantik" — ia berdampak langsung pada keputusan bisnis pengguna.

KEPERCAYAAN

Tampilan rapi dan konsisten membuat pengguna percaya aplikasi Anda aman untuk transaksi, seperti kepercayaan pada aplikasi BCA mobile.

RETENSI

Alur yang membingungkan membuat pengguna pergi ke aplikasi pesaing — UX buruk = pelanggan hilang, seperti memilih Tokopedia daripada aplikasi UMKM yang rumit.

KONVERSI

Tombol "Beli" yang jelas dan mudah ditemukan langsung menaikkan jumlah transaksi selesai dibanding tombol yang tersembunyi.

Glosarium — konversi: persentase pengguna yang berhasil menyelesaikan tujuan tertentu (misalnya membeli, mendaftar) dari total yang mengunjungi aplikasi.

Poin ini penting Anda pahami sebagai calon pengembang aplikasi bisnis digital, bukan sekadar pemrogram: desain bukan hiasan tambahan, ia mempengaruhi angka bisnis secara langsung. Kepercayaan muncul dari konsistensi tampilan, misalnya Anda mungkin ragu memasukkan nomor kartu kredit di aplikasi yang tampilannya berantakan dan tombolnya asal-asalan, sementara Anda percaya penuh pada BCA mobile karena tampilannya rapi dan profesional. Retensi berbicara soal apakah pengguna kembali lagi — kalau alur pesan makanan di aplikasi UMKM Anda berbelit-belit, pelanggan akan pindah ke Gofood yang lebih mulus. Konversi adalah angka paling konkret bagi pemilik bisnis: tombol beli yang jelas dan gampang ditemukan bisa menaikkan penjualan tanpa mengubah harga produk sama sekali, murni karena desainnya lebih baik.

Proses Desain: Design Thinking 5 Tahap

Desainer profesional tidak langsung menggambar tombol — mereka melewati alur terstruktur bernama Design Thinking.

1EMPATHIZE

Memahami masalah & kebutuhan calon pengguna lewat wawancara atau observasi.

2DEFINE

Merumuskan masalah inti secara spesifik yang akan dipecahkan aplikasi.

3IDEATE

Mengeksplorasi banyak ide solusi tanpa takut salah, lalu memilih yang terbaik.

4PROTOTYPE

Membuat rancangan tiruan aplikasi (wireframe/mockup) yang bisa dicoba.

5TEST

Menguji rancangan ke calon pengguna, mencatat masukan, lalu mengulang siklus.

Mengenal Calon Pengguna: User Persona

Sebelum menggambar layar, desainer membuat persona — profil fiktif yang mewakili pengguna nyata — agar rancangan tidak sekadar tebakan.

CONTOH PERSONA 1

Bu Sari, 42 tahun, pemilik warung kelontong. Jarang pakai aplikasi baru, butuh tombol besar dan teks jelas, takut salah pencet saat input harga.

CONTOH PERSONA 2

Dimas, 21 tahun, mahasiswa pembeli online. Terbiasa aplikasi modern, ingin proses checkout secepat mungkin, tidak sabar dengan langkah bertele-tele.

Glosarium — persona: representasi fiktif namun berbasis data nyata dari satu segmen pengguna, dipakai untuk menuntun keputusan desain agar berpusat pada kebutuhan manusia, bukan asumsi desainer semata.

Latihan membuat persona ini melatih Anda berempati sebelum merancang, karena kesalahan paling umum pemula adalah merancang aplikasi berdasarkan selera sendiri, bukan kebutuhan pengguna sesungguhnya. Perhatikan dua persona di atas: Bu Sari mewakili pengguna yang kurang terbiasa teknologi, sehingga aplikasi untuknya harus punya tombol besar dan alur sederhana, sedangkan Dimas mewakili pengguna digital native yang justru terganggu kalau prosesnya terlalu lambat atau berbelit. Kalau aplikasi Anda dirancang untuk toko kelontong seperti milik Bu Sari, tapi Anda memakai tampilan minimalis penuh ikon kecil seperti untuk Dimas, pengguna sungguhan justru akan kebingungan. Untuk latihan proyek Anda, coba tuliskan minimal satu persona yang mewakili calon pengguna aplikasi bisnis digital yang sudah Anda rumuskan pekan lalu.

Bagian 2 dari 3

Prinsip & Elemen Desain UI

Dari konsep menuju kaidah teknis: kontras, hierarki, tipografi, dan grid yang membuat tampilan mudah dibaca dan disentuh.

Empat Prinsip Dasar Desain UI

1 — HIERARKI VISUAL

Elemen penting dibuat lebih menonjol (ukuran besar, warna aksen) agar mata pengguna tahu ke mana harus melihat lebih dulu.

2 — KONTRAS

Perbedaan warna/terang-gelap antara teks dan latar agar informasi mudah dibaca, termasuk oleh pengguna dengan penglihatan terbatas.

3 — KONSISTENSI

Tombol, warna, dan ikon serupa dipakai berulang di seluruh aplikasi agar pengguna tidak perlu belajar ulang tiap layar.

4 — RUANG KOSONG

Jarak (whitespace) antar-elemen memberi "napas" visual agar tampilan tidak terasa sesak dan sulit dipindai mata.

Empat prinsip ini akan Anda pakai berulang-ulang sepanjang semester, jadi mari kita bahas satu per satu dengan contoh yang dekat dengan keseharian Anda. Hierarki visual terlihat jelas di aplikasi Traveloka, di mana tombol "Pesan Sekarang" jauh lebih besar dan berwarna mencolok dibanding teks syarat dan ketentuan yang kecil dan abu-abu. Kontras memastikan teks harga di aplikasi e-commerce tetap terbaca meski Anda memakai ponsel di bawah sinar matahari terik. Konsistensi terlihat ketika ikon keranjang belanja selalu berada di pojok yang sama di setiap halaman Tokopedia, sehingga Anda tidak perlu mencarinya ulang. Ruang kosong sering diremehkan pemula yang ingin memuat sebanyak mungkin informasi, padahal tampilan yang terlalu padat justru membuat pengguna kesulitan menemukan apa yang mereka cari — persis seperti etalase toko yang berantakan versus yang tertata rapi.

Hitung dari Nol: Rasio Kontras WCAG

Standar aksesibilitas WCAG (Web Content Accessibility Guidelines) mensyaratkan rasio kontras teks-latar minimal 4,5:1 (level AA). Mari uji tombol "Beli" putih di atas latar biru tua.

Langkah	Perhitungan	Nilai
Luminansi latar biru tua (L2, diberikan)	diukur dari warna	0,09
Luminansi teks putih (L1, diberikan)	diukur dari warna	1,00
Pembilang rasio	L1 + 0,05 = 1,00 + 0,05	1,05
Penyebut rasio	L2 + 0,05 = 0,09 + 0,05	0,14
Rasio kontras	1,05 ÷ 0,14	7,5 : 1

HASIL UJI

7,5 : 1

7,5 ≥ 4,5 (ambang AA) bahkan ≥ 7 (ambang AAA) → LULUS

Perhitungan ini terlihat rumit sekilas, tapi mari kita telusuri pelan-pelan karena ini adalah standar nyata yang dipakai auditor aksesibilitas di seluruh dunia, termasuk saat Google mengaudit aplikasi sebelum naik ke Play Store. Luminansi adalah ukuran seberapa terang sebuah warna, dengan angka nol untuk hitam pekat dan satu untuk putih penuh, dan nilai-nilai ini sudah saya berikan agar Anda fokus pada alur perhitungannya dulu. Rumus WCAG menambahkan konstanta 0,05 pada kedua warna sebelum dibagi, sebuah penyesuaian teknis yang tidak perlu Anda hafal rumus asalnya, cukup tahu cara pakainya. Hasil akhir 7,5 banding 1 berarti warna putih di atas biru tua ini tujuh setengah kali lebih terang dibanding latarnya, jauh melampaui ambang minimal 4,5 yang disyaratkan WCAG level AA untuk teks biasa. Coba Anda bayangkan kalau tombolnya memakai warna biru muda pucat — rasio kontrasnya pasti jauh lebih rendah dan berisiko tidak lulus, terutama bagi pengguna lanjut usia seperti Bu Sari pada persona kita tadi.

Coba Sendiri: Uji Kontras Warna Tombol Anda

Ubah warna teks dan latar, lalu amati apakah rasio kontrasnya lulus ambang AA 4,5:1.

Tipografi: Skala Ukuran Teks

Ukuran huruf yang berjenjang membantu mata pengguna langsung tahu mana judul, mana isi, tanpa harus membaca satu-satu.

JUDUL LAYAR

24–32px

Contoh: "Katalog Produk" di bagian atas halaman.

ISI/BODI

14–16px

Contoh: deskripsi produk, keterangan harga.

KETERANGAN KECIL

11–12px

Contoh: syarat & ketentuan, label stok.

Glosarium — hierarki teks: pengaturan ukuran, ketebalan, dan warna huruf secara berjenjang agar pengguna dapat memindai informasi penting lebih dulu tanpa membaca seluruh teks.

Coba Sendiri: Susun Skala Tipografi Anda

Ubah ukuran dasar dan rasio skala, lalu amati bagaimana jenjang judul, isi, dan keterangan kecil menyesuaikan.

Grid System: Kerangka 8pt

Desainer profesional menyusun elemen di atas kerangka kelipatan 8 piksel (8pt grid) agar jarak antar-elemen terasa rapi dan konsisten, bukan asal-asalan.

Semua jarak — padding, margin, celah antar-kartu — dipilih dari kelipatan 8: 8px, 16px, 24px, 32px — agar tampilan terasa "presisi" tanpa perlu menebak-nebak angka.

Bayangkan Anda menata rak minimarket seperti Indomaret: setiap produk punya jarak yang sama persis dari rak sebelahnya, bukan sembarangan, sehingga terasa rapi dan mudah dipindai mata pembeli. Grid 8 piksel bekerja dengan prinsip serupa di layar digital — daripada menebak-nebak jarak 13 piksel atau 17 piksel yang terlihat acak, desainer profesional selalu memilih dari daftar kelipatan delapan seperti 8, 16, 24, atau 32 piksel. Pada diagram ini, tiga kartu produk berjajar dengan celah 16 piksel antar-kartu, dan baris info di bawahnya memakai padding 16 piksel di semua sisi, sehingga seluruh tampilan terasa seragam meski Anda tidak menyadarinya secara sadar. Aturan ini akan sangat membantu Anda nanti saat menulis CSS di Pertemuan 3, karena Anda tinggal memakai angka-angka baku ini alih-alih menebak ulang setiap kali membuat komponen baru.

Hitung dari Nol: Ukuran Target Sentuh

Google Material Design mensyaratkan target sentuh (tombol/ikon) minimal 48dp agar nyaman ditekan jari tanpa salah pencet. Mari susun ukuran tombol "Tambah ke Keranjang".

Langkah	Perhitungan	Nilai
Ukuran ikon inti (ditetapkan desainer)	ketentuan awal	24dp
Padding atas ditambahkan	+ 12dp	36dp
Padding bawah ditambahkan	+ 12dp	48dp
Konversi ke piksel layar (densitas 3x)	48dp × 3	144px

HASIL AKHIR

48dp

48dp = ambang minimal Google → LULUS (pas di batas aman)

Latihan ini menjawab pertanyaan praktis yang sering muncul: seberapa besar sebenarnya sebuah tombol harus dibuat? Kita mulai dari ikon keranjang belanja seukuran 24dp, satuan "dp" atau density-independent pixel ini sengaja dipakai desainer agar ukuran tetap konsisten di berbagai ukuran layar ponsel. Karena ikon 24dp saja terlalu kecil untuk ditekan nyaman oleh jari, kita tambahkan padding atau ruang kosong 12dp di atas dan 12dp di bawah, sehingga total tinggi area yang bisa disentuh menjadi 48dp, persis memenuhi ambang minimal yang ditetapkan Google Material Design. Baris terakhir mengubah satuan dp menjadi piksel sungguhan di layar berdensitas tiga kali lipat, yang umum dipakai ponsel kelas menengah ke atas seperti Samsung Galaxy A-series, hasilnya 144 piksel. Kalau Anda membuat tombol lebih kecil dari 48dp, misalnya menyamakan seluruh area tombol dengan ukuran ikonnya saja di 24dp, pengguna dengan jari besar seperti kebanyakan pengguna dewasa akan sering salah pencet — inilah mengapa ukuran ini bukan sekadar estetika, tapi soal kenyamanan nyata.

Coba Sendiri: Uji Ukuran Target Sentuh

Ubah ukuran ikon dan padding, lalu amati apakah total area sentuhnya memenuhi ambang 48dp Google Material Design.

Wireframe → Mockup → Prototype

Rancangan aplikasi berkembang bertahap, dari sketsa kasar sampai tiruan yang bisa "dicoba" — ini disebut spektrum fidelity (tingkat kemiripan dengan produk akhir).

TAHAP 1 — WIREFRAME

Sketsa rangka hitam-putih, hanya kotak dan garis. Fokus pada tata letak, bukan warna atau gambar.

TAHAP 2 — MOCKUP

Tampilan penuh warna, font, dan ikon asli — terlihat seperti aplikasi jadi, tapi belum bisa disentuh/diklik.

TAHAP 3 — PROTOTYPE

Mockup yang tombolnya sudah bisa diklik dan berpindah layar, disimulasikan tanpa menulis kode sungguhan.

Glosarium — fidelity: tingkat kemiripan sebuah rancangan dengan produk akhir; wireframe berfidelity rendah, prototype berfidelity tinggi.

Tiga istilah ini sering tertukar oleh pemula, jadi mari kita luruskan dengan analogi membangun rumah. Wireframe seperti denah rumah dari arsitek: hanya garis dan kotak menunjukkan di mana kamar tidur dan dapur, tanpa warna cat atau jenis lantai, tujuannya murni memastikan tata letak ruang sudah masuk akal. Mockup seperti gambar render 3D rumah lengkap dengan warna cat dan jenis lantai yang sudah dipilih, terlihat sangat mirip rumah jadi, tapi Anda tetap belum bisa membuka pintu atau menyalakan lampunya. Prototype seperti rumah contoh yang pintunya sungguhan bisa dibuka dan lampunya bisa dinyalakan untuk simulasi, meski dindingnya masih dari bahan sementara, bukan bahan final. Untuk proyek Anda, hari ini kita akan berhenti di tahap wireframe dulu karena fokusnya memastikan tata letak logis, sebelum Pertemuan 3 Anda benar-benar menulis kode HTML dan CSS yang menjadi "bahan bangunan" sungguhan.

Bagian 3 dari 3

Dari Rancangan ke Kode: Tools & Alur Kerja

Bagaimana wireframe hari ini menjadi jembatan menuju komponen HTML/CSS/JavaScript Pertemuan 3.

Kenalan dengan Figma

Figma adalah alat desain berbasis web yang paling banyak dipakai industri untuk membuat wireframe, mockup, hingga prototype — gratis untuk mahasiswa dan bisa dipakai langsung dari peramban.

Fitur Dasar yang Akan Anda Pakai

Frame: kanvas berukuran layar ponsel/desktop tempat Anda menggambar tampilan.
Shape & Text tool: menggambar kotak, lingkaran, dan menulis label — dasar membuat wireframe.
Component: elemen (misalnya tombol) yang bisa dipakai berulang di banyak layar sekaligus, mirip konsep komponen di React Native yang akan Anda pelajari nanti.
Prototype mode: menghubungkan antar-frame dengan panah agar bisa "diklik" seperti aplikasi sungguhan.

Anda tidak perlu mahir Figma hari ini — cukup mampu menggambar kotak, garis, dan teks sederhana untuk latihan wireframe.

Figma sengaja saya kenalkan sekilas saja hari ini karena fokus Pertemuan 2 adalah konsep desain, bukan kemahiran alat, tapi Anda perlu tahu bahwa hampir seluruh industri aplikasi di Indonesia, dari startup kecil sampai Gojek dan Tokopedia, memakai Figma sebagai standar kerja desain mereka. Konsep frame di Figma seperti kanvas kosong berbentuk layar ponsel yang akan Anda isi dengan kotak dan teks. Konsep component sangat mirip dengan apa yang akan Anda pelajari sebagai komponen React Native di Pertemuan 3 dan seterusnya — sekali Anda membuat tombol "component" di Figma, Anda bisa memakainya berulang kali di semua layar tanpa menggambar ulang, persis seperti konsep pemakaian ulang kode nanti. Untuk latihan hari ini, Anda cukup memakai kertas dan pensil atau alat gambar sederhana apa pun, karena yang dinilai adalah logika tata letaknya, bukan kerapian digitalnya.

Alur Kerja: Dari Desainer ke Pengembang

Glosarium — design handoff: proses penyerahan spesifikasi desain (ukuran, warna, jarak) dari desainer ke pengembang agar kode yang ditulis sesuai persis dengan rancangan.

Diagram ini merangkum perjalanan sebuah ide dari sketsa kasar hingga siap dikodekan, dan inilah alur yang akan Anda jalani sendiri sepanjang semester ini. Wireframe hari ini adalah kotak-kotak kasar yang memastikan tata letak logis; minggu-minggu berikutnya Anda akan mewarnainya menjadi mockup dengan palet warna dan font yang sudah dipilih matang. Prototype menambahkan simulasi interaksi, seperti panah yang menghubungkan layar login ke layar beranda saat tombol masuk ditekan, sehingga tim bisa menguji alur sebelum satu baris kode pun ditulis. Tahap terakhir, handoff, adalah momen ketika desainer memberi tahu pengembang angka pasti — misalnya tombol ini lebar 200 piksel, warnanya kode heksadesimal tertentu, jaraknya 16 piksel dari tepi — sehingga kode yang Anda tulis di Pertemuan 3 nanti benar-benar sesuai dengan yang dirancang, bukan tebakan sendiri.

Latihan Praktik (30 Menit)

Buat wireframe kasar (di kertas atau alat gambar sederhana) untuk satu layar utama aplikasi bisnis digital yang Anda rumuskan di Pertemuan 1.

Instruksi

Tulis satu persona singkat (nama, usia, kebutuhan utama) sebagai target pengguna layar ini.
Gambar tata letak dengan kotak & garis saja — tanpa warna, fokus pada hierarki dan grid.
Pastikan ukuran tombol utama cukup besar untuk target sentuh (bandingkan dengan ambang 48dp).
Beri label singkat di tiap elemen (contoh: "Judul Produk", "Tombol Beli").

Kerjakan berpasangan. Dosen akan berkeliling memeriksa hasil dan menjawab pertanyaan.

Rangkuman Konsep Kunci

TAMPILAN VISUAL

Kontras, hierarki, tipografi, grid 8pt — kaidah teknis agar tampilan jelas dan rapi.

PENGALAMAN PAKAI

Persona, design thinking, wireframe→prototype — proses memastikan aplikasi mudah dan menyenangkan dipakai.

UI dan UX yang baik bukan hasil kebetulan — keduanya lahir dari proses terstruktur dan standar terukur (kontras ≥ 4,5:1, target sentuh ≥ 48dp) yang bisa Anda hitung, bukan hanya "dirasa bagus".

Sebelum kita tutup, mari Anda rangkum sendiri dalam satu kalimat: UI adalah apa yang dilihat mata, UX adalah apa yang dirasakan tangan dan pikiran saat memakai aplikasi, dan keduanya harus dirancang bersamaan, tidak bisa dipisah. Anda sudah belajar dua angka konkret yang bisa langsung dipakai menguji rancangan sendiri: rasio kontras minimal 4,5 banding 1 dan ukuran target sentuh minimal 48dp, keduanya bukan pendapat pribadi melainkan standar industri yang terukur. Wireframe yang Anda buat hari ini akan menjadi fondasi langsung bagi kode HTML dan CSS yang akan Anda tulis mulai Pertemuan 3, jadi simpan baik-baik hasil latihan Anda. Pastikan Anda nyaman membedakan UI dan UX serta mengingat prinsip kontras, hierarki, konsistensi, dan ruang kosong sebelum kita lanjut ke penulisan kode sungguhan minggu depan.

Penutup & Tugas Mandiri

Tugas Sebelum Pertemuan 3

Rapikan wireframe latihan hari ini menjadi minimal 2 layar (contoh: beranda & detail produk).
Tuliskan satu persona lengkap untuk aplikasi proyek Anda, unggah bersama wireframe ke repository.
Baca ulang glosarium UI/UX minggu ini sebagai bekal menulis HTML/CSS Pertemuan 3.

Ada pertanyaan tentang UI, UX, atau wireframe Anda? Silakan diskusikan sekarang atau bawa ke sesi konsultasi.

Terima Kasih atas partisipasi aktif Anda hari ini, terutama saat mencoba sendiri menggambar wireframe dan menghitung rasio kontras tadi. Sebelum pertemuan berikutnya, pastikan Anda merapikan wireframe menjadi minimal dua layar yang saling terhubung secara logis, misalnya dari halaman beranda menuju halaman detail produk, karena inilah yang akan langsung Anda terjemahkan menjadi kode HTML dan CSS. Cobalah juga melengkapi persona Anda dengan detail yang lebih kaya, karena semakin jelas Anda membayangkan calon pengguna, semakin mudah Anda mengambil keputusan desain nanti. Kalau ada bagian yang masih membingungkan, terutama soal perbedaan UI dan UX atau cara menghitung target sentuh, jangan sungkan bertanya sekarang selagi materinya masih segar di ingatan Anda, karena Pertemuan 3 akan langsung bergerak ke penulisan kode berdasarkan wireframe yang Anda buat hari ini.