Indonesian of Health Information Management Journal (INOHIM) I SSN (Print)     : 2354-8932
Vol.11, No.1, Juni 2023, p.29-36, DOI: 10.47007/inohim.v11i1.494

## Optimalisasi Layanan Rawat Jalan: Desain User Interface Aplikasi

## Pendaftaran Online Berbasis Mobile
Muhammad Miftah fajar 1 , Laili Rahmatul Ilmi 2 , Imaniar Sevtiyani 3 , Budhi Wicaksono 4 , Dwi Mardiyanti 5 1,2,3,5 Program Studi Rekam Medis dan Informasi Kesehatan, Universitas Jenderal Achmad Yani Yogyakarta, Yogyakarta, Indonesia 4 Rumah Sakit Nur Hidayah Bantul Jl. Brawijaya, Ring Road Barat, Ambarketawang, Gamping, Sleman, Yogyakarta, Indonsesia Korespondensi E-mail: lailiilmi@gmail.com
Submitted: 18 Mei 2023, Revised: 22 Juni 2023, Accepted: 26 Juni 2023

## Abstract
Based on focus group discussions with the user, Nurhidayah Hospital has online registration by website, but all patients are unfamiliar. Utilizing technology and information systems in the health sector can improve performance and patient satisfaction. Based on FGD result, the researcher can measure the user needed to design a user interface for a mobile-based registration application. One indicator is the speed of patient registration. Online patient registration is growing very fast, one of which is a mobile-based registration application. One of the processes is UI (user interface). This study aims to design a UI for mobile-based online registration. This research method is Research and Development (R&D). Data collection is divided into primary and secondary data. Primary data was taken using an interview guide to 3 informants. Then secondary data was obtained by observing the website using an observation checklist. The primary data obtained were processed and presented in a descriptive narrative. Observational data is used by researchers to design a mobile-based UI using the Figma application. The results of this study are UI design consists of seven phases, beginnings with interviews and observations to obtain user needs, the next stage is planning and design, the next stage is user testing, researchers are asked to add a shortcut feature in one of the menus to make it easier for users to use the application. The conclusion of this study is a mobile-based UI design in the form of a prototype that can provide convenience in online registration to minimize queues.
Keywords : user interface, online registration, outpatient, mobile-based

## Abstrak
Berdasarkan  hasil  wawancara  dan  observasi  di  RS  Nur  Hidayah  Bantul  telah  menyediakan  pendaftaran  online  melalui website resmi, namun pemanfaatan oleh pasien belum optimal. Pendaftaran online memberikan kemudahan kepada pasien untuk meminimalisir proses antrian, namun tidak menutup kemungkinan belum berjalan optimal karena pasien belum terlalu  paham  akan  alur  dan  prosedurnya,  sehingga  pasien  masih  mendaftar  secara  langsung  atau  melalui  telepon. Pendaftaran pasien secara online perkembangannya pesat, salah satunya aplikasi pendaftaran berbasis mobile . Tahapan dalam merancang pendaftaran online adalah dengan mendesain antar muka atau user interface (UI). Penelitian ini bertujuan untuk mendesain  UI  pada  pendaftaran  online  berbasis mobile .  Metode  penelitian  yang  dipilih  adalah Research  and  Development (R&D) dengan pendekatan study kasus .. Subjek pada penelitian ini adalah petugas pendaftaran, kepala rekam medis dan kepala IT. Objek pada penelitian berupa studi dokumen SOP pendaftaran pasien, panduan pendaftaran online pada website , dan server .  Metode  pengambilan  datanya  menggunakan Focused  Group  Discussion (FGD)  dengan  pedoman  FGD,  studi dokumen menggunakan panduan observasi. Hasil FGD diolah secara contenct analysys dan disajikan dalam bentuk narasi deskriptif. Hasilnya adalah pada tahapan UI terdiri dari analsisis kebutuhan dengan FGD dan observasi, perencanaan dan perancangan, uji coba kepada user . Hasil uji pertama user kurang setuju dengan tampilan awal dari aspek tampilan awal dan pemilihan warna, sehingga ada tahapan perbaikan serta penyempuraan UI. Produk akhirnya adalah UI pendaftaran online bentuk prototype sesuai dengan keinginan pasien. Kesimpulan penelitian ini adalah desain UI berbasis mobile dalam bentuk prototype yang dapat memberikan kemudahan dalam pendaftaran online sehingga meminimalisir antrian.
Kata kunci: user interface, pendaftaran online, rawat jalan; mobile

## Pendahuluan
Pemanfaatan dan perkembangan tekhnologi dan informasi di bidang kesehatan berkembang pesat (1). Saat ini pasien juga enggan apabila layanan yang diterima terkesan lama, sehingga kepuasan pasien perlu di perhatikan  (2)  Pemanfaatan  pendaftaran  online  memberikan  fleksibilitas  kepada  pasien  karena  tidak  perlu mengantri panjang, pasien dapat melihat urutan pasien sesuai kedatangannya(3). Rumah Sakit Nur Hidayah Bantul telah menyediakan pendaftaran online melalui website resmi rumah sakit. Pemanfaatan pendaftaran secara online berbasis  website  memiliki  manfaat  dengan  kemudahan  akses, self-service dan  dapat  melihat  beberapa informasi yang diberikan oleh fasilitas pelayanan kesehatan (4)(5).  Namun sejalan perkembanggannya, banyak fasilitas  kesehatan  menyediaakan  pendaftaran online secara mobile .  Tidak  hanya  pendaftaran online, namun
telekonsultasi juga dapat dilakukan memalui mobile (6). Kendala yang dihadapi oleh pihak rumah sakit adalah belum optimalnya pemanfaatan pendaftaran melalui website meskipun telah dilakukan sosialisasi kepada pasien. Berdasarkan hasil wawancara dengan tim IT dan pihak rumah sakit, fitur yang disediakan pada laman website belum  lengkap  dan  belum  tersinkronisasi  dengan  link WhatsApp. Hasil  penelitian  lain  menunjukkan  bahwa pasien merasa nyaman jika mendaftar melalui telepon (7).
Hal yang menjadi faktor penyebab kurang optimalnya pendaftaran online berbasis website di rumah sakit Nur Hidayah Bantul diantaranya kurangnya tindakan promotif dan edukatif pihak rumah sakit kepada pasien, sehingga pendaftaran online berbasis web kurang mendapat perhatian dari pasien dikarenakan tidak semua pasien mengetahui prosedur pendaftarannya, dikarenakan belum tersedianya papan pengumuman atau banner yang disediakan  sebagai  media  edukasi  pendaftaran  melalui website ,  namun  informasi  tersebut  hanya  disampaikan secara  lisan  oleh  petugas  pendaftaran.  Kemudahan  dalam  proses  pendaftaran  kepada  pasien  dapat  menjaga mutu layanan dan kepuasan pasien. (8). Pihak RS Nurhidayah akan mengembangkan pendaftaran mobile dengan nama aplikasi ”NH MOBILE : prajamo”. Pada tahap awal, peneliti akan melakukan desain UI ( User Interface) pada pendaftaran ”NH MOBILE : prajamo”.  Tujuan dari penelitian ini adalah untuk mendesaian user interface pendaftaran online  melalui mobile , harapannya dapat  memberikan kemudahan kepada pasien sehingga dapat mempercepat proses layanan.

## Metode Penelitian
Penelitian ini merupakan action riset dengan desain penelitian RnD (Research and Development) yaitu perancangan user  interface pada  pendaftaran  online  berbasis mobile. Subjek  pada  penelitian  ini  adalah  petugas pendaftaran, kepala rekam medis dan tim IT. Objek penelitian ini adalah SOP (Standar Operasional dan website. Metode pengambilan datanya dengan observasi dan FGD, instrumen yang digunakan adalah panduan observasi dan panduan FGD. Penelitian ini terbagi menjadi enam tahapan yang dijabarkan pada Gambar 1.

## Tidak sesuai
.
Gambar 1.
Tahapan Penelitian

## Hasil dan Pembahasan

## Pengumpulan Informasi
Tahap awal adalah pengumpulan informasi dari dengan melakukan FGD didapatkan informasi terkait layanan pendaftaran rawat jalan yang mana terbagi menjadi 2 yaitu, manual dan elektronik. Hasil rancangan ini merupakan media baru, dimana aplikasi ini akan ditautkan ke laman website resmi rumah sakit. Sehingga penguna dapat mengunduh serta pedoman dan link untuk menginstall aplikasi tersebut.
Pengumpulan informasi
Perencanaan
1. Perencanaan media 2. User flow 3. Use case diagram 4. Activity diagram 5. Typografi
6. wireframe Peracangangan UI
Uji coba Focus group discussion 2 Focus group discussion UI tahap akhir

## Identifikasi Kebutuhan Dalam Perancangan UI
Hasil  identifikasi  kebutuhan  terdapat  beberapa  item  yang  diinginkan  oleh  pengguna,  item  tersebut meliputi nama dokter serta jadwalnya, informasi antrian pasien serta pemilihan warna, dari masukan tersebut selanjutnya direalisasikan dalam desain UI.

## 1. Perencanaan
Dalam  proses  perencanaan  ini  peneliti  membuat  beberapa  hal  yang  menjadi  dasar  dalam  perancangan, diantaranya :
a. Perencanan media
Device yang digunakan untuk menjalan kan aplikasi ini adalah smarhtphone dengan resolusi layar 360x640 piksel dan dengan tampilan layar potrait . Penggunaan device dengan spesifikasi seperti diatas dikarenakan karena  kecocokan  antara  UI  dengan  resolusi  dan  pemilihan  tampilan  potrait  akan  mempengaruhi kenyamanan user saat  menjalankan  aplikasi.  Hasil  penelitian  sebelumnya  menjelaskan,  resolusi  yang tepat akan memudahkan dalam menjalankan aplikasi (3) serta memudahkan dalam mengisikan profil dan pengaturannya(8).
b. Userflow
Merupakan step-step yang dilakukan user saat menjalankan suatu produk (Gambar 2).
Gambar 2. Tahapan User Menjalankan Produk

## c. Use case diagram
Merupakan  sebuah  gambaran  dari  interaksi  pengguna  dengan  sistem  yang  menunjukkan  hubungan antara  pengguna  dengan  sistem.  Pentingnya use  case  diagram pada  tahap  perencanaan  yaitu  untuk mengetahui semua jenis interaksi yang dapat dilakukan user pada aplikasi dan yang berkaitan dengan sistem maupun sebaliknya(9).
d. Activity Diagram Activity diagram merupakan permodelan proses-proses yang terjadi pada sebuah sistem.
e. Typografi
Pada perancangan ini peneliti menggunakan font berjenis Roboto dan Inter. Pemilihan 2 font tersebut dikarenakan font Inter adalah font yang didesain khusus untuk pembuatan UI dan font Roboto dipilih karena tekstur huruf tidak kaku dan juga digunakan oleh pihak google sehingga user akan terasa familiar saat menggunakan aplikasi. Tipografi memiliki peran penting pendesainan sebuah aplikasi. Pemilihan tipografi  yang  tepat  sangat  penting  baik  secara  berpengaruh  seca  teknis  maupun  untuk  memenuhi kebutuhan proyek(10)(11).
f. Wireframe
Wireframe adalah kerangka dasar dari tampilan sebuah aplikasi ataupun web site.
Beberapa  penelitian  menjelaskan  pada  tahapan  perencanaan  harus  disesuaikan  dengan  kebutuhan pengguna, sehingga desain yang diinginkan dapat terpenuhi(12).

## 2. Perancangan Tahap Awal
Pada  proses  perancangannya  peneliti    membuat mock  up sebagai  gambaran  nyata  dari  suatu  produk menggunakan figma.
3. Uji Coba
Setelah  melakukan  perancangan  tahap  awal,  maka  peneliti  melakukan  uji  coba  terhadap  rancangannya dengan cara mempresentasikan kepada pihak subjek. Hasil dari uji coba tersebut adalah masukan dan saran terkait fitur yang ada pada aplikasi. Pentingnya uji coba dengan user yaitu memberikan kemudahan serta peningkatan pemahaman pada penggunaan aplikasi (4)(13)
4. Penyesuaian
Peneliti melakukan penyesuaian antara hasil desain sebelumnya dengan masukan dan saran dari subjek. 5. UI Final
Hasil dari penyesuaian rancangan tersebut akan menjadi produk UI tahap final . Berikut merupakan hasil rancangan UI aplikasi pendaftaran online berbasis mobile :
1. Halaman Masuk

## Gambar 3. Tampilan halaman masuk
Pada Gambar 3 merupakan tampilan dashboard untuk pasien yang akan melakukan registrasi akun atau log-in.  Bagi  pengguna  baru,  dapat  melakukan  daftar  terlebih  dahulu  dengan  mengisikan  data  demografi. Selanjutnya ada notifikasi ke email pengguna untuk proses aktifasi. Setelah berhasil maka akan dialihkan pada menu masuk dengan mengisikan user id berupa alamat email dan password . Setelah halaman masuk, user akan dialihkan ke laman kedua (gambar 2). Pada laman dua merupakan main menu/ menu utama yang berisikan informasi daftar, jadwal praktik dokter, daftar antrian dan informasi.

## Gambar 4. Menu Utama
Setelah  memasuki  laman  2  (Gambar  4), user akan  ke  halaman  ketiga  (Gambar  5).  Pada  Gambar  5 merupakan tampilan pendaftaran pasien secara mandiri bagi pasien lama , pasien dapat langsung mengisikan rekam medis dan tanggal lahir. Setelah itu pasien secara mandiri mengisikan nomor telepon, memilih klinik tujuan, nama dokter, jenis pembayaran dan rencana tanggal periksa. Sedangkan, bagi pasien baru yang belum memiliki rekam medis, dapat klik tombol daftar (Gambar 4).
2. Menu Daftar
a. Menu Daftar Pasien Lama
Pada  gambar  5  dibawah  ini,  merupakan  tampilan  pendafataran  pasien  lama,  pada  laman tersebut  pasien  diminta  mengisikan  nomor  rekam  medis  yang  dimiliki  serta  tanggal  lahir, apabila pasien lupa akan nomor rekam medis, selanjutnya pada laman kedua muncul menu klinik tujuan, daftar dokter, jenis pembayaran dan rencana pemeriksaan, pada tahap ketiga apakan muncul proses verifikasi petugas, setelah mendapatkan feedback petugas, akan muncul laman jadwal kunjungan serta nomor antrian.

## Gambar 5. Menu Daftar Pasien lama
b. Menu Daftar Pasien Baru
Pada Gambar 6 di bawah ini merupakan alur pendaftaran pasien baru. Pada laman pertama pasien akan  mengisikan  formulir  pendaftaran  pasien  baru,  setelah  seluruh  data  lengkap,  pasien  akan menerima feedback berupa konfirmasi dan mendapatkan nomor rekam medis,  dilanjutkan ke tahapan pendaftaran.  Tahapan  kedua, laman  ketiga  pasien  diminta  mengisikan  nomor  rekam  medis  dan tannggal  lahir  pasien.  Selanjutnya  pasien  dapat  memilih  klinik  tujuan  dan  dokter,  setelah  itu  akan muncul nomor antrian disertai tanggal dan jam kunjungan.
Gambar 6.
Tampilan pendafataran pasien baru

## 3. Menu Jadwal Dokter

## Gambar 7. Menu Jadwal Dokter
Pada menu jadwal dokter (Gambar 7), user bisa mengakses dengan menekan ikon pada menu utama dan sistem akan menampilkan poliklinik yang tersedia dan user bisa menekan poliklinik sesuai tujuan lalu sistem akan menampilkan dokter dan jadwal praktiknya. Disamping nama dokter terdapat ikon ” add ” yan g bisa digunakan user sebagai shortcut untuk melakukan pendaftaran. Dalam penbuatan shortcut harus dilakukan dengan teliti dan memikirka tingkat efisiensi dari shortcut tersebut(14)(15).
Gambar 8. Menu Antrian
Pada menu antrian (Gambar 8), user dapat mengakses 2 sub menu yaitu ”Antrian Saya” dan ”Antrian pasien”  masing -masing  memiliki feedback yang  berbeda  sesuai  dengan  status user tersebut.  Jika user telah melakukan pendaftaran maka akan muncul nomor antrian, nomor pasien yang sedang dilayani, total antrian dan fitur pengingat bisa di aktifkan sesuai dengan kebutuhan user . Sedangkan jika user belum melakukan pendaftaran maka tampilan pendaftaran pasien sebelum melakukan pendafftaran akan menucul tetapi dengan warning line berwarna merah bertuliskan ” Anda Belum Melakukan Pendaftaran ”. Sub menu yang kedua adalah ”Antrian Pasien”, jadi user bisa mengecek jumlah antrian yang ada pada setiap poliklinik di rumah sakit Nur Hidayah Bantul. Adanya menu antrian yang bisa diakses dengan mudah secara mandiri dan memiliki tingkat fleksibilitas yang tinggi akan memudahkan pengguna dalam memperoleh informasi yang dibutuhkan(16)(17). Pada menu informasi user bisa meihat profil rumah sakit, lokasi, telepon / whats app, nomor darurat dan email rumah sakit. Pada  desain  UI  memang  diperlukan  profil  fasyankes  sebagai  penciri  kepemilikan  dan  branding  (18).  Pada Gambar  9, user bisa  mengakses  3  sub  menu  pada  menu option diantaranya  akun, privacy  policy dan log  out. Kemudahan  dalam  penggunaan  sebuah  aplikasi  dapat  diketahui  dari  kejelasan  dan  estetika tampilannya(13)(19)(20).
Gambar 9.

## Menu Option
Kesimpulan Desain  UI  aplikasi  berbasis mobile dalam  bentuk prototype dapat  memberikan  kemudahan  dalam pendaftaran online sehingga meminimalisir antrian. Aplikasi tersebut juga dapat digunakan rumah sakit sebagai salah satu media dalam penyampaian informasi kesehatan. Tahapan desain terdiri dari tujuh aspek, diantaranya pengumpulan informasi, identifikasi kebutuhan, perencanaan, parancangan tahap awal, uji coba dan tahapan final. Pada desain UI menggunakan aplikasi figma, hasil uji coba diujikan kepada pengguna, selanjutnya ada proses penyempurnaan.

## Daftar Pustaka
1. Altman M, Huang TTK BJ. Design Thinking in Health Care - NEJM Knowledge+. Prev Chronic Dis Public Heal Res Pract Policy. 2018;15(E117):1 – 13.
2. Owaidh AO, Atiah AA, Abadi AS, Ali AM, Abdullah AM, Abdullah AA, et al. Patients ’ Satisfaction with Health Care Services in Southern Saudi Arabia . 2018;72(July):3857 – 60.
3. Marcolino MS, Oliveira JAQ, D’Agostino M, Ribeiro AL, Alkmim MBM, Novillo -Ortiz D. The Impact of Mhealth Interventions: Systematic Review of Systematic Reviews . JMIR mHealth uHealth. 2018;6(1).
4. Fariyanto F, Ulum F. Perancangan Aplikasi Pemilihan Kepala Desa Dengan Metode Ux Design Thinking (Studi Kasus: Kampung Kuripan). J Teknol dan Sist Inf. 2021;2(2):52 – 60.
5. PRASETYO E, HASANAH TB. Sistem Informasi Angka Kesehatan Masyarakat pada Puskesmas Sumberharta Berbasis Web Mobile . Jutim. 2017;2(2):2.
6. Hasugian  PS. Perancangan  Website  Sebagai  Media  Promosi  dan  Informasi .  J  Inform  Pelita  Nusant. 2018;3(1):82 – 6.
7. Amin  FM,  Wibowo  AT,  Jasri  M. Pemanfaatan  Open  ERP  (Dolibarr)  untuk  Agenda  dan  Member  Sebagai Penunjang Program UKM Melek Teknologi (Studi Kasus pada UKM Sandal Desa Wedoro (Nusantara). J Comput Its 2019;4:70 – 8.
8. Dewi FKS, Indriasari TD, Prayogo Y. Rancang Bangun Aplikasi Pengingat Kegiatan Akademik Berbasis Mobile .
J Buana Inform. 2016;7(4):303 – 12.
9. Fitriani B, Angraini T, Putra YHG. Pemodelan Use Case Diagram Sistem Informasi Inventaris Laboratorium Teknik Mesin . Semin Nas Sist Inf dan Teknol Inf 2018. 2018;626 – 31.
10. Ou  Y. Typography  and  Its  Implementation  on  Websites .  Metrop  Univ  Appl  Sci  Bachelor  Eng  Media  Eng Bachelor’s Thesis. 2019;(April):1– 41.
11. Iswandi  H. Peran  dan  Pengaruh  Tampilan  Desain  pada  Periklanan.  Seni  Desain  dan  Budaya .  2018;volume 3(Issue 3):100 – 9.
12. Syarifudin  A,  Nur  A. Perancangan  Sistem  Informasi  Pengajuan  dan  Pelaporan  Pembayaran  Tunjangan  Kinerja Kementerian  Keuangan  Menggunakan  Metode  Prototype .  J  Sisfokom  (Sistem  Inf  dan  Komputer). 2019;8(2):149 – 58.
13. Aziza RFA, Hidayat YT . Analisa Usability Desain User Interface Pada Website . 2019;13(1):7 – 11.
14. Elrose F, Hill A, Liu D, Salisbury I, LeCong T, Loeb RG, et al. The Use of Head-Worn Displays for Vital Sign Monitoring in Critical and Acute Care: A Systematic Review (Preprint). JMIR mHealth uHealth. 2021;9. 15. Sukoco  CBSMS. Evaluasi  User  Interface  pada  Aplikasi  Pacitan  Tourism .  J  Ekon  dan  Tek  Inform. 2016;5(8):25 – 37.
16. Zulfikar RA, Supianto AA. Rancang Bangun Aplikasi Antrian Poliklinik Berbasis Mobile . J Teknol Inf dan Ilmu Komput. 2018;5(3):361.
17. Carpenter R, DiChiacchio T, Barker K. Interventions For Self-Management of Type 2 Diabetes: An Integrative Review . Vol. 6, International Journal of Nursing Sciences. Chinese Nursing Association; 2019. p. 70 – 91.
18. Ilmi  LR,  Sayekti  IR. The  Design  of  Discharge  Summary  for  Patients  of  Continuous  Care .  2021;514(Icoship 2020):210 – 5.
19. Marcell A V., Burstein GR. Sexual and Reproductive Healthcare Services in The Pediatric Setting . Pediatrics. 2017;140(5).
20. Ebnehoseini Z, Tabesh H, Jangi M, Deldar K, Mostafavi SM, Tara M. Investigating Evaluation Frameworks for Electronic Health Record: a Literature Review . Open Access Maced J Med Sci. 2021;9:8 – 25.