Belajar UI/UX Design - UI vs UX: Konsep & Arsitektur
Memahami perbedaan dan keterkaitan antara UI (antarmuka: visual, layout, interaksi) dan UX (pengalaman menyeluruh: riset, alur, emosi), lalu menelusuri arsitektur proses desain melalui Double Diamond, design thinking, dan timeline pengembangan produk dari riset hingga maintenance.
#Pendahuluan
Setelah di episode 1 kita menelusuri sejarah dan alasan UI/UX dibutuhkan, pada episode ini kita memetakan konsep dan arsitektur di balik keduanya. Banyak tim terjebak perdebatan "UI dulu atau UX dulu?" — padahal pertanyaan yang benar adalah bagaimana keduanya bekerja sebagai satu sistem.
Episode ini penting karena menjadi kerangka berpikir untuk semua episode berikutnya. Ketika kalian membuat wireframe (episode 7) atau memilih warna (episode 9), kalian selalu bekerja di dalam arsitektur ini: mulai dari masalah yang jelas, lalu menyempit ke solusi yang teruji.
#UI vs UX: Dua Sisi dari Satu Produk
#UI (User Interface)
UI adalah wujud — apa yang terlihat dan disentuh pengguna: layout, warna, tipografi, ikon, tombol, animasi. UI menjawab pertanyaan "seperti apa rupanya dan bagaimana ia merespons?". Keputusan UI bersifat visual dan interaktif: apakah tombol utama berwarna hijau atau biru, apakah menu memakai sidebar atau drawer.
#UX (User Experience)
UX adalah pengalaman total — seluruh perjalanan pengguna sebelum, saat, dan sesudah memakai produk: riset, arsitektur informasi, alur tugas, emosi, dan kepuasan. UX menjawab "apakah pengguna bisa menyelesaikan tujuannya dengan mudah dan merasa baik?". Keputusan UX sering tidak terlihat di layar: alur pembayaran yang menghilangkan satu langkah adalah keputusan UX, bukan UI.
#Analogi Restoran
Bayangkan sebuah restoran. UI adalah dekorasi ruangan, tata meja, dan tampilan menu — enak dilihat dan nyaman. UX adalah seluruh pengalaman makan: mudahnya memesan, lamanya menunggu, keramahan pelayan, sampai rasa puas saat pulang. Restoran dengan dekorasi indah tapi pelayanan buruk akan kehilangan pelanggan — sama seperti aplikasi cantik yang membingungkan.
| Aspek | UI | UX |
|---|---|---|
| Fokus | Tampilan & interaksi | Pengalaman & hasil |
| Pertanyaan | "Seperti apa dan bagaimana?" | "Mengapa, untuk siapa, dan bagaimana rasanya?" |
| Tools | Figma (visual), prototyping | Riset, analitik, usability test |
| Metrik | Konsistensi visual, polish | Task success, kepuasan, retensi |
| Output | Layout, warna, komponen | Alur, sitemap, persona, insight |
#Arsitektur Proses: Double Diamond
Double Diamond (British Design Council) adalah model paling berpengaruh untuk proses desain. Ia menggambarkan dua siklus divergen (melebar mencari opsi) dan konvergen (menyempit memilih) — bentuknya seperti dua berlian:
Tahapannya:
- Discover — melebar: riset pengguna, observasi, data, tanpa prasangka. Tujuannya memahami masalah secara luas.
- Define — menyempit: sintesis riset jadi problem statement yang tajam. Affinity diagram (episode 4) adalah senjata utama di sini.
- Develop — melebar lagi: ideasi, sketsa, wireframe, berbagai kemungkinan solusi.
- Deliver — menyempit: prototipe terbaik diuji, disempurnakan, dan dirilis.
Kunci Double Diamond: jangan melompat ke solusi sebelum memahami masalah. Kesalahan paling mahal di industri adalah mulai coding/mendesain layar ketika problem statement masih kabur.
#Design Thinking
Design Thinking adalah metode praktis dengan lima tahap yang sangat mirip dengan Double Diamond, tapi lebih berorientasi eksekusi:
- Empathize — memahami pengguna lewat riset (≈ Discover).
- Define — merumuskan masalah dari temuan (≈ Define).
- Ideate — menghasilkan banyak ide solusi (≈ Develop, bagian awal).
- Prototype — membangun versi murah untuk diuji.
- Test — menguji dengan pengguna, lalu iterasi (kembali ke tahap sebelumnya bila perlu).
Design Thinking menekankan iterasi: hasil test selalu mengirim kita kembali ke tahap mana pun. Ini yang membuatnya cocok untuk tim cepat seperti startup — dan menjadi kerangka kerja yang kita pakai untuk studi kasus KasirKita mulai episode 3.
#Process Timeline Produk
Untuk melihat di mana desainer bekerja, berikut timeline pengembangan produk secara umum:
| Fase | Aktivitas Utama | Episode Terkait |
|---|---|---|
| Discovery | Riset, kompetitor, opportunity | 4, 5 |
| Definisi | Persona, journey, IA | 5, 6 |
| Desain | Wireframe, visual, prototipe | 7-11 |
| Sistematisasi | Design system, tokens | 12 |
| Validasi | Usability test, metrik, A/B | 15-17 |
| Produksi | Handoff, iterasi, ops | 22, 25 |
UI/UX tidak berhenti saat produk rilis — ia terus hidup lewat data dan iterasi. Ini sebabnya metrik (episode 16) dan testing (episode 15) diposisikan sebagai siklus berkelanjutan, bukan proyek sekali jalan.
Warning
Jangan menganggap Double Diamond dan design thinking sebagai dokumen proses yang kaku. Tim yang sehat memakai keduanya sebagai guidance, menyesuaikan kedalaman riset dengan ukuran risiko. Untuk fitur kecil di aplikasi internal, satu sesi interview + prototype cepat sudah cukup — bukan riset tiga bulan.
#Penutup
Pada episode 2 ini, kalian telah memahami konsep UI vs UX dan arsitektur proses yang menaungi keduanya.
Inti yang harus dibawa pulang:
- UI adalah wujud (visual, layout, interaksi); UX adalah pengalaman total (riset, alur, emosi). Keduanya saling melengkapi.
- Double Diamond memetakan proses divergen-konvergen: Discover → Define → Develop → Deliver.
- Design thinking menyediakan lima tahap praktis: Empathize → Define → Ideate → Prototype → Test, dengan iterasi di jantungnya.
- Desain produk mengalir dalam timeline: discovery → desain → validasi → produksi, dan terus berputar setelah rilis.
Di episode 3 selanjutnya kita akan mempraktikkan design thinking & design process — menyusun design brief dan process plan untuk studi kasus KasirKita, lengkap dengan tahapan riset → sintesis → ideasi → prototipe → test. Sampai jumpa di episode 3!