# Panduan Desain UI/UX Portal Anggota (Member Portal) *Koperasi Konsumen Syariah Berkah Solusi Madani (Bermadani)* *Standar Desain Berbasis Apple Human Interface Guidelines (HIG)* --- ## 1. Visi & Filosofi Desain Portal Anggota Koperasi Bermadani dirancang dengan paradigma **"Warm Digital Fintech & Personal Wallet Companion"**. Tujuan utamanya adalah mengubah persepsi koperasi konvensional yang identik dengan **birokrasi rumit, formulir fotokopi berbelit-belit, dan tabel akuntansi yang kaku** menjadi pengalaman digital yang **ringan, transparan, elegan, dan instan** layaknya produk ekosistem Apple (seperti *Apple Wallet, Apple Health, dan macOS Settings*). ### 3 Pilar Utama Apple HIG di Portal Anggota: 1. **Clarity (Kejelasan)**: - Tipografi yang hierarkis dan tenang. - Angka finansial selalu disajikan secara lugas menggunakan *tabular numbers* (`tabular-nums font-mono`) agar mudah dipindai mata dalam sepersekian detik. - Bahasa manusia yang ramah (*Human Language*), bukan istilah teknis database atau perbankan yang mengintimidasi. 2. **Deference (Rasa Hormat pada Konten)**: - Antarmuka tidak boleh mencuri perhatian dari esensi informasi itu sendiri (saldo simpanan, hak SHU, dan status dokumen). - Hindari dekorasi artifisial, gradasi warna-warni yang tidak perlu, atau animasi berlebihan. Konten finansial adalah bintang utamanya. 3. **Depth (Kedalaman & Materialitas)**: - Menggunakan material visual yang halus: *glassmorphism* tipis (`backdrop-blur-md`), kartu dengan sudut lengkung lembut (`rounded-3xl` / `rounded-2xl`), dan *hairline borders* (`border-slate-200/80`). - Pengelompokan data berbasis kontainer tertutup (*Grouped Inset Lists*) untuk memisahkan domain informasi secara teratur. --- ## 2. Anti-Slop Guardrails: Menghindari Pola Generative AI Desain antarmuka Portal Anggota memiliki batasan ketat (*guardrails*) untuk mencegah degradasi visual menjadi *AI-generated template slop*: ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ ATURAN ANTI-SLOP DESAIN │ ├─────────────────────────────────────────────────────────────────────────────┤ │ ❌ DILARANG: │ │ • Membungkus ikon menu/dropdown di dalam kotak warna pastel (bg-blue-50, │ │ bg-green-50, dsb). │ │ • Mewarnai menu aksi secara pelangi (rainbow palette). │ │ • Menampilkan tabel spreadsheet besar (Excel-like) di layar mobile. │ │ • Menggunakan badge status mencolok di dalam baris menu dropdown. │ │ • Menggunakan istilah sistem mentah (misal: "TRX_SETOR_WJB_2026"). │ │ │ │ ✅ WAJIB: │ │ • Ikon telanjang monokrom (Naked SF Symbols / bare glyphs 16-18px). │ │ • Monochromatic base: teks slate-850/900, ikon slate-400/500. │ │ • Warna khusus HANYA untuk status semantik murni (Emerald, Amber, Rose). │ │ • Ritme 1 baris yang konsisten dan rapi pada menu aksi (macOS standard). │ │ • Progressive Disclosure: sajikan ringkasan dulu, buka detail saat diminta.│ └─────────────────────────────────────────────────────────────────────────────┘ ``` --- ## 3. Prinsip Visual & Sistem Komponen Apple HIG ### A. Penggunaan Ikonografi Telanjang (*Naked Icons*) - Pada komponen interaktif seperti **Menu Dropdown, Context Menu, Action Sheet, dan Popover**, seluruh ikon harus **telanjang tanpa kotak background**. - Ukuran standar: `w-4 h-4` (16px) dengan `strokeWidth={2}`. - Warna: `text-slate-400`, berubah menjadi `text-slate-600` saat baris di-hover. - Penempatan: Rata kiri dengan spasi `gap-2.5` ke label teks. ### B. Ritme Satu Baris & Metadata Sekunder (*Single-Line Rhythm*) Setiap item aksi di menu dropdown harus memiliki tinggi dan ritme baris yang seragam: - **Kiri**: Ikon telanjang + Label teks (`text-xs font-medium text-slate-700`). - **Kanan**: Format berkas atau shortcut sekunder dalam tipografi tabular netral (`text-[10px] font-mono font-semibold text-slate-400`). ### C. Pemisahan Logis Berkategori (*Semantic Sectioning*) Jika menu memiliki lebih dari 2 fungsi yang berbeda sifatnya (misal: dokumen perorangan vs dokumen arsip massal), bagi menjadi bagian-bagian terpisah menggunakan: 1. Header kategori huruf kapital kecil: `text-[10px] font-bold text-slate-400 uppercase tracking-wider`. 2. Garis pembatas tipis (*hairline divider*): `border-t border-slate-100 my-1`. ### D. Apple Grouped Inset Lists Untuk halaman profil, akun, dan pengaturan, gunakan pola **Grouped Inset List**: - Kontainer kartu berbentuk kapsul besar: `rounded-3xl border border-slate-200/60 bg-white/90 backdrop-blur-xl`. - Garis pemisah internal menjorok ke dalam (*indented divider*), dimulai setelah posisi ikon (72px dari kiri) sehingga tidak memotong tepi kiri layar. - Umpan balik sentuhan mikro (*tactile feedback*): `active:scale-[0.99] transition-transform duration-150`. --- ## 4. Bedah UX & Arsitektur Halaman Portal Anggota ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ STRUKTUR PORTAL ANGGOTA │ ├─────────────────────────────────────────────────────────────────────────────┤ │ 1. Beranda (/dashboard) ───────────── Ringkasan Saldo, Wallet, Legal Banner │ │ 2. Simpanan (/simpanan) ──────────── WalletPasses, Formula Masa Iuran │ │ 3. Buku Mutasi (/mutasi) ─────────── Histori Transaksi, Filter PillTabs │ │ 4. Pembiayaan (/pembiayaan) ──────── Status Pinjaman & Akad Syariah │ │ 5. Dokumen (/pengaturan/dokumen) ─── KTP, KK, Rekening, SK Kepegawaian │ │ 6. Pengaturan (/pengaturan) ──────── Profil, Keamanan, & Form Resign │ │ 7. Alur Resign (Modal) ───────────── Lembar 1 (Pernyataan) & Lembar 2 (BA) │ └─────────────────────────────────────────────────────────────────────────────┘ ``` --- ### A. Beranda Anggota (`/dashboard`) Halaman pertama yang menyambut anggota setiap hari dengan orientasi cepat (*glanceable*): 1. **Fast-Track Legal Verification Banner**: - Jika anggota baru belum menandatangani persetujuan legal AD/ART koperasi, tampilkan banner elegan di bagian atas. - Pilihan interaksi: `Tanda Tangan Cepat` membuka `QuickLegalOnboardingModal` dengan kanvas tanda tangan digital langsung di layar HP/komputer. 2. **Hero Digital Member Card & Wallet**: - Mengadopsi visual *Apple Wallet Pass*: kartu digital berisi Nama Lengkap, Nomor Anggota, Unit Kerja, dan status aktif. 3. **Ringkasan Finansial Utama**: - Menampilkan total simpanan aktif secara agregat. - Tombol aksi cepat: *Tarik Dana*, *Top Up*, dan *Buku Mutasi*. --- ### B. Portofolio Simpanan (`/simpanan`) Menghilangkan kebingungan anggota seputar: *"Uang saya di koperasi sudah berapa dan dari mana saja asalnya?"* 1. **Tiga Kartu Pass (*Apple Wallet Pass Stack*)**: - **Simpanan Pokok (Locked / Ekuitas Awal)**: - Disetor 1x saat pertama kali menjadi anggota (misal: Rp 200.000). - Berikan ikon gembok halus (`Lock`) dengan status *"Modal Permanen Keanggotaan"*. - **Simpanan Wajib (Routine / Akumulasi Iuran)**: - Iuran bulanan rutin yang dipotong melalui payroll/auto-debet (Rp 50.000/bln). - **Progressive Disclosure Formula**: Di bawah angka nominal besar, sertakan subteks formula masa iuran secara instan: > `65 bulan terakumulasi • Rp 50.000/bln • Sejak Januari 2021` *Ini menyelesaikan komplain anggota tanpa mereka harus menghitung manual 5 tahun ke belakang.* - **Simpanan Sukarela (Daily / Bebas Tarik)**: - Saldo tabungan fleksibel yang dapat ditarik sewaktu-waktu. - Berikan ikon kunci terbuka (`Unlock`) dan tombol cepat *Tarik Simpanan*. --- ### C. Transparansi & Histori Mutasi (`/mutasi`) Buku tabungan digital anggota: 1. **PillTabs Filter**: - Tiga segment pilihan instan: `Semua Mutasi`, `Pemasukan (Setor)`, dan `Pengeluaran (Tarik)`. 2. **TransactionItem List**: - Setiap mutasi memiliki indikator panah arah: - Pemasukan: Panah hijau melengkung ke dalam (`ArrowDownRight text-emerald-600 bg-emerald-50`). - Pengeluaran: Panah keluar (`ArrowUpRight text-slate-600 bg-slate-100`). - Keterangan transaksi memuat deskripsi jelas, tanggal terformat bahasa Indonesia, dan nomor referensi transaksi. --- ### D. Pusat Dokumen Legal & Profil (`/pengaturan/dokumen`) Mengelola dokumen syarat regulasi koperasi dan pencairan dana: 1. **Daftar Dokumen Resmi**: - KTP (Kartu Tanda Penduduk) - KK (Kartu Keluarga - Ahli Waris) - Buku Rekening Bank (Validasi Pencairan) - SK Kepegawaian (Iuran Payroll) 2. **Visual Status Checklist**: - Dokumen Terverifikasi: Ditandai centang hijau (`CheckCircle2 text-emerald-600`) dengan label *"Tercatat Resmi"*. - Dokumen Belum Diunggah: Ditandai tombol upload ringan yang memicu pemilih file (*file picker*) langsung. 3. **Format Rekening Bank ala Apple HIG**: - Menghilangkan awalan redundan `"No."`. - Menggunakan pemisah titik standar `"a.n."`: > Contoh: `BCA 4370904711 a.n. YUDI HARYADI` --- ## 5. Alur Khusus: Pengunduran Diri Anggota (*Member Resignation*) Proses pengunduran diri dari koperasi sering kali menjadi titik rawan friksi dan kesalahpahaman finansial. Kami merancangnya dengan pendekatan **Full Transparency & Dual Document Architecture**: ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ ALUR 2 TAHAP PENGUNDURAN DIRI ANGGOTA │ ├─────────────────────────────────────────────────────────────────────────────┤ │ TAHAP 1: Formulir Anggota │ │ Anggota mengajukan di portal ───> Unduh Lembar 1: Surat Pernyataan (PDF) │ │ (Cetak & TTD Materai Rp 10.000) │ │ │ │ TAHAP 2: Audit & Tutup Buku Pengurus │ │ Pengurus menerima surat ────────> Verifikasi simpanan, hutang, & SHU │ │ Cetak Lembar 2: Berita Acara Tutup Buku │ │ (Disahkan Pengurus, Manajer, & Anggota) │ └─────────────────────────────────────────────────────────────────────────────┘ ``` ### Standar Menu Unduh Berkas Pengunduran Diri: Pada modal pengajuan anggota (`MemberResignationModal`) maupun banner admin (`SettlementBanner`), pilihan unduh dokumen diatur dalam format **Native macOS Menu**: ``` ┌──────────────────────────────────────────────────────────────┐ │ DOKUMEN SATUAN │ │ 📄 Lembar 1: Surat Pernyataan Anggota PDF │ │ 📋 Lembar 2: Berita Acara & Hak Finansial PDF │ ├──────────────────────────────────────────────────────────────┤ │ UNDUH SEKALIGUS │ │ 📦 Arsip ZIP (2 File Terpisah) ZIP │ │ 📑 Dokumen Lengkap (2 Hal) PDF │ └──────────────────────────────────────────────────────────────┘ ``` 1. **Lembar 1 (Surat Pernyataan)**: - File PDF mandiri (1 Halaman A4 pas). - Diisi identitas anggota, alasan, data rekening, serta kolom tanda tangan bermaterai Rp 10.000 untuk diserahkan ke pengurus koperasi. 2. **Lembar 2 (Berita Acara Tutup Buku)**: - File PDF mandiri (1 Halaman A4 pas). - Dibuat untuk arsip administrasi dan audit internal koperasi. - Memuat rincian saldo simpanan pokok, simpanan wajib (beserta masa tenure), hak SHU beserta formula pembagiannya, pemotongan pinjaman berjalan, nilai pengembalian bersih (*net refund*), serta 3 tanda tangan otorisasi (Anggota, Manajer Operasional, dan Ketua Pengurus). 3. **Arsip ZIP (`?sheet=zip`)**: - Memungkinkan anggota atau pengurus mengunduh kedua berkas terpisah di atas sekaligus dalam satu arsip kompresi `.zip`. 4. **Dokumen Lengkap (`?sheet=all`)**: - Menghasilkan 1 file PDF gabungan (halaman 1 dan 2) bagi anggota yang ingin mencetak dokumen bolak-balik dalam satu file. --- ## 6. Token Desain & Spesifikasi Tipografi | Kategori | Token Tailwind | Nilai CSS | Peruntukan | | :--- | :--- | :--- | :--- | | **Background Aplikasi** | `bg-[#F4F5F7]` | `#F4F5F7` | Latar belakang seluruh portal member | | **Permukaan Kartu** | `bg-white/90` | `rgba(255,255,255,0.9)` | Kartu konten utama (*glass effect*) | | **Garis Batas** | `border-slate-200/80` | `rgba(226,232,240,0.8)` | Pemisah kartu dan list | | **Teks Utama** | `text-slate-900` | `#0F172A` | Judul, nominal saldo besar | | **Teks Sekunder** | `text-slate-500` | `#64748B` | Subtitle, deskripsi menu | | **Teks Muted** | `text-slate-400` | `#94A3B8` | Label header kategori, format tag | | **Angka Finansial** | `tabular-nums font-mono` | Fixed-width glyphs | Seluruh angka nominal rupiah | | **Border Radius Utama** | `rounded-3xl` | `24px` | Wadah InsetList & WalletPass | | **Border Radius Item** | `rounded-xl` | `12px` | Tombol baris menu & input form | --- ## 7. Responsivitas Layar (Desktop vs Mobile) Portal Anggota mengadopsi prinsip **Adaptive Ergonomics**: - **Desktop (Layar Lebar)**: - Navigasi utama menggunakan **Sidebar Kiri** (`MemberSidebar.jsx`) yang ramping dan statis. - Kartu simpanan disajikan dalam kisi responsif (*grid layout* 3 kolom). - **Mobile (Layar Smartphone)**: - Sidebar disembunyikan secara otomatis. - Navigasi utama beralih ke **Bottom Navigation Bar** (`MobileBottomNav.jsx`) dengan akses jempol (*one-handed thumb zone*): *Beranda*, *Simpanan*, *Mutasi*, dan *Profil*. - Modal aksi muncul dalam bentuk **Bottom Sheet** yang dapat ditutup dengan sapuan (*swipe to dismiss*). - Pada halaman formulir mendalam (*drill-down page*), Bottom Nav disembunyikan dan digantikan oleh tombol *Back* di pojok kiri atas header. --- ## 8. Checklist Pre-Flight bagi Pengembang (Developer Pre-Flight) Sebelum merilis halaman atau fitur baru di Portal Anggota, pastikan: - [ ] **Zero AI Icon Pills**: Pastikan tidak ada ikon menu yang dibungkus kotak berwarna pastel. Ikon harus berupa *naked glyphs*. - [ ] **Format Rekening Bersih**: Tidak ada awalan `No.` pada penulisan bank, gunakan format `[Bank] [NomorRek] a.n. [NamaRek]`. - [ ] **Tabular Nums**: Seluruh nominal angka rupiah menggunakan utility `font-mono tabular-nums`. - [ ] **Vertical Budgeting PDF**: Dokumen cetak DomPDF harus terkunci tepat 1 halaman per lembar (tidak meluap ke halaman berikutnya secara tidak sengaja). - [ ] **File Modularity (< 250 Baris)**: Setiap file komponen React atau controller servis backend tidak melebihi batas 250-300 baris. - [ ] **Lint & Format**: Jalankan `vendor/bin/pint --dirty --format agent` dan `npm run build` sebelum finalisasi commit. --- *Dokumen ini dirawat secara berkala oleh Tim Pengembang Koperasi Bermadani untuk memastikan konsistensi standar desain antarmuka ekosistem aplikasi.*