Pengayaan
Apa itu UI/UX Design?
A. DESAIN UI (USER INTERFACE - User Interface)
Tujuan Pembelajaran: Mahasiswa dapat membuat User Interface yang menarik secara visual, konsisten, dan fungsional di Figma yang selaras dengan identitas merek dan ekspektasi pengguna.
Desain UI fokus pada estetika dan interaksi — "tampilan dan nuansa" antarmuka. Berbeda dari UX yang fokus pada pengalaman keseluruhan dan pemecahan masalah.
Komponen Desain UI di Figma
1. Desain Visual & Strategi Warna
Warna bukan hanya estetika — ini alat strategis untuk memandu perhatian, mengomunikasikan status, dan membangkitkan emosi. Di Figma:
Gunakan color styles untuk mempertahankan konsistensi
Terapkan psikologi warna: biru untuk kepercayaan, merah untuk urgensi, hijau untuk kesuksesan
Pastikan compliance kontras: rasio kontras warna minimal 4.5:1 untuk teks normal, 3:1 untuk teks besar (WCAG 2.1)
Maksimum 6-7 warna per desain untuk menghindari pengalaman visual yang berlebihan
Uji desain menggunakan plugin Figma seperti Stark untuk mensimulasikan buta warna
2. Tipografi & Keterbacaan
Tipografi adalah arsitektur yang tidak terlihat yang menentukan keterbacaan dan hierarki visual. Di Figma:
Pilih maksimum 2 keluarga typeface (1 untuk judul, 1 untuk body)
Buat skala tipografi: H1 (48px), H2 (36px), H3 (24px), body (14px-16px), caption (12px)
Gunakan text styles untuk konsistensi: buat style untuk setiap level judul, body text, label tombol
Pastikan ukuran font minimum 14px untuk teks body untuk keterbacaan
Pertahankan line-height yang cukup (1.5x untuk teks body, 1.2x untuk judul)
3. Tata Letak & Sistem Spacing
Spacing yang konsisten menciptakan kohesi visual dan membuat desain dapat diprediksi untuk pengguna. Di Figma:
Tetapkan skala spacing: 8px, 16px, 24px, 32px, 48px (kelipatan 8 disarankan)
Gunakan fitur auto-layout untuk mempertahankan spacing konsisten secara otomatis
Buat grid system (grid 12-kolom direkomendasikan untuk desain responsif)
Dokumentasikan aturan spacing dalam sistem desain
4. Desain Komponen & Sistem Desain
Desain UI modern mengandalkan komponen yang dapat digunakan kembali — ini memungkinkan konsistensi, efisiensi, dan skalabilitas. Di Figma:
Buat komponen utama: tombol (primary, secondary, state), input form, kartu, navigasi, modal
Tentukan varian komponen: untuk setiap komponen, buat varian (ukuran: kecil/menengah/besar; state: default/hover/active/disabled)
Properti komponen: gunakan properti komponen untuk kustomisasi yang lebih mudah
Dokumentasi sistem desain: buat panduan komprehensif yang mendokumentasikan: anatomi komponen, aturan penggunaan, boleh dan jangan boleh, konvensi penamaan seperti kode untuk handoff ke developer
5. Desain Interaksi (Microinteraction & Animasi)
Microinteraction adalah momen kecil dalam antarmuka yang memandu pengguna dan memberikan umpan balik. Di Figma:
Status hover tombol (perubahan warna, perubahan skala)
Status loading (spinner, skeleton screens)
Feedback sukses/error (perubahan warna, ikon, toast notifications)
Animasi (transisi entrance, efek hover, micro-animasi)
Prototipe interaksi menggunakan fitur prototyping Figma untuk menunjukkan perilaku yang dimaksud
Praktik Terbaik Sistem Desain di Figma
Tetapkan hierarki: Warna primer (tindakan utama), warna sekunder (tindakan alternatif), warna netral (teks, latar belakang)
Konvensi penamaan: Nama yang jelas dan semantik (button-primary-bg, spacing-16, typography-body-regular)
Dokumentasi: Panduan komprehensif dengan penggunaan komponen, pola, pengecualian
Alur kerja kolaboratif: Bagikan file sistem desain dengan seluruh tim; tetapkan proses persetujuan untuk perubahan
Siap untuk handoff: Siapkan sistem desain untuk integrasi developer; pastikan penamaan sesuai dengan pola kode
B. DESAIN UX (USER EXPERIENCE - User Experience)
Tujuan Pembelajaran: Mahasiswa dapat melakukan riset pengguna, membuat arsitektur informasi, merancang alur pengguna, membuat prototipe solusi, dan memvalidasi desain dengan metodologi pengujian.
UX adalah bagian "strategi dan riset" dari desain — pendekatan berbasis data untuk memahami kebutuhan pengguna dan memvalidasi efektivitas solusi. Berbeda dari UI yang fokus pada estetika antarmuka.
Komponen Metodologi UX
1. Riset Pengguna (Fase Empati)
Pemahaman mendalam tentang pengguna target adalah fondasi UX yang baik. Di Figma:
Metode Riset:
Kualitatif: Wawancara pengguna, studi observasional, kontekstual inquiry
Kuantitatif: Survei, analitik, A/B testing
Generatif: Riset open-ended untuk menemukan kebutuhan pengguna
Evaluatif: Pengujian dengan desain yang sudah ada untuk memvalidasi solusi
Deliverable di Figma:
Rencana riset: Tujuan, metode, kriteria peserta, timeline
Empathy Map: Karakteristik pengguna, pain points, motivasi, tujuan (buat menggunakan FigJam)
User Persona: 2-3 persona representatif berdasarkan temuan riset
Ringkasan insight riset: Temuan kunci yang didokumentasikan dengan bukti/kutipan
2. Arsitektur Informasi (IA) & Alur Pengguna
Mengorganisir konten secara logis sehingga pengguna dapat menemukan informasi secara intuitif adalah kritis. Di Figma:
Deliverable IA:
Site map/App map: Visualisasi hierarki konten
User flow: Alur langkah demi langkah untuk skenario pengguna kunci (misalnya, "bagaimana pengguna menyelesaikan pembelian")
Task flow: Alur terperinci yang menunjukkan titik keputusan dan jalur alternatif
Mental model: Bagaimana pengguna mengharapkan informasi diatur
Tools Figma:
Gunakan frame untuk mengatur diagram alur
Gunakan komponen untuk konsistensi (diamond keputusan, kotak aksi, endpoint)
Gunakan anotasi untuk mendokumentasikan logika alur
Gunakan prototyping untuk menunjukkan interaksi alur
3. Wireframing (Desain Rendah-Fideliti)
Wireframe adalah tata letak kerangka yang fokus pada konten, fungsionalitas, perilaku — bukan estetika. Di Figma:
Praktik terbaik wireframe:
Skema warna skala abu-abu untuk fokus pada struktur, bukan estetika
Bentuk sederhana dan styling minimal
Pelabelan yang jelas untuk setiap elemen
Termasuk anotasi yang menjelaskan fungsionalitas
Tunjukkan variasi responsif (mobile, tablet, desktop)
Alur kerja Figma:
Buat wireframe frame untuk setiap halaman/layar kunci
Gunakan persegi panjang sederhana untuk mewakili blok konten
Tambahkan label teks untuk semua elemen interaktif
Dokumentasikan interaksi dalam file prototipe terpisah
Sertakan catatan/anotasi untuk keputusan desain
4. Prototyping & Pengujian Pengguna
Membuat prototipe interaktif untuk diuji dengan pengguna nyata sangat penting untuk memvalidasi asumsi UX. Di Figma:
Prototyping di Figma:
Komponen interaktif: Buat state (default, hover, active, disabled)
Prototyping flows: Hubungkan frame dengan interaksi (click, hover, drag)
Animated transitions: Tambahkan micro-animation untuk memandu perhatian
Overlay interactions: Dialog modal, dropdown, menu
Test prototypes: Bagikan di Figma untuk pengujian pengguna (viewers dapat berinteraksi tanpa mengedit)
Metode Pengujian:
Moderated usability testing: Peneliti hadir selama pengujian (minimum 5-8 peserta)
Unmoderated testing: Pengguna menguji secara independen; data dikumpulkan secara otomatis
A/B testing: Uji 2 variasi desain dengan kelompok pengguna serupa
Heatmap & session recordings: Pahami pola perilaku pengguna
Analisis:
Identifikasi masalah kegunaan (pengguna stuck, bingung, tugas gagal)
Dokumentasikan umpan balik kualitatif (kutipan verbatim, observasi)
Prioritaskan perbaikan berdasarkan severity dan frekuensi
Iterasi desain berdasarkan temuan
Tidak ada komentar:
Posting Komentar