Temuan UX & Prinsip Interaksi (Studi Kasus ERPNext v16)

Temuan UX #1 - Search Bar: Klik Membuka Modal Tengah

Gambar D: Modal Search

Tangga rujukan - intensitas interupsi:

Kesalahan ERPNext: search-by-klik ditaruh di level 5 padahal ekspektasi user level 2. Ctrl+K masih tertolerir di level 2-4 karena dipanggil sengaja, bukan diklik santai.

Entri dokumen (ERPNext v16):

Klik input search membuka modal tengah + backdrop gelap. Sepele per kejadian, signifikan secara kumulatif: memutus kontinuitas spasial, menyembunyikan konteks, memutus flow, meninggalkan attention residue dan loss of place. Ketidaknyamanan psikologis = selisih tingkat interupsi yang diharapkan vs yang terjadi. Pola palette benar untuk Ctrl+K, salah untuk klik input. Seharusnya: anchored dropdown di bawah input.

Aturan BMP yang lahir dari temuan ini:

  1. Panel hasil search selalu anchored di bawah input, tidak pernah modal tengah; backdrop tidak digelapkan untuk search.
  2. Mesin yang sama melayani dua pemicu (klik & Ctrl+K) - pemicunya beda, posisinya tidak.
  3. Gelap hanya untuk dialog keputusan (level 5+).
  4. Prinsip umum: posisi overlay mengikuti titik perhatian yang memicu; penggelapan mengikuti modalitas, bukan fungsi; intensitas pola harus proporsional dengan pentingnya peristiwa. Search anchored tanpa gelap bukan estetika spasial, tapi manajemen budget interupsi - user hanya punya sedikit kesabaran interupsi per hari; jangan menghabiskannya untuk search.

Temuan UX #2 - "Load More" vs Pagination di List Data Bisnis

Gambar C: List Department

Perilaku yang diamati (v16):

  1. List data master/transaksi tidak menggunakan pager tradisional (1, 2, 3... Next).
  2. Sebagai gantinya, ERPNext menampilkan teks "20 of 27" (atau serupa) dan sebuah tombol "Load More" di dasar list.
  3. Filter pill (seperti "Created On") mengambang di atas list sebagai chip yang bisa di-dismiss.

Analisa psikologis & operasional - kenapa ini salah tempat:

  1. Konsumsi vs Operasi: "Load More" (infinite scroll) adalah pola yang brilian untuk konsumsi konten (social media feed, timeline aktivitas) di mana user tidak perlu tahu total konteks dan hanya peduli pada "apa yang terbaru". Namun, data bisnis (Customer, Item, Invoice, User) adalah data operasional. User butuh total konteks ("Saya sedang melihat record ke-45 dari 10.000 data").
  2. Hilangnya Spatial Memory: Dengan "Load More", user tidak bisa menandai "tadi saya sudah cek sampai halaman 5". Jika mereka me-refresh atau keluar lalu masuk lagi, mereka kehilangan posisi. Pager tradisional memberi sense of place dalam dataset yang besar.
  3. Keterbatasan Filter Berat: Di dataset jutaan baris, "Load More" akan memaksa browser merender ribuan DOM node seiring user terus klik, yang pada akhirnya menghancurkan performa browser. Pager tradisional mendelegasikan beban limit ke database (SQL LIMIT/OFFSET).

Entri dokumen (ERPNext v16):

List master/transaksi memakai pola "Load More" ala media sosial. Ini merusak spatial memory user terhadap dataset, menyembunyikan total konteks (hanya menampilkan "20 of X"), dan berisiko membebani DOM browser pada data besar. Pola ini tepat untuk activity feed, tapi salah untuk data operasional.

Aturan BMP yang lahir dari temuan ini:

  1. Pager Tradisional (1, 2, 3... Next/Prev + Jump to Page) wajib untuk semua list master data dan transaksi. User harus selalu tahu posisi mereka di dalam total dataset.
  2. "Load More" / Infinite Scroll hanya diizinkan untuk Timeline, Activity Log, Notification Log, atau Audit Trail (data yang sifatnya historis dan dikonsumsi secara kronologis).
  3. Filter pill di atas list adalah pola yang bagus (dipertahankan) karena memberikan visibility filter aktif yang jelas tanpa memakan ruang sidebar.

Temuan UX #3 - Pelanggaran "Single Ownership" di Sidebar Modul

Gambar C: List Department

Perilaku yang diamati (v16):

  1. Saat user masuk ke modul "Organization", sidebar kiri menampilkan shortcut ke: Company, Department, Branch.
  2. Namun, di sidebar yang sama, terdapat shortcut ke: User, Role Permissions, Email Account, Letter Head.
  3. Ini memaksa user mencari pengaturan sistem (User/Email) di dalam modul yang secara konseptual adalah "Struktur Organisasi Bisnis".

Analisa arsitektur informasi:

  1. Kebocoran Kepemilikan (Leaky Ownership): Sidebar seharusnya mencerminkan di mana data itu hidup dan siapa pemiliknya. User dan Email Account adalah milik domain System/Framework. Letter Head milik Printing. Memasukkan mereka ke Organization hanya karena "admin biasanya mengurus ini di awal" adalah pengelompokan berdasarkan persona, bukan arsitektur.
  2. Beban Kognitif Ganda: Saat user ingin menambah User baru, otak mereka harus memilih: "Apakah saya buka modul System? atau modul Organization?". Ketika satu aksi punya dua pintu masuk yang sama validnya di UI, user akan selalu merasa ragu (apakah saya di tempat yang benar?).
  3. Ilusi Modul: "Organization" di sini berperilaku bukan sebagai modul yang memiliki doctype, melainkan sebagai folder shortcut (workspace). Tapi karena disajikan sebagai "Modul" di level yang sama dengan Accounting/Stock, ia menciptakan ekspektasi palsu.

Entri dokumen (ERPNext v16):

Sidebar modul sering dicampuri shortcut lintas domain (mis. User & Email Account masuk ke sidebar Organization). Ini melanggar prinsip Single Ownership di UI, menciptakan beban kognitif ganda (user bingung harus cari fitur di modul mana), dan mengaburkan batas antara "Master Data Bisnis" dengan "Konfigurasi Platform".

Aturan BMP yang lahir dari temuan ini:

  1. Strict UI Ownership: Navigasi sidebar modul hanya menampilkan entitas yang benar-benar dimiliki oleh domain tersebut.
  2. Tidak ada "modul sampah" atau "modul admin campur aduk". Jika admin butuh akses cepat ke User atau Email saat sedang di modul bisnis, mereka menggunakan Global Search (Ctrl+K) atau Settings Hub, bukan sidebar modul yang tercemar.
  3. Sidebar adalah representasi visual dari Bounded Context (batas domain). Mencampuradukkan konteks di sidebar = menghancurkan arsitektur mental user.

Temuan UX #4 - Ilusi Kesetaraan di Desktop Launcher

Gambar B: Launcher Desktop

Perilaku yang diamati (v16):

  1. Di halaman awal (Home), user disambut dengan grid ikon modul.
  2. Terdapat tiga ikon yang secara visual setara (ukuran dan bobot sama): Framework, Organization, dan ERPNext Settings.
  3. User awam diasumsikan akan mengklik salah satu untuk "mengatur sistem".

Analisa taksonomi (yang sudah kita bahas sebelumnya):

  1. Pencampuran 3 Kategori Berbeda:
  2. Bahaya Kesetaraan Visual: Dengan menampilkan ketiganya sebagai ikon setara di halaman utama, ERPNext secara tidak sadar memberitahu user bisnis: "Silakan utak-atik Framework dan Settings". Padahal, Framework seharusnya invisible (tersembunyi) bagi user bisnis, dan Settings seharusnya terpusat di satu Hub, bukan tersebar.

Entri dokumen (ERPNext v16):

Desktop launcher menyajikan Platform (Framework), Master Data (Organization), dan Policy (Settings) sebagai tiga ikon yang setara secara visual. Ini meruntuhkan taksonomi sistem, mengundang user bisnis masuk ke area platform yang bukan ranahnya, dan membuktikan bahwa ERPNext tidak membedakan antara "Data", "Aturan", dan "Mesin" di level presentasi.

Aturan BMP yang lahir dari temuan ini:

  1. Satu Permukaan Settings (Settings Hub): Semua policy, switch, dan konfigurasi global bermuara di satu tempat yang terstruktur per fungsi (mis. tab Accounting, tab Inventory).
  2. Platform Disembunyikan: Area Framework/System tidak pernah muncul sebagai "ikon modul" di halaman utama user bisnis. Akses ke sana dibatasi oleh Role (hanya Super Admin/Developer) dan tidak punya visual real estate di dashboard operasional.
  3. Master Data Masuk ke Modul Pemiliknya: "Organization" (Company, Department) tidak boleh jadi ikon mandiri di Home. Company ada di modul Accounting/Setup, Department ada di modul HR. Launcher Home hanya berisi modul operasional inti (Sales, Purchase, Inventory, Accounting, dll).

Ringkasan Paradigma UX yang Terkumpul

Dari 4 temuan ini, kita bisa menarik 3 Prinsip UX Bisnis (Anti-Pattern Konsumer) yang sangat kuat untuk BMP:

  1. Prinsip Proporsionalitas Interupsi: Jangan gunakan modal gelap (level 5) untuk search (level 2). Gelap hanya untuk keputusan destruktif.
  2. Prinsip Konteks Operasional: Jangan gunakan infinite scroll (pola konsumsi media sosial) untuk list data bisnis (pola operasional). User bisnis butuh pager dan total konteks.
  3. Prinsip Kemurnian Konteks (Bounded UI): Jangan mencampur Platform, Master Data, dan Policy di satu launcher atau sidebar. Setiap elemen UI harus mencerminkan single ownership arsitekturalnya.

Temuan UX #5 - Breadcrumb Tidak Mencerminkan Hierarki Navigasi

Gambar E: Role Permission Manager

Perilaku yang diamati (v16):

  1. Di sidebar, halaman ini berada di level tiga: Users (workspace) → Permissions (grup) → Permission Manager.
  2. Breadcrumb hanya menampilkan 🏠 / Role Permissions Manager - tanpa satu pun orangtua.
  3. Tidak konsisten antar halaman: list doctype menampilkan dua level (🏠 / Users / User), list Department satu level (🏠 / Department), Page seperti ini satu level. Jadi kedalaman breadcrumb berubah-ubah menurut jenis halaman (DocType vs Page), bukan menurut posisi di pohon navigasi.

Analisa - kenapa ini merusak:

  1. Dua sumber kebenaran yang bertentangan - breadcrumb di-generate dari route/definisi page, bukan dari pohon workspace yang merender sidebar. Dua struktur data terpisah → dua peta ruang yang tidak cocok.
  2. Loss of place + loss of path - user tidak bisa mengklik "Users" atau "Permissions" di breadcrumb untuk naik ke atas; breadcrumb yang seharusnya peta horizontal merosot jadi sekadar judul halaman dengan ikon home.
  3. Kedalaman yang tak terprediksi (kadang 2 level, kadang 1) membuat user tidak bisa membentuk aturan mental "saya sedang sedalam apa" - pelanggaran proporsionalitas/konsistensi yang sama dengan temuan-temuan sebelumnya.
  4. Ini varian penyakit yang sama dengan #3 & #4: UI tidak merefleksikan satu hierarki kepemilikan - sidebar menggambar satu pohon, breadcrumb menggambar hal lain.

Entri dokumen (ERPNext v16):

Breadcrumb tidak merefleksikan hierarki navigasi sidebar; kedalamannya bervariasi menurut jenis halaman (DocType vs Page), dan level orangtua tidak hadir/tidak dapat diklik. User kehilangan jangkar spasial horizontal; sidebar dan breadcrumb memberi petunjuk ruang yang bertentangan. Seharusnya: Home > Users > Permissions > Permission Manager.

Aturan BMP yang lahir dari temuan ini:

  1. Breadcrumb digenerate dari data pohon navigasi yang sama dengan sidebar - satu source of truth untuk IA.
  2. Setiap halaman (list entitas, form, settings, tool) menampilkan jalur lengkap Home > Section > Grup > Halaman; semua level dapat diklik kecuali halaman aktif.
  3. Kedalaman breadcrumb konsisten dan prediktibel - tidak berubah menurut jenis halaman.

Ini sekaligus menutup lingkaran prinsip "satu fitur, satu rumah, nol keraguan": breadcrumb adalah konfirmasi tertulis dari rumah itu - kalau sidebar dan breadcrumb tidak cocok, keraguan kembali masuk.

Mau saya teruskan mengumpulkan temuan model begini (masih ada beberapa kandidat di screenshot-mu, mis. tombol "Set User Permissions" yang hidup di luar hieraksi aksi halaman), atau kita kunci bab UX dan mulai bedah Accounting?

Temuan UX #6 - Slot Tombol Primary Dipakai untuk Navigasi, Bukan Aksi [Gbr E]

Gambar E: Role Permission Manager

Perilaku: tombol hitam paling menonjol di kanan atas bertuliskan "Set User Permissions" - padahal itu tautan ke halaman lain (User Permission), bukan aksi membuat record. Di hampir semua halaman lain, slot yang sama berisi "Add User / Add Department" (create).

Masalah: slot primary adalah janji aksi utama halaman; otot user terlatih "tombol hitam = buat baru". Memakainya untuk navigasi lintas halaman = mengkhianati muscle memory dan mempromosikan navigasi sekunder ke pangkat primary.

Aturan BMP: slot primary selalu aksi dominan halaman (biasanya create). Navigasi ke halaman lain = tombol sekunder/menu. Semantik tombol hitam konsisten di semua halaman.

Temuan UX #7 - Halaman Alat Membuka dalam Keadaan Kosong Mati [Gbr E]

Gambar E: Role Permission Manager

Perilaku: halaman terbuka dengan dua input kosong + kalimat "Select Document Type or Role to start." - tanpa default, tanpa saran; Quick Help ada tapi di bawah lipatan.

Masalah: empty state yang baik mengajar dan menawarkan langkah pertama. Halaman alat yang membuka "mati" memaksa user sudah tahu taksonomi sebelum bisa mulai - kebalikan dari onboarding yang baik.

Aturan BMP: setiap halaman membuka dalam keadaan berguna: data default, item terakhir dipakai, atau pilihan terpandu. Empty state wajib memuat aksi berikutnya, bukan hanya kalimat perintah.

Temuan UX #8 - Ornamen Konsumer di List Operasional [Gbr A]

Gbr A: List User + Anotasi

Perilaku: setiap baris membawa 💬 0 (jumlah komentar) dan ikon hati (like/follow); header list punya hati lagi.

Masalah: pola media sosial (like/komen) ditempel ke data operasional = noise; nilai "0" di semua baris adalah informasi nol yang memakan perhatian; hati di konteks bisnis terbaca "suka" padahal maksudnya follow - semantik pinjam yang menyesatkan.

Aturan BMP: list operasional hanya memuat kolom yang relevan keputusan. Kolaborasi (komentar) hidup di timeline dokumen, bukan ornamen baris. Pola sosial konsumer tidak diimpor ke data bisnis.

Temuan UX #9 - Label Navigasi Ter-truncate [Gbr B]

Gambar B: Launcher Desktop

Perilaku: ikon launcher menampilkan "Manufactur...", "Subcontrac...", "ERPNext Se...".

Masalah: navigasi adalah tempat terakhir yang boleh mengorbankan keterbacaan - user harus bisa membaca tujuan sebelum klik. Sel grid fix + tanpa wrap = nama terpotong tanpa jaminan tooltip.

Aturan BMP: label navigasi tidak pernah ter-truncate; kalau ruang sempit, wrap dua baris atau kecilkan ikon - nama wajib terbaca penuh.

Temuan UX #10 - Kolom Teknis Bocor ke List Bisnis [Gbr C]

Gambar C: List Department

Perilaku: list Department menampilkan kolom "Is Group" berisi checkbox - detail mekanisme tree (nested set), plus baris root "All Departments".

Masalah: user bisnis berpikir "induk/anak departemen", bukan "flag group". Menampilkan mekanisme internal = memaksa user belajar bahasa implementasi; sama keluarganya dengan kebocoran Framework ke launcher (#4).

Aturan BMP: list hanya menampilkan konsep bisnis; mekanisme tree diekspresikan lewat indentasi/expand-collapse, bukan flag teknis.

Temuan UX #11 - Suffix Company Mencemari Nama Master [Gbr C]

Gambar C: List Department

Perilaku: nama tampil sebagai "Accounts − PSGA", "Marketing − PSGA" - identitas master disuffix kode company untuk scoping multi-company.

Masalah: suffix adalah metadata, bukan identitas; menempelkannya ke nama membuat list repetitif dan bising, serta mencampur dua konsep (siapa vs milik company mana).

Aturan BMP: identitas terpisah dari metadata - multi-company diekspresikan lewat badge/kolom/filter company global, tidak pernah suffix nama.

Temuan UX #12 - Satu Dropdown Mencampur Tiga Jenis Barang [Gbr A]

Gbr A: List User + Anotasi

Perilaku: menu kiri atas berisi campur aduk: identitas modul (Users/Frappe Framework), navigasi (Desktop, Workspaces, Website), preferensi pribadi (Display, Session Defaults), aksi sistem (Reload), Help, Logout - satu list datar.

Masalah: jenis berbeda (navigasi vs preferensi vs sesi vs sistem) tanpa pengelompokan = user memindai lebih lama; aksi developer-ish (Reload) terpapar ke semua user - varian kecil dari penyakit ownership (#3).

Aturan BMP: dropdown akun/menu dikelompokkan per jenis dengan pemisah: navigasi / preferensi / sesi; aksi sistem/developer disembunyikan berdasarkan role.