BMP - UI Reference: Prinsip, Pola & Aturan Interaksi (v1)
Dokumen why + patterns. Spec produksi navigasi/landing ada di pasangan terkunci: Spec Navigasi & Landing (Mockup Final v9). Bila bertentangan, v9 menang untuk navigasi/landing; dokumen ini menang untuk prinsip & pola perilaku.
Bagian 1 - Tiga Prinsip Meta (anti-pattern konsumer)
Bagian 2 - Tangga Intensitas Overlay ➕ (formalisasi saya dari Temuan #1)
| Level | Pola | Backdrop | Pemakaian |
|---|---|---|---|
| 1 | Tooltip | tanpa | penjelasan mikro |
| 2 | Panel anchored (hasil search, flyout) | tanpa | eksplorasi/navigasi |
| 3 | Dropdown/popover (avatar, filter) | tanpa | pemilihan |
| 4 | Side panel/drawer | opsional tipis | detail tanpa meninggalkan konteks |
| 5 | Modal + backdrop gelap | gelap | hanya keputusan destruktif/bloking |
Aturan: posisi overlay mengikuti titik perhatian pemicu; penggelapan mengikuti modalitas, bukan fungsi.
Bagian 3 - 12 Aturan BMP (dari studi ERPNext v16)
| # | Temuan (ringkas) | Aturan BMP |
|---|---|---|
| 1 | Klik search membuka modal tengah | Panel hasil anchored di bawah input, tanpa gelap; mesin sama untuk klik & Ctrl+K; gelap hanya level 5+ |
| 2 | "Load More" di list operasional | Pager tradisional wajib untuk list master/transaksi; Load More hanya Timeline/Activity/Audit; filter pill dipertahankan |
| 3 | Sidebar dicampuri lintas domain | Strict UI Ownership: sidebar hanya entitas milik domain; lintas domain via Ctrl+K / Settings Hub |
| 4 | Launcher menyamakan Platform/Master/Policy | Satu Settings Hub; platform tak terlihat user bisnis; master data masuk modul pemiliknya; launcher hanya modul operasional |
| 5 | Breadcrumb tak mencerminkan hierarki | Breadcrumb digenerate dari pohon navigasi yang sama dengan sidebar; semua level klikabel; kedalaman konsisten |
| 6 | Slot primary dipakai navigasi | Slot primary = aksi dominan halaman (biasanya create); navigasi = sekunder/menu |
| 7 | Halaman alat membuka kosong-mati | Setiap halaman membuka berguna (default/terakhir/terpandu); empty state wajib memuat aksi berikutnya |
| 8 | Ornamen konsumer di list operasional | Kolom hanya yang relevan keputusan; kolaborasi di timeline dokumen; pola sosial tidak diimpor |
| 9 | Label navigasi ter-truncate | Tidak pernah truncate; wrap dua baris atau kecilkan ikon |
| 10 | Kolom teknis bocor ke list bisnis | List menampilkan konsep bisnis; tree via indentasi/expand, bukan flag teknis |
| 11 | Suffix company mencemari nama | Identitas terpisah dari metadata; badge/filter, bukan suffix |
| 12 | Satu dropdown mencampur jenis | Dropdown dikelompokkan per jenis (navigasi/preferensi/sesi); aksi sistem disembunyikan per role |
Bagian 4 - Referensi Ukur: "chrome fix, kanvas fluid"
Filosofi terukur ERPNext v16 yang diadopsi BMP dengan angka sendiri: semua ketebalan chrome fix; yang fluid hanya sisa ruang. Tidak ada komponen diskalakan proporsional terhadap inci layar.
| Kategori | ERPNext (ukur) | BMP (terkunci v9) |
|---|---|---|
| Fix | lebar sidebar, tinggi header/brand/baris/tombol/paging, logo 24 | rail 224/48, head 48, logo 24, avatar 26, chevron 14 (hit 28×28), flyout min-w 224 |
| Fluid (sisa ruang) | lebar header/content, tinggi sidebar/content | sama |
| Fluid-isi | tinggi dropdown ikut jumlah item | flyout max-height calc(100vh − 16px) + scroll internal |
| Ratio sejati | hanya overlay mobile 40/60 | nol di desktop |
14" vs 19": tidak ada yang membesar - kanvas fluid menampung lebih banyak kolom/baris; ukuran fisik berubah hanya lewat OS scaling.
Pola Positif #1 - hover-reveal collapse toggle (3-state). Normal tak terlihat → hover sidebar muncul di tepi rail → hover dirinya menegaskan clickability. Resep: differensiasi via tone surface (bukan hue baru), teal tetap langka (hanya tint hover), border+shadow memberi kedalaman. Kalimat prinsip: "Kontrol hover-reveal muncul dengan differensiasi minimal (tone+border+shadow) dan menegaskan clickability hanya pada hover dirinya. Muncul perlahan bukan berarti muncul samar." Bawaan a11y: focus-visible, always-visible di touch, state collapse persist per user. ➕ Saya generalisasi: pola yang sama berlaku untuk aksi baris (View/Process) di tabel.
Bagian 5 - Tambahan saya (spec perilaku yang belum tertulis di mana pun)
5.1 List View (level 2) - produksi. Pager tradisional ("1-20 of N" + lingkaran bernomor + Next + pemilih ukuran); status badge paling kiri setelah checkbox; ±5 kolom default, sisanya "kelola kolom"; saved view sebagai tab; filter pill dismissible; angka rata kanan tabular; baris menyimpang (overdue/rejected) ditegaskan; action bar kontekstual saat baris dipilih; tanpa ornamen sosial & flag teknis (Aturan #8, #10).
5.2 Search panel - produksi. Klik input = anchored dropdown (level 2); Ctrl+K = palette terpusat (dipanggil sengaja). Hasil dikelompokkan Action → Document → Report → Setting, toleran typo, cari lewat kode/nomor, badge status per hasil; kotak kosong menampilkan Recent Activity + Quick Actions.
5.3 Default & empty state. Tidak ada halaman "kosong mati": data default / item terakhir / pilihan terpandu; empty state = CTA aksi berikutnya (Aturan #7).
5.4 Action bar & slot primary. Tombol gelap = aksi dominan (create); "See all"/navigasi = sekunder 30px; action bar sticky & status-aware (Aturan #6).
5.5 Keyboard & touch. Chevron = tombol terpisah (Tab sendiri), Enter pada baris = navigasi, Esc menutup flyout/dropdown, Ctrl+K global, focus-visible ring; touch: handle always-visible, hit area ≥28×28.
5.6 Density & personalisasi. Dua density (comfortable 44 / compact 36 ➕ usulan saya) persist per user bersama state rail & landing pin.
5.7 Matriks kepemilikan dokumen. Token warna/font/ikon → Blueprint Ch.1 · pola interaksi → Blueprint Ch.2 + dokumen ini · navigasi/landing/angka → v9 · isi flyout per modul → Peta Menu Rev3 · role/permission/workspace → Chapter 5 (menyusul). Satu aturan, satu rumah.