JITTER- Jurnal Ilmiah Teknologi dan Komputer Vol. 1 No. 2 Desember 2020

Perancangan User Interface dan User Experience pada SIMRS Modul Payroll

Isna Wanda Robiullaa1, A. A. Kompiang Oka Sudanaa2, Ni Kadek Ayu Wirdiania3 aUniversitas Udayana Teknologi Informasi Jimbaran

e-mail: 1[email protected] 2[email protected] 3[email protected]

Abstrak

Proses pemenuhan hak sumber daya manusia di rumah sakit berupa upah atau gaji dirasa cukup rumit dan membutuhkan ketelitian yang tinggi. Oleh karena itu, untuk meminimalisir kesalahan dalam perhitungan upah atau gaji pegawai dibutuhkan sistem yang mampu menangani proses penggajian yaitu SIMRS Modul Payroll. SIMRS Modul Payroll terdiri dari empat proses utama yaitu master data, penggajian dan pajak, remunerasi, serta perampungan. Penelitian ini berfokus pada perancangan user interface dan user experience dari SIMRS Modul Payroll. Hal ini dikarenakan desain memiliki peran sangat penting bagi pengguna, desain yang menarik dan mudah dipahami akan memberikan rasa nyaman kepada pengguna sistem. Perancangan user interface dan user experience SIMRS Modul Payroll pada penelitian ini menghasilkan analisis kebutuhan baik pengguna maupun sistem, perancangan use case diagram, perancangan mockup, dan pembuatan tampilan sistem dengan bahasa pemrograman HTML, CSS, dan JavaScript.

Kata kunci: SIMRS Modul Payroll, Sumber Daya manusia, Upah dan Gaji, User Interface, User Experience

Abstract

The process of fulfilling human resource rights in hospitals by salaries is considered quite complicated and requires high accuracy. Therefore, to minimize errors in calculating employee salaries, a system that is able to complete the Payroll process is needed, namely Hospital Management Infomatio System Module Payroll. Hospital Management Infomation System Module Payroll consists of four main processes, namely master data, Payroll and taxes, remuneration, and settlement. This research is focus on the design of user interface and user experience. This is because design has a very important role for the user, an attractive design and easy to implement will provide a feeling of comfort to system users. The design of user interface and user experience of Hospital Management Infomatio System Module Payroll in this research resulted an analysis the needs of both users and systems, designing use case diagrams, designing mockups, and making system displays using the programming languages HTML, CSS, and JavaScript.

Keywords : SIMRS Modul Payroll, Human Resource, Salaries, User Interface, User Experience

  • 1.    Introduction

Rumah Sakit merupakan suatu lembaga layanan kesehatan yang melaksanakan pelayanan kesehatan kepada masyarakat secara penuh dengan menyediakan layanan gawat darurat rawat inap dan rawat jalan [3]. Rumah Sakit wajib memberikan pelayanan kesehatan yang aman berkualitas dan efektif yang mengutamakan kebutuhan pasien. Salah satu komponen penting rumah sakit dalam memberikan pelayanan yang baik kepada pasien adalah sumber daya manusia (SDM). Oleh karena itu rumah sakit harus mampu mengelola kualitas SDM dengan baik yaitu dengan cara memberikan hak yang wajib diterima oleh setiap SDM. Hak tersebut berupa upah atau gaji atas jasa yang telah diberikan kepada pasien. Namun proses-proses dalam pemenuhan hak SDM dirasa cukup rumit dan membutuhkan ketelitian yang tinggi. Oleh karena itu untuk meminimalisir kesalahan dalam perhitungan upah atau gaji

pegawai dibutuhkan sistem yang mampu menangani proses-proses tersebut yaitu SIMRS Modul Payroll.

SIMRS Modul Payroll terdiri dari empat proses utama yaitu master data penggajian dan pajak remunerasi serta perampungan [10]. SIMRS Modul Payroll mampu melakukan perhitungan gaji dan pajak secara otomatis dan menyimpan data hasil perhitungan. Namun dibalik menu dan fitur yang dimiliki terdapat satu hal yang sangat penting yaitu desain tampilan dari SIMRS Modul Payroll. Hal ini dikarenakan desain memiliki peran sangat penting bagi pengguna desain yang menarik dan mudah dipahami akan memberikan rasa nyaman kepada pengguna sistem [8]. Oleh karena itu perancangan user interface dan user experience SIMRS Modul Payroll penting untuk dilakukan.

Perancangan user interface dan user experience SIMRS Modul Payroll pada penelitian ini dilakukan dengan menganalisis kebutuhan baik pengguna maupun sistem perancangan use case diagram perancangan mockup, dan pembuatan tampilan sistem dengan bahasa pemrograman HTML CSS dan JavaScript. Harapan dengan adanya penelitian ini user interface dan user experience pada sistem informasi penggajian mampu memudahkan pengguna terutama bagi pengguna yang awam dengan komputer. Selain itu juga mampu memudahkan proses perhitungan gaji dan remunerasi beserta pajaknya dikarenakan perhitungan dilakukan secara otomatis sehingga dapat meminimalisir kesalahan.

  • 2.    Research Method

Penelitian dilakukan melalui beberapa tahapan. Tahapan-tahapan penelitian merupakan urutan langkah pengerjaan penelitian secara rinci. Tahapan penelitian digambarkan berupa flowchart dibawah ini.

Gambar 1. Alur Penelitian

Gambar 1. merupakan alur penelitian dalam perancangan user interface dan user experience SIMRS Modul Payroll. Penelitian diawali dengan wawancara dan observasi langsung dengan staf rumah sakit selain itu penelitian juga diimbangi dengan studi literatur terkait topik. Tahap keempat yaitu pendefinisian kebutuhan berdasarkan hasil analisis dari 3 tahap sebelumnya. Tahap selanjutnya ialah perancangan use case diagram perancangan mockup, dan pembuatan tampilan sistem sesuai dengan mockup.

  • 3.    Literature Study

    • 3.1.    User Interface dan User Experience

User interface (UI) merupakan media yang cukup penting pada suatu produk teknologi dimana user interface menghubungkan antara manusia dengan produk teknologi tersebut baik website maupun mobile [2]. Sedangkan user experience merupakan proses perancangan atau desain UI sesuai dengan kebutuhan pengguna sehingga mampu menciptakan kenyaman kepada pengguna dalam mengakses produk teknologi tersebut [1].

  • 3.2.    Rumah Sakit

Rumah Sakit merupakan suatu lembaga layanan kesehatan yang melaksanakan pelayanan kesehatan kepada masyarakat secara penuh dengan menyediakan layanan gawat darurat rawat inap dan rawat jalan [3]. Rumah Sakit wajib memberikan pelayanan kesehatan yang aman berkualitas dan efektif yang mengutamakan kepentingan pasien.

  • 3.3.    Sistem Informasi Manajemen

Sistem Informasi merupakan sebuah sistem yang menghubungkan antara kebutuhan pengelolaan transaksi sehari-hari mendukung operasi dan mendukung perencanaan strategi pada suatu organisasi selain itu sistem informasi juga melibatkan pihak luar dengan

menyediakan laporan yang diperlukan [4]. Sistem informasi dapat terintegrasi dan saling berinteraksi dengan sistem informasi yang lain untuk mendukung informasi yang dibutuhkan oleh organisasi atau perusahaan disetiap tingkatan manajemen hal ini yang disebut dengan sistem informasi manajemen.

  • 3.4.    Upah dan Gaji

Upah atau gaji adalah hak setiap pegawai yang telah melakukan pekerjaannya yang diberikan dalam bentuk uang sebagai imbalan kepada pegawai sesuai dengan ketetapan atau kontrak kerja [5]. Upah dan gaji memiliki tiga komponen utama ketiga komponen tersebut ialah sebagai berikut.

  • a.    Upah dasar (based pay) merupakan komponen upah yang wajib diberikan kepada karyawan berdasarkan hitungan waktu seperti jam hari minggu bulan atau per-tahun.

  • b.    Upah berdasar kinerja (performance related pay) merupakan upah yang didasarkan pada ukuran kinerja setiap individu kelompok atau organisasi berdasarkan yang telah dikerjakan seperti biaya tindakan setiap rekam medis.

  • c.    Upah tidak langsung (employee benefit) merupakan upah berupa jasa non-cash atau services yang secara langsung diperuntukkan bagi karyawan seperti jaminan keamanan pendapatan (income security) termasuk asuransi jiwa perlindungan kesehatan termasuk medical & dental plan serta pensiun.

  • 3.5.    HTML

HTML yang merupakan singkatan dari Hypertext Markup Language adalah bahasa markup untuk membuat suatu website yang dapat diakses melalui jaringan internet [1]. Halaman sebuah website sebagian besar berisi elemen-elemen HTML seperti <title> <p> <div> dan lain sebagainya untuk melengkapi sebuah halaman website HTML memerlukan CSS untuk memperindah tampilan dari halaman web.

  • 3.6.    CSS

CSS (Cascading Style Sheet) merupakan kode yang berguna untuk mengatur tampilan/layout dari halaman web yang dibuat dari Bahasa pemrograman HTML sehingga dapat dikatakan CSS melengkapi HTML untuk memperindah halaman web agar memudahkan user dalam menjalankan website tersebut [6].

  • 3.7.    JavaScript

JavaScript merupakan bahasa pemrograman komputer yang dinamis dan bersifat client-side. JavaScript bersifat client-side dikarenakan kode atau script tergabung dalam File HTML yang kemudian akan dieksekusi oleh browser dan diakses langsung oleh pengguna. Keuntungan penggunaan JavaScript dalam pengembangan website diantaranya adalah membuat halaman website menjadi lebih dinamis mengurangi interaksi dengan server memberikan feedback secara langsung kepada pengguna meningkatkan tingkat interaktif website dan memperkaya interface seperti drag-and-drop [7].

  • 4.    Result and Discussion

Penelitian mengenai user interface dan user experience SIMRS Modul Payroll yang dilakukan menghasilkan analisis kebutuhan use case diagram perancangan mockup, dan tampilan sistem. Hasil user interface dan user experience SIMRS Modul Payroll dapat dijabarkan pada subbab-subbab dibawah.

  • 4.1.    Analisis Kebutuhan

Analisis kebutuhan terbagi menjadi 2 jenis yaitu analisis kebutuhan user dan analisis kebutuhan sistem. Analisis kebutuhan user berdasarkan wawancara dan observasi langsung dengan pegawai rumah sakit mendapatkan hasil dimana user membutuhkan sebuah sistem yang mampu menangani perhitungan gaji karyawan rumah sakit beserta perhitungan pajaknya mulai dari gaji setiap bulan tunjangan kinerja bonus dan tunjangan hari raya. Selain itu user juga membutuhkan sistem yang mampu menangani proses kompensasi cuti dan perampungan.

Hasil analisis kebutuhan user menjadi acuan dalam menganalisis kebutuhan sistem dimana analisis kebutuhan sistem akan disesuaikan dengan kebutuhan user. Analisis kebutuhan sistem menghasilkan beberapa menu pada SIMRS Modul Payroll diantaranya adalah Master Data Penggajian Gaji Perbulan Remunerasi Upah Lembur Gaji Ke 13 Gaji Ke

14/THR Kompensasi Cuti dan Perampungan. Menu-menu tersebut terdiri dari beberapa fitur yaitu tambah data update data dan lihat detail data.

  • 4.2.    Use Case Diagram

Use case diagram menggambarkan penggunaan sistem oleh pengguna berdasarkan hak akses yang dimiliki. Use case diagram Modul Payroll menggambarkan siapa saja pengguna (aktor) yang dapat menggunakan sistem dan menu apa saja yang dapa digunakan oleh pengguna tersebut. Use case diagram Modul Payroll dapat dilihat pada gambar dibawah ini.

Gambar 2. Use Case Diagram

Gambar 2. merupakan use case diagram dari Sistem Informasi Manajemen Rumah Sakit Modul Payroll. Terlihat pada gambar bahwa terdapat satu aktor yaitu Pegawai Payroll. Sesuai use case diagram tersebut Pegawai Payroll dapat mengakses seluruh menu dan submenu yang ada pada SIMRS Modul Payroll.

  • 4.3.    Mockup

Mockup merupakan gambaran dari rancangan desain tampilan GUI Sistem Informasi Manajemen Rumah Sakit Modul Payroll. Mockup terdiri dari beberapa desain tampilan seperti tampilan utama menu tampilan input update dan detail. Setiap tampilan berisi tombol (button) untuk mengakses fitur yang ada pemilihan warna pada tombol (button) telah disesuaikan dengan fungsi dan kegunaannya untuk memudahkan pengguna mengenali setiap tombol. Rancangan desain tampilan atau mockup dari SIMRS Modul Payroll dapat dilihat pada gambargambar dibawah ini.

BS bayangan

Isna Wanda £

Gambar 2. Mockup Tampilan Utama Menu


Gambar 2. merupakan rancangan desain dari tampilan utama setiap menu yang digambarkan dalam bentuk mockup. Terlihat pada gambar bahwa terdapat tombol “Tambah” berwarna untuk menambahkan data dan sebuah tabel pada tampilan utama menu yang menampilkan beberapa data pada menu tersebut serta pada kolom action terdapat 3 tombol yaitu tombol Lihat Detail berwarna biru Update berwarna orange dan Delete berwarna merah.

Gambar 3. Mockup Modal Tambah Data

Gambar 3. merupakan rancangan desain dari tampilan modal tambah data dengan detail yang digambarkan dalam bentuk mockup. Terlihat pada gambar bahwa terdapat beberapa kolom inputan yang harus diisi dan 1 tombol yaitu tombol Selanjutnya berwarna hijau untuk menuju halaman update dan menambah detail inputan.

Gambar 4. Mockup Modal Update


Gambar 4. merupakan rancangan desain dari tampilan update data dengan detail yang digambarkan dalam bentuk mockup. Terlihat pada gambar bahwa terdapat beberapa kolom inputan yang akan otomatis terisi dan 2 kolom untuk menginputkan detail Tunjangan dan insentif. Tombol “Buka” berwarna briu muda dan “Tambah” berwarna hijau pada kolom tunjangan dan insentif berguna untuk memilih dan menambahkan detail yang akan tampil pada tabel dibawahnya. Selain itu terdapat 3 tombol yaitu Hitung berwarna biru tua untuk menghitung Pajak dan gaji yang diterima pegawai Simpan berwarna hijau dan Kembali berwarna abu-abu.

Gambar 5. Mockup Modal Lihat Detail

Gambar 5. merupakan rancangan desain dari tampilan halaman lihat detail yang digambarkan dalam bentuk mockup. Terlihat pada gambar bahwa ditampilkan seluruh data secara lengkap termasuk dengan tabel detail tunjangan dan Insentif. Selain itu terdapat tombol Kembali berwarna abu-abu yang berguna untuk kembali ke halaman utama.

  • 4.4.    Tampilan Sistem

Tampilan sistem dari SIMRS Modul Payroll yang telah dibuat berdasarkan hasil observasi dan perancangan memiliki empat proses utama yaitu manajemen master data penggajian remunerasi dan perampungan. Berikut adalah beberapa tampilan yang mewakili setiap fitur pada menu yang terdapat pada SIMRS Modul Payroll.

Gambar 6. Tampilan Menu Gaji Perbulan

Gambar 6 diatas merupakan tampilan utama dari menu gaji perbulan. Halaman ini menampilkan tabel yang berisi beberapa data gaji perbulan yaitu Tahun Bulan Nama Pegawai Gaji Bruto dan Gaji Diterima. Halaman ini juga berisi tombol (button) untuk mengakses fitur lain pada submenu gaji perbulan yaitu Tambah Data Tandai Cetak Slip Lihat Detail Update dan Hapus.

Gambar 7. Tampilan Fitur Tambah Gaji Ke 14/THR

Gambar 7. merupakan tampilan dari salah satu fitur submenu THR/Gaji Ke 14 PNS yaitu fitur input data THR/Gaji Ke 14 PNS. Fitur ini berguna untuk menginputkan tunjangan hari raya yang diterima pegawai berstatus PNS. Tampilan fitur input THR berupa modal yang akan muncul setelah pengguna menekan tombol “Tambah Data” pada halaman utama submenu THR/Gaji Ke 14 PNS. Modal ini berisi kolom input-an yang meliputi Tahun dan Nama Pegawai. Pengguna dapat menekan tombol “Selanjutnya” setelah semua kolom terisi yang kemudian diarahkan langsung oleh sistem ke halaman update THR/Gaji Ke 14 PNS untuk melanjutkan penghitungan pajak dan THR bersih yang diterima pegawai berstatus PNS.

Gambar 8. Tampilan Fitur Update Gaji Ke 14/THR PNS

Gambar 8. merupakan tampilan dari salah satu fitur submenu THR/Gaji Ke 14 yaitu fitur update THR PNS. Fitur ini berguna untuk mengubah atau memperbarui data THR PNS yang telah diinputkan sebelumnya selain itu fitur ini juga berguna untuk menghitung pajak penghasilan PNS berdasarkan golongannya. Tampilan fitur update THR/gaji ke 14 PNS akan muncul setelah fitur input dan apabila pengguna menekan tombol Update yang dilambangkan dengan gambar form di halaman utama submenu THR/Gaji Ke 14 PNS pada kolom action. Pengguna dapat mengubah atau memperbarui data sesuai dengan kolom nya kemudian menekan tombol “Simpan” untuk menyimpan perubahan. Apabila pengguna ingin mengubah atau memperbarui data tunjangan dan insentif PNS maka pengguna dapat mengisi kolom dan menekan tombol “Tambah” kemudian menghapus data yang tidak digunakan lagi pada tabel detail yang berkaitan.

JHTOlehKaryawan            :        Rp. 106,000

I JAMKESoIehKaryawan :        Rp. 106,000

I PremlBPJSoIehKaryawan :        Rp. 212,000

Gambar 9. Tampilan Fitur Update Gaji Ke 14/THR Non PNS

Gambar 9. merupakan tampilan dari salah satu fitur submenu THR Non PNS yaitu fitur update THR non PNS. Fitur ini berguna untuk mengubah atau memperbarui data tunjangan hari raya pegawai non PNS yang telah diinputkan sebelumnya selain itu fitur ini juga berguna untuk menghitung pajak penghasilan pegawai dengan menekan tombol “Hitung”. Tampilan fitur update THR Non PNS akan muncul setelah fitur input dan apabila pengguna menekan tombol Update yang dilambangkan dengan gambar form di halaman utama submenu THR Non PNS pada kolom action. Pengguna dapat mengubah atau memperbarui data sesuai dengan kolom nya kemudian menekan tombol “Simpan” untuk menyimpan perubahan.

Gambar 10. Tampilan Detail Remunerasi PNS

Gambar 10. merupakan tampilan dari salah satu fitur submenu Remunerasi PNS yaitu fitur lihat detail remunerasi PNS. Fitur ini berguna untuk melihat data remunerai salah satu pegawai berstatus PNS pada bulan tertentu secara lengkap. Tampilan fitur lihat detail remunerasi PNS akan muncul setelah pengguna menekan tombol Detail yang dilambangkan dengan gambar mata pada halaman utama submenu Remunerasi PNS pada kolom action. Halaman ini berisi detail atau rincian data remunerasi salah satu pegawai PNS secara lengkap termasuk detail remunerasi langsung. Pengguna dapat menekan tombol Kembali pada halaman ini untuk kembali ke halaman utama submenu Remunerasi PNS.

Gambar 11. Tampilan Detail Remunerasi Non PNS

Gambar 11. merupakan tampilan dari salah satu fitur submenu Remunerasi Non PNS yaitu fitur lihat detail remunerasi non PNS. Fitur ini berguna untuk melihat data remunerasi salah satu pegawai pada bulan tertentu secara lengkap. Tampilan fitur lihat detail remunerasi non PNS akan muncul setelah pengguna menekan tombol Detail yang dilambangkan dengan gambar mata pada halaman utama submenu Remunerasi Non PNS pada kolom action. Halaman ini berisi detail atau rincian data remunerasi salah satu pegawai non PNS secara lengkap termasuk detail remunerasi langsung. Pengguna dapat menekan tombol Kembali pada halaman ini untuk kembali ke halaman utama submenu Remunerasi Non PNS.

  • 5.    Conclusion

Perancangan user interface dan user experience SIMRS Modul Payroll mendapatkan hasil analisis kebutuhan pengguna dan sistem perancangan use case diagram perancangan mockup, serta tampilan sistem yang mudah dimengerti dan sesuai dengan kebutuhan pengguna. Sehingga dihasilkan SIMRS Modul Payroll terdiri dari empat proses utama yaitu master data penggajian dan pajak remunerasi serta perampungan yang mudah dimengerti oleh pengguna. User interface dan user experience dapat dievaluasi dan dirancang kembali menyesuaikan kebijakan terbaru mengenai penggajian pegawai dan kebutuhan pengguna yang terus berubah seiring perkembangan teknologi.

References

  • [1]    w3.org "4 Conformance: requirements and recommendations " [Online]. Available: https://www.w3.org/TR/REC-html40-971218/conform.html#deprecated. [Accessed 7 September 2019].

  • [2]    E. Susilo F. D. Wijaya and R. Hartono "Perancangan dan Evaluasi User Interface Aplikasi Smart " JNTETI, vol. 7 p. 150 2018.

  • [3]    Menteri Kesehatan RI PERATURAN MENTERI KESEHATAN REPUBLIK INDONESIA NOMOR 4 TAHUN 2018, Jakarta 2018.

  • [4]    H. Jogiyanto Analisis dan Desain Sistem Informasi: Pendekatan Terstruktur 1981.

  • [5]    KEMENPERIN "Undang-Undang Republik Indonesia Nomor 13 Tahun 2003 " 2003. [Online]. Available: https://kemenperin.go.id/kompetensi/UU_13_2003.pdf. [Accessed 15 08 2020].

  • [6]    duniailkom.com "Tutorial Belajar CSS Part 1: Pengertian CSS Apa yang dimaksud dengan CSS? " 1 October 2013. [Online]. Available: https://www.duniailkom.com/tutorial-belajar-css-part-1-pengertian-css-apa-yang-dimaksud-dengan-css/. [Accessed 11 9 2020].

  • [7]    Tutorials Point Javascript Language Tutorials Point 2015.

  • [8]    I. P. A. E. Pratama Komputer dan Masyarakat Bandung: Informatika 2014.

  • [9]    F. R. Pembajeng and Ardiansyah "Pengembangan User Interface (Ui) Dan User Experience (Ux) Aplikasi Cashoop Untuk Pengelolaan Keuangan Pribadi " JSTIE (Jurnal Sarjana Teknik Informatika) , vol. 7 no. 1 pp. 20-33 2019.

  • [10]    A. P. G. Puspita "Perancangan Sistem Informasi Manajemen Rumah Sakit Modul Human

Resource Development dan Payroll (Studi Kasus Rumah Sakit PTN Udayana) " Jimbaran Badung 2015.