Asesmen Awal Keperawatan di RME: Tips Desain UI/UX nya

Sobat IT RS, pernah dikejar perawat gara-gara form asesmen keperawatan di RME “terlalu ribet”, “bikin pegel ngisi”, atau “sering miss field penting”? Deadlock, komplain gak abis-abis, user bosen klik, IT-nya pusing deploy patch. Form asesmen awal keperawatan ini krusial: wajib diisi lengkap, tapi tiap detik di ruang IGD & rawat inap itu berharga. Salah desain, bisa berujung data kacau, audit jeblok, akreditasi kena semprit.

Artikel ini bahas cara desain UI/UX form asesmen awal keperawatan digital di RME biar cepat diisi, data tetap lengkap, user happy, komplain minim, dan bagian akreditasi nggak rewel. Langsung ke contoh lapangan, best practice, layout, logika field, dan validasi simpel tapi efektif.

Sekilas Soal Asesmen Awal Keperawatan

Asesmen awal wajib diisi semua pasien baru di IGD/rawat inap: identitas, keluhan, riwayat penyakit, pemeriksaan fisik, skrining risiko jatuh, nyeri, status fungsional, alergi, kebutuhan edukasi. Format dan isi mengacu pada regulasi (Permenkes, SNARS, PPI). Audit selalu cek kelengkapan, konsistensi, keterbacaan.

Di sistem manual, kadang form dicentang asal, banyak coretan, atau malah kosong. Di RME, risiko serupa: user “asal klik”, field penting kelewat, atau butuh waktu lama isi form karena scrolling, field mumet, validasi kurang jelas.

Masalah Umum di UI/UX Asesmen Keperawatan Digital

• Form panjang, scrolling jauh: Satu form >20 field, user bolak-balik scroll, fokus buyar.
• Field tanpa grouping: Semua campur, user bingung bagian mana sudah diisi.
• Dropdown kebanyakan pilihan: List diagnosis atau opsi terlalu banyak, cari pilihan makan waktu.
• Validasi terlalu kaku/kurang jelas: Field wajib ga dikasih tanda, atau error muncul setelah submit.
• Field relevan tampil terus: Misal, pertanyaan lanjutan nyeri tetap muncul walau pasien “tidak nyeri”.
• Isi data banyak format text bebas: Data susah diolah, bikin report/manual rekap jadi nightmare.
• Auto-save/timeout kurang aman: Data hilang gara-gara browser crash/log-out.

Tips Desain UI/UX Biar Form Gampang Diisi & Tetap Lengkap

1. Grouping Field per Bagian Asesmen

• Pakai section/tab jelas: Identitas, Keluhan Utama, Pemeriksaan Fisik, Risiko Jatuh, Skrining Nyeri, Status Fungsional, Alergi, Edukasi.
• Setiap tab/section tampilkan progress indicator (misal: “3/7 Bagian sudah terisi”).
• Bisa juga pakai accordion biar tampilan lebih ringkas, hanya expand bagian aktif.

<div class="tabs">
    <div class="tab" id="identitas">Identitas Pasien</div>
    <div class="tab" id="keluhan">Keluhan Utama</div>
    <div class="tab" id="pemeriksaan">Pemeriksaan Fisik</div>
    ...
</div>

2. Pakai Default Value, Autocomplete, dan Pilihan Terbatas

• Field usia, jenis kelamin, no rekam medis: auto-isi dari registrasi, non-editable.
• Dropdown diagnosis/riwayat: quick search, hasil filter sesuai input.
• Radio button/binary choice untuk field ya/tidak, misal alergi: lebih cepat dari dropdown/manual.
• Default value logis: Misal, “tidak” untuk alergi jika data belum ada.

<input type="text" name="diagnosis" autocomplete="off" list="diagnosisList">
<datalist id="diagnosisList">
    <option value="Hipertensi">
    <option value="Diabetes Mellitus">
    ...
</datalist>

3. Show/Hide Field Berdasarkan Jawaban User (Conditional Logic)

• Contoh: Jika pasien jawab “Ada nyeri”, baru tampil field detail nyeri (lokasi, skala, kualitas, durasi).
• Jika “Tidak nyeri”, field detail disembunyikan.
• Field skrining risiko jatuh anak/lansia: tampil hanya sesuai umur.

// Pseudo-JS conditional field
if (input_nyeri.value == "Ya") {
    showField('skala_nyeri');
    showField('lokasi_nyeri');
} else {
    hideField('skala_nyeri');
    hideField('lokasi_nyeri');
}

4. Validasi Real-Time, Tanda Field Wajib Jelas

• Field required: beri tanda bintang merah * atau border warna.
• Error muncul sebelum klik submit, langsung setelah user keluar dari field (onBlur/onChange).
• Tooltip/keterangan singkat jika field rumit (misal: “Isi skala nyeri 0-10, 0=tidak nyeri, 10=nyeri hebat”).

<label>Skala Nyeri *</label>
<input type="number" min="0" max="10" required onblur="validateField()">

function validateField() {
    if (input.value == "" || input.value < 0 || input.value > 10) {
        showError("Skala nyeri wajib diisi 0-10");
    }
}

5. Navigasi Cepat, Minim Klik & Scrolling

• Tab antar field pakai Enter/TAB, bukan mouse doang.
• Shortcut keyboard jika memungkinkan (misal, ALT+N: next section).
• Button “Simpan Sementara” di tiap section; biar user bisa lanjut kapan aja.
• Auto-scroll ke field error saat validasi gagal.

6. Struktur Data dan Mapping ke DB: Pakai Enum & Kode, Bukan Plain Text

• Field diagnosis, alergi, status fungsional: simpan kode/id, bukan nama bebas. Hindari typo/beda penulisan yang bikin data ga konsisten.
• Buat tabel referensi diagnosis/alergi, mapping ke nama pasti sesuai regulasi/SNOMED/ICD-10.
• Enum di DB untuk field ya/tidak, status fungsional, risiko jatuh.

-- Contoh struktur tabel skrining risiko jatuh
CREATE TABLE risiko_jatuh (
    id INT PRIMARY KEY,
    id_registrasi INT NOT NULL,
    skrining_tanggal TIMESTAMP NOT NULL,
    risiko_kategori ENUM('Rendah', 'Sedang', 'Tinggi') NOT NULL,
    skor INT NOT NULL,
    petugas_id INT NOT NULL
);

7. Fitur Auto-Save & Recovery Draft

• Auto-save tiap 1-2 menit, simpan draft ke localStorage/DB sementara.
• Jika browser crash atau logout, user bisa “lanjutkan draft terakhir”.
• Reminder kalau ada draft nganggur lebih dari X jam.

// Auto-save to localStorage (simplified)
setInterval(() => {
    localStorage.setItem("asesmen_draft", JSON.stringify(getFormData()));
}, 120000);

8. Tampilan Responsive, Bisa Dipakai di Desktop & Tablet

• Form lebar fix di desktop, stack vertical di tablet/mobile.
• Font min 14px, tombol besar, spacing cukup buat jari.

/* CSS responsive form */
@media (max-width: 768px) {
    .form-section {
        flex-direction: column;
    }
    .form-label, .form-input {
        width: 100%;
    }
}

9. Checklist Otomatis untuk Akreditasi & Audit

• Field wajib (minimal: identitas, keluhan, status nyeri, alergi, risiko jatuh, skrining fungsional).
• Checklist kelengkapan muncul sebelum submit (“6/7 data wajib sudah terisi”).
• Blok submit jika field krusial kosong, beri pesan spesifik field mana belum lengkap.

// JS block submit jika field kosong
function canSubmit() {
    let missing = [];
    if (!input_nama.value) missing.push("Nama");
    if (!input_keluhan.value) missing.push("Keluhan utama");
    if (!input_nyeri.value) missing.push("Status nyeri");
    ...
    if (missing.length > 0) {
        showError("Data wajib belum lengkap: " + missing.join(", "));
        return false;
    }
    return true;
}

Contoh Studi Kasus Implementasi & Dampaknya

Di RS X (120 bed), form asesmen awal digital versi awal pakai satu halaman panjang, semua field tampil, validasi hanya saat submit, field diagnosis dan alergi text bebas. Hasil:

• Waktu rata-rata isi form: 11-13 menit/pasien
• Data diagnosis/alergi sering typo, repot rekap
• Field penting sering lupa keisi
• Audit akreditasi 2x nemu data “aneh” (misal: “Tidak nyeri” tapi ada kolom “nyeri berat” diisi “8”)

Setelah redesain UI: grouping per tab, validasi real-time, conditional field, autocomplete diagnosis, simpan kode diagnosis/alergi, auto-save tiap 2 menit, progress bar checklist. Impact:

• Waktu isi: turun jadi 6-8 menit
• Data diagnosis/alergi konsisten (ICD-10)
• Field wajib terisi semua (compliance >98%)
• User less stress, IT lebih jarang dapet komplain

Pertimbangan Lain: Privasi & Logging

• Jangan tampilkan seluruh data sensitif tanpa akses role yang tepat (misal: alergi & riwayat HIV bisa diatur read-only untuk non-perawat tertentu).
• Log semua perubahan data: siapa input, kapan, perubahan field apa.
• Audit trail wajib, minimal: id_user, datetime, field lama, field baru.

-- Tabel log perubahan asesmen
CREATE TABLE asesmen_log (
    id SERIAL PRIMARY KEY,
    asesmen_id INT NOT NULL,
    user_id INT NOT NULL,
    tanggal TIMESTAMP NOT NULL,
    field_name VARCHAR(50) NOT NULL,
    old_value TEXT,
    new_value TEXT
);

Checklist Recap: UI/UX Form Asesmen Awal Keperawatan

• Grouping field per bagian asesmen, progress bar, tab/accordion
• Default value, autocomplete, dropdown & radio
• Show/hide field sesuai jawaban user (conditional logic)
• Validasi real-time, tanda wajib jelas, error sebelum submit
• Fast navigation, shortcut keyboard, auto-scroll error
• Data struktur: enum, kode, tabel referensi, hindari text bebas
• Auto-save & recovery draft
• Responsive layout, font & tombol ramah jari
• Checklist kelengkapan, blok submit jika wajib belum lengkap
• Log perubahan, audit trail, proteksi privasi data sensitif

Snippets SQL & Struktur Tabel Sering Dipakai

-- Tabel utama asesmen awal
CREATE TABLE asesmen_awal_keperawatan (
    id SERIAL PRIMARY KEY,
    id_registrasi INT NOT NULL,
    tanggal TIMESTAMP DEFAULT now(),
    keluhan TEXT NOT NULL,
    diagnosis_id INT,           -- Foreign key ke tabel diagnosis ICD-10
    status_nyeri ENUM('Ya','Tidak') DEFAULT 'Tidak',
    skala_nyeri INT DEFAULT 0,  -- Isi kalau status_nyeri 'Ya'
    lokasi_nyeri VARCHAR(100),
    kategori_risiko_jatuh ENUM('Rendah','Sedang','Tinggi') NOT NULL,
    status_fungsional ENUM('Mandiri','Perlu bantuan','Total bantuan') NOT NULL,
    alergi_id INT,              -- Foreign key ke tabel alergi
    edukasi_kebutuhan TEXT,
    user_input INT NOT NULL
);

-- Tabel referensi diagnosis
CREATE TABLE diagnosis (
    id SERIAL PRIMARY KEY,
    kode_icd10 VARCHAR(10) NOT NULL,
    nama VARCHAR(255) NOT NULL
);

-- Tabel referensi alergi
CREATE TABLE alergi (
    id SERIAL PRIMARY KEY,
    nama VARCHAR(100) NOT NULL
);

Penutup

Sobat IT RS, form asesmen awal keperawatan bukan sekadar checklist RME. Desain UI/UX yang tepat bikin kerja perawat lebih efisien, data lebih valid, audit lebih gampang, dan IT RS lebih damai. Rajin testing bareng user, iterasi, dan jangan takut potong field yang nggak relevan. Pokok e, jangan sampai form digital lebih bikin ribet daripada form kertas!