UX Fundamental
Modul ini menggeser fokus dari 'cantik' ke 'masuk akal'. Kamu belajar memetakan tujuan user dan bisnis, menyusun user flow dan task flow, information architecture, wireframing, sampai menulis UX writing untuk berbagai state.
Tujuan Modul
User paham bahwa UX bukan cuma tampilan, tapi alur dan pengalaman.
- Memisahkan user goal dan business goal lalu mencari titik temunya.
- Membuat user flow dan task flow yang jelas.
- Menyusun information architecture yang mudah dinavigasi.
- Mendesain semua state: loading, empty, error, success.
User Flow & Task Flow: Mendesain Perjalanan, Bukan Layar
28 menit
Tujuan Lesson
User goal vs business goal
User goal adalah apa yang ingin dicapai user (cepat checkout). Business goal adalah apa yang diinginkan bisnis (menaikkan konversi). Desain yang baik adalah jembatan: membantu user sekaligus mendukung bisnis tanpa memanipulasi.
User flow vs task flow
User flow menggambarkan seluruh kemungkinan jalur termasuk percabangan dan error. Task flow fokus pada satu jalur ideal untuk menyelesaikan satu tugas. Mulai dari task flow agar fokus, lalu kembangkan ke user flow.
Elemen dasar flow
Notasi sederhana yang cukup untuk komunikasi:
- Start: titik masuk.
- Action: aksi user (klik, isi form).
- Decision: percabangan ya/tidak.
- Success: tujuan tercapai.
- Error: jalur gagal yang harus dirancang juga.
Information architecture
IA adalah cara informasi dikelompokkan dan dinamai. Struktur yang baik membuat user menebak dengan benar di mana sesuatu berada. Gunakan label sesuai bahasa user, bukan bahasa internal tim.
Contoh Baik
Flow checkout yang menampilkan jalur sukses sekaligus menangani kartu gagal dan stok habis, dengan pesan yang membantu user melanjutkan.
✕ Contoh Buruk
Flow yang hanya menggambar 'happy path'. Saat pembayaran gagal, user terjebak tanpa petunjuk apa yang harus dilakukan.
Kesalahan Umum Pemula
- ⚠Langsung mendesain UI tanpa memetakan flow.
- ⚠Hanya merancang happy path, melupakan error.
- ⚠Label navigasi memakai istilah internal tim.
- ⚠Terlalu banyak langkah untuk satu tugas sederhana.
Designer Mahal Berpikir Begini
Coba Latihan
- Buat user flow aplikasi booking tiket lengkap dengan error.
- Buat task flow login yang ideal.
- Gambar information architecture tree untuk aplikasi catatan.
Checklist Lesson
Uji Pemahaman
Apa beda user flow dan task flow?
Wireframe & UX Writing untuk Semua State
24 menit
Tujuan Lesson
Low-fi vs high-fi wireframe
Low-fidelity fokus pada struktur dan hierarki tanpa warna/detail; cepat dibuat dan mudah diubah. High-fidelity menambah detail visual mendekati final. Mulai low-fi untuk menguji ide sebelum berinvestasi pada detail.
Empat state wajib
Setiap layar yang menampilkan data harus merancang empat state:
- Loading: skeleton atau indikator yang menenangkan.
- Empty: jelaskan kenapa kosong dan beri satu aksi.
- Error: jelaskan masalah dan cara memperbaiki.
- Success: konfirmasi singkat yang jelas.
UX writing yang membantu
Microcopy bukan hiasan; ia bagian dari UX. Tulis singkat, manusiawi, dan berorientasi aksi. Hindari istilah teknis dan jangan menyalahkan user.
Form UX
Form panjang menakutkan. Pecah jadi langkah, beri label jelas di atas field, tampilkan error inline di dekat field, dan jelaskan format yang diminta sebelum user salah.
Contoh Baik
Empty state daftar tugas: ilustrasi ramah, teks 'Belum ada tugas. Tambahkan tugas pertamamu untuk mulai.' dan tombol 'Tambah Tugas'.
✕ Contoh Buruk
Empty state hanya menampilkan tulisan 'No data' tanpa konteks dan tanpa aksi, membuat user bingung harus apa.
Kesalahan Umum Pemula
- ⚠Melompat langsung ke high-fidelity.
- ⚠Melupakan loading dan empty state.
- ⚠Pesan error menyalahkan user ('Input Anda salah').
- ⚠Label form ditaruh di dalam field sebagai placeholder saja.
Designer Mahal Berpikir Begini
Coba Latihan
- Buat wireframe low-fi dashboard SaaS.
- Redesign form panjang menjadi multi-step yang ramah.
- Tulis microcopy untuk loading, empty, error, dan success.
Checklist Lesson
Uji Pemahaman
Kapan sebaiknya memakai wireframe low-fidelity?
Project Modul
UX Blueprint Aplikasi Booking
Buat blueprint UX lengkap untuk aplikasi booking: user flow, IA, wireframe low-fi, dan microcopy untuk semua state.
Deliverables:
- User flow dengan jalur sukses dan error.
- Information architecture tree.
- Wireframe low-fi 5-8 layar.
- Kumpulan microcopy untuk setiap state.