commit 130ab175543f99a7dbb45699e43d269e5a0de2ae Author: Winnaans_14 Date: Thu Jun 11 10:54:02 2026 +0700 Upload files to "/" diff --git a/SKRIPSI_winnaans 2026.pdf b/SKRIPSI_winnaans 2026.pdf new file mode 100644 index 0000000..f469815 --- /dev/null +++ b/SKRIPSI_winnaans 2026.pdf @@ -0,0 +1,4281 @@ + IMPLEMENTASI METODE UCD DALAM + PERANCANGAN UI/UX PADA APLIKASI PRESENSI + + BERBASIS WEB DAN MOBILE UNTUK +MENINGKATKAN KEMUDAHAN ABSENSI DI KANTOR + + DESA PELEM + + SKRIPSI + + Oleh + Winna Aprilia Nabela Sari + + E41220734 + +PROGRAM STUDI DI LUAR KAMPUS UTAMA (PSDKU) + TEKNIK INFORMATIKA KAB. NGANJUK + JURUSAN TEKNOLOGI INFORMASI + POLITEKNIK NEGERI JEMBER + 2026 + IMPLEMENTASI METODE UCD DALAM + PERANCANGAN UI/UX PADA APLIKASI PRESENSI + + BERBASIS WEB DAN MOBILE UNTUK +MENINGKATKAN KEMUDAHAN ABSENSI DI KANTOR + + DESA PELEM + + SKRIPSI + + Sebagai salah satu syarat memperoleh gelar Sarjana Sains Terapan + Komputer (S.Tr.Kom) Program Studi Di Luar Kampus Utama (PSDKU) + + Teknik Informatika Kab. Nganjuk + Jurusan Teknologi Informasi + + Oleh + + Winna Aprilia Nabela Sari + E41220734 + +PROGRAM STUDI DI LUAR KAMPUS UTAMA (PSDKU) + TEKNIK INFORMATIKA KAB. NGANJUK + JURUSAN TEKNOLOGI INFORMASI + POLITEKNIK NEGERI JEMBER + 2026 + + ii + KEMENTRIAN PENDIDIKAN TINGGI, SAINS, DAN TEKNOLOGI + POLITEKNIK NEGERI JEMMBER + + JURUSAN TEKNOLOGI INFORMASI + + IMPLEMENTASI METODE UCD DALAM PERANCANGAN UI/UX +PADA APLIKASI PRESENSI BERBASIS WEB DAN MOBILE UNTUK + + MENINGKATKAN KEMUDAHAN ABSENSI DI KANTOR DESA + PELEM + + Winna Aprilia Nabela Sari (E41220734) + + Telah Diuji pada Tanggal 7 April 2026 dan Dinyatakan Memenuhi Syarat + + Ketua Penguji, + +Dr. Khomsatun Ni'mah, S.Pd., M.Pd. + 19850103 201903 2010 + +Sekertaris Penguji, Anggota Penguji, + +Muhammad Ainul Fikri, S.T., M.Eng. Qonitatul Hasanah, S.ST., M.Tr.T. + NIP. 199608192024061003 NRP. D19940509202103201 + +Dosen Pembimbing, + +Muhammad Ainul Fikri, S.T., M.Eng. + NIP. 199608192024061003 + + Mengesahkan, +Ketua Jurusan Teknologi Informasi + +Ir Hendra Yufit Riskiawan, S.Kom., M.Cs. + NIP. 198302032006041003 + + iii + SURAT PERNYATAAN + +Saya yang bertanda tangan dibawah ini: +Nama : Winna Aprilia Nabela Sari +NIM : E41220734 +Menyatakan dengan sebenar-benarnya bahwa segala pernyataan yang berada +dalam Laporan Akhir atau Skripsi saya yang berjudul “IMPLEMENTASI +METODE UCD DALAM PERANCANGAN UI/UX PADA APLIKASI +PRESENSI BERBASIS WEB DAN MOBILE UNTUK +MENINGKATKAN KEMUDAHAN ABSENSI DI KANTOR DESA +PELEM” merupakan gagasan dan hasil karya saya dengan arahan dosen +pembimbing, serta belum pernah diajukan dalam bentuk apapun pada +perguruan tinggi manapun. + + Semua data dan informasi yang digunakan pada laporan ini telah +dinyatakan secara jelas dan dapat diperiksa kebenarannya. Sumber informasi +yang berasal atau dikutip karya yang telah diterbitkan dari penulisan lain telah +disebutkan dalam naskah dan dicantumkan dalam Daftar Pustaka di bagian +akhir Laporan Akhir atau Skripsi ini. + + Nganjuk, 7 April 2026 + + Winna Aprilia Nabela Sari + NIM E41220734 + + iv + PERNYATAAN PERSETUJUAN + PUBLIKASI + + KARYA ILMIAH UNTUK + KEPENTINGAN AKADEMIS + +Yang bertanda tangan dibawah ini, saya: + +Nama : Winna Aprilia Nabela Sari + +NIM : E41220734 + +Program Studi : PSDUK-Teknik Informatika-Kab. Nganjuk + +Jurusan : Teknologi Informasi + +Demi pengenbangan ilmu pengetahuan, saya menyetujui untuk memberikan +kepada UPT. Perpustakaan Politeknik Negeri Jember, Hak Bebas Royalti +Non-Ekslusif (Non-Exclusive Royalty Free Right) atas Karya Ilmiah berupa +Laporan Skripsi saya yang berjudul: + +IMPLEMENTASI METODE UCD DALAM PERANCANGAN UI/UX + PADA APLIKASI PRESENSI BERBASIS WEB DAN MOBILE + + UNTUK MENINGKATKAN KEMUDAHAN ABSENSI DI KANTOR + DESA PELEM + +Dengan Hak Bebas Royalti Non-Ekslusif ini UPT, Perpustakaan Politeknik +Negeri Jember berhak menyimpan, mengalih media atau format, mengelola +dalam bentuk Pangkalan Data (Database), mendistribusikan karya dan +menampilkan atau mempublikasikannya di Internet atau media lain untuk +kepentingan akademis tanpa perlu meminta ijin dari saya selama tetap +mencantumkan nama saya sebagai penulis atau pencipta. + +Saya bersedia untuk menanggung secara pribadi tanpa melibatkan Politeknik +Negeri Jember, Segala bentuk tuntutan hukum yang timbul atas Pelanggaran +Hak Cipta dalam Karya Ilmiah ini. + +Demikian pernyataan ini saya buat dengan sebenarnya. + + Dibuat di : Nganjuk + Pada Tanggal : 7 April 2026 + Yang menyatakan, + + Nama : Winna Aprilia Nabela Sari + NIM : E41221082 + + v + MOTO +“ Tidak mengejar penilaian dari orang lain, hanya ingin setiap + + langkah membawa keberuntungan didalam kehidupan. ” + + vi + PERSEMBAHAN + + Karya sederhana ini tidak lepas dari keterlibatan orang-orang yang telah +memberi doa, dukungan, semangat, serta bantuan baik moral maupun materil +selama roses penyusunan skripsi ini. Sehingga penulis mengucapkan terima +kasih yang sebesar-besarnya kepada semua pihak yang terlibat. Skripsi ini +saya persembahkan kepada: + + 1. Allah SWT. atas segala limpahan rahmatnya saya telah diberikan + kelancaran dalam setiap langkah untuk menyelesaikan skripsi ini. + + 2. Orang tua tercinta Bapak dan Ibu kandung saya, yang selalu + memanjatkan doa, memberi kasih sayang, dukungan, serta semangat + tanpa henti dalam setiap langkah perjalanan hidup dan pendidikan + saya. + + 3. Dosen pembimbing Bapak Muhammad Ainul Fikri S.T., M.Eng. yang + telah dengan sabar memberi arahan, bimbingan dan ilmu yang sangat + berharga selama proses penyusunan skripsi ini. + + 4. Diri saya sendiri, sebagai bentuk apresiasi atas segala perjuangan, + kesabaran, bertahan dan tidak menyerah melewati setiap proses + hingga skripsi ini dapat terselesaikan. + + vii + Implementasi Metode UCD Dalam Perancangan UI/UX Pada Aplikasi + Presensi Berbasis Web Dan Mobile Untuk Meningkatkan Kemudahan + + Absensi Di Kantor Desa Pelem + Dibimbing oleh Muhammad Ainul Fikri, S.T., M.Eng. + + Winna Aprilia Nabela Sari + Program Studi Teknik Informatika + + Jurusan Teknologi Informasi + + ABSTRAK + +Sistem presensi merupakan salah satu kegiatan administrasi penting dalam +instansi pemerintahan untuk mencatat kehadiran pegawai secara terstruktur +dan terdokumentasi dengan baik. Namun, sistem presensi yang belum +dirancang sesuai dengan kebutuhan pengguna dapat menimbulkan kesulitan +dalam penggunaan serta kurang optimalnya pengelolaan data kehadiran. +Penelitian ini merancang UI/UX aplikasi presensi berbasis web dan mobile di +Kantor Desa Pelem menggunakan pendekatan User Centered Design (UCD) +agar desain sistem lebih sesuai dengan kebutuhan dan pengalaman pengguna. +Evaluasi kegunaan dilakukan menggunakan metode System Usability Scale +(SUS) secara kuantitatif dengan menyebarkan kuesioner kepada responden +yang telah melakukan pengujian terhadap desain aplikasi. Hasil penelitian +menunjukkan adanya peningkatan skor SUS dari kedua platform setelah +dilakukan perbaikan desain berdasarkan masukan pengguna. Selain itu, hasil +evaluasi juga menunjukkan peningkatan pada aspek kemudahan penggunaan +dan penerimaan sistem oleh pengguna. Penggunaan metode UCD dalam +proses perancangan serta metode SUS dalam evaluasi terbukti efektif dalam +meningkatkan usability dan kualitas desain aplikasi presensi. + +Kata kunci: User Centered Design (UCD), UI/UX, Presensi, Web, Mobile, +Sistem Usability Scale (SUS) + + viii + Implementation of the UCD Method in UI/UX Design for Web-Based and +Mobile Applications to Improve Attendance Tracking in the Pelem Village + + Office + Supervised by Muhammad Ainul Fikri, S.T., M.Eng. + + Winna Aprilia Nabela Sari + Program of Study Information Technology + Departemen of Information Technology + + ABSTRACT + +Theattendance system is one of the important administrative activities in +government agencies to record employee attendance in a structured and well- +documented manner. However, an attendance system that has not been +designed according to user needs can cause difficulties in use and suboptimal +management of attendance data. This study designed the UI/UX of a web- +based and mobile attendance application at the Pelem Village Office using a +User Centered Design (UCD) approach so that the system design is more in +line with user needs and experiences. Usability evaluation was conducted +using the System Usability Scale (SUS) method quantitatively by distributing +questionnaires to respondents who had tested the application design. The +results of the study show an increase in the SUS score from both platforms +after design improvements based on user input. In addition, the evaluation +results also show an increase in the ease of use and acceptance of the system +by users. The use of the UCD method in the design process and the SUS +method in the evaluation proved to be effective in improving the usability and +quality of the attendance application design. + +Keyword: User Centered Design (UCD), UI/UX, Attendance, Web, Mobile, +System Usability Scale (SUS) + + ix + RINGKASAN + +Implementasi Metode UCD Dalam Perancangan UI/UX Pada Aplikasi +Presensi Berbasis Web Dan Mobile Untuk Meningkatkan Kemudahan +Absensi Di Kantor Desa Pelem, Winna Aprilia NS, NIM E41220734, Tahun +2026, Teknik Informatika, Teknologi Informasi, Politeknik Negeri Jember, +Muhammad Ainul Fikri, S.T., M.Eng.,(Pembimbing). + +Penelitian ini bertujuan untuk merancang desain antarmuka pengguna (UI) +dan pengalaman pengguna (UX) pada aplikasi presensi berbasis web dan +mobile di Kantor Desa Pelem menggunakan metode User Centered Design +(UCD). Proses presensi sebelumnya masih dilakukan secara manual sehingga +pencatatan kehadiran kurang efektif dan berpotensi menimbulkan kesalahan +dalam pengelolaan data. Oleh karena itu, diperlukan perancangan desain +sistem presensi yang dapat membantu mempermudah proses absensi serta +pengelolaan data kehadiran secara lebih efektif. + +Metode yang digunakan dalam penelitian ini adalah UCD yang meliputi tahap +memahami konteks pengguna, menentukan kebutuhan pengguna, +menghasilkan solusi desain, serta melakukan evaluasi terhadap desain. Proses +perancangan, dilakukan dengan membuat wireframe dan prototype yang +menggambarkan tampilan aplikasi presensi berbasis web dan mobile. +Selanjutnya, desain yang telah dibuat diuji menggunakan metode System +Usability Scale (SUS) untuk mengetahui tingkat usability dari desain aplikasi +yang dirancang melalui umpan balik. + +Hasil penelitian menunjukkan bahwa desain aplikasi presensi yang dihasilkan +telah sesuai dengan kebutuhan pengguna berdasarkan hasil evaluasi +menggunakan metode SUS. Desain aplikasi memperoleh nilai usability dalam +kategori Good dan berada pada Acceptability Range Acceptable, sehingga +dinilai mudah digunakan dan dapat diterima oleh pengguna. + +Dengan demikian, penerapan metode UCD dalam perancangan UI/UX +aplikasi presensi berbasis web dan mobile mampu menghasilkan desain +sistem yang lebih berorientasi pada kebutuhan pengguna. + + x + PRAKATA + + Puji Syukur kehadirat Allah Swt. Atas berkat rahmat dan hidayahnya, +penulis dapat menyelesaikan tugas akhir skripsi yang berjudul “Implementasi +Metode UCD Dalam Perancangan UI/UX Pada Aplikasi Presensi Berbasis +Web Dan Mobile Untuk Meningkatkan Kemudahan Absensi Di Kantor Desa + +Pelem” dengan baik dan tepat waktu. Skirpsi ini disusun sebagai salah satu + +syarat untuk memperoleh gelar Sarjana Terapan (S.Tr.Kom) di Program Studi +Teknik Informatika Jurusan Teknologi Informasi. + + Penyusunan laporan ini tentu tidak terlepas dari bantuan, bimbingan, +serta dukungan dari berbagai pihak. Oleh karena itu, penulis menyampaikan +terima kasih yang sebesar-besarnya kepada: +1. Bapak Saiful Anwar, S.TP, M.T, selaku Direktur Politeknik Negeri + + Jember. +2. Bapak Hendra Yufit Riskiawan, S.Kom, M.Cs, selaku Ketua Jurusan + + Teknologi Informasi. +3. Ibu Ulfa Emi Rahmawati, S.Kom, M.Kom, selaku Ketua Program Studi + + Teknik Informatika. +4. Bapak Muhammad Ainul Fikri, S.T, M.Eng., selaku Dosen Pembimbing. +5. Ibu Dr. Khomsatun Ni’mah, S.Pd. M.Pd., dan Qonitatul Hasanah, S.ST., + + M.Tr.T.,selaku Dosen Penguji. + Penulis menyadari bahwa laporan skipsi ini masih jauh dari sempurna. +Oleh karena itu, kritik dan saran yang bersifat membangun sangat diharapkan +demi kesempurnaan laporan ini. Semoga laporan skirpsi ini dapat +memberikan manfaat bagi pembaca dan pihak-pihak terkait. + + Nganjuk, 7 April 2026 + + Winna Aprila Nabela Sari + + xi + DAFTAR ISI + + Halaman + +SKRIPSI ......................................................................................................... ii +JURUSAN TEKNOLOGI INFORMASI......................................................iii +SURAT PERNYATAAN.............................................................................. iv +PUBLIKASI................................................................................................... v +MOTO ........................................................................................................... vi +PERSEMBAHAN ........................................................................................vii +ABSTRAK ..................................................................................................viii +ABSTRACT .................................................................................................... ix +RINGKASAN ................................................................................................ x +PRAKATA .................................................................................................... xi +DAFTAR TABEL ....................................................................................... xiv +DAFTAR GAMBAR ................................................................................... xv +BAB 1. PENDAHULUAN ............................................................................ 1 + + 1.1 Latar Belakang ............................................................................... 1 + 1.2 Rumusan Masalah .......................................................................... 6 + 1.3 Tujuan............................................................................................. 6 + 1.4 Manfaat .......................................................................................... 6 + 1.5 Batasan Masalah............................................................................. 7 +BAB 2. TINJAUAN PUSTAKA ................................................................... 8 + 2.1 State of the Art................................................................................ 8 + 2.2 User Interface Design .................................................................. 12 + 2.3 User Experience Design............................................................... 15 + 2.4 Wireframe ..................................................................................... 17 + 2.5 Prototype ...................................................................................... 18 + 2.6 Figma ........................................................................................... 19 + 2.7 User Centered-Design (UCD)...................................................... 20 + 2.8 System Usability Scale (SUS........................................................ 25 + 2.9 Sampling Jenuh ............................................................................ 26 +BAB 3. METODE PENELITIAN................................................................ 27 + 3.1 Waktu dan Tempat Pelaksanaan ................................................... 27 + +xii + 3.2 Alat dan Bahan ............................................................................. 27 + 3.2.1 Alat............................................................................................... 27 + 3.2.2 Bahan ........................................................................................... 27 + + 3.3 Tahapan Penelitian ....................................................................... 28 + 3.3.1 Observasi ..................................................................................... 29 + 3.3.2 Analisis Kebutuhan ...................................................................... 29 + 3.3.3 Studi Literatur .............................................................................. 30 + 3.3.4 Rumusan Masalah........................................................................ 30 + 3.3.5 Pembuatan UI/UX dengan UCD.................................................. 31 + + 3.4 Pelaksanaan Penelitian ................................................................. 35 +BAB 4. HASIL DAN PEMBAHASAN....................................................... 37 + + 4.1 Hasil ............................................................................................. 37 + 4.1.1 Memahami Konteks Pengguna (Understand Context of Use)..... 37 + 4.1.2 Menentukan Kebutuhan Pengguna (Specify User requirement) .. 41 + 4.1.3 Perancangan Desain Solusi (Design Solution)............................. 43 + 4.1.4 Evaluasi Desain (Evaluation Against Requirement) .................... 93 + 4.1.5 Iterasi Desain ............................................................................. 102 + + 4.2 Pembahasan................................................................................ 108 + 4.2.1 Penerapan Metode UCD ............................................................ 108 + 4.2.2 Evaluasi SUS ............................................................................. 113 + +BAB 5. KESIMPULAN DAN SARAN .................................................... 117 + 5.1 Kesimpulan ................................................................................... 117 + 5.2 Saran ............................................................................................. 117 + +DAFTAR PUSTAKA ................................................................................ 119 +LAMPIRAN ............................................................................................... 124 + + xiii + DAFTAR TABEL + Halaman + +Tabel 2.1 State of The Art .............................................................................. 8 +Tabel 2.2 Rincian Iterasi dan Perbaikan Prototipe Berdasarkan UCD......... 24 +Tabel 3.1 10 Pernyataan SUS....................................................................... 33 +Tabel 3.2 Pelaksanaan Penelitian ................................................................. 36 +Tabel 4.1 User Persona................................................................................. 37 +Tabel 4.2 Kebutuhan Fungsional.................................................................. 41 +Tabel 4.3 Kebutuhan Non-Fungsional ......................................................... 43 +Tabel 4.4 Karakteristik Pengguna ................................................................ 94 +Tabel 4.5 Skor SUS Desain Mobile Tahap 1................................................ 96 +Tabel 4.6 Skor SUS Desain Mobile Tahap 2................................................ 97 +Tabel 4.7 Skor SUS Desain Web Tahap 1 .................................................... 97 +Tabel 4.8 Skor SUS Desain Web Tahap 2 .................................................... 98 +Tabel 4.9 Perhitungan SUS .......................................................................... 99 +Tabel 4.10 Perbandingan Skor SUS ........................................................... 113 + + xiv + DAFTAR GAMBAR + + Halaman + +Gambar 2.1 Prinsip UI ................................................................................. 12 +Gambar 2.2 Wireframe................................................................................. 17 +Gambar 2.3 Halaman Utama Figma............................................................. 20 +Gambar 2.4 Metode UCD ............................................................................ 21 +Gambar 2.5 Tahapan UCD Desain Sketsa ................................................... 22 +Gambar 2.6 Tahapan UCD Desain Wireframing ......................................... 23 +Gambar 2.7 Tahapan UCD Desain Prototipe ............................................... 23 +Gambar 3.1 Tahapan Penelitian Perancangan UI/UX Aplikasi Presensi ..... 28 +Gambar 3.2 SUS Score ................................................................................ 34 +Gambar 4.1 Wireframing Login Pengguna .................................................. 44 +Gambar 4.2 Wireframing Home Pengguna .................................................. 45 +Gambar 4.3 Wireframe Qr-Code Absensi Pengguna ................................... 46 +Gambar 4.4 Wireframe Riwayat Absensi..................................................... 47 +Gambar 4.5 Wireframe Izin Absensi Pengguna ........................................... 48 +Gambar 4.6 Wireframe Profil pengguna ...................................................... 49 +Gambar 4.7 Wireframe Qr-Code Absensi .................................................... 50 +Gambar 4.8 Wireframe Login Admin .......................................................... 51 +Gambar 4.9 Wireframe Dashboard Admin................................................... 52 +Gambar 4.10 Wireframe Pengajuan Izin Admin .......................................... 53 +Gambar 4.11 Wireframe Kelola Perangkat Admin ...................................... 54 +Gambar 4.12 Wireframe Laporan Absensi ................................................... 55 +Gambar 4.13 Mockup Login Mobile ........................................................... 56 +Gambar 4.14 Mockup Home Pengguna ....................................................... 58 +Gambar 4.15 Mockup Absensi Pengguna .................................................... 59 +Gambar 4.16 Mockup Riwayat Absen Pengguna ........................................ 61 +Gambar 4.17 Mockup Izin Absen Pengguna................................................ 63 +Gambar 4.18 Mockup Profil Pengguna........................................................ 64 +Gambar 4.19 Mockup Qr-Code Absensi ...................................................... 65 +Gambar 4.20 Mockup Login Admin ............................................................ 66 +Gambar 4.21 Mockup Dashboard Admin .................................................... 67 + + xv + Gambar 4.22 Mockup Pengajuan Izin Admin.............................................. 69 +Gambar 4.23 Mockup Kelola Perangkat ...................................................... 71 +Gambar 4.24 Mockup Laporan Absensi....................................................... 72 +Gambar 4.25 Prototype Login Pengguna ..................................................... 74 +Gambar 4.26 Prototype Qr-Code Absensi Pengguna ................................... 77 +Gambar 4.27 Prototype Qr-Code Absensi Pengguna ................................... 79 +Gambar 4.28 Prototype Izin Absensi Pengguna........................................... 80 +Gambar 4.29 Prototype Profil Pengguna ..................................................... 82 +Gambar 4.30 Mockup Qr-Code Absensi ...................................................... 83 +Gambar 4.31 Prototype Login Admin .......................................................... 85 +Gambar 4.32 Prototype Dashboard Admin .................................................. 86 +Gambar 4.33 Prototype Pengajuan Izin ....................................................... 88 +Gambar 4.34 Prototype Kelola Perangkat.................................................... 90 +Gambar 4.35 Prototype Laporan .................................................................. 92 +Gambar 4.36 Iterasi Halaman Home Pengguna ......................................... 103 +Gambar 4.37 Iterasi Halaman Notifikasi ................................................... 104 +Gambar 4.38 Iterasi Halaman Dashboard Wb ........................................... 105 +Gambar 4.39 Iterasi Halaman Laporan ...................................................... 106 +Gambar 4.40 Iterasi Setting Absen............................................................. 107 + + xvi + DAFTAR LAMPIRAN + Halaman + +Lampiran 1. Dokumentasi Observasi, Wawancara, dan Pengujian....................... 124 +Lampiran 2. Data Pertanyaan Wawancara ............................................................ 125 +Lampiran 3. Form SUS ......................................................................................... 127 + + xvii + BAB 1. PENDAHULUAN + +1.1 Latar Belakang + + Kemajuan teknologi informasi saat ini memberikan dampak yang +signifikan dalam berbagai aspek kehidupan, termasuk dalam peningkatan +kualitas pelayanan publik. Banyak instansi dan lembaga pemerintahan mulai +menggunakan teknologi informasi untuk memperbaiki sistem kerja agar lebih +efisien dan efektif (Suprianto, 2023). Penerapan teknologi ini tidak hanya +pada instansi pusat tetapi juga mulai meluas ke tingkat pemerintahan yang +lebih kecil. Salah satu sektor yang juga memanfaatkan kemajuan ini adalah +pemerintahan desa, yang bertanggung jawab dalam memberikan pelayanan +langsung kepada masyarakat di tingkat desa. Hal ini sejalan dengan aturan +Undang-Undang Nomor 6 Tahun 2014 tentang Desa, yang mengatur +kewenangan Desa dalam menyelenggarakan pemerintahan dan pelayanan +publik secara mandiri. Salah satu aspek yang menjadi tolok ukur dalam +menilai kinerja pegawai adalah kehadiran dan ketepatan waktu dalam +menjalankan tugasnya (Aryanti & Karmila, 2022). Pada konteks pelayanan +publik, tingkat kehadiran yang baik mencerminkan disiplin dan tanggung +jawab, yang berpengaruh langsung terhadap kualitas pelayanan yang +diberikan kepada masyarakat. Oleh karena itu, absensi merupakan faktor +penting dalam memastikan transparansi dan kedisiplinan kerja untuk +meningkatkan kualitas pelayanan publik (Febrian dkk., 2024). Hasil +penelitian oleh Wange (2023) juga menunjukkan bahwa disiplin kerja +pegawai memiliki pengaruh signifikan terhadap kualitas pelayanan publik di +lingkungan pemerintahan desa (Wange dkk., 2023). + + Salah satu Desa yang masih menerapkan sistem absensi manual adalah +Desa Pelem, yang terletak di Kecamatan Kertosono, Kabupaten Nganjuk. +Berdasarkan hasil observasi dan wawancara dengan perangkat Desa +setempat, proses absensi yang dilakukan oleh pemerintahan Desa Pelem +masih dilakukan secara manual yaitu dengan melakukan tanda tangan di +kertas atau daftar hadir. Hasil observasi terdapat rata-rata terjadi 3 sampai 5 +kali kesalahan pencatatan absensi dalam satu bulan, seperti data yang tidak +tercatat atau penulisan yang tidak lengkap. Selain itu, sekretaris desa + + 1 + 2 + +membutuhkan waktu sekitar 2–3 jam setiap akhir bulan untuk melakukan +rekapitulasi data kehadiran secara manual. Faizah dan Pudjiarti (2024) +mengatakan dalam penelitiannya bahwa proses absensi ini dianggap kurang +efisien karena dinilai tidak praktis, rawan terjadi kesalahan, serta kurang +fleksibel dalam memenuhi kebutuhan karyawan yang bekerja (Faizah & +Pudjiarti, 2024). Efisiensi dan akurasi dalam pencatatan absensi akan lebih +terwujud jika menggunakan sistem berbasis web dan mobile. Sistem ini juga +memungkinkan pencatatan kehadiran secara real-time, mengurangi risiko +kesalahan manual, serta meningkatkan transparansi dan disiplin pegawai +(Abadi & Gunawan, 2023). + + Fadilah (2024) dalam penelitiannya juga menyatakan hal yang sama +bahwa “sistem absensi berbasis QR Code dapat mempermudah proses +presensi dan meminimalisir kesalahan serta kerusakan data yang tidak +diinginkan” (A. Fadilah dkk., 2024). Penerapan teknologi QR Code dalam +sistem absensi diharapkan dapat meningkatkan efisiensi dan akurasi +pencatatan kehadiran. Karyawan dapat melakukan absensi dengan memindai +QR Code melalui aplikasi mobile, di mana QR Code tersebut akan +ditampilkan pada komputer kantor yang terhubung ke sistem absensi berbasis +website. Setelah proses pemindaian berhasil, data kehadiran akan secara +otomatis tersimpan dalam sistem, sehingga proses absensi menjadi lebih +praktis, cepat dan mendukung pengalaman pengguna yang lebih baik dalam +sistem absensi digital. + + Keberhasilan sistem absensi tidak hanya bergantung pada +fungsionalitasnya tetapi juga pada desain User Interface (UI) dan User +Experience (UX). UI/UX yang baik akan meningkatkan kemudahan +penggunaan, memastikan kenyamanan pengguna, serta mendorong +penggunaan sistem oleh pegawai. Hal ini sejalan dengan penelitian yang +menunjukkan bahwa penerapan prinsip UI/UX pada aplikasi absensi mampu +meningkatkan efisiensi dan kenyamanan pengguna dalam melakukan proses +absensi secara digital (Dermawan, 2025). Desain UI mencakup aspek visual +dan interaksi pengguna dengan sistem, sedangkan UX berfokus pada +pengalaman keseluruhan dalam menggunakan aplikasi, termasuk navigasi + 3 + +dan efisiensi penggunaan (Haikal dkk., 2022). Antarmuka yang intuitif dan +pengalaman pengguna yang optimal akan mempermudah pegawai dalam +melakukan absensi tanpa hambatan teknis (Aditya dkk., 2024). + + UI/UX yang buruk dapat menjadi penghambat utama dalam penggunaan +sistem baru. Penelitian yang dilakukan Athallah dan Dirgahayu (2024) +menunjukkan bahwa hasil evaluasi pada kasus yang serupa memperoleh skor +rata-rata 67,5 dan dikategorikan sebagai “buruk”, yang menunjukkan bahwa +UI/UX yang tidak optimal dapat menghambat pengalaman pengguna +(Athallah & Dirgahayu, 2024). Dalam aplikasi absensi, UI/UX yang buruk +dapat mengakibatkan proses pencatatan kehadiran menjadi lambat, +membingungkan, dan rentan terhadap kesalahan input. Hal ini berisiko +menurunkan akurasi data kehadiran, menghambat efisiensi kerja, serta +mengurangi transparansi dalam sistem absensi. Antarmuka yang tidak intuitif +serta navigasi yang tidak jelas dan desain yang tidak responsif juga dapat +menyebabkan kebingungan sehingga menurunkan keterlibatan dan kepuasan +pengguna, terutama bagi pegawai yang belum terbiasa dengan teknologi +digital. Jika pengguna merasa sistem sulit digunakan, pengguna cenderung +tidak menggunakannya dan lebih memilih kembali ke metode manual yang +sudah mereka pahami (Pateman & Pramudia, 2024). Oleh karena itu, +penelitian ini dilakukan untuk merancang UI/UX yang optimal demi +meningkatkan efektivitas, pengalaman pengguna secara keseluruhan, serta +kepuasan pengguna. Hal ini sangat penting dalam mempertahankan pengguna +dan mendorong penggunaan sistem secara berkelanjutan. + + Upaya memastikan bahwa UI/UX sistem absensi dirancang sesuai dengan +kebutuhan pengguna, pendekatan User-Centered Design (UCD) dapat +diterapkan. Selain UCD, terdapat juga pendekatan Human-Centered Design +dan Design Thinking. Pada pendekatan HCD merupakan pendekatan yang +menekankan pada pemahaman mendalam terhadap karakteristik, kebutuhan, +dan lingkungan pengguna dalam perancangan sistem yang interaktif +(Ramadhani dkk., 2023). Sementara itu, pendekatan Design Thinking adalah +metode kreatif dan iterative yang berfokus pada pemecahan masalah dengan +menempatkan manusia sebagai pusatnya, melalui tahapan empathise, define, + 4 + +ideate, prototype dan test (Fauziyah & Yunita, 2024). Metode UCD +menempatkan pengguna sebagai pusat dalam setiap tahap pengembangan, +sehingga sistem yang dihasilkan lebih intuitif, mudah diakses, dan +memberikan pengalaman yang lebih baik bagi pengguna (Hartawan, 2022). +Penelitian yang dilakukan oleh Muktamar (2023) menyatakan bahwa terdapat +peningkatan yang signifikan antara sistem yang telah dikembangkan dengan +metode UCD dibanding yang tidak menggunakan pendekatan ini. Temuan ini +membuktikan bahwa dengan pendekatan ini menjadi lebih intuitif, mudah +digunakan serta mampu meningkatkan efisiensi kerja pengguna (B dkk., +2023). Kemudian, peneliti Nasution membuktikan bahwa sistem absensi +berbasis QR Code dengan antarmuka yang baik dapat mempercepat proses +pencatatan kehadiran, mengurangi tingkat kesalahan input, serta +meningkatkan transparansi dalam pelaporan data absensi (Nasution dkk., +2022). Dengan menerapkan UCD, perancangan UI/UX tidak hanya berfokus +pada aspek estetika tetapi juga pada kemudahan navigasi dan efektivitas +sistem dalam mendukung kebutuhan pegawai dalam proses absensi. + + Agar meyakinkan UI/UX sistem absensi yang dikembangkan memiliki +tingkat kegunaan yang tinggi, evaluasi terhadap desain antarmuka perlu +dilakukan secara menyeluruh. Salah satu metode yang efektif dan banyak +digunakan dalam mengevaluasi aspek usability adalah System Usability Scale +(SUS). Menurut Sari (2024), SUS merupakan metode evaluasi serderhana +namun efektif yang terdiri dari sepuluh pernyataan dengan skala likert 1-5 +poin, yang dirancang untuk mengukur presepsi pengguna terhadap +kemudahan, kenyamanan, dan efisiensi pengguna sistem (S. Sari dkk., +2024a). Metode ini tidak hanya memberikan skor kuantitatif sebagai indikator +tingkat kegunaan, tetapi juga menjadi acuan dalam pengambilan keputusan +untuk perbaikan antarmuka. Penerapan SUS dalam berbagai penelitian +menunjukkan kontribusi signifikan terhadap peningkatan kualitas UI/UX. +Sebagai contoh, Wibowo dan Pratama (2023) berhasil meningkatkan skor +usability website Diskominfo Kabupaten Gianyar dari nilai rata-rata 45,28 +(kategori F) menjadi 88,78 (kategori A) setelah dilakukan perancangan ulang +berbasis masukan pengguna melalui evaluasi SUS (Kadek Tribuana Tungga + 5 + +Wibowo & Putu Agus Eka Pratama, 2023). Temuan ini menegaskan bahwa +SUS tidak hanya berfungsi sebagai alat ukur, tetapi juga sebagai fondasi +dalam merancang antarmuka yang benar-benar sesuai dengan kebutuhan dan +harapan pengguna. + + Permasalahan dalam sistem absensi manual di Kantor Desa Pelem +menunjukkan perlunya digitalisasi untuk meningkatkan efisiensi, akurasi, dan +transparansi dalam pencatatan kehadiran pegawai. Hal ini berdasarkan hasil +observasi dan wawancara dengan perangkat desa yang mengungkap bahwa +proses absensi masih dilakukan secara manual menggunakan tanda tangan di +atas kertas, sehingga rawan kesalahan, tidak praktis, serta menyulitkan proses +rekapitulasi data kehadiran. Penggunaan sistem absensi berbasis web dan +mobile menjadi solusi yang dapat mengatasi kendala sistem manual, tetapi +efektivitasnya sangat dipengaruhi oleh desain User Interface (UI) dan User +Experience (UX) yang intuitif serta mudah digunakan. UI/UX yang buruk +dapat menghambat penggunaan sistem, menyebabkan kebingungan, serta +menurunkan kepuasan pengguna, terutama bagi pegawai yang belum terbiasa +dengan teknologi digital. Oleh karena itu, penerapan User-Centered Design +(UCD) menjadi pendekatan yang tepat dalam perancangan UI/UX untuk +memastikan sistem yang dikembangkan benar-benar sesuai dengan +kebutuhan pengguna. Untuk menjamin sistem yang dikembangkan memiliki +tingkat kegunaan (usability) yang tinggi, perlu dilakukan evaluasi secara +menyeluruh terhadap antarmuka yang dirancang. Salah satu metode evaluasi +yang digunakan adalah System Usability Scale (SUS), yang terbukti efektif +dalam mengukur persepsi pengguna terhadap kemudahan, kenyamanan, dan +efisiensi penggunaan sistem. Dengan UCD dan evaluasi menggunakan SUS, +sistem absensi diharapkan tidak hanya berfungsi dengan baik, tetapi juga +memberikan pengalaman pengguna yang optimal, meningkatkan kemudahan +akses, serta mendorong efektivitas pencatatan kehadiran dan kedisiplinan +pegawai. + 6 + +1.2 Rumusan Masalah + + Berdasarkan latar belakang yang telah diuraikan, penelitian ini +merumuskan beberapa permasalahan sebagai berikut: +a. Bagaimana penerapan metode User-Centered Design (UCD) dalam + + proses perancangan UI/UX pada aplikasi presesni berbasis web dan + mobile untuk menigkatkan kemudahan dikantor Desa Pelem? +b. Bagaimana hasil evaluasi usability testing terhadap UI/UX sistem yang + telah dirancang menggunakan metode UCD pada aplikasi presensi + berbasis web dan mobile? + +1.3 Tujuan + + Berdasarkan latar belakang dan rumusan masalah yang telah diuraikan, +penelitian ini memiliki beberapa tujuan utama, yaitu: +a. Menerapkan metode User-Centered Design (UCD) dalam proses + + perancangan UI/UX pada aplikasi presesni berbasis web dan mobile + untuk menigkatkan kemudahan dikantor Desa Pelem. +b. Mendeskripsikan hasil evaluasi usability testing terhadap UI/UX sistem + yang telah dirancang menggunakan metode UCD pada aplikasi presensi + berbasis web dan mobile. + +1.4 Manfaat + + Berikut ini adalah beberapa manfaat yang dapat diperoleh dari penelitian +ini, yaitu sebagai berikut: +a. Mempermudah pencatatan absensi melalui sistem berbasis QR Code + + pada platform web dan mobile +b. Meningkatkan kemudahan dalam proses absensi pegawai. +c. Menyediakan pengalaman pengguna yang lebih optimal melalui desain + + antarmuka yang intuitif dan mudah digunakan. +d. Memberikan kontribusi dalam pengembangan UI/UX untuk sistem + + absensi berbasis QR Code. + 7 + +e. Menjadi referensi dalam penerapan metode User-Centered Design + (UCD) dalam perancangan antarmuka pengguna. + +1.5 Batasan Masalah + + Agar penelitian ini fokus pada aspek yang dikaji, diperlukan batasan +masalah untuk menentukan ruang lingkup penelitian. Batasan ini bertujuan +menghindari pembahasan yang meluas dan memastikan bahwa penelitian +yang dikembangkan sesuai kebutuhan yang telah di identifikasi. Adapun +Batasan masalah dalam penelitian ini sebagai berikut: +a. Sistem hanya diperuntukkan bagi perangkat desa di Desa Pelem. +b. Penelitian hanya berfokus pada perancangan UI/UX sistem absensi + + berbasis Web dan Mobile dengan metode User-Centered Design (UCD). +c. Evaluasi usability dilakukan menggunakan metode System Usability + + Scale (SUS) untuk mengukur aspek kemudahan penggunaan, efisiensi, + dan kepuasan pengguna. + 8 + + BAB 2. TINJAUAN PUSTAKA + +2.1 State of the Art + Penelitian terdahulu digunakan sebagai acuan untuk menganalisis dan + +memperluas wawasan peneliti. Kajian ini berperan penting dalam +membandingkan berbagai literatur yang relevan dengan topik penelitian +untuk memperdalam pemahaman. Perbandingan bertujuan untuk +memperoleh kesimpulan yang bermanfaat serta melengkapi pengetahuan +yang telah ada. State Of the Art, terdapat lima jurnal nasional yang dirangkum +dalam tabel 2.1 + + Tabel 2.1 State of The Art + +Tahun, Objek Penelitian Temuan Penelitian Kekurangan + +Penulis + +(Lim Perancangan UI/UX Pengguna Evaluasi usability + +dkk., Aplikasi Absensi Jikan menginginkan tampilan belum mendalam + +2021) Dengan Metode User mobile-friendly dan secara kuantitatif. + + Centered Design fitur pengingat absen. + +(Haikal Perancangan User Wireframe dan user Tidak + +dkk., Interface Dan User flow meningkatkan menggunakan + +2022) Experience Pada Web efisiensi navigasi dan evaluasi usability + + Mb Tours And Travel interaksi pengguna. kuantitatif + + Bekasi (SUS/SEQ). + +(Faizah Perancangan Desain Prototipe mampu Tidak ada + +& UI/UX Absensi meningkatkan efisiensi perbandingan + +Pudjiarti, Karyawan Berbasis dan aksesibilitas metode + +2024) Mobile Dengan absensi. (UCD/HCD). + + Menggunakan Metode + + Design Thinking Pada + + PT. Tanto Intim Line + + Jakarta + 9 + + Tahun, Objek Penelitian Temuan Penelitian Kekurangan + Penulis +(Nuria Menyempurnakan UI/UX yang estetis Tidak mengukur +dkk., +2024) Desain User Interface meningkatkan minat dampak terhadap + +(Herlam Aplikasi Pemesanan eksplorasi pengguna. konversi +bang +Cahya pada Rana Photo pemesanan. +Pratama +dkk., Studio dengan +2024) + Menerapkan Metode + + User Centered-Design + + (UCD) + + Penerapan Metode Skor SEQ 6,89 Tidak + + User Centered-Design menunjukkan aplikasi mempertimbangka + + (UCD) untuk Desain cukup mudah digunakan n aspek keamanan + + UI/UX pada Husqy data. + + Petshop + + Penelitian yang dilakukan oleh Lim dkk. (2021) berfokus pada aplikasi +absensi online JIKAN, yang dirancang untuk meningkatkan pengalaman +pengguna dalam pencatatan kehadiran di universitas. Metode yang digunakan +dalam penelitian ini adalah User-Centered Design (UCD), Black-Box Testing, +dan Usability Testing. Temuan dari penelitian ini menunjukkan bahwa +pengguna menginginkan tampilan yang lebih ramah terhadap perangkat +mobile serta fitur pengingat absen. Namun, keterbatasan penelitian ini adalah +hanya menggunakan Black-Box Testing, tanpa adanya evaluasi usability yang +mendalam untuk memahami pengalaman pengguna secara kuantitatif. +Dampak dari penelitian ini terlihat dalam kontribusinya menghadirkan +alternatif desain aplikasi absensi yang lebih modern dan sesuai kebutuhan +pengguna, meskipun belum dapat menjangkau seluruh segmen pengguna +seperti dosen senior yang kurang nyaman dengan tampilan baru. + + Sementara itu, Haikal dkk. (2022) mengembangkan website MB Tours & +Travel, yang menyediakan layanan pemesanan perjalanan wisata dan umrah. + 10 + +Metode yang digunakan adalah UCD berbasis persona dan pain points, yang +memungkinkan pembuatan desain antarmuka sesuai kebutuhan calon +pengguna. Temuan pentingnya adalah bahwa wireframe dan user flow +berhasil meningkatkan efisiensi navigasi dan interaksi pengguna. Sayangnya, +penelitian ini tidak menggunakan metode evaluasi usability kuantitatif seperti +System Usability Scale (SUS) atau Single Ease Question (SEQ), sehingga +hasilnya belum mencerminkan efektivitas sistem secara objektif. Adapun +dampak dari penelitian ini tercermin pada peningkatan kenyamanan +pengguna dalam melakukan pemesanan perjalanan, meskipun belum disertai +dengan data objektif untuk menilai efektivitas sistem secara menyeluruh. + + Berbeda dari penelitian sebelumnya, Pudjiarti & Faizah (2024) +menggunakan metode Design Thinking dalam merancang aplikasi absensi +berbasis mobile untuk PT. Tanto Intim Line Jakarta. Temuan penelitian ini +mengindikasikan bahwa desain prototipe yang dibuat melalui Figma mampu +menyelesaikan masalah absensi manual, meningkatkan efisiensi, dan +aksesibilitas karyawan. Namun, penelitian ini tidak membandingkan +keefektifan metode Design Thinking dengan metode lain seperti UCD atau +Human-Centered Design (HCD), sehingga efektivitasnya sebagai pendekatan +terbaik belum dapat dipastikan. Dampak signifikan dari penelitian ini adalah +keberhasilannya dalam mengurangi antrean saat presensi, mempercepat +proses absensi, dan meminimalkan manipulasi data, sehingga mendukung +efisiensi operasional perusahaan. + + Selanjutnya, penelitian oleh Nuria dkk. (2024) mengembangkan aplikasi +pemesanan Rana Photo Studio, yang bertujuan untuk mempermudah +pelanggan dalam melakukan reservasi secara online. Dalam +pengembangannya, metode User-Centered Design (UCD) digunakan dengan +fokus pada peningkatan pengalaman pelanggan. Temuan penelitian +menunjukkan bahwa desain antarmuka yang estetis dan intuitif meningkatkan +minat eksplorasi pengguna. Namun, tidak dijelaskan secara eksplisit apakah +peningkatan UI/UX tersebut berdampak langsung terhadap konversi +pemesanan, atau hanya berpengaruh pada kepuasan visual pengguna saja. +Dampak yang ditimbulkan dari penelitian ini tampak pada kemudahan + 11 + +pengguna dalam melakukan reservasi secara online, yang berpotensi +meningkatkan kepuasan pelanggan, meskipun belum dibuktikan dari sisi +peningkatan konversi atau volume transaksi. + + Terakhir, penelitian oleh (Herlambang Cahya Pratama dkk., 2024) +berfokus pada pengembangan aplikasi e-commerce Husqy Petshop, yang +menawarkan fitur pencarian produk, pemesanan, serta jadwal perawatan +hewan peliharaan. Metode UCD diterapkan dalam pengembangan UI/UX, +dan pengujian dilakukan dengan metode Single Ease Question (SEQ), di +mana skor rata-rata yang diperoleh adalah 6,89, menunjukkan bahwa aplikasi +cukup mudah digunakan oleh pengguna. Meskipun demikian, penelitian ini +tidak mempertimbangkan aspek keamanan data pengguna, yang merupakan +hal penting dalam sistem e-commerce, terutama terkait transaksi keuangan +dan penyimpanan informasi pribadi pelanggan. Dampaknya adalah +terciptanya sistem layanan berbasis digital yang dapat memudahkan +pelanggan dalam mencari dan memesan produk serta layanan perawatan +hewan, walaupun aspek keamanan dan kepercayaan pengguna masih perlu +ditingkatkan untuk menunjang keberlanjutan sistem. + + Perbandingan ini, dapat disimpulkan bahwa sebagian besar penelitian +menggunakan pendekatan User-Centered Design (UCD) untuk +mengembangkan sistem, dengan variasi dalam teknik evaluasi. Beberapa +penelitian memiliki kelemahan dalam aspek pengujian usability yang kurang +komprehensif, sementara yang lain tidak membahas dampak desain terhadap +tujuan bisnis atau keamanan sistem. Hal ini menunjukkan bahwa meskipun +pendekatan berbasis pengguna penting, metode evaluasi yang lebih luas +diperlukan untuk mendapatkan hasil yang lebih akurat dan aplikatif. + + Penelitian ini melengkapi studi-studi terdahulu dengan +mengimplementasikan metode User-Centered Design (UCD) dalam +perancangan UI/UX aplikasi presensi berbasis web dan mobile untuk Kantor +Desa Pelem. Pengujian dilakukan menggunakan System Usability Scale +(SUS) guna mengukur tingkat kegunaan sistem secara kuantitatif. Kontribusi +penelitian ini terletak pada penerapannya di lingkungan pemerintahan desa, +yang masih jarang dieksplorasi dalam penelitian serupa. Meski demikian, + 12 + +penelitian ini juga memiliki keterbatasan, yaitu belum mengeksplorasi +metode evaluasi lain secara kualitatif maupun perbandingan antar pendekatan +desain. Oleh karena itu, hasil dari penelitian ini diharapkan dapat menjadi +dasar bagi pengembangan lebih lanjut dalam membangun sistem presensi +digital yang lebih komprehensif dan sesuai dengan konteks pengguna lokal. +2.2 User Interface Design + + User Interface (UI) merupakan antarmuka dalam perangkat lunak yang +dirancang dengan fokus pada aspek visual dan kemudahan interaksi +pengguna. UI dapat diterapkan pada berbagai platform, seperti aplikasi +mobile, situs web, maupun perangkat elektronik siap pakai. UI berfungsi +sebagai jembatan yang memungkinkan pengguna berkomunikasi dengan +teknologi secara lebih intuitif dan efisien (Amran & Rahman, 2025). + + Gambar 2.1 Prinsip UI + Dapat dilihat pada gambar 2.1 Prinsip UI, menurut Fathurahman (2024) +mengatakan bahwa mengembangkan antarmuka pengguna yang menarik +memerlukan bantuan prinsip - prinsip sebagai acuan untuk membuat UI +(Fathurrahman & Sumarsono, 2024). Aturan atau prinsip yang dapat + 13 + +disimpulkan bahwa aturan - aturan tersebut memiliki beberapa poin terutama +berfokus pada beberapa atribut. +a. Konsistensi (Consistency) + + Antarmuka pengguna harus memiliki pola desain yang seragam, + termasuk dalam penggunaan warna, tipografi, dan terminologi. + Konsistensi ini diterapkan dalam berbagai elemen, seperti petunjuk layar, + perintah, dan menu, agar pengguna dapat dengan mudah memahami dan + menavigasi sistem. Prinsip ini sesuai dengan heuristic consistency and + standards yang menyatakan bahwa sistem harus menerapkan standart + desain agar tampilan antarmuka tetap konsisten dan mudah dikenali + (Kurnia Wirawan dkk., 2024). Tujuan utama dari konsistensi adalah + meminimalisir beban kognitif, mengurangi kemungkinan kesalahan + pengguna, serta mempercepat adaptasi terhadap sistem yang digunakan. +b. Tampilan (Appearance) + + Pemilihan elemen visual, seperti warna, font, dan grafis, harus + dirancang dengan cermat untuk memastikan keterbacaan serta + memperjelas fungsi tombol dan teks. Warna dapat dimanfaatkan untuk + menandai fitur-fitur penting dalam aplikasi. Desain yang estetis juga + menjadi faktor utama dalam meningkatkan kepuasan pengguna, sehingga + perlu menghindari penggunaan ornamen dan warna secara berlebihan. + Penataan elemen antarmuka harus dilakukan dengan baik agar tampilan + tetap rapi dan mudah digunakan. Hal ini sejalan dengan prinsip desain + komunikasi visual menekankan pentingnya hirarki visual, kontras, dan + keselarasan dalam meningkatkan keterlibatan serta pengalaman + pengguna (E. Sari & Pratama, 2024). +c. Umpan Balik (Feedback) + + Umpan balik (feedback) dari desain antarmuka pengguna merupakan + elemen penting yang membantu pengguna memahami konsekuensi dari + setiap tindakan yang mereka lakukan di dalam sistem. Sistem harus + mampu memberikan informasi secara jelas, real-time, dan relevan, baik + dalam bentuk notifikasi, perubahan status visual, pesan teks, maupun + indikator proses. Prinsip ini dikenal sebagai visibility of system status, + 14 + + yaitu kemampuan sistem untuk menampilkan status penggunaan agar + pengguna merasa yakin bahwa tindakannya telah diproses dengan benar. + Umpan balik yang baik dapat meningkatkan kepercayaan pengguna dan + mengurangi kebingungan dalam navigasi. Galavi (2024) dalam studi + payungnya menyebutkan bahwa visibility of system status merupakan + salah satu kriteria terpenting dalam evaluasi usability aplikasi mobile, + karena mendukung persepsi kontrol dan efisiensi penggunaan secara + keseluruhan (Galavi dkk., 2024). +d. Efisiensi (Efficiency) + + Antarmuka harus dirancang agar pengguna dapat menyelesaikan + tugas dengan cepat dan mudah. Fitur-fitur penting harus dapat diakses + secara intuitif, menghindari navigasi berulang, serta menyederhanakan + alur interaksi (Wirawan dkk., 2024). Selain itu, aplikasi harus + memungkinkan pengguna untuk memulai atau menghentikan suatu + proses tanpa kesulitan, sehingga dapat diakses oleh berbagai kelompok + pengguna dengan tingkat pemahaman teknologi yang berbeda. +e. Keamanan dan Pencegahan Kesalahan (Security and Prevent Errors) + + Sistem antarmuka pengguna harus dirancang secara proaktif untuk + meminimalkan kemungkinan terjadinya kesalahan, serta menyediakan + mekanisme pemulihan jika kesalahan tetap terjadi. Pencegahan dapat + diterapkan melalui validasi input, pemberian peringatan sebelum + tindakan penting, serta konfirmasi ulang terhadap aktivitas yang berisiko. + Apabila pengguna melakukan tindakan yang tidak diinginkan, sistem + sebaiknya memberikan opsi pemulihan seperti fitur undo atau bantuan + kontekstual. Prinsip ini sejalan dengan hasil penelitian Habib (2023), + yang menunjukkan bahwa evaluasi heuristik, khususnya pada aspek + error prevention, memiliki skor tinggi dalam meningkatkan keandalan + antarmuka dan mencegah kesalahan pengguna selama interaksi sistem + (Habib dkk., 2023). Penerapan menggunakan pendekatan ini, antarmuka + tidak hanya menjadi lebih aman, tetapi juga mampu meningkatkan + kepercayaan dan kenyamanan pengguna secara keseluruhan. + 15 + + Penerapan prinsip desain antarmuka pengguna berperan penting dalam +menciptakan UI yang intuitif, efisien, dan nyaman digunakan. Konsistensi +dalam desain membantu pengguna memahami dan menavigasi sistem dengan +lebih mudah, sementara tampilan yang estetis meningkatkan daya tarik visual +tanpa mengurangi fungsionalitas. Umpan balik yang jelas memastikan +pengguna selalu mengetahui status dan respons sistem, sedangkan efisiensi +dalam desain memungkinkan mereka menyelesaikan tugas dengan cepat dan +minim hambatan. Selain itu, keamanan dan pencegahan kesalahan berfungsi +untuk mengurangi risiko gangguan dalam penggunaan. Penerapan prinsip- +prinsip ini, UI dapat dirancang secara optimal sehingga meningkatkan +pengalaman pengguna dan efektivitas interaksi dengan teknologi. + +2.3 User Experience Design + User Experience (UX) merupakan suatu pendekatan yang mengatur cara + +pengguna memandang dan berinteraksi dengan perangkat lunak, dengan +fokus utama pada kenyamanan serta manfaat yang diberikan oleh sistem. UX +juga mencakup studi tentang preferensi, emosi, respons fisik, serta kondisi +mental pengguna sebelum, selama, dan setelah mereka menggunakan suatu +produk (Yasmin & Voutama, 2024). Pentingnya UX terletak pada +kemampuannya untuk memastikan bahwa produk mampu memberikan +layanan yang optimal, sehingga pengguna merasa puas dan nyaman dalam +menggunakannya. Memahami konsep pengalaman pengguna, penting bagi +perancang sistem atau aplikasi untuk memperhatikan berbagai aspek yang +dapat meningkatkan kenyamanan dan efektivitas interaksi pengguna. Hal ini +dapat dicapai melalui penerapan berbagai komponen UX yang berperan +dalam membentuk pengalaman yang lebih intuitif, efisien, dan +menyenangkan. + + Komponen utama dalam UX mencakup beberapa aspek penting yang +mempengaruhi bagaimana pengguna berinteraksi dengan suatu produk. +a. Kegunaan (usability) + + Menjadi faktor utama yang menentukan seberapa mudah dan efisien + pengguna dalam menyelesaikan tugas menggunakan produk. +b. Aksesibilitas + 16 + + Memastikan bahwa sistem dapat digunakan oleh berbagai kelompok + pengguna, termasuk mereka yang memiliki keterbatasan fisik atau + sensorik. +c. Desain interaksi + + Berfokus pada bagaimana elemen-elemen dalam sistem merespons + tindakan pengguna dengan cara yang intuitif dan sesuai harapan. +d. Kinerja dan kecepatan sistem + + Berperan penting dalam memastikan respons yang cepat dan + pengalaman yang lancar. +e. Kepuasan pengguna + + Menjadi aspek akhir yang menentukan apakah pengalaman + penggunaan suatu produk memberikan kesan positif dan membuat + pengguna ingin terus menggunakannya. Semua komponen ini harus + dioptimalkan agar UX dapat memberikan manfaat maksimal dan + meningkatkan loyalitas pengguna terhadap suatu produk atau layanan. + + Melalui berbagai komponen utama dalam User Experience (UX), +perancang sistem dapat memastikan bahwa interaksi pengguna dengan +produk berjalan secara intuitif, efisien, dan menyenangkan. Kegunaan yang +baik memungkinkan pengguna menyelesaikan tugas dengan mudah, +sementara aksesibilitas memastikan bahwa sistem dapat dijangkau oleh +semua orang, termasuk mereka dengan keterbatasan tertentu. Desain interaksi +yang intuitif serta kinerja sistem yang responsif berkontribusi pada +pengalaman yang lancar dan bebas hambatan. Pada akhirnya, kepuasan +pengguna menjadi faktor utama dalam menentukan keberhasilan suatu +produk, karena pengalaman yang positif akan meningkatkan loyalitas dan +keterlibatan pengguna. Oleh karena itu, penerapan prinsip UX yang optimal +menjadi kunci dalam menciptakan solusi digital yang efektif dan bernilai bagi +penggunanya. + 17 + +2.4 Wireframe + Wireframe adalah kerangka awal dalam proses perancangan aplikasi yang + +digunakan untuk menyusun tata letak elemen-elemen yang masih dalam tahap +sederhana tanpa visual yang kompleks seperti warna, gambar, atau tipografi +yang mendetail (Fadilah & Sweetania, 2023) Wireframing berfungsi sebagai +kerangka dasar yang membantu desainer dalam menentukan struktur, tata +letak, serta hubungan antar elemen dalam sebuah sistem. + + Penelitian juga mengatakan, wireframe digambarkan menggunakan garis +dan kotak sederhana yang merepresentasikan posisi serta proporsi elemen- +elemen dalam aplikasi. Wireframe dibagi menjadi dua jenis yaitu low-fidelity +dan high-fidelity. Berdasarkan tingkat detailnya dapat dilihat pada gambar 2.2 +wireframe. + + Gambar 2.2 Wireframe +a) Wireframe Low-Fidelity + + Wireframe jenis ini merupakan rancangan awal yang masih sangat + sederhana, tanpa penggunaan warna, teks, atau elemen desain lainnya. + Fokus utama dari low-fidelity wireframe adalah menentukan struktur + dasar serta tata letak elemen dalam aplikasi. Dengan menggunakan + 18 + + pendekatan ini, perancang dapat mengeksplorasi berbagai kemungkinan + tampilan sebelum memasuki tahap desain yang lebih mendetail. +b) Wireframe High-Fidelity + + Wireframe high-fidelity memiliki tampilan yang lebih mendekati + desain akhir aplikasi. Pada tahap ini, elemen-elemen seperti warna, teks, + ikon, dan gambar sudah mulai dimasukkan untuk memberikan gambaran + yang lebih realistis tentang bagaimana aplikasi akan terlihat dan + berfungsi. High-fidelity wireframe sering digunakan dalam tahap validasi + desain sebelum masuk ke proses pengembangan secara teknis. + + Melalui pendekatan ini, tim pengembang dapat lebih fokus pada +fungsionalitas dan alur interaksi pengguna sebelum masuk ke tahap desain +visual yang lebih mendalam. Selain itu, wireframe juga mempermudah +komunikasi antara desainer, pengembang, dan pemangku kepentingan, +karena menyajikan gambaran awal yang dapat dievaluasi dan direvisi dengan +lebih cepat. Oleh karena itu, wireframing menjadi tahap fundamental dalam +menciptakan antarmuka yang intuitif, efisien, dan sesuai dengan kebutuhan +pengguna. + +2.5 Prototype + Prototype adalah tahap dalam perancangan produk digital yang berfokus + +pada pembuatan purwarupa dari desain awal tampilan sistem yang akan +dikembangkan (Arisa dkk., 2023). Setelah prototype dibuat, langkah +selanjutnya melakukan uji coba kepada pengguna untuk mengumpulkan +umpan balik. Masukan yang diperoleh dari pengguna ini kemudian digunakan +sebagai bahan evaluasi dalam menyempurnakan solusi desain, sehingga +produk digital yang dikembangkan dapat lebih optimal dan sesuai dengan +kebutuhan pengguna. Prototype dibuat berdasarkan wireframe yang telah +dirancang sebelumnya dan bertujuan untuk memberikan simulasi interaktif +agar desainer dan pengembang dapat mengevaluasi efektivitas desain yang +dibuat. + + Proses pengembangan prototype dilakukan secara iteratif untuk +memastikan desain yang dihasilkan benar-benar memenuhi ekspektasi + 19 + +pengguna. Tidak terdapat ketentuan baku mengenai jumlah iterasi dalam +metode UCD. Jumlah iterasi sangat bergantung pada kompleksitas produk, +kebutuhan proyek serta hasil dari setiap siklus pengujian (Karakaya dkk., +2022). Tahapan iterative dalam pembuatan prototype dimulai dari pembuatan +versi awal (Initial Prototype), dimana perancang menentukan kebutuhan +utama pengguna dan merancang model dasar dari sistem. Prototype ini dibuat +berdasarkan wireframe yang telah dirancang sebelumnya dan bertujuan untuk +memberikan simulasi interaktif agar desainer dan pengembang dapat +mengevaluasi efektivitas desain yang dibuat. Setelah versi awal selesai, +dilakukan pengujian awal (User Testing) dengan melibatkan pengguna secara +langsung guna mengidentifikasi potensi masalah dalam desain. + + Hasil dari pengujian ini menjadi dasar bagi tahap selanjutnya, yaitu +perbaikan berdasarkan feedback, bahwa desain disesuaikan dengan temuan +yang didapat dari pengguna guna meningkatkan efektivitas dan kenyamanan +dalam interaksi. Setelah dilakukan perbaikan, prototype kembali diuji melalui +pengujian lanjutan, yang merupakan proses iterasi berulang hingga desain +mencapai tingkat optimal. Melalui pendekatan ini, prototype dapat +berkembang secara sistematis, memastikan pengalaman pengguna yang lebih +baik sebelum produk diimplementasikan secara penuh. + +2.6 Figma + Figma merupakan sebuah platform desain digital dan alat prototyping + +yang digunakan untuk merancang antarmuka web, aplikasi, serta berbagai +produk digital lainnya (R. N. Fadilah & Sweetania, 2023). Umumnya +penggunaan aplikasi ini banyak digunakan oleh seorang yang bekerja +dibidang desain aplikasi dan sejenisnya, seperti UI/UX Designer, Web +Designer. Sebagai alat desain berbasis cloud, Figma memungkinkan desainer +dan tim pengembang untuk bekerja secara bersamaan dalam satu proyek +secara real-time, tanpa perlu menginstal perangkat lunak tambahan. +Keunggulan utama Figma terletak pada fitur kolaboratifnya yang +memungkinkan banyak pengguna untuk mengedit, memberikan komentar, +serta menyempurnakan desain secara langsung, sehingga meningkatkan + 20 + +efisiensi dan produktivitas dalam proses perancangan. Selain itu, Figma juga +menyediakan berbagai fitur yang mendukung kreativitas desainer, seperti +Frame untuk mengatur layout sesuai dengan perangkat yang digunakan, +Shape Tools untuk membuat elemen visual, serta color picker yang +memudahkan pemilihan warna agar desain lebih harmonis. Berikut halaman +utama figma dapat dilihat seperti pada gambar 2.3. + + Gambar 2.3 Halaman Utama Figma + Berbagai keunggulan tersebut, Figma telah menjadi pilihan utama bagi +para desainer UI/UX dalam mengembangkan produk digital yang inovatif dan +responsif. +2.7 User Centered-Design (UCD) + Metode pendekatan yang berpusat pada pengguna menjadi aspek penting +untuk memastikan bahwa produk yang dihasilkan sesuai dengan kebutuhan +serta preferensi pengguna. Salah satu metode yang banyak digunakan dalam +perancangan berbasis pengguna adalah User-Centered Design (UCD). +Metode ini menekankan keterlibatan pengguna dalam setiap tahap +pengembangan guna menghasilkan desain yang intuitif, mudah digunakan, +dan memberikan pengalaman terbaik bagi penggunanya. Menurut Wijaya +(2024), metode UCD terdiri dari empat tahapan utama, yaitu memahami + 21 + +konteks penggunaan, menentukan kebutuhan pengguna, mendesain solusi, +dan melakukan evaluasi terhadap desain yang dihasilkan (Wijaya dkk., 2024). + + Gambar 2.4 Metode UCD + Berikut adalah penjelasan mengenai tahapan User Centered-Design +pada Gambar 2.4 Metode UCD + 1. Memahami Konteks Penggunaan + + Mengidentifikasi siapa pengguna dan bagaimana mereka akan + berinteraksi dengan sistem yang dikembangkan. Proses ini dapat + dilakukan dengan: + a) Observasi + + Mengamati langsung bagaimana pengguna bekerja atau berinteraksi + dengan sistem yang sudah ada. + b) Wawancara + Melakukan percakapan mendalam dengan pengguna untuk + memahami kebutuhan, tantangan, dan harapan mereka terhadap + sistem baru. + c) Survei + Mengumpulkan data dari kelompok pengguna yang lebih luas untuk + mendapatkan wawasan mengenai preferensi dan pengalaman + mereka dalam menggunakan sistem serupa. + 2. Menentukan Kebutuhan Pengguna + Setelah memahami konteks penggunaan, langkah berikutnya adalah + mengidentifikasi dan merumuskan kebutuhan pengguna berdasarkan + hasil riset yang telah dilakukan. Proses ini mencakup: + 22 + + a) Analisis Data Pengguna + Mengevaluasi informasi yang diperoleh dari wawancara, survei, dan + observasi untuk menemukan pola atau kebutuhan utama. + + b) Penentuan Fitur dan Fungsi + Mengidentifikasi fitur yang paling dibutuhkan oleh pengguna dan + mengutamakan pengembangan fitur-fitur yang memberikan manfaat + terbesar bagi mereka. + + c) Pembuatan Persona Pengguna + Menyusun profil fiktif yang mewakili kelompok pengguna untuk + membantu pengembang memahami karakteristik dan kebutuhan + pengguna dalam proses desain. + +3. Membuat Desain Solusi + Pada tahap ini, tim desain mulai mengembangkan representasi visual + dari sistem yang akan dibangun. Proses ini meliputi: + + a) Sketsa (Sketching) + Gambaran awal dapat dilihat pada gambar 2.5 konsep desain secara + kasar untuk mengeksplorasi berbagai kemungkinan solusi. + + Gambar 2.5 Tahapan UCD Desain Sketsa + b) Wireframe + + Desain kerangka dasar yang menggambarkan tata letak dan alur + interaksi dalam sistem. Wireframe pada gambar 2.6 membantu dalam + mengorganisir informasi dan elemen antarmuka dengan lebih jelas. + 23 + + Gambar 2.6 Tahapan UCD Desain Wireframing + c) Prototipe + + Model interaktif yang memungkinkan pengguna untuk mencoba dan + memberikan umpan balik sebelum sistem benar-benar dikembangkan. + Prototipe pada gambar 2.7 ini berupa high-fidelity (mirip dengan + produk akhir). + + Gambar 2.7 Tahapan UCD Desain Prototipe +4. Evaluasi Desain + + Evaluasi merupakan tahap krusial dalam UCD yang dilakukan untuk + menguji apakah desain yang dibuat sudah memenuhi kebutuhan + pengguna. Evaluasi ini dilakukan secara iteratif dan meliputi. + 24 + +a) Pengujian Usability + + Melibatkan pengguna dalam pengujian untuk menilai sejauh mana + + desain yang dibuat mudah digunakan dan dipahami. + +b) Analisis Umpan Balik + + Mengumpulkan masukan dari pengguna untuk mengetahui aspek + + desain yang perlu diperbaiki. + +c) Iterasi Desain + + Jika ditemukan kekurangan dalam pengujian, desain diperbaiki + + dan diuji kembali hingga mencapai solusi yang optimal. Proses iterasi + + dalam UCD merupakan bagian penting yang dilakukan secara + + berulang berdasarkan umpan balik pengguna. Namun, perlu dipahami + + bahwa tidak terdapat jumlah iterasi yang bersifat baku atau tetap + + dalam suatu penelitian, karena banyaknya iterasi sangat bergantung + + pada kompleksitas sistem, kebutuhan pengguna, serta hasil evaluasi + + yang diperoleh pada setiap tahap. Demikian, proses iterasi dapat + + dilakukan satu kali, dua kali, atau lebih hingga sistem dinilai telah + + memenuhi kebutuhan pengguna secara optimal. + + Sebagaimana dijelaskan dalam Tabel 3.1, rincian jumlah iterasi + + dalam metode UCD yang disajikan berdasarkan literatur hanya + + bersifat sebagai acuan umum, bukan sebagai ketentuan yang harus + + diikuti secara mutlak. Oleh karena itu, peneliti dapat menyesuaikan + + jumlah iterasi sesuai dengan kondisi dan kebutuhan penelitian yang + + dilakukan. yang memuat rincian jumlah iterasi dalam metode UCD + + berdasarkan literatur. + +Tabel 2.2 Rincian Iterasi dan Perbaikan Prototipe Berdasarkan UCD + +Tahapan Deskripsi Mekanisme Jumlah Kondisi Sumber + +UCD Tahapan Utama Iterasi Lanjut + +Understand Identifikasi Survei, 1-2 kali Kebutuhan (Kujala & + +of Use Pengguna wawancara jelas Kauppinen, + + 2004) + 25 + +Tahapan Deskripsi Mekanisme Jumlah Kondisi Sumber + +UCD Tahapan Utama Iterasi Lanjut + +Specify User Prototyping Sketsa, 2 kali Umpan (Colceriu + +Requirements & mockup, balik dkk., 2023) + + Pengujian prototipe, positif + + usability + + testing + +Evaluations Evaluasi & Usability Sampai Kepuasan (Elmatsani, + +Against Validasi test, hasil ke & peforma 2019) + +Requirement analisis -n tercapai + + performa + + Melalui penerapan metode User-Centered Design (UCD), pengembangan +sistem dapat lebih terarah dalam menciptakan pengalaman pengguna yang +optimal. Melalui tahapan memahami konteks penggunaan, menentukan +kebutuhan pengguna, membuat desain solusi, dan evaluasi desain, sistem +yang dihasilkan dapat lebih sesuai dengan ekspektasi serta kebutuhan +pengguna. Proses iteratif yang dilakukan dalam UCD memastikan bahwa +setiap aspek desain diuji dan disesuaikan agar memberikan kemudahan, +kenyamanan, serta efisiensi dalam penggunaannya. Dengan demikian, +penerapan UCD tidak hanya meningkatkan kualitas sistem, tetapi juga +memperkuat keterlibatan pengguna dalam proses pengembangannya, +sehingga menghasilkan solusi yang lebih efektif dan berdaya guna. + +2.8 System Usability Scale (SUS + System Usability Scale (SUS) merupakan metode evaluasi usability + +berbasis kuesioner yang dirancang untuk memberikan penilaian kuantitatif +terhadap kegunaan suatu sistem, baik perangkat lunak, perangkat keras, +maupun layanan digital lainnya yang dikembangkan oleh John Brooke +(Sambo dkk., 2023) . SUS banyak digunakan karena kemudahannya dalam +penggunaan, fleksibilitas terhadap berbagai jenis sistem, dan hasil evaluasi +yang dapat diandalkan secara statistik. + 26 + + SUS terdiri dari sepuluh pernyataan yang bersifat umum namun mampu +merepresentasikan dimensi penting dalam usability seperti efektivitas, +efisiensi, dan kepuasan pengguna (satisfaction). Setiap pernyataan dijawab +menggunakan skala Likert 5 poin, mulai dari nilai 1 (sangat tidak setuju) +hingga 5 (sangat setuju). Guna menghindari ketidakseimbangan, pernyataan +disusun secara bergantian antara pernyataan positif (nomor ganjil) dan +pernyataan negatif (nomor genap). + +2.9 Sampling Jenuh + Sampling jenuh atau saturation sampling merupakan teknik penentuan + +sampel di mana seluruh anggota populasi dijadikan sebagai sampel penelitian. +Teknik ini termasuk dalam kategori non-probability sampling, yaitu teknik +pengambilan sampel yang tidak memberikan peluang yang sama bagi setiap +anggota populasi untuk dipilih. Sampling jenuh sering disebut juga sebagai +metode sensus, karena seluruh populasi digunakan sebagai responden tanpa +dilakukan pemilihan sebagian sampel. + + Penelitian yang dilakukan oleh (Lestari dkk., 2021), dijelaskan bahwa +sampling jenuh (sensus) merupakan metode penarikan sampel ketika semua +anggota populasi dijadikan sebagai sampel penelitian . Penggunaan teknik ini +umumnya diterapkan dalam jumlah populasi relatif kecil, sehingga +memungkinkan peneliti untuk mengikutsertakan seluruh anggota populasi +guna memperoleh data yang lebih akurat dan representatif. + + Menggunakan sampling jenuh, data yang diperoleh mencerminkan +kondisi sebenarnya dari populasi karena tidak adanya proses pemilihan +sampel yang berpotensi menimbulkan bias. Namun demikian, teknik ini juga +memiliki keterbatasan, terutama dari segi efisiensi waktu dan tenaga apabila +jumlah populasi cukup besar. Oleh karena itu, penggunaan sampling jenuh +lebih efektif diterapkan pada penelitian dengan jumlah populasi terbatas. + 27 + + BAB 3. METODE PENELITIAN + +3.1 Waktu dan Tempat Pelaksanaan + Penelitian ini dilaksanakan selama 5 bulan pada bulan November 2025 + +sampai Maret 2026, dan dilakukan di Kantor Desa Pelem yang terletak di Jl. +Gotong Royong No.5, Ds. Pelem, Kec. Kertosono, Kabupaten Nganjuk, serta +di Kampus 3 Politeknik Negeri Jember, yang berlokasi di Kabupaten Nganjuk +Provinsi Jawa Timur. + +3.2 Alat dan Bahan +3.2.1 Alat + + Adapun alat-alat yang akan digunakan dalam penelitian ini terdiri dari +2 komponen yakni hardware dan software, +a. Perangkat Keras (Hardware) + + 1) Laptop Lenovo + 2) Processor 12th Gen Intel(R) Core(TM) i3-1215U 1.20 GHz + 3) RAM 8,00 GB (7,73 GB usable) + 4) Samartphone OPPO A57 +b. Perangkat Lunak + 1) Windows 11 + 2) Microsoft Office + 3) Mendeley Reference Manager + 4) Google Chrome + 5) Figma + 6) Draw.io + 7) Google Form +3.2.2 Bahan + + Bahan yang digunakan dalam penelitian ini mencakup beberapa sumber +referensi dan data pendukung. Sumber referensi yang digunakan meliputi +jurnal-jurnal penelitian, buku, serta artikel akademik yang menjadi dasar +dalam memahami konsep User Centered-Design (UCD) dan prinsip-prinsip +desain UI/UX. Data hasil wawancara dan kuisioner yang diperoleh dari +pegawai kantor Desa Pelem juga menjadi bahan utama dalam + + 32 + 28 +mengidentifikasi kebutuhan pengguna, merancang antarmuka, serta +mengevaluasi hasil desain yang dikembangkan. Semua bahan ini berperan +penting dalam memastikan bahwa perancangan UI/UX design yang +didasarkan pada landasan teori yang kuat serta kebutuhan nyata dari +pengguna akhir. +3.3 Tahapan Penelitian + + Tahapan penelitian ini dilakukan sedemikian rupa sehingga mengikuti +tahapan-tahapan yang ada, menjadikan penelitian lebih terstruktur dan mudah +dilaksanakan. Berikut diagram alur pada gambar 3.1: + + Gambar 3.1 Tahapan Penelitian Perancangan UI/UX Aplikasi Presensi + 29 + +3.3.1 Observasi + Observasi merupakan langkah awal dalam proses pengumpulan data + +yang bertujuan untuk memperoleh pemahaman kontekstual terhadap aktivitas +pengguna, khususnya dalam pelaksanaan pencatatan kehadiran di lingkungan +Kantor Desa Pelem. Metode observasi dilakukan secara langsung melalui +teknik wawancara dan pengamatan terhadap alur kerja pegawai, +permasalahan penggunaan sistem presensi yang berjalan, serta karakteristik +lingkungan fisik kerja yang dapat memengaruhi rancangan antarmuka. Hasil +observasi ini menjadi dasar identifikasi awal permasalahan dan kebutuhan +pengguna, yang kemudian digunakan sebagai input dalam perumusan +kebutuhan sistem. Temuan dari tahap ini turut mendukung pemetaan +karakteristik pengguna, sehingga desain UI/UX yang dihasilkan mampu +menyesuaikan dengan kebutuhan, kebiasaan, dan batasan pengguna secara +faktual. Observasi memberikan kontribusi signifikan terhadap validitas data +kebutuhan dan menjadi fondasi utama dalam proses desain sistem. + +3.3.2 Analisis Kebutuhan + Analisis kebutuhan dilakukan untuk mendefinisikan secara rinci fitur, + +fungsi, serta elemen antarmuka yang harus tersedia dalam sistem presensi. +Kegiatan ini dilaksanakan setelah tahap observasi, dengan mengolah +informasi yang diperoleh menjadi dua kategori utama yaitu kebutuhan +fungsional dan non-fungsional. Kebutuhan fungsional mencakup fitur-fitur +seperti proses pencatatan kehadiran secara digital, pengelolaan data +kehadiran, tampilan rekapitulasi kehadiran, serta mekanisme login pengguna. +Sementara itu, kebutuhan non-fungsional meliputi aspek kemudahan +penggunaan (usability), kecepatan akses, desain yang responsif terhadap +berbagai perangkat, dan tampilan antarmuka yang intuitif. Hasil analisis +kebutuhan ini digunakan sebagai acuan dalam perancangan antarmuka yang +berorientasi pada efisiensi penggunaan dan kepuasan pengguna. + 30 + +3.3.3 Studi Literatur + Studi literatur dilakukan untuk memperoleh landasan teoritis dalam + +mendukung perancangan UI/UX design sistem presensi dengan metode User +Centered-Design (UCD). Pada tahap ini, berbagai sumber referensi seperti +jurnal ilmiah, buku teks, dan artikel akademik dikaji secara mendalam untuk +memahami konsep-konsep penting yang berkaitan dengan UI/UX dan +metodologi UCD dalam pengembangan sistem. Studi literatur ini juga +mencakup pembahasan mengenai teknik analisis kebutuhan pengguna, +pembuatan prototipe, serta metode evaluasi System Usability Scale pada +desain. Selain itu, penelitian terdahulu yang relevan juga dipelajari untuk +memahami pendekatan dan hasil yang telah dicapai dalam proyek-proyek +serupa. Dengan melakukan studi literatur yang komprehensif, penelitian ini +dapat memastikan bahwa perancangan UI/UX sistem presensi dilakukan +berdasarkan teori yang valid, dan memperhatikan perkembangan terbaru +dalam dunia desain antarmuka pengguna. + +3.3.4 Rumusan Masalah + Tahap perumusan masalah dalam penelitian ini difokuskan pada aspek + +perancangan antarmuka pengguna (UI) dan pengalaman pengguna (UX) dari +sistem presensi yang akan dikembangkan. Berdasarkan hasil observasi +Kantor Desa Pelem, ditemukan bahwa antarmuka sistem presensi yang ada +belum dirancang dengan mempertimbangkan kebutuhan dan karakteristik +pengguna secara optimal. Hal ini menyebabkan kesulitan dalam navigasi, +ketidakjelasan dalam penyajian informasi, serta pengalaman pengguna yang +kurang intuitif. Oleh karena itu, masalah yang dirumuskan dalam penelitian +ini adalah bagaimana merancang UI/UX sistem presensi berbasis User +Centered-Design (UCD) yang mampu menyediakan tampilan antarmuka +yang sederhana, mudah digunakan, serta memberikan pengalaman +penggunaan yang efektif dan nyaman sesuai dengan kebutuhan pengguna di +Kantor Desa Pelem. + 31 + +3.3.5 Pembuatan UI/UX dengan UCD + Proses perancangan UI/UX dilakukan berdasarkan pendekatan User + +Centered Design (UCD), yang menekankan keterlibatan aktif pengguna pada +setiap tahapan pengembangan. Pendekatan ini dipilih untuk memastikan +bahwa sistem yang dibangun benar-benar memenuhi kebutuhan nyata +pengguna. Implementasi UCD dilakukan secara iteratif dan terdiri dari empat +tahapan utama. +a. Memahami Konteks Pengguna + + Tahapan ini dilakukan dengan pengumpulan informasi secara mendalam +melibatkan wawancara dan Focus Group Discussion (FGD). Wawancara +dilakukan secara individual kepada beberapa pegawai Kantor Desa Pelem +untuk menggali pengalaman mereka dalam menggunakan sistem presensi +manual, mengidentifikasi kendala yang sering dihadapi seperti keterlambatan +pencatatan dan kehilangan data, serta mengetahui harapan mereka terhadap +sistem presensi digital. + + Selain wawancara, dilakukan FGD dengan beberapa pegawai dari berbagai +posisi untuk mendiskusikan pengalaman bersama, mengklasifikasi kebutuhan +umum, serta mengidentifikasi tantangan yang tidak muncul dalam +wanwancara personal. Hasil dari tahapan ini digunakan sebagai dasar dalam +perumusan kebutuhan pengguna dan menjadi acuan dalam proses +perancangan sistem presensi berbasis digital. +b. Menentukan Kebutuhan Pengguna + + Berdasarkan hasil analisis yang diperoleh dari wawancara dan FGD, telah +merumuskan kebutuhan pengguna yang harus dipenuhi oleh sistem presensi. +Tahapan ini sangat penting untuk memastikan bahwa desain yang +dikembangkan sesuai dengan apa yang dibutuhkan oleh pengguna. + + Kebutuhan pengguna yang telah dikumpulkan akan dikelompokkan +berdasarkan kategori, seperti kebutuhan fungsional, misalnya: kemudahan +login, absensi otomatis, laporan kehadiran dan non-fungsional, misalnya: +kecepatan, kemudahan penggunaan, desain yang bersih dan minimalis. + 32 + +c. Perancangan Desain Solusi + Pada tahap ini, dibuat untuk menerjemahkan kebutuhan pengguna menjadi + +sebuah solusi nyata melalui rancangan desain. Proses yang dilakukan +meliputi: + + • Wireframing: Membuat kerangka dasar tata letak halaman seperti, + struktur navigasi, posisi tombol, formulir input absensi, dsb. + + • Prototyping: Membuat model interaktif sederhana dari antarmuka yang + memungkinkan pengguna mencoba simulasi fungsi utama seperti + absensi, login, dan logout. + + • Desain Visual: Menyusun elemen grafis seperti pemilihan warna, font, + ikon, dan konsistensi gaya agar antarmuka terlihat menarik, mudah + dipahami, dan profesional. + + Selama tahap ini, fokus utama adalah menjaga kesesuaian antara desain +dengan kebutuhan dan kenyamanan pengguna. +d. Evaluasi Desain + + Desain antarmuka yang telah dibuat dievaluasi untuk memastikan +kesesuaiannya dengan harapan dan kebutuhan pengguna. Evaluasi ini +dilakukan dengan melibatkan pengguna akhir melalui kegiatan dalam uji +coba, yang bertujuan untuk mengukur tingkat efektivitas, efisiensi, dan +kepuasan dalam penggunaan sistem. Ketika aspek tersebut merupakan bagian +utama dari usability berdasarkan standar ISO 9241-11:2018, yang digunakan +untuk menilai sejauh mana suatu sistem dapat digunakan oleh pengguna +secara optimal dalam mencapai tujuan tertentu. Menurut (Siahaan dkk., +2024), aspek usability terdiri dari effectiveness, efficiency, dan satisfaction +yang menjadi indikator penting dalam mengevaluasi kualitas pengalaman +pengguna terhadap suatu sistem. Oleh karena itu, dalam penelitian ini +digunakan metode System Usability Scale (SUS) sebagai instrumen evaluasi +dengan memberikan kuesioner yang terdiri dari 10 pernyataan sebagai +berikut: + 33 + + Tabel 3.1 10 Pernyataan SUS + +No Pernyataan Jenis Pernyataan Aspek Usability + Positif Efektifitas +1 Saya merasa akan sering + Negatif Efisiensi + menggunakan aplikasi presensi Positif Efisiensi + Negatif Efektifitas + ini. + Positif Efisiensi +2 Aplikasi ini terasa terlalu rumit + Negatif Kepuasan + untuk digunakan. Positif Pengguna + Efektifitas +3 Saya merasa aplikasi ini mudah Negatif + Efisiensi + digunakan. Positif + Negatif Kepuasan +4 Saya merasa perlu bantuan Pengguna + Kepuasan + teknis untuk bisa menggunakan Pengguna + + aplikasi ini + +5 Fitur-fitur dalam aplikasi + + presensi ini saling terintegrasi + + dengan baik. + +6 Aplikasi ini terasa tidak + + konsisten saat digunakan. + +7 Saya merasa sebagian besar + + orang bisa mempelajari aplikasi + + ini dengan cepat. + +8 Saya merasa aplikasi ini + + membingungkan saat + + digunakan. + +9 Saya merasa percaya diri saat + + menggunakan aplikasi ini. + +10 Saya harus banyak belajar + + sebelum bisa menggunakan + + aplikasi ini. + 34 + +3.3.6 Teknik Analisis Data + +Teknik analisis data dari hasil penelitian dilakukan berdasarkan + +kuesioner System Usability Scale (SUS) yang telah diisi oleh pengguna + +setelah mencoba prototipe sistem presensi. Analisis ini bertujuan untuk + +mengukur tingkat usability sistem yang mencakup aspek efektivitas, efisiensi, + +dan kepuasan pengguna. + +Langkah-langkah perhitungan skor SUS adalah sebagai berikut: + +1. Untuk pernyataan ganjil (positif), skor dikurangi 1: = − 1 + +2. Untuk pernyataan genap (negatif), nilai dikurangi 5: = 5 − + +3. Jumlahkan seluruh nilai kontribusi dari 10 item : + + 10 + + ∑ + + =1 + +4. Kalikan hasil penjumlahan tersebut dengan 2,5 untuk mendapatkan skor + +akhir SUS: 10 +Bahwa: + = (∑ ) × 2.5) + + =1 + +• Si adalah skor asli yangdiberikan oleh pengguna pada pernyataan ke-i. + +• Ci adalah skor kontribusi dari pernyataan le-I setelah penyesuaian. + +• Skor SUS berada pada rentang 0 hingga 100, meskipun bukan dalam + +bentuk persentase. + + Gambar 3.2 SUS Score + Gambar 2.8 SUS Score merupakan skor akhir SUS yang berada dalam +rentan 0 hingga 100, namun bukan merupakan persentase. Skor ini + 35 + +memberikan gambaran umum mengenai tingkat kegunaan sistem secara +keseluruhan. Untuk menafsirkan hasil akhir SUS, menggunakan beberapa +pendekatan, seperti: +a) Rentang Tigkat Kelayakan (Acceptability Range) + + • Tidak Layak (Not Acceptable): Skor dibawah 50 + • Perlu Dipertimbangkan (Marginal): Skor antara 50-70 + • Layak (Acceptable): Skor diatas 70 +b) Skala Huruf (Grade Scale) + • A (90–100): Luar Biasa – Sistem sangat mudah digunakan + • B (80–89): Baik – Sistem cukup mudah digunakan, mungkin hanya + + perlu sedikit perbaikan + • C (70–79): Cukup – Penggunaan sistem tergolong biasa saja, beberapa + + perbaikan dibutuhkan + • D (60–69): Kurang – Sistem agak sulit digunakan dan perlu perbaikan + + besar + • E (50-59): Buruk – Sistem ini sulit digunakan butuh banyak perbaikan + • F (di bawah 50): Sangat Buruk – Sistem sangat sulit digunakan, butuh + + perombakan menyeluruh +c) Peringkat Kata Sifat (Adjective Ratings) + + Digunakan untuk menggambarkan kesan pengguna terhadap sistem: + Sangat Buruk, Buruk, Cukup, Baik, Sangat Baik, Luar Biasa + Dengan demikian, System Usability Scale (SUS) merupakan alat yang +sangat berguna dalam mengukur persepsi pengguna terhadap sistem, dan +hasilnya dapat digunakan untuk perbaikan serta iterasi lebih lanjut pada +sistem atau produk yang dikembangkan. + +3.4 Pelaksanaan Penelitian + Serangkaian kegiatan yang dilakukan secara sistematis untuk mencapai + +tujuan penelitian yang telah ditetapkan. Proses ini mencakup observasi, +analisis kebutuhan pengguna, studi literatur, perumusan masalah, serta +perancangan UI/UX dengan pendekatan User-Centered Design (UCD), yang +terdiri dari tahapan memahami pengguna, menentukan kebutuhan, merancang + 36 + +solusi, dan evaluasi. Pengujian dilakukan menggunakan metode System +Usability Scale (SUS) untuk menilai tingkat kegunaan sistem. Selain itu, +penelitian ini juga mencakup analisis hasil serta penarikan kesimpulan. +Berikut adalah pelaksanaan penelitian dapat dilihat pada tabel 3.1. + + Tabel 3.2 Pelaksanaan Penelitian + +No Kegiatan 1 2 3 4 5 + + 12341234123412341234 + +1 Observasi + +2 Analisis + Kebutuhan + +3 Studi + Literatur + +4 Rumusan + Masalah + +5 Pembuatan + UI/UX + dengan + UCD + +6 Hasil + Analisis + +7 kesimpulan + 37 + + BAB 4. HASIL DAN PEMBAHASAN + +4.1 Hasil +4.1.1 Memahami Konteks Pengguna (Understand Context of Use) + + Pada tahap ini, peneliti melakukan analisis konteks pengguna untuk +memahami karakteristik, kebutuhan, serta permasalahan yang dihadapi oleh +pengguna aplikasi absensi di Kantor Desa Pelem. Analisis ini dilakukan +dengan menggunakan hasil observasi dan wawancara kepada perangkat desa, +khususnya Sekretaris Desa yang bertanggung jawab terhadap pencatatan dan +rekapitulasi absensi. Informasi yang diperoleh dari proses wawancara +tersebut digunakan untuk menyimpulkan karakteristik pengguna dan +formamerumuskan user persona sebagai dasar dalam pengembangan desain +aplikasi. Berdasarkan informasi yang diperoleh, ditemukan gambaran umum +mengenai pengguna aplikasi absensi, yang kemudian dirangkum ke dalam +user persona. Berikut ringkasan user persona dapat dilihat pada Tabel 4.1 +berikut. + + Tabel 4.1 User Persona + + User Persona + +Demografi a. Usia : 27 – 55 tahun. + + b. Jenis kelamin : Laki – Laki / Perempuan. + + c. Status : Pegawai Kantor Desa Pelem. + +User a. Pendidikan : SMA – Perguruan Tinggi. + +Characteristics b. Pekerjaan: Perangkat Desa. + + c. Tingkat literasi digital : Dasar. + + d. Pengalaman aplikasi sejenis : Terbatas. + +User Needs & a. Membutuhkan sistem yang mudah digunakan dan + +Goals tidak kompleks. + + b. Menginginkan proses absensi yang cepat dan efisien. + + c. Membutuhkan pencatatan waktu kehadiran secara + + otomatis. + + d. Membutuhkan kemudahan dalam melihat riwayat dan + + rekap absensi. + + 41 + 38 + +Perilaku User Persona + a. Terbiasa melakukan absensi manual dibuku absensi. +Taks / Activity b. Menggunakan perangkat smartphone dalam aktivitas +Konteks +Pengguna sehari-hari. +Pain Points c. Cenderung menghindari sistem yang kompleks. + d. Menyukai sistem yang sederhana dan mudah +Goals + dipahami. + a. Melakukan absensi masuk dan pulang kerja. + b. Melihat atau mengecek riwayat kehadiran. + c. Melakukan izin absensi. + d. Melakukan rekap absensi. + a. Lingkungan : Kantor desa (Indoor). + b. Perangkat : Smartphone (mid-range). + c. Koneksi : Stabil. + d. Waktu penggunaan: cepat (absensi), santai (melihat + + data). + a. Lupa mencatat jam kehadiran pada absensi manual. + b. Proses rekap absensi memerlukan waktu lama. + c. Tidak ada bukti waktu kehadiran yang tercatat. + d. Kurangnya transparansi dalam pencatatan kehadiran. + e. Tingkat kedisiplinan yang belum optimal. + a. Sistem absensi digital yang otomatis dan akurat. + b. Mempermudah proses rekap data kehadiran. + c. Mendukung kedisiplinan perangkat desa. + d. Tampilan aplikasi yang sederhana, jelas, dan mudah + + digunakan. + + Tabel 4.1 menyajikan ringkasan karakteristik pengguna yang menjadi +dasar dalam proses perancangan desain sistem. Informasi tersebut kemudian +dianalisis untuk membentuk user persona yang merepresentasikan kondisi +nyata pengguna aplikasi absensi di Kantor Desa Pelem. User persona yang +disusun mencakup beberapa aspek utama, yaitu karakteristik pengguna, + 39 + +kebutuhan dan tujuan pengguna, perilaku, aktivitas, konteks penggunaan, +serta permasalahan yang dihadapi pengguna sistem. + + Analisis demografi dilakukan untuk memperoleh pemahaman yang +lebih mendalam mengenai karakteristik calon pengguna yang akan terlibat +dalam proses perancangan dan evaluasi usability. Data demografi dengan +rentang usia 27 hingga 55 tahun yang termasuk dalam kategori usia produktif. +Seluruh pengguna memiliki peran sebagai pegawai di lingkungan Kantor +Desa Pelem, sehingga sistem yang dirancang harus mampu mendukung +aktivitas administrasi kehadiran secara efektif. Dari sisi karakteristik +pengguna, diketahui bahwa pengguna memiliki latar belakang pendidikan +yang beragam, dengan kemampuan literasi digital pada tingkat dasar, yaitu +mampu menggunakan smartphone dan aplikasi sederhana dalam aktivitas +sehari-hari. Selain itu, pengalaman pengguna terhadap aplikasi absensi digital +masih terbatas, sehingga diperlukan desain antarmuka yang sederhana, +intuitif, dan mudah dipahami tanpa memerlukan pembelajaran yang +kompleks. yang dibuktikan dari hasil wawancara bahwa tidak semua +pengguna terbiasa menggunakan aplikasi digital, sehingga menuntut adanya +desain antarmuka yang sederhana dan mudah dipahami. + + Aspek kebutuhan dan tujuan pengguna (user needs and goals) +menunjukkan bahwa pengguna menginginkan sistem absensi yang mudah +digunakan dan tidak rumit. Proses pencatatan kehadiran diharapkan dapat +dilakukan secara cepat dan efisien agar tidak mengganggu aktivitas kerja +lainnya. Sistem juga diharapkan mampu mencatat waktu kehadiran secara +otomatis sehingga mengurangi kesalahan pencatatan manual. Kemudahan +dalam melihat riwayat dan rekap absensi menjadi salah satu kebutuhan utama +yang diharapkan oleh pengguna. Kebutuhan tersebut muncul sebagai respons +terhadap berbagai permasalahan yang selama ini terjadi pada sistem manual. + + Perilaku pengguna menunjukkan bahwa kegiatan absensi selama ini +masih dilakukan secara manual menggunakan buku absensi. Pengguna telah +terbiasa menggunakan smartphone dalam aktivitas sehari-hari sehingga +memiliki potensi untuk beradaptasi dengan sistem digital. Preferensi +pengguna cenderung mengarah pada sistem yang sederhana dan tidak + 40 + +kompleks agar mudah digunakan. Pengguna juga cenderung menghindari +aplikasi yang memiliki alur penggunaan yang rumit dan membingungkan. +Kondisi tersebut menunjukkan bahwa desain sistem harus mengutamakan +kemudahan penggunaan serta kejelasan alur interaksi. + + Aktivitas pengguna (task/activity) mencakup beberapa kegiatan utama +seperti melakukan absensi masuk dan pulang kerja, melihat riwayat +kehadiran, serta mengajukan izin absensi. Aktivitas tersebut tergolong +sederhana namun memiliki tingkat urgensi yang tinggi terutama pada saat jam +masuk dan jam pulang kerja. Proses absensi membutuhkan waktu yang +singkat sehingga sistem harus mampu merespon dengan cepat. Kegiatan +melihat riwayat absensi dilakukan secara lebih santai namun tetap +membutuhkan tampilan informasi yang jelas. Aktivitas rekap absensi +memiliki tingkat kompleksitas yang lebih tinggi terutama bagi pengguna +dengan peran administratif. + + Konteks penggunaan sistem menggambarkan kondisi lingkungan dan +perangkat yang digunakan oleh pengguna. Aplikasi absensi digunakan di +lingkungan kantor desa yang bersifat indoor sehingga kondisi penggunaan +relatif stabil. Perangkat yang digunakan berupa smartphone dengan +spesifikasi menengah yang mampu menjalankan aplikasi secara optimal. +Koneksi internet yang digunakan cenderung stabil sehingga mendukung +penggunaan sistem berbasis online. Waktu penggunaan aplikasi terbagi +menjadi dua kondisi utama yaitu penggunaan cepat saat absensi dan +penggunaan santai saat melihat data. Kondisi tersebut menunjukkan bahwa +sistem harus memiliki performa yang responsif dan tetap nyaman digunakan +dalam berbagai situasi. + + Permasalahan utama (pain points) yang dihadapi pengguna meliputi +lupa mencatat waktu kehadiran, lamanya proses rekap absensi, serta tidak +adanya pencatatan waktu secara otomatis. Transparansi data kehadiran juga +masih kurang sehingga menyulitkan dalam proses monitoring. Kondisi +tersebut berdampak pada belum optimalnya tingkat kedisiplinan perangkat +desa. Sistem manual yang digunakan saat ini dinilai kurang efektif dalam + 41 + +mendukung kebutuhan administrasi kehadiran. Permasalahan tersebut +menjadi dasar dalam pengembangan solusi sistem absensi digital. + + Tujuan pengguna (goals) berfokus pada kebutuhan akan sistem absensi +digital yang mampu mencatat waktu kehadiran secara otomatis dan akurat. +Proses rekap data diharapkan menjadi lebih cepat dan efisien dibandingkan +metode manual. Transparansi data kehadiran menjadi salah satu aspek penting +yang ingin ditingkatkan oleh pengguna. Sistem juga diharapkan mampu +mendukung peningkatan kedisiplinan perangkat desa. Tampilan aplikasi yang +sederhana, jelas, dan mudah digunakan menjadi harapan utama agar sistem +dapat digunakan oleh seluruh pengguna tanpa kendala. + + Pemahaman terhadap karakteristik, kebutuhan, perilaku, aktivitas, +konteks penggunaan, serta permasalahan dan tujuan pengguna menjadi dasar +dalam proses perancangan sistem. Pendekatan ini memastikan bahwa desain +yang dihasilkan benar-benar berorientasi pada pengguna. + +4.1.2 Menentukan Kebutuhan Pengguna (Specify User requirement) + + Kebutuhan pengguna berdasarkan hasil analisis konteks penggunaan +dan user persona yang telah disusun pada tahap sebelumnya dapat + +diklasifikasikan menjadi kebutuhan fungsional dan kebutuhan non- +fungsional, dengan fokus pada aspek kemudahan penggunaan (usability) dan + +pengalaman pengguna (user experience). + +a. Kebutuhan Fungsional Pengguna + + Kebutuhan fungsional merupakan kebutuhan yang berkaitan dengan +fitur-fitur utama yang harus tersedia pada aplikasi absensi berdasarkan + +aktivitas pengguna dan rancangan mockup desain. Berdasarkan hasil +wawancara dan analisis desain, kebutuhan fungsional pengguna + +dirangkum pada Tabel 4.2 berikut. + Tabel 4.2 Kebutuhan Fungsional + +Kebutuhan Deskripsi + +Absensi masuk dan pulang Pengguna dapat melakukan absensi + +berbasis QR Code. masuk dan pulang dengan memindai QR + + Code melalui aplikasi mobile + 42 + + Kebutuhan Deskripsi +Pencatatan waktu otomatis Sistem menampilkan waktu masuk dan + pulang secara otomatis setelah proses +Riwayat absensi absensi +Fitur izin Pengguna dapat melihat riwayat + kehadiran dengan tanggal tertentu. +Notifikasi absensi Pengguna dapat mengajukan izin + dengan melampirkan keterangan dan +Dashboard admin bukti foto. +Kelola Perangkat Aplikasi memberikan notifikasi setelah +Rekap absensi absensi atau izin berhasil/gagal + dilakukan + Admin dapat melihat ringkasan data + kehadiran perangkat desa + Admin dapat menambahkan anggota + perangkat / staf baru. + Admin dapat melihat rekap data absensi + secara terstruktur + + Tabel 4.2 menunjukkan bahwa kebutuhan fungsional pengguna +berfokus pada kemudahan proses absensi, kejelasan pencatatan waktu, +serta kemudahan dalam memantau dan merekap data kehadiran. Seluruh +kebutuhan tersebut disesuaikan dengan rancangan mockup aplikasi mobile +untuk perangkat desa dan aplikasi web untuk admin. + +b. Kebutuhan Non-fungsional Pengguna + Kebutuhan non-fungsional yang berkaitan dengan tampilan antarmuka + +dan pengalaman penggunaan aplikasi. Kebutuhan non-fungsional ini +dirumuskan untuk mendukung kenyamanan pengguna dalam +menggunakan aplikasi absensi. Berikut ringkasan dari hasil wawancara +dan analisis desain, kebutuhan non-fungsional pengguna dapat dilihat pada +Tabel 4.3 berikut. + 43 + +Tabel 4.3 Kebutuhan Non-Fungsional + + Kebutuhan Deskripsi +Tampilan sederhana Antarmuka aplikasi dirancang + sederhana dan tidak membingungkan. +Navigasi jelas Menu dan tombol mudah dikenali serta +Konsistensi tampilan mudah diakses. +Feedback visual Desain tampilan konsisten antar + halaman. + Aplikasi memberikan umpan balik + visual setelah pengguna melakukan + aksi. + + Tabel 4.2 Kebutuhan non-fungsional ini berperan penting dalam + mendukung usability aplikasi, sehingga pengguna dapat memahami alur + penggunaan aplikasi dengan cepat dan minim kesalahan. + +4.1.3 Perancangan Desain Solusi (Design Solution) + + a. Wireframing + Wireframe digunakan sebagai rancangan awal untuk menentukan + + struktur halaman, tata letak elemen, dan alur navigasi aplikasi presensi + sebelum masuk ke tahap desain visual. Wireframe dibuat secara low + fidelity tanpa memasukkan detail desain seperti warna atau gambar. Proses + pembuatan wireframe menggunakan tools Figma. Berikut adalah + rancangan wireframe pada halaman mobile dan web (admin) aplikasi + presensi Desa. + +  Wireframe mobile pengguna + ➢ Halaman Log In Pengguna + Halaman log in merupakan sebuah fitur auntentikasi untuk + pengguna dapat mengakses semua fitur pada aplikasi. Tampilan + halaman log in dapat dilihat pada Gambar 4.1 dibawah ini. + 44 + + Gambar 4.1 Wireframing Login Pengguna + Gambar 4.1 merupakan tampilan halaman login. Pada halaman ini +akan menampilkan logo, nama aplikasi, serta kolom input untuk email +dan kata sandi. Terdapat juga tombol login yang memungkinkan +pengguna beralih ke fitur absensi dan label lainnya seperti lupa kata +sandi. +➢ Halaman Home Pengguna + Halaman home pengguna merupakan menu utama aplikasi yang +memberikan akses ke fitur lainnya. Tampilan halaman menu utama +dapat dilihat pada Gambar 4.2 dibawah ini. + 45 + + Gambar 4.2 Wireframing Home Pengguna + Gambar 4.2 merupakan tampilan menu utama, pada menu ini akan +menampilkan beberapa section. Pertama terdapat section header bar +yang meliputi foto profile pengguna, kalimat sapaan, dan fitur +notifikasi. Kedua terdapat section yang menampilkan sebuah card +informasi berupa status presensi pengguna pada hari berjalan. Ketiga +section yang menampilkan dua menu utama dalam bentuk card, yaitu +menu izin dan menu riwayat. Pada section keempat ditampilkan +ringkasan informasi kehadiran hari ini. Kemudian terdapat section +utama aplikasi yaitu navigation menu bar yang terdiri dari menu +riwayat, qr-qode dan profil. +➢ Halaman Qr-Code Absensi Pengguna + Halaman Qr-Code absensi merupakan halaman yang ditampilkan +pada area utama berupa kamera pemindai QR Code digunakan oleh +pengguna untuk melakukan proses absensi. Tampilan ini dirancang +sederhana dengan bagian bawah layar terdapat indikator dan tombol +navigasi yang membantu pengguna dalam menjalankan proses + 46 + +pemindaian QR-Code. Tampilan halaman ini dapat dilihat pada +Gambar 4.3 dibawah ini. + + Gambar 4.3 Wireframe Qr-Code Absensi Pengguna + Gambar 4.3 merupakan halaman form absensi setelah proses +pemindaian QR-Code berhasil dilakukan. Pada halaman ini +ditampilkan beberapa field input dan label teks yang berfungsi untuk +menampilkan informasi kehadiran, seperti nama pengguna, tanggal, +waktu absensi, serta keterangan status kehadiran. Selain itu, +disediakan tombol aksi untuk menyimpan atau mengonfirmasi data +absensi. Desain halaman ini dibuat sederhana dan terstruktur agar +memudahkan pengguna dalam melakukan proses absensi tanpa +menimbulkan kebingungan. +➢ Halaman Riwayat Absensi + Halaman riwayat absensi pengguna merupakan halaman yang +menampilkan daftar data absensi pengguna dalam bentuk list yang +tersusun secara vertikal. Tampilan halaman daftar riwayat dapat +dilihat pada Gambar 4.4 dibawah ini. + 47 + + Gambar 4.4 Wireframe Riwayat Absensi + Gambar 4.4 merupakan halaman riwayat absensi dimana section +pertama disediakan field pencarian (search) untuk memudahkan +pengguna dalam menemukan data riwayat tertentu. Section kedua +terdapat daftar riwayat yang menampilkan informasi utama seperti +tanggal absensi dan status kehadiran. Kemudian terdapat halaman +detail riwayat kehadiran yang menampilkan field hasil inputan dan +label teks serta bukti file foto yang telah dilakukan pengguna. +➢ Halaman Izin Absensi + Halaman izin absensi pengguna merupakan halaman yang +memfasilitasi pengguna dalam mengajukan izin ketidakhadiran. +Tampilan halaman izin dapat dilihat pada Gambar 4.5 dibawah ini. + 48 + + Gambar 4.5 Wireframe Izin Absensi Pengguna + Gambar 4.5 merupakan halaman izin absensi yang menyediakan +form dengan label teks yang berisi beberapa field input, seperti jenis +izin, tanggal izin, keterangan alasan, serta unggah bukti pendukung +berupa file foto. Penyusunan form dibuat terstruktur dan jelas agar +pengguna dapat mengisi data izin dengan mudah dan minim +kesalahan. Selain itu, disediakan tombol aksi untuk mengirim +pengajuan izin sebagai bagian dari proses presensi tidak hadir atau +izin. +➢ Halaman Profil Pengguna + Halaman profile pengguna merupakan halaman yang memberi +akses pengelolaan akun pengguna dan informasi pribadi. Tampilan +halaman profile dapat dilihat pada Gambar 4.6 dibawah ini. + 49 + + Gambar 4.6 Wireframe Profil pengguna + Gambar 4.6 merupakan halaman profil pengguna, pada halaman ini + menampilkan informasi utama pengguna yang meliputi foto profil, + nama pengguna, dan alamat email yang ditampilkan pada bagian + header. Selanjutnya, pada halaman profil tersedia beberapa sub menu + dalam bentuk daftar, yaitu Edit Akun, Status Verifikasi, Ubah Kata + Sandi, dan Keluar. + Wireframe website admin + ➢ Halaman Landingpage Qr-Code Absensi + Halaman landingpage Qr-Code absensi pada website admin + merupakan halaman QR-Code dinamis dimana pengguna mobile akan + memindai QR-Code tersebut dengna melakukan proses absensi hadir + melalui aplikasi mobile. Tampilan halaman dapat dilihat pada gambar + 4.7 dibawah ini. + 50 + + Gambar 4.7 Wireframe Qr-Code Absensi + Gambar 4.7 merupakan halaman landingpage QR-Code dinamis, +pada bagian header bar ditampilkan logo apliaksi dan tab Qr-Code dan +Login admin. Kemudian dibawah header sebelah kiri terdapat QR- +Code dinamis untuk dipindai oleh pengguna mobile. Selain itu +disebelah kanan Qr-Code terdapat informasi judul halaman, tanggal, +dan waktu absensi serta list kehadiran pengguna mobile. Desain +halaman dibuat sederhana dengan fokus utama pada QR-Code dan +keterbacaan informasi, sehingga proses pemantauan absensi dapat +dilakukan dengan cepat dan efisien. +➢ Halaman Log In Admin + Halaman log in admin merupakan sebuah fitur auntentikasi untuk +admin dapat mengakses semua fitur pada website. Tampilan halaman +log in admin dapat dilihat pada Gambar 4.8 dibawah ini. + 51 + + Gambar 4.8 Wireframe Login Admin + Gambar 4.8 merupakan halaman login admin, pada bagian header +bar ditampilkan logo apliaksi dan tab Qr-Code dan Login admin. +Halaman login ditampilkan form input berupa email dan kata sandi +yang dilengkapi dengan label teks yang jelas untuk membantu +pengguna memahami data yang harus diisikan. Selain itu, terdapat +tombol login sebagai aksi utama untuk memproses autentikasi admin +serta juga dapat beralih ke fitur label lainnya seperti lupa kata sandi. +➢ Halaman Dashboard + Halaman dashboard web admin merupakan halaman utama +website yang memberikan akses ke fitur lainnya. Tampilan halaman +utama dapat dilihat pada Gambar 4.9 dibawah ini. + 52 + + Gambar 4.9 Wireframe Dashboard Admin + Gambar 4.9 merupakan wireframe dashboard web admin yang +menggunakan left sidebar navigation (navbar) sebagai navigasi utama +aplikasi. Navbar berada di sisi kiri layar dan berisi menu Dashboard, +Pengajuan, Kelola Anggota, Laporan/Rekap absensi, dan settings +profil sehingga admin dapat berpindah halaman dengan mudah tanpa +kehilangan konteks informasi utama. Pada area konten utama, +dashboard menampilkan summary card yang berisi informasi jumlah +presensi pada hari berjalan, jumlah anggota aktif anggota, dan jumalah +anggota izin. Komponen ini berfungsi sebagai ringkasan cepat kondisi +kehadiran perangkat desa. Dibawah summary card, ditampilkan data +tabel absensi perangkat desa yang memuat informasi nama perangkat +desa, waktu datang, waktu pulang, durasi kerja, serta status kehadiran. +Jabatan ditampilkan sebagai secondary text di bawah nama pengguna +untuk memperjelas identitas. Status kehadiran disajikan dalam bentuk +status badge agar mudah dikenali secara visual. +➢ Halaman Pengajuan + Halaman pengajuan merupakan halaman pengajuan izin pada web +admin. Halaman ini digunakan untuk menampilkan daftar pengajuan + 53 + +izin dan sakit yang diajukan oleh perangkat desa atau pengguna +mobile. Struktur halaman tetap menggunakan left sidebar navigation +(navbar) di sisi kiri sebagai navigasi utama, sehingga konsistensi +antarmuka antar halaman tetap terjaga. Tampilan halaman pengajuan +dapat dilihat pada Gambar 4.10 dibawah ini. + + Gambar 4.10 Wireframe Pengajuan Izin Admin + Gambar 4.10 merupakan pengajuan izin web admin yang mana +pada area konten utama ditampilkan data table pengajuan izin yang +berisi informasi nama perangkat desa, jabatan, tanggal pengajuan, +keterangan (izin atau sakit), serta status pengajuan. Status pengajuan +ditampilkan dalam bentuk status badge seperti diajukan dan diterima +untuk memudahkan admin melakukan visual scanning terhadap +kondisi setiap pengajuan. +➢ Halaman Kelola Perangkat + Halaman kelola perangkat merupakan halaman yang digunakan +untuk mengelola data perangkat desa yang terdaftar dalam sistem. +Struktur halaman tetap menggunakan left sidebar navigation (navbar) +di sisi kiri untuk menjaga konsistensi navigasi antar halaman. + 54 + +Tampilan halaman kelola perangkat dapat dilihat pada Gambar 4.11 +dibawah ini. + + Gambar 4.11 Wireframe Kelola Perangkat Admin + Gambar 4.11 merupakan halaman kelola perangkat web admin +dimana pada area konten utama ditampilkan data table anggota +perangkat desa yang memuat informasi nama perangkat desa, aksi, +dan status keaktifan. Kolom aksi menyediakan action button berupa +“Edit” dan “Hapus” yang memungkinkan admin melakukan +pengelolaan data pengguna. Status keaktifan perangkat desa +ditampilkan dalam bentuk status label seperti “Aktif” untuk +memberikan kejelasan kondisi pengguna secara visual. Selain itu, +pada bagian atas tabel terdapat primary button “Tambah” yang +digunakan untuk menambahkan data perangkat desa baru. Secara +keseluruhan wireframe halaman kelola perangkat dirancang dengan +pendekatan simple layout dan data-focused interface agar admin dapat +melakukan manajemen pengguna secara efisien. +➢ Halaman Laporan Absensi + Halaman laporan atau rekap absensi merupakan halaman yang +digunakan untuk menampilkan hasil rekap kehadiran perangkat desa + 55 + +dalam periode tertentu. Struktur halaman tetap menggunakan left +sidebar navigation (navbar) di sisi kiri untuk menjaga konsistensi +navigasi antar halaman. Tampilan halaman kaporan absensi dapat +dilihat pada Gambar 4.12 dibawah ini. + + Gambar 4.12 Wireframe Laporan Absensi + Gambar 4.12 merupakan halaman laporan web admin dimana pada +area konten utama bagian header, terdapat judul halaman, field +search, filter data sesuai periode (dropdown), serta button +export/download laporan. Section utama halaman menampilkan data +absensi perangkat desa dalam bentuk tabel, yang terdiri dari foto +profil, nama perangkat, jabatan, jam datang, jam pulang, durasi kerja, +dan status kehadiran. Disisi kanan tabel ditampilkan indikator progres +untuk menggambarkan tingkat kehadiran atau durasi kerja secara +visual. + 56 + +b. Mockup + Mockup digunakan sebagai tahap lanjutan dari wireframe untuk + +menampilkan desain antarmuka aplikasi presensi secara lebih detail dan +realistis. Pada tahap ini, desain sudah mencakup aspek visual seperti +warna, ikon, tipografi, serta komponen antarmuka yang menyerupai +tampilan aplikasi sebenarnya. Mockup dibuat dengan tujuan untuk +mengevaluasi aspek usability dan pengalaman pengguna secara visual +sebelum sistem diimplementasikan. Proses pembuatan mockup dilakukan +menggunakan tools Figma. Berikut adalah rancangan mockup pada +aplikasi presensi Desa Pelem untuk platform mobile dan web (admin). + Mockup Mobile Pengguna + + ➢ Halaman Log In Pengguna + Mockup halaman login dirancang sebagai tampilan awal pengguna + + dalam mengakses aplikasi presensi SidakDesa. Tampilan halaman log + in dapat dilihat pada Gambar 4.13 dibawah ini. + + Gambar 4.13 Mockup Login Mobile + 57 + + Gambar 4.13 merupakan tampilan halaman login yang +menampilkan logo aplikasi sebagai identitas sistem yang diletakkan +pada bagian atas layar, diikuti dengan ilustrasi visual yang +merepresentasikan aktivitas administrasi di lingkungan kantor desa. +Form login terdiri dari field input email dan kata sandi yang dilengkapi +dengan placeholder sebagai petunjuk pengisian. Pada field kata sandi +ditambahkan ikon visibility untuk meningkatkan kenyamanan dan +keamanan pengguna saat memasukkan data. Selain itu, disediakan +fitur “Lupa kata sandi” yang ditempatkan di bawah field password +sebagai opsi pemulihan akun apabila pengguna mengalami kendala +saat login. + + Tombol “Masuk” dirancang sebagai primary button dengan warna +kontras untuk menonjolkan aksi utama pada halaman login. Penataan +elemen antarmuka disusun secara vertikal mengikuti alur interaksi +pengguna, sehingga halaman login mudah dipahami dan digunakan +tanpa memerlukan pembelajaran tambahan. + +➢ Halaman Home Pengguna + Mockup halaman home pengguna dirancang sebagai tampilan + +utama setelah pengguna berhasil melakukan login ke aplikasi presensi +SidakDesa. Tampilan halaman home pengguna dapat dilihat pada +Gambar 4.14 dibawah ini. Desain antarmuka yang difokuskan pada +penyajian informasi kehadiran dan akses cepat ke fitur utama. Bagian +atas halaman menampilkan identitas pengguna berupa nama dan foto +profil sebagai bentuk personalisasi, disertai dengan elemen notifikasi +untuk memberikan informasi atau pemberitahuan penting kepada +pengguna. Bagian konten utama menampilkan kartu informasi +kehadiran harian yang berisi status absensi pengguna. Elemen ini +dirancang menggunakan card component dengan warna lembut untuk +menarik perhatian pengguna terhadap status kehadiran pada hari +berjalan. Selain itu, tersedia tombol fitur “Izin” dan “Riwayat” yang + 58 +ditampilkan dalam bentuk elemen interaktif yang mudah dikenali +sebagai tombol. + + Gambar 4.14 Mockup Home Pengguna + Namun, terdapat penyesuaian desain berdasarkan peran pengguna +(role-based design), dimana untuk pengguna dengan peran Kepala +Desa (Kades), fitur “Izin” tidak ditampilkan atau dinonaktifkan. Hal +ini dikarenakan Kades tidak memiliki kebutuhan untuk mengajukan +izin seperti pegawai. Dengan demikian, tampilan halaman home untuk +Kades hanya menampilkan fitur yang relevan seperti informasi +kehadiran dan riwayat, sehingga antarmuka menjadi lebih sederhana, +tidak membingungkan, dan sesuai dengan konteks penggunaan. + Pada bagian bawah halaman, ditampilkan ringkasan informasi +absensi hari ini, seperti jam datang dan jam pulang, yang disusun +secara sederhana dan mudah dibaca. Navigasi bawah (bottom +navigation) dirancang untuk memudahkan perpindahan antar halaman +utama aplikasi. Secara keseluruhan, mockup halaman home dirancang + 59 + +dengan memperhatikan hierarki visual, konsistensi komponen, serta +penyesuaian berdasarkan peran pengguna, sehingga mendukung +proses absensi yang cepat, efisien, dan sesuai dengan kebutuhan +masing-masing pengguna. +➢ Halaman Qr-Code Absensi + + Mockup halaman Qr-Code absensi dirancang untuk +merepresentasikan tampilan visual halaman absensi setelah pengguna +berhasil melakukan pemindaian Qr-Code. Tampilan halaman Qr- +Code pengguna dapat dilihat pada Gambar 4.15 dibawah ini. + + Gambar 4.15 Mockup Absensi Pengguna + Gambar 4.15 memiliki tata letak mockup yang menampilkan +informasi absensi pengguna dalam bentuk field yang tersusun secara +vertikal, meliputi nama pengguna, tanggal, waktu kehadiran, status, +keterangan, dan lokasi. Penyajian informasi dibuat terstruktur agar +pengguna dapat dengan mudah membaca dan memahami data absensi +yang ditampilkan. Pada kondisi absen datang, mockup hanya +menampilkan field yang relevan, seperti waktu datang dan status + 60 + +kehadiran, sedangkan field absensi pulang tidak ditampilkan. Perbedaan +tampilan ini menunjukkan penerapan desain berbasis konteks pengguna +pada tahap visual. + + Perspektif UI/UX, keberadaan peta tetap diperlukan karena mampu +membantu pengguna memahami posisi mereka secara jelas saat +melakukan proses absensi. QR Code hanya berfungsi sebagai media +untuk melakukan pemindaian, namun tidak memberikan informasi +apakah lokasi pengguna sudah sesuai atau belum. Dengan adanya peta, +pengguna dapat melihat posisi mereka secara langsung sehingga +mengurangi kebingungan ketika proses absensi mengalami kegagalan. +Selain itu, peta juga meningkatkan transparansi sistem serta kepercayaan +pengguna, karena pengguna dapat mengetahui secara pasti lokasi yang +digunakan sebagai acuan oleh sistem. + + Tombol “Kirim” pada mockup ditampilkan sebagai elemen aksi utama +dengan warna kontras untuk menegaskan fokus pengguna. Penempatan +tombol di bagian bawah halaman mengikuti alur visual dari atas ke +bawah, sehingga tampilan tetap rapi dan mudah dipahami. Secara +keseluruhan, mockup halaman QR-ode absensi dirancang dengan +memperhatikan prinsip keterbacaan, kesederhanaan, dan konsistensi +desain, sehingga mendukung kejelasan informasi pada proses absensi. + +➢ Halaman Riwayat Absensi + Mockup halaman riwayat absensi dirancang untuk menampilkan + +rekaman kehadiran pengguna dalam periode tertentu secara ringkas +dan mudah dipahami. Tampilan halaman riwayat pengguna dapat +dilihat pada Gambar 4.16 dibawah ini. + 61 + + Gambar 4.16 Mockup Riwayat Absen Pengguna + Gambar 4.16 mockup halaman riwayat absensi dirancang untuk +menampilkan informasi kehadiran pengguna secara terstruktur dan + 62 + +mudah diakses. Pada bagian header, ditampilkan judul halaman +“Riwayat” sebagai penanda konteks halaman, serta ikon navigasi +kembali (<) yang berfungsi sebagai kontrol visual untuk kembali ke +halaman sebelumnya. Pada bagian utama halaman, disediakan tab +navigasi yang terdiri dari kategori Semua, Disetujui, dan Menunggu. +Tab ini dirancang untuk membantu pengguna dalam memfilter data +riwayat absensi berdasarkan status persetujuan. Selain itu, terdapat +field pencarian yang memungkinkan pengguna untuk mencari data +absensi tertentu secara lebih cepat. Daftar riwayat absensi ditampilkan +dalam bentuk list card yang memuat informasi tanggal, jenis +kehadiran, keterangan, serta status, yang dilengkapi dengan ikon +sebagai penanda visual status absensi. + + Mockup juga menyediakan halaman detail riwayat yang +menampilkan informasi absensi secara lebih lengkap. Informasi +seperti nama pengguna, jabatan, tanggal, jam datang, jam pulang, +status kehadiran, keterangan, serta lokasi absensi disajikan secara +vertikal dengan tata letak yang rapi dan mudah dibaca. Secara +keseluruhan, mockup halaman riwayat absensi dirancang dengan +memperhatikan hierarki visual, konsistensi komponen, dan +keterbacaan informasi, sehingga memudahkan pengguna dalam +meninjau data kehadiran secara menyeluruh. + +➢ Halaman Izin Absensi + Mockup halaman izin absensi dirancang untuk memfasilitasi + +pengguna dalam mengajukan permohonan izin tidak hadir secara +terstruktur. Tampilan halaman izin pengguna dapat dilihat pada +Gambar 4.17 dibawah ini. Pada bagian header, ditampilkan judul +halaman “Izin” yang menunjukkan konteks fitur, serta ikon navigasi +kembali (<) untuk memudahkan pengguna kembali ke halaman +sebelumnya. Penempatan elemen header dibuat konsisten dengan +halaman lain agar pengguna memiliki pengalaman navigasi yang +seragam. + 63 + + Gambar 4.17 Mockup Izin Absen Pengguna + Bagian utama halaman menampilkan form pengajuan izin yang +terdiri dari beberapa field, seperti nama pengguna dan jabatan yang +ditampilkan secara otomatis, field tanggal izin, pilihan status izin, +serta kolom keterangan untuk menjelaskan alasan pengajuan. Seluruh +field disusun secara vertikal dengan label yang jelas guna +meningkatkan keterbacaan dan memudahkan pengguna dalam +mengisi data. Tata letak form dirancang sederhana dengan jarak antar +elemen yang proporsional agar tampilan tetap rapi dan tidak +membingungkan. + Selain itu, mockup menyediakan fitur unggah bukti dalam bentuk +tombol Upload gambar yang memungkinkan pengguna melampirkan +dokumen pendukung izin. Area pratinjau gambar disediakan sebagai +representasi visual dari bukti yang diunggah. Tombol “Kirim” +ditempatkan pada bagian bawah halaman sebagai aksi utama dengan +warna kontras untuk menegaskan proses pengajuan izin. + 64 + +➢ Halaman Profil Pengguna + Mockup halaman profil pengguna dirancang untuk menampilkan + +informasi identitas pengguna serta menyediakan akses ke pengaturan +akun. Tampilan halaman profil pengguna dapat dilihat pada Gambar +4.18 dibawah ini. + + Gambar 4.18 Mockup Profil Pengguna + Gambar 4.18 terdapat mockup halaman profil pengguna. Pada +bagian header, ditampilkan judul halaman “Profil” yang menunjukkan +konteks halaman, serta ikon navigasi kembali (<) untuk memudahkan +pengguna kembali ke halaman sebelumnya. Bagian utama halaman +menampilkan foto profil pengguna, disertai dengan informasi +identitas seperti nama dan alamat email. Penyajian informasi identitas +ditempatkan secara terpusat untuk memberikan fokus visual dan +memperkuat personalisasi pengguna. Di bawahnya, terdapat menu +pengaturan akun yang dikelompokkan dalam section Tentang Akun, +yang mencakup fitur Edit Akun, Status Verifikasi, Ubah Kata Sandi, +dan Keluar. Setiap menu ditampilkan dalam bentuk list dengan ikon + 65 + + sebagai penanda visual untuk memudahkan pengguna mengenali + fungsi masing-masing fitur. + Mockup Website Admin + ➢ Halaman Landingpage Qr-Code Absensi + + Mockup halaman landingpage QR-Code pada website dirancang + sebagai halaman utama pada aplikasi presensi berbasis web yang + berfungsi sebagai media penyedia QR Code yang akan dipindai oleh + pengguna aplikasi mobile atau perangkat Desa. Tampilan halaman + landingpage QR-Code dapat dilihat pada Gambar 4.19 dibawah ini. + + Gambar 4.19 Mockup Qr-Code Absensi + Gambar 4.19 terdapat mockup landingpage QR-Code web. Pada + bagian header, ditampilkan logo aplikasi SidakDesa sebagai identitas + sistem, serta tab navigasi “QR-Code” dan “Login” yang disusun + secara horizontal. Tab QR-Code berfungsi sebagai penanda halaman + aktif yang menampilkan QR-Code absensi, sedangkan tab Login + digunakan sebagai akses masuk bagi admin ke halaman pengelolaan + sistem. + Bagian konten utama halaman terbagi menjadi dua area. Pada sisi + kiri, ditampilkan QR-Code absensi dengan ukuran yang proporsional + 66 + +sebagai fokus utama halaman. QR-Code ini secara visual dirancang +agar mudah dikenali dan dipindai oleh pengguna, serta dilengkapi +dengan teks pendukung sebagai petunjuk penggunaan. Sementara itu, +pada sisi kanan halaman ditampilkan tabel informasi kehadiran +perangkat desa yang memuat data seperti nama, jabatan, jam masuk, +keterangan, dan status kehadiran, sehingga perangkat desa dapat +memantau hasil sebelumnya yang melakukan pemindaian secara +langsung. +➢ Halaman Login Admin + + Mockup halaman Login pada website dirancang sebagai gerbang +akses bagi admin untuk masuk ke sistem kelola presensi. Tampilan +halaman login admin dapat dilihat pada Gambar 4.20 dibawah ini. + + Gambar 4.20 Mockup Login Admin + Gambar 4.20 terdapat mockup login admin. Pada bagian header, +ditampilkan logo aplikasi SidakDesa sebagai identitas sistem, serta tab +navigasi “QR-Code” dan “Login”. Bagian utama halaman menampilkan + ilustrasi aktifitas kantor dan form login admin yang terdiri dari field input + username atau email dan kata sandi. Setiap field dilengkapi dengan label + yang jelas untuk membantu admin dalam mengisi data dengan benar. Tata + letak form disusun secara terpusat (centered layout) untuk memberikan + 67 + + fokus visual pada area login. Penggunaan jarak antar elemen dan tipografi + yang konsisten bertujuan untuk meningkatkan keterbacaan dan kenyamanan + saat mengakses halaman. + + Tombol “Login” dirancang sebagai primary button dengan warna +kontras untuk menegaskan aksi utama pada halaman login admin. +Penempatan tombol berada tepat di bawah form input mengikuti alur +visual dari atas ke bawah. Secara keseluruhan, mockup halaman login +admin dirancang dengan memperhatikan prinsip kejelasan, +konsistensi antarmuka, dan kemudahan penggunaan, sehingga +mendukung proses autentikasi admin secara efisien pada aplikasi +presensi berbasis web. +➢ Halaman Dashboard + + Mockup halaman Dashboard dirancang sebagai halaman utama +setelah admin berhasil melakukan login ke sistem kelola presensi. +Tampilan halaman dashboard admin dapat dilihat pada Gambar 4.21 +dibawah ini. + + Gambar 4.21 Mockup Dashboard Admin + Gambar 4.21 terdapat mockup Dashboard admin yang berfungsi +untuk menyajikan informasi kehadiran perangkat desa secara ringkas +dan terstruktur. Pada bagian kiri halaman, ditampilkan navbar + 68 + +(sidebar navigation) yang berisi menu Dashboard, Pengajuan, Kelola +Perangkat, dan Laporan. Navbar ini dilengkapi dengan ikon dan teks +yang jelas untuk memudahkan admin dalam melakukan navigasi antar +halaman, serta menunjukkan halaman aktif melalui penanda visual. + + Pada bagian atas area konten utama, ditampilkan kartu ringkasan +informasi (summary cards) yang menampilkan jumlah presensi, +jumlah anggota aktif, serta jumlah pengajuan izin. Elemen ini +dirancang untuk memberikan gambaran cepat mengenai kondisi +absensi pada hari berjalan tanpa harus menelusuri data secara detail. +Penggunaan ikon dan warna yang konsisten pada setiap kartu +membantu meningkatkan keterbacaan dan fokus visual pengguna. + + Bagian utama halaman menampilkan tabel absensi perangkat desa +yang memuat informasi nama, jam datang, jam pulang, durasi kerja, +serta status kehadiran. Status kehadiran ditampilkan dalam bentuk +label berwarna untuk membedakan kondisi hadir, izin, dan sakit, +sehingga memudahkan admin dalam melakukan pemantauan. Secara +keseluruhan, mockup halaman dashboard web admin dirancang +dengan memperhatikan konsistensi tata letak, kejelasan navigasi +melalui navbar, serta kemudahan akses informasi guna mendukung +aktivitas monitoring absensi di Kantor Desa Pelem. + +➢ Halaman Pengajuan + Mockup halaman Pengajuan dirancang sebagai halaman yang + + digunakan oleh admin untuk memantau dan mengelola pengajuan izin + yang diajukan oleh perangkat desa. Struktur halaman tetap + menerapkan sidebar navigasi di sisi kiri sebagai navigasi utama + aplikasi guna menjaga konsistensi antarmuka antar halaman. + Tampilan halaman pengajuan izin dapat dilihat pada Gambar 4.22 + dibawah ini. + 69 + + Gambar 4.22 Mockup Pengajuan Izin Admin + Gambar 4.22 merupakan mockup Pengajuan izin dengan bagian +utama halaman pengajuan menampilkan tabel daftar pengajuan izin +yang memuat informasi nama perangkat desa, jabatan, tanggal +pengajuan, keterangan izin, serta status pengajuan. Status pengajuan +ditampilkan menggunakan label berwarna seperti Diajukan dan +Diterima untuk membedakan kondisi pengajuan secara visual. +Penyusunan tabel dirancang secara rapi agar admin dapat dengan +mudah melakukan pemantauan dan seleksi pengajuan yang masuk. + 70 + + Ketika admin memilih salah satu data pada tabel pengajuan, sistem +menampilkan halaman detail pengajuan izin yang berisi informasi +lebih lengkap dalam bentuk form. Informasi yang ditampilkan +meliputi nama, jabatan, tanggal, status izin, serta keterangan +pengajuan. Selain itu, halaman detail juga menampilkan bukti +pendukung berupa gambar yang diunggah oleh pengguna. Di bagian +bawah halaman disediakan tombol aksi “Terima” sebagai primary +action yang digunakan admin untuk menyetujui pengajuan izin. +Secara keseluruhan, mockup halaman pengajuan dan detail pengajuan +dirancang untuk mendukung proses verifikasi izin secara efisien, +dengan tetap memperhatikan kejelasan informasi, konsistensi navigasi +melalui navbar, serta kemudahan penggunaan bagi admin. + +➢ Halaman Kelola Perangkat + Mockup halaman kelola perangkat dirancang sebagai halaman + +yang digunakan oleh admin untuk mengelola data perangkat desa +yang terdaftar. Struktur halaman tetap menerapkan sidebar navigasi di +sisi kiri sebagai navigasi utama aplikasi guna menjaga konsistensi +antarmuka antar halaman. Tampilan halaman kelola perangkat dapat +dilihat pada Gambar 4.23 dibawah ini. + + Pada kolom aksi, disediakan tombol Edit dan Hapus yang +memungkinkan admin melakukan pembaruan maupun penghapusan +data perangkat desa. Selain itu, tersedia tombol Tambah yang +berfungsi untuk menambahkan perangkat desa baru ke dalam sistem. +Tata letak tabel dan tombol aksi dirancang secara sederhana dan jelas +agar proses pengelolaan data dapat dilakukan secara efisien. + 71 + + Gambar 4.23 Mockup Kelola Perangkat + Halaman tambah perangkat desa ditampilkan ketika admin +memilih tombol Tambah pada halaman kelola perangkat. Halaman ini +menampilkan form input data perangkat desa yang mencakup +informasi identitas, seperti NIK, jabatan, nama, alamat, jenis kelamin, +tempat dan tanggal lahir, peran pengguna, email, kata sandi, serta +unggahan foto. Di bagian bawah form disediakan tombol +“Tambahkan” sebagai primary action untuk menyimpan data ke +dalam sistem. Secara keseluruhan, mockup halaman kelola perangkat + 72 + +dan tambah perangkat desa dirancang untuk mendukung proses +manajemen data pengguna secara terstruktur, konsisten, dan mudah +digunakan oleh admin. +➢ Halaman Laporan + + Mockup halaman Laporan Absensi Desa pada web admin +SidakDesa dirancang untuk menampilkan ringkasan dan detail data +kehadiran perangkat desa dalam satu tampilan terpadu. Struktur +halaman tetap menerapkan sidebar navigasi di sisi kiri sebagai +navigasi utama aplikasi guna menjaga konsistensi antarmuka antar +halaman. Tampilan halaman laporan dapat dilihat pada Gambar 4.24 +dibawah ini. + + Gambar 4.24 Mockup Laporan Absensi + Gambar 4.24 merupakan mockup laporan, pada area konten utama, +mockup ini menampilkan judul halaman Laporan Absensi Desa +disertai informasi anggota aktif. Visualisasi data kehadiran disajikan +dalam bentuk diagram lingkaran (pie chart) yang merepresentasikan +persentase status kehadiran, yaitu Hadir, Izin, dan Sakit. Diagram ini +berfungsi sebagai ringkasan visual untuk membantu admin + 73 + + memahami kondisi kehadiran secara cepat sebelum meninjau data + secara rinci. Selain itu, tersedia legenda warna untuk memperjelas + makna setiap kategori status. + + Bagian bawah halaman menampilkan tabel laporan absensi yang + memuat informasi detail berupa nama perangkat desa, waktu masuk, + waktu pulang, tanggal, durasi kerja, dan status kehadiran. Mockup + juga menyediakan elemen pendukung seperti kolom pencarian + (search), tombol filter, dan tombol export yang dirancang untuk + memudahkan proses pencarian, penyaringan, serta pengunduhan data + laporan. Pada tahap mockup ini, seluruh elemen difokuskan pada + perancangan tata letak, hierarki informasi, dan kelengkapan fitur + secara visual sebelum dilakukan evaluasi usability dan iterasi + perbaikan desain. + +c. Prototype + Prototype merupakan pengembangan lanjutan dari mockup yang + +menampilkan desain antarmuka aplikasi presensi secara interaktif dan +mendekati kondisi penggunaan sebenarnya. Prototype dibuat dalam +bentuk high fidelity menggunakan tools Figma, di mana setiap komponen +antarmuka telah dilengkapi dengan interaksi antar halaman sehingga +pengguna dapat mensimulasikan alur penggunaan aplikasi, baik pada +platform mobile untuk pengguna perangkat desa maupun web untuk +admin. Berikut adalah alur protoype pada aplikasi presensi Desa Pelem +untuk platform mobile dan web (admin). + + Prototype Mobile Pengguna + ➢ Prototype Log In Pengguna + Prototype halaman login aplikasi SidakDesa dirancang sebagai alur + autentikasi pengguna yang terintegrasi dan mudah dipahami. + Perancangan prototype ini dibuat menggunakan Figma dengan + memanfaatkan fitur prototype flow untuk mensimulasikan interaksi + nyata pengguna antar layar. Prototype halaman Login dapat dilihat + pada Gambar 4.25 dibawah ini. + 74 + + Gambar 4.25 Prototype Login Pengguna + Pada tahap awal dapat dilihat Gambar 4.25, pengguna diarahkan ke +halaman login utama yang menampilkan form email dan kata sandi. +Tersedia tombol Masuk sebagai aksi utama, serta opsi Lupa Kata + 75 + +Sandi yang disediakan bagi pengguna yang mengalami kendala saat +autentikasi. Setiap elemen interaktif pada halaman ini telah +dihubungkan menggunakan interaction link pada Figma sehingga +pengguna dapat berpindah layar sesuai dengan tindakan yang +dilakukan. + + Apabila pengguna memilih fitur Lupa Kata Sandi, prototype akan +mengarahkan ke halaman pemulihan akun yang meminta pengguna +memasukkan alamat email terdaftar. Setelah email dikirim, sistem +mensimulasikan proses verifikasi melalui kode OTP (One Time +Password). Pada halaman OTP, pengguna diminta memasukkan kode +verifikasi yang diterima melalui email sebelum melanjutkan ke tahap +berikutnya. + + Tahap selanjutnya adalah halaman pembuatan kata sandi baru, di +mana pengguna diminta mengisi dan mengonfirmasi kata sandi baru. +Prototype ini dirancang dengan alur yang jelas dan linear, sehingga +pengguna dapat memahami progres pemulihan akun tanpa +kebingungan. Setelah proses berhasil, sistem menampilkan halaman +konfirmasi berhasil, yang memberikan umpan balik visual berupa +ikon dan pesan keberhasilan sebagai penanda bahwa akun telah +berhasil diperbarui. + + Seluruh alur prototype login ini dirancang untuk +merepresentasikan pengalaman pengguna end-to-end, mulai dari login +normal hingga pemulihan akun. Dengan adanya prototype interaktif, +peneliti dapat mengevaluasi kejelasan alur, konsistensi antarmuka, +serta kemudahan navigasi sebelum sistem diimplementasikan secara +nyata. Prototype ini juga menjadi dasar dalam pelaksanaan usability +testing, khususnya untuk mengidentifikasi potensi kebingungan +pengguna pada proses autentikasi dan keamanan akun. + 76 + +➢ Prototype Qr-Code Absensi + Prototype fitur absensi pada aplikasi SidakDesa dirancang untuk + +memfasilitasi proses pencatatan kehadiran perangkat desa secara +digital melalui pemindaian QR-Code. Prototype halaman absensi +dapat dilihat pada Gambar 4.26 dibawah ini. + + Alur prototype dimulai dari halaman beranda (home) yang +menampilkan informasi status kehadiran pengguna pada hari berjalan +serta menu utama, yaitu Absen, Izin, dan Riwayat. Dari halaman ini, +pengguna dapat langsung memilih menu Absen untuk melakukan +proses presensi. Navigasi antarhalaman dirancang sederhana agar +pengguna dapat mengakses fitur utama dengan cepat tanpa +kebingungan. + + Pada tahap berikutnya, pengguna diarahkan ke halaman +pemindaian QR-Code. Halaman ini menampilkan area kamera dengan +bingkai QR sebagai panduan visual agar kode dapat dipindai dengan +tepat. Prototype ini mensimulasikan proses pemindaian QR-Code +yang ditempatkan di lokasi kerja sebagai validasi kehadiran pengguna. +Setelah QR-Code berhasil dipindai, sistem akan mengarahkan +pengguna ke halaman pengisian data absensi. + + Selanjutnya, pengguna memasuki halaman absensi datang dan +absensi pulang. Pada halaman ini ditampilkan beberapa informasi +penting, seperti nama pengguna, jabatan, waktu absensi, serta lokasi +yang ditampilkan dalam bentuk peta. Informasi lokasi berfungsi +sebagai indikator pendukung absensi. Pengguna dapat melanjutkan +proses dengan menekan tombol Kirim, yang telah dihubungkan secara +interaktif pada prototype Figma. + 77 + + Gambar 4.26 Prototype Qr-Code Absensi Pengguna + Setelah data absensi dikirim, sistem menampilkan halaman +konfirmasi absensi berhasil. Halaman ini memberikan umpan balik +visual berupa ikon centang dan pesan keberhasilan sebagai penanda +bahwa proses absensi telah tersimpan. Dari halaman konfirmasi, +pengguna dapat kembali ke halaman beranda untuk melihat status + 78 + +kehadiran yang telah diperbarui atau melanjutkan ke menu lain, +seperti izin dan riwayat absensi. + +➢ Prototype Riwayat Absensi + Prototype fitur riwayat pada aplikasi SidakDesa dirancang untuk + +membantu pengguna dalam melihat dan meninjau kembali data +kehadiran serta pengajuan izin yang telah dilakukan sebelumnya. +Prototype halaman riwayat dapat dilihat pada Gambar 4.27. + + Alur prototype dimulai dari halaman Riwayat yang menampilkan +daftar aktivitas pengguna dalam bentuk list. Pada halaman ini +disediakan judul halaman dan tombol navigasi kembali, serta tab filter +yang terdiri dari Semua, Disetujui, dan Menunggu. Tab ini berfungsi +untuk memudahkan pengguna dalam menyaring data riwayat +berdasarkan status, sehingga informasi dapat ditemukan dengan lebih +cepat dan terstruktur. Setiap item riwayat menampilkan informasi +ringkas berupa tanggal, jenis aktivitas (hadir, izin, atau sakit), +keterangan singkat, serta status pengajuan. + + Pengguna dapat memilih salah satu data pada daftar riwayat untuk +melihat informasi yang lebih lengkap. Interaksi ini mengarahkan +pengguna ke halaman Detail Riwayat. Pada halaman detail, +ditampilkan informasi secara rinci, meliputi nama pengguna, jabatan, +tanggal, waktu datang dan pulang, status kehadiran, serta keterangan +tambahan. Penyajian data dilakukan dalam bentuk form non-editable +untuk menjaga kejelasan informasi sekaligus mencegah perubahan +data secara tidak sengaja. + + Selain informasi teks, halaman Detail Riwayat juga dilengkapi +dengan tampilan lokasi dalam bentuk peta sebagai pendukung validasi +kehadiran serta bukti pendukung berupa gambar pada riwayat +pengajuan izin atau sakit. Hal ini bertujuan untuk meningkatkan +transparansi data serta memudahkan pengguna dalam melakukan +pengecekan ulang terhadap absensi atau izin yang telah diajukan +sebelumnya. + 79 + + Gambar 4.27 Prototype Qr-Code Absensi Pengguna + Prototype ini juga menggambarkan keterkaitan antara riwayat +absensi dan pengajuan izin, di mana pengguna dapat melihat detail +pengajuan izin langsung dari halaman riwayat tanpa harus mengulangi +proses input data. Alur navigasi dirancang satu arah dan konsisten, + 80 +sehingga pengguna dapat kembali ke halaman riwayat utama dengan +mudah setelah melihat detail data. +➢ Prototype Izin Absensi + + Prototype fitur izin pada aplikasi SidakDesa dirancang untuk +memfasilitasi pengguna dalam melakukan pengajuan izin +ketidakhadiran secara digital dengan alur yang jelas dan terstruktur +mulai dari awal pengisian data izin hingga proses pengiriman data. +Prototype halaman izin dapat dilihat pada Gambar 4.28 dibawah ini. + + Gambar 4.28 Prototype Izin Absensi Pengguna + 81 + + Gambar 4.28 merupakan alur prototype dimulai dari halaman Form +Izin, yang menampilkan informasi identitas pengguna seperti nama +dan jabatan yang telah terisi secara otomatis (auto-filled). Pengguna +selanjutnya diminta melengkapi data izin, meliputi tanggal izin, jenis +izin (izin atau sakit), serta keterangan tambahan yang menjelaskan +alasan ketidakhadiran. Penyusunan komponen form dilakukan secara +vertikal untuk memudahkan proses pengisian dan meningkatkan +keterbacaan informasi. + + Prototype juga menampilkan validasi form, di mana sistem akan +memberikan notifikasi apabila terdapat data yang belum diisi atau +belum sesuai, seperti peringatan “Pastikan form terisi dengan benar”. +Validasi ini bertujuan untuk meminimalkan kesalahan input sebelum +data dikirimkan ke sistem. Selain itu, pengguna diberikan opsi unggah +bukti pendukung dalam bentuk gambar, seperti foto kegiatan atau +surat keterangan, sebagai pelengkap data izin yang diajukan. + + Setelah seluruh data terisi dengan benar, pengguna dapat menekan +tombol Kirim untuk mengajukan izin. Prototype menggambarkan +transisi antar–halaman yang menunjukkan bahwa data izin telah +berhasil dikirim dan tersimpan dalam sistem. Alur ini juga terhubung +dengan fitur riwayat, sehingga pengguna dapat meninjau kembali +detail pengajuan izin yang telah dilakukan, termasuk status +persetujuan dari pihak admin. + +➢ Prototype Profil + Prototype fitur profil pengguna pada aplikasi SidakDesa dirancang + +untuk memfasilitasi pengguna dalam mengelola informasi akun secara +mandiri. Prototype halaman profil dapat dilihat pada Gambar 4.29 +dibawah ini. + 82 + + Gambar 4.29 Prototype Profil Pengguna + Alur prototype Gambar 4.29 dimulai dari halaman Profil, yang +menampilkan informasi dasar pengguna berupa foto profil, nama, dan +alamat email. Pada halaman juga tersedia menu utama seperti Status +Verifikasi dan Keluar yang dirancang sebagai elemen interaktif +sederhana sehingga mudah dipahami oleh pengguna tanpa +memerlukan panduan tambahan. + Ketika pengguna melakukan interaksi pada bagian profil sistem +akan menampilkan halaman detail profil. Halaman ini berisi informasi +pengguna yang lebih lengkap, seperti nama, jabatan, email, nomor +telepon, dan alamat. Informasi tersebut disajikan dalam bentuk field +yang terstruktur sehingga memudahkan pengguna dalam membaca +data secara lebih jelas dan terorganisir. + Perubahan desain dari tampilan awal ke halaman detail profil ini +bertujuan untuk meningkatkan kelengkapan informasi dan interaksi +pengguna. Jika sebelumnya tampilan profil hanya bersifat ringkas, +pada prototype yang telah diperbaiki pengguna dapat melihat data +secara lebih menyeluruh dalam satu halaman. Selain itu, penggunaan +komponen visual seperti input field dan pengelompokan informasi + 83 + membuat tampilan menjadi lebih interaktif, tidak monoton, dan + mudah dipahami. Mockup Website Admin + Prototype Website Admin + ➢ Halaman Landingpage Qr-Code Absensi + + Prototype Landingpage web SidakDesa menggambarkan alur awal + interaksi pengguna saat mengakses sistem absensi berbasis web. + Prototype landingpage dapat dilihat pada Gambar 4.30 dibawah ini. + + Gambar 4.30 Mockup Qr-Code Absensi + Alur prototype diawali pada halaman QR Code, yang menampilkan + QR-Code sebagai media utama absensi bagi pengguna aplikasi + 84 + +mobile. QR-Code ini dipindai oleh pengguna untuk melakukan proses +absensi, sehingga halaman ini berfungsi sebagai penghubung antara +sistem web dan aplikasi mobile. Selain QR-Code, halaman ini juga +menampilkan informasi absensi perangkat desa dalam bentuk tabel +yang memuat data nama, jabatan, waktu masuk, keterangan, serta +status kehadiran, sehingga admin dapat memantau kondisi kehadiran +secara langsung. + + Pada bagian atas halaman ditampilkan header yang memuat +identitas aplikasi SidakDesa serta dua tab navigasi, yaitu QR-Code +dan Login. Fitur QR-Code dirancang untuk memenuhi kebutuhan +fungsional pengguna dalam melakukan absensi secara cepat dan +otomatis, yang sebelumnya menjadi permasalahan pada sistem +manual. Selain itu, tampilan tabel real-time mendukung kebutuhan +non-fungsional berupa transparansi dan kemudahan monitoring, +sesuai hasil wawancara bahwa admin membutuhkan sistem yang +dapat menampilkan data kehadiran secara langsung. Interaksi pada tab +Login mengarahkan pengguna ke halaman autentikasi admin. +Halaman login menampilkan form input email dan kata sandi yang +disusun secara sederhana untuk memudahkan proses masuk ke dalam +sistem. Prototype juga menunjukkan transisi antar halaman yang +konsisten untuk menjaga kesinambungan alur navigasi. + +➢ Prototype LogIn Admin + Prototype Login web SidakDesa menggambarkan gerbang utama + +bagi pengguna untuk mengakses sistem absensi digital perangkat +desa. Prototype login dapat dilihat pada Gambar 4.31. Tampilan +halaman login menampilkan identitas aplikasi SidakDesa, ilustrasi +pendukung, serta form autentikasi yang terdiri dari field email dan +kata sandi. Desain ini dibuat sederhana dan terstruktur agar pengguna +dapat dengan mudah memahami alur masuk ke sistem tanpa +mengalami kebingungan. + 85 + + Gambar 4.31 Prototype Login Admin + Pada halaman login, pengguna diwajibkan mengisi email dan kata +sandi yang telah terdaftar. Sistem memberikan validasi input apabila +pengguna belum mengisi data secara lengkap atau terjadi kesalahan +format, sehingga dapat meminimalkan kesalahan saat proses +autentikasi. Tombol Masuk ditampilkan dengan warna yang kontras +sebagai penanda utama aksi sehingga mudah dikenali oleh pengguna. + Prototype juga dilengkapi dengan fitur Lupa Kata Sandi yang dapat +diakses langsung dari halaman login. Fitur ini bertujuan untuk +membantu pengguna yang mengalami kendala lupa kata sandi agar + 86 +tetap dapat mengakses sistem. Alur reset kata sandi dimulai dengan +pengisian email, kemudian sistem menampilkan pesan konfirmasi +sebagai umpan balik bahwa proses pemulihan kata sandi sedang +dilakukan. + + Setelah pengguna berhasil melakukan login, sistem akan +mengarahkan pengguna ke halaman utama sesuai dengan hak akses +yang dimiliki. +➢ Prototype Dasboard + + Prototype Dashboard web SidakDesa dirancang sebagai pusat +informasi utama bagi admin dalam memantau aktivitas absensi +perangkat desa secara ringkas dan real-time. Prototype dashboard +dapat dilihat pada Gambar 4.32 dibawah ini. + + Gambar 4.32 Prototype Dashboard Admin + 87 + + Pada bagian atas dashboard ditampilkan ringkasan statistik +kehadiran, seperti jumlah perangkat yang hadir, izin, sakit, serta total +perangkat desa. Penyajian data dalam bentuk ringkasan statistik dan +tabel absensi memenuhi kebutuhan fungsional admin dalam +memantau kehadiran secara cepat dan efisien, yang sebelumnya +membutuhkan waktu lama dalam proses rekap manual. Bagian utama +halaman dashboard, ditampilkan tabel absensi perangkat desa yang +memuat informasi penting meliputi nama perangkat, waktu datang, +waktu pulang, durasi kerja, serta status kehadiran. Status kehadiran +ditandai dengan warna yang berbeda untuk membedakan kondisi +Hadir, Izin, dan Sakit, sehingga memudahkan admin dalam +melakukan identifikasi data, khususnya ketika jumlah perangkat yang +ditampilkan cukup banyak. Penggunaan warna pada status kehadiran +merupakan implementasi kebutuhan non-fungsional berupa +kemudahan visualisasi dan kejelasan informasi, sehingga admin dapat +langsung mengidentifikasi kondisi kehadiran tanpa membaca seluruh +data. + + Dashboard juga dilengkapi dengan menu navigasi di sisi kiri yang +memudahkan admin untuk berpindah ke halaman lain seperti +Pengajuan, Kelola Perangkat, dan Laporan. Struktur navigasi +dirancang sederhana dan konsisten agar pengguna dapat memahami +alur penggunaan sistem dengan cepat. Prototype ini juga disediakan +menu profil admin yang memungkinkan pengguna melakukan +pengaturan akun seperti perubahan kata sandi dan logout. Keberadaan +fitur ini bertujuan untuk meningkatkan keamanan akun serta +memberikan kontrol penuh kepada pengguna terhadap data +pribadinya. + +➢ Prototype Pengajuan + Prototype pengajuan web SidakDesa dirancang sebagai pusat + +informasi utama bagi admin dalam memantau aktivitas absensi + 88 +perangkat desa secara ringkas dan real-time. Prototype pengajuan +dapat dilihat pada Gambar 4.33 dibawah ini. + + Gambar 4.33 Prototype Pengajuan Izin + Prototype Halaman Pengajuan Web Admin SidakDesa dirancang +sebagai pusat pengelolaan pengajuan izin dari perangkat desa. Fitur +pengajuan izin secara digital memenuhi kebutuhan fungsional dalam +mengelola izin secara terstruktur dan terdokumentasi, menggantikan +proses manual yang tidak memiliki bukti jelas. Pada tampilan awal +halaman, admin disajikan tabel daftar pengajuan yang menampilkan + 89 + +informasi utama secara ringkas, meliputi nama perangkat desa, +jabatan, tanggal pengajuan, jenis/keterangan izin, serta status +pengajuan. Setiap status ditampilkan menggunakan indikator warna +yang berbeda untuk membantu admin mengenali kondisi pengajuan +dengan cepat, seperti status Diajukan, Diterima, atau Ditolak. + + Setiap baris data tersedia aksi untuk melihat Detail Pengajuan. +Ketika admin memilih salah satu pengajuan, sistem menampilkan +halaman detail yang memuat informasi lengkap pengajuan secara +perorangan, mencakup identitas perangkat desa, jabatan, tanggal izin, +status, serta keterangan izin yang diajukan. Selain itu, halaman detail +juga menampilkan bukti pendukung berupa foto atau dokumen yang +diunggah oleh pengguna sebagai validasi pengajuan. Informasi +ditampilkan dalam bentuk form read-only agar data tidak dapat diubah +secara tidak sengaja. + + Prototype halaman detail pengajuan juga menyediakan tombol aksi +utama bagi admin, seperti tombol “Terima”, yang memungkinkan +proses verifikasi pengajuan dilakukan secara langsung melalui sistem. +Setelah admin memberikan keputusan, status pengajuan akan +diperbarui secara otomatis dan tercermin kembali pada tabel di +halaman Pengajuan. Seluruh alur navigasi tetap menggunakan left +sidebar navigation (navbar) di sisi kiri untuk menjaga konsistensi +desain antarmuka antar halaman serta memudahkan admin berpindah +ke fitur lain seperti Dashboard, Kelola Perangkat, dan Laporan. + +➢ Prototype Kelola Perangkat + Prototype kelola perangkat web SidakDesa memfasilitasi admin + +dalam mengelola data perangkat desa secara terpusat. Fitur tambah, +edit, dan hapus data perangkat desa memenuhi kebutuhan fungsional +dalam pengelolaan data pengguna secara terstruktur. Sementara itu, +desain form yang sederhana dan label yang jelas mendukung +kebutuhan non-fungsional berupa kemudahan penggunaan, terutama +bagi pengguna dengan literasi digital yang beragam. Fitur konfirmasi + 90 +hapus juga mendukung aspek keamanan sistem. Prototype kelola +perangkat dapat dilihat pada Gambar 4.34 dibawah ini. + + Gambar 4.34 Prototype Kelola Perangkat + Pada tampilan utama halaman, admin disajikan tabel daftar +perangkat desa yang menampilkan informasi inti seperti nama +perangkat, aksi, dan status keaktifan akun. Setiap data disusun secara +terstruktur dalam bentuk tabel untuk memudahkan proses +pemantauan, pencarian, dan pengelolaan data perangkat desa. + 91 + + Bagian atas halaman, tersedia tombol Tambah Anggota Perangkat +Desa yang berfungsi untuk menambahkan data perangkat baru. Ketika +tombol tersebut dipilih, sistem menampilkan halaman form tambah +perangkat yang berisi isian data lengkap, meliputi NIK, nama, jabatan, +alamat, nomor telepon, jenis kelamin, tempat dan tanggal lahir, peran +(admin atau anggota), email, kata sandi, serta unggahan foto profil. +Tata letak form dibuat satu kolom dengan label yang jelas agar proses +pengisian data dapat dilakukan secara mudah dan terstruktur oleh +admin. + + Pada setiap baris data perangkat desa, tersedia button aksi Edit dan +Hapus. Button “Edit” digunakan untuk memperbarui informasi +perangkat desa, sedangkan button “Hapus” berfungsi untuk +menghapus data perangkat dari sistem. Aksi hapus dilengkapi dengan +konfirmasi untuk mencegah penghapusan data secara tidak sengaja. +Seluruh alur interaksi pada halaman ini tetap menggunakan left +sidebar navigation (navbar) di sisi kiri sebagai navigasi utama, +sehingga konsistensi antarmuka antar halaman web admin tetap +terjaga dan memudahkan admin dalam berpindah fitur. + +➢ Prototype Laporan + Prototype laporan web untuk membantu admin dalam melakukan + +pemantauan dan rekapitulasi data kehadiran perangkat desa secara +menyeluruh. Fitur filter, pencarian, dan ekspor laporan memenuhi +kebutuhan fungsional dalam proses rekapitulasi data yang cepat dan +efisien, yang sebelumnya menjadi kendala utama pada sistem manual +(membutuhkan waktu lama). Penyajian data dalam bentuk tabel dan +warna status mendukung kebutuhan non-fungsional berupa +kemudahan analisis dan keterbacaan data, sehingga admin dapat +memahami informasi dengan lebih cepat dan akurat. Prototype +laporan dapat dilihat pada Gambar 4.35 dibawah ini. + 92 + + Gambar 4.35 Prototype Laporan + Pada tampilan utama halaman, admin disajikan tabel rekap presensi +yang menampilkan informasi nama perangkat desa, jumlah kehadiran, +izin, dan sakit dalam periode tertentu. Penyajian data berbentuk tabel +bertujuan agar admin dapat dengan cepat memahami kondisi +kehadiran perangkat desa secara keseluruhan. + 93 + + Pada bagian atas halaman laporan, tersedia fitur filter periode yang + memungkinkan admin memilih rentang waktu tertentu sesuai + kebutuhan. Selain itu, disediakan pula kolom pencarian (search) untuk + memudahkan admin dalam menemukan data perangkat desa secara + spesifik. Setelah periode atau kata kunci dipilih, sistem akan secara + otomatis menyesuaikan data yang ditampilkan pada tabel laporan. + + Admin juga dapat mengakses detail laporan perorangan dengan + memilih salah satu data perangkat desa pada tabel. Pada tampilan + detail laporan, informasi presensi ditampilkan lebih rinci, meliputi + tanggal, jam masuk, jam pulang, durasi kerja, keterangan, serta status + kehadiran. Setiap status ditampilkan menggunakan penanda warna + yang berbeda untuk membedakan kondisi hadir, izin, dan sakit + sehingga memudahkan proses analisis data. + + Sebagai pendukung kebutuhan administrasi, halaman laporan + dilengkapi dengan button “Ekspor” yang memungkinkan admin + mengunduh data laporan presensi dalam bentuk file untuk keperluan + dokumentasi atau pelaporan. Seluruh fitur pada halaman laporan tetap + menggunakan left sidebar navigation (navbar) di sisi kiri sebagai + navigasi utama, sehingga konsistensi tampilan dan kemudahan akses + antar halaman web admin tetap terjaga. + +4.1.4 Evaluasi Desain (Evaluation Against Requirement) + Evaluasi desain dilakukan bertujuan untuk menilai sejauh mana desain + +UI/UX aplikasi presensi berbasis web dan mobile telah memenuhi kebutuhan +serta karakteristik pengguna. Evaluasi desain difokuskan pada aspek +usability, yaitu kemudahan penggunaan, kejelasan antarmuka, dan +kenyamanan pengguna saat berinteraksi dengan aplikasi. Metode evaluasi +yang digunakan dalam penelitian ini adalah System Usability Scale (SUS) +dengan menyebar kuisioner tanpa didampingi, yang dikombinasikan dengan +pengumpulan umpan balik langsung dari pengguna. Seluruh responden +menguji kedua platform tersebut. Namun demikian secara fungsional aplikasi +web diperuntukkan bagi admin, evaluasi tetap melibatkan seluruh responden + 94 + +karena penelitian ini berfokus pada perancangan desain UI/UX, bukan pada +implementasi sistem berdasarkan peran pengguna secara aktual. + +a. Karakteristik Responden + Responden dalam penelitian ini merupakan perangkat desa di Kantor + + Desa Pelem yang terlibat sebagai pengguna aplikasi presensi berbasis + mobile serta evaluator desain web admin. Seluruh responden telah + melakukan pengujian terhadap desain aplikasi sebelum mengisi kuesioner + System Usability Scael (SUS). + + Tabel 4.4 Karakteristik Pengguna + + Kategori Keterangan + +Jumlah responden mobile 10 + +Jumlah responden web 10 + +Rentang usia 27 th – 55 th + +Jabatan Kades, Sekdes, Kasi, Kaur, Kasun, Staf + +Status pengujian Seluruh responden telah melakukan + pengujian + + Evaluasi desain web admin pada penelitian ini dilakukan pada tahap +prototype, sehingga pengujian difokuskan pada aspek kemudahan +penggunaan, kejelasan tampilan, serta alur interaksi antarmuka. Pengujian +tidak mencakup proses kerja administratif maupun pengelolaan hak akses +admin secara operasional. Oleh karena itu, seluruh perangkat desa +dilibatkan sebagai responden untuk mengevaluasi desain web admin +dengan asumsi kesamaan konteks penggunaan, sebagaimana diterapkan +pada beberapa penelitian usability pada tahap desain awal. + + Dengan latar belakang lingkungan kerja dan konteks penggunaan +yang sama, responden pada masing-masing platform (mobile dan web) +dapat dianggap sebagai kelompok pengguna yang homogen sesuai dengan +konsep System Usability Scale (SUS). Keberagaman jabatan dan rentang +usia responden memberikan sudut pandang yang beragam dalam menilai +tingkat usability desain aplikasi presensi yang diusulkan. + 95 + +b. Hasil Kuisioner SUS + Perhitungan tingkat usability dalam penelitian ini menggunakan + + metode System Usability Scale (SUS) yang dilakukan secara manual + dengan menggunakan Microsoft Excel. Kuesioner SUS terdiri dari 10 + pernyataan dengan skala Likert 1–5, di mana nilai 1 menunjukkan sangat + tidak setuju dan nilai 5 menunjukkan sangat setuju. dalam usability seperti + efektivitas, efisiensi, dan kepuasan pengguna. + + Aturan perhitungan skor SUS dapat disimpulkan sebagai berikut: + • Pernyataan bernomor ganjil (1, 3, 5, 7, 9): nilai jawaban dikurangi 1. + • Pernyataan bernomor genap (2, 4, 6, 8, 10): nilai 5 dikurangi jawaban + + responden. + • Total skor dikalikan dengan 2,5 untuk memperoleh skor akhir (0–100). + + Hasil perhitungan skor SUS kemudian digunakan untuk menentukan + tingkat usability berdasarkan kategori yang telah ditetapkan. Tabel 4.5 + sampai Tabel 4.8 menampilkan hasil perhitungan SUS pada tahap evaluasi. + Analisis usability tidak hanya dilihat dari skor total, tetapi juga dianalisis + pada setiap pernyataan untuk memahami aspek efektivitas, efisiensi, dan + kepuasan pengguna secara lebih mendalam. + + Pada pernyataan pertama (P1) yang mengukur kemudahan penggunaan + sistem, mayoritas responden memberikan nilai yang lebih tinggi pada + tahap kedua dibandingkan tahap pertama. Hal ini menunjukkan + peningkatan efektivitas, di mana sistem menjadi lebih mudah digunakan + oleh pengguna. Pada pernyataan kedua (P2) yang berkaitan dengan + kompleksitas sistem, nilai yang semakin rendah pada tahap kedua + menunjukkan bahwa sistem menjadi lebih sederhana, sehingga + meningkatkan efisiensi penggunaan. Pernyataan ketiga (P3) menunjukkan + peningkatan nilai yang mengindikasikan bahwa sistem lebih mudah + dipahami, sehingga mendukung efektivitas dalam proses penggunaan. + + Selanjutnya, pada pernyataan keempat (P4) yang berkaitan dengan + kebutuhan bantuan teknis, nilai yang semakin rendah menunjukkan bahwa + pengguna semakin mandiri dalam menggunakan sistem, yang + mencerminkan peningkatan efisiensi. Pernyataan kelima (P5) + 96 + +menunjukkan peningkatan nilai yang menandakan bahwa fungsi-fungsi +dalam sistem telah terintegrasi dengan baik, sehingga meningkatkan +efektivitas pengguna dalam menyelesaikan tugas. Pada pernyataan +keenam (P6), penurunan nilai menunjukkan bahwa sistem menjadi lebih +konsisten dan tidak membingungkan, yang berkontribusi terhadap +peningkatan efisiensi. + + Pada pernyataan ketujuh (P7), peningkatan nilai menunjukkan bahwa +sistem lebih mudah dipelajari oleh pengguna, sehingga meningkatkan +efektivitas terutama bagi pengguna baru. Pernyataan kedelapan (P8) +menunjukkan penurunan nilai yang mengindikasikan bahwa sistem +menjadi lebih sederhana dan tidak rumit, sehingga meningkatkan efisiensi +dalam penggunaan. Pada pernyataan kesembilan (P9), peningkatan nilai +menunjukkan bahwa pengguna merasa lebih percaya diri dalam +menggunakan sistem, yang berkaitan dengan meningkatnya kepuasan +pengguna. Sementara itu, pada pernyataan kesepuluh (P10), nilai yang +semakin rendah menunjukkan bahwa sistem dapat digunakan tanpa +memerlukan pembelajaran khusus, yang mencerminkan peningkatan +efisiensi sekaligus memberikan dampak positif terhadap kepuasan +pengguna. + + Tabel 4.5 Skor SUS Desain Mobile Tahap 1 + +R Skor Hasil SUS 1 Desain Mobile Jml Nilai + + P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 SUS + +1 4 2 4 2 4 2 4 2 4 2 30 75 + +2 4 2 4 4 4 4 4 2 4 4 24 60 + +3 4 2 4 4 4 2 4 2 4 4 26 65 + +4 4 1 5 2 4 1 4 1 4 2 34 85 + +5 5 1 4 1 4 1 4 2 4 2 34 85 + +6 4 2 4 4 4 2 4 2 4 4 26 65 + +7 5 1 5 2 3 2 5 2 5 2 34 85 + +8 4 1 5 2 4 4 4 2 5 2 33 82,5 + +9 5 2 4 2 5 1 4 2 4 1 34 85 + 97 + +R Skor Hasil SUS 1 Desain Mobile Jml Nilai + + P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 SUS + +10 4 1 5 2 5 2 4 2 4 1 34 85 + + Skor Rata-Rata 77,25 + + Tabel 4.6 Skor SUS Desain Mobile Tahap 2 + +R Skor Hasil SUS 2 Desain Mobile Jml Nilai + + P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 SUS + +1 5 1 5 2 4 1 4 1 5 2 36 90 + +2 5 1 4 1 4 1 4 1 5 1 38 92,5 + +3 5 2 5 2 5 1 4 1 4 2 35 87,5 + +4 5 2 4 2 5 1 4 2 5 2 34 85 + +5 5 1 4 2 5 1 4 2 4 2 34 85 + +6 5 2 5 2 5 1 5 2 5 2 36 90 + +7 5 2 4 2 5 1 4 1 5 2 34 85 + +8 5 2 5 2 5 1 4 1 5 2 36 90 + +9 5 1 4 2 5 1 4 1 4 2 35 87,5 + +10 5 1 5 2 4 1 5 2 5 2 37 92,5 + + Skor Rata-Rata 88,5 + + Tabel 4.7 Skor SUS Desain Web Tahap 1 + +R Skor Hasil SUS 1 Desain Web Jml Nilai + + P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 SUS + +1 4 2 4 2 4 2 4 2 4 2 30 75 + +2 5 2 1 4 5 1 3 1 4 4 26 65 + +3 5 2 4 1 4 2 4 1 4 2 33 82,5 + +4 4 1 4 2 4 1 4 1 4 2 33 82,5 + +5 4 1 4 2 4 1 4 1 4 2 33 82,5 + +6 5 2 5 1 4 2 4 5 1 2 35 87,5 + +7 4 2 4 4 4 2 4 2 4 4 26 65 + +8 4 1 5 3 4 1 4 1 5 3 33 82,5 + 98 + +R Skor Hasil SUS 1 Desain Web Jml Nilai + + P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 SUS + +9 4 2 5 2 5 1 4 2 4 1 34 85 + +10 4 1 5 2 5 1 4 1 4 1 36 90 + + Skor Rata-Rata 79,75 + + Tabel 4.8 Skor SUS Desain Web Tahap 2 + +R Skor Hasil SUS 2 Desain Web Jml Nilai + + P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 SUS + +1 5 1 5 2 4 1 4 1 4 1 36 90 + +2 5 1 5 2 4 1 4 1 5 1 37 92,5 + +3 5 1 5 1 5 1 4 1 5 2 37 92,5 + +4 5 1 5 2 5 1 4 1 4 2 36 90 + +5 5 1 5 2 5 1 4 2 4 2 35 87,5 + +6 5 1 5 2 5 1 5 1 4 2 37 92,5 + +7 5 2 4 3 4 2 4 2 4 2 30 75 + +8 5 2 4 2 5 1 4 1 5 1 36 90 + +9 5 1 5 2 5 1 4 1 5 2 37 92,5 + +10 5 1 4 2 5 1 4 1 5 2 36 90 + + Skor Rata-Rata 89,25 + + Berdasarkan tabel 4.5 sampai 4.8, diperoleh hasil perhitungan skor +System Usability Scale (SUS). Sebagai contoh perhitungan dapat +menggunakan data dari tabel 4.5 responden 1 (R1). Pada pernyataan +pertama yang termasuk kategori ganjil (positif), R1 memberikan nilai 4. +Sedangkan pernyataan kedua yang termasuk kategori genap (negatif), R1 +memberikan nilai 2. Perhitungan skor SUS pada pernyataan ganjil +(positif), perhitungan dilakukan dengan cara mengurangi nilai yang +diberikan responden dengan angka 1, sehingga nilainya adalah 4 – 1 = 3. +Sementara itu, untuk pernyataan genap (negatif), perhitungan dilakukan +dengan angka 5 dikurangi nilai yang diberikan responden, yaitu 5 – 2 = 3. +Proses perhitungan ini dilakukan untuk seluruh 10 pernyataan, dan hasil + 99 + +penjumlahan akhir untuk R1 mendapat nilai 30. Nilai tersebut kemudian +dikalikan dengan 2,5 sesuai rumus SUS, sehingga memperoleh skor akhir +sebesar 75 untuk responden 1. + + Tabel 4.9 Perhitungan SUS + +Positif Negatif + +(1 − 1) + (3 − 1) + (5 − 1) (5 − 2) + (5 − 4) + ++ (7 − 1) + (5 − 6) + ++ (9 − 1) + (5 − 8) + + + (5 − 10) + +(4 − 1) + (4 − 1) + (4 − 1) (5 − 2) + (5 − 2) + (5 − 2) + ++ (4 − 1) + (5 − 2) + ++ (4 − 1) + (5 − 2) + +3 + 3 + 3 + 3 + 3 = 15 3 + 3 + 3 + 3 + 3 = 15 + + = + = 15 + 15 = 30 + + = 30 × 2,5 = 75 + + Setelah proses serupa dilakukan terhadap seluruh responden, maka +seluruh skor SUS dijumlahkan dan diambil rata-rata dengan cara membagi +jumlah responden, yaitu 10 orang. Perhitungan tersebut memperoleh nilai +rata-rata skor SUS sebesar 77,25. Proses perhitungan yang serupa juga +dilakukan pada tabel 4.4. Hasil perhitungan rata-rata skor SUS pada desain +mobile dan web dengan 10 responden akan dikonversikan ke dalam +beberapa kategori, yaitu Adjective Rating, Grade Scale, dan Acceptability +Range, seperti yang ditampilkan pada Gambar 2.8. + + Berdasarkan hasil konversi tersebut: +• Skor SUS 77,25 pada desain mobile termasuk dalam kategori + + Adjective Rating “Good”, Grade Scale “B”, dan Acceptability Range + “Acceptable”. +• Skor SUS 79,75 pada desain web admin juga termasuk dalam kategori + Adjective Rating “Good”, Grade Scale “B”, dan Acceptability Range + “Acceptable”. + 100 + + Hasil ini menunjukkan bahwa secara umum pengguna menilai aplikasi + SidakDesa sudah mudah digunakan, cukup efisien, serta memberikan + pengalaman penggunaan yang memuaskan, baik pada platform mobile + maupun web admin. Meskipun demikian, berdasarkan umpan balik + kualitatif yang diperoleh, masih terdapat beberapa aspek desain yang perlu + disempurnakan untuk meningkatkan kualitas usability secara lebih + optimal. + + Sebagai tindak lanjut, peneliti melakukan perbaikan desain antarmuka + berdasarkan hasil evaluasi dan umpan balik pengguna dengan menerapkan + pendekatan User Centered Design (UCD) secara iteratif. Proses ini + diharapkan mampu meningkatkan skor usability pada tahap pengujian + berikutnya serta memberikan pengalaman penggunaan yang lebih nyaman, + efektif, dan sesuai dengan kebutuhan pengguna. + +c. Hasil Analisis Umpan Balik + Berdasarkan hasil pengumpulan umpan balik dari responden pada + + evaluasi usability menggunakan metode System Usability Scale (SUS), + diperoleh beberapa masukan yang menjadi dasar perbaikan dan + pengembangan desain antarmuka aplikasi SidakDesa. Adapun beberapa + aspek desain yang perlu diperbaiki adalah sebagai berikut. + 1) Penegasan elemen interaktif pada menu Mobile. + + Pada aplikasi mobile, khususnya pada menu Izin dan Riwayat, tampilan + menu belum terlihat jelas sebagai elemen yang dapat ditekan (clickable). + Oleh karena itu, diperlukan penyesuaian desain seperti penambahan efek + visual, ikon, atau gaya tombol agar pengguna dapat dengan mudah + mengenali fungsi interaktif pada menu tersebut. + 2) Penambahan feedback sistem pada aplikasi Mobile. + + Responden mengharapkan adanya notifikasi atau umpan balik sistem + setelah pengguna melakukan aksi tertentu, seperti berhasil melakukan + absensi, mengirim izin, atau mengubah kata sandi. Penambahan notifikasi + ini bertujuan untuk meningkatkan kejelasan status proses dan memberikan + 101 + +rasa yakin kepada pengguna bahwa tindakan yang dilakukan telah +berhasil. +3) Penyederhanaan dan penekanan informasi penting pada Web Admin. + + Pada tampilan web admin, beberapa tabel dinilai terlalu padat sehingga +fokus pengguna mudah terpecah. Oleh karena itu, diperlukan +penyederhanaan tampilan dengan menonjolkan informasi utama seperti +jam masuk, jam pulang, dan status kehadiran agar proses pemantauan +dapat dilakukan dengan lebih cepat dan efektif. +4) Penyesuaian warna status kehadiran pada Web Admin. + + Warna penanda status kehadiran seperti Hadir, Izin, dan Sakit dinilai +masih kurang tegas. Penyesuaian warna yang lebih kontras diperlukan agar +status kehadiran dapat langsung dikenali, terutama ketika data yang +ditampilkan dalam jumlah banyak. +5) Perubahan penyajian laporan absensi menjadi perorangan. + + Responden memberikan masukan agar laporan absensi pada web admin +tidak lagi disajikan dalam bentuk rekap keseluruhan, melainkan +ditampilkan secara perorangan. Penyajian laporan secara individu dinilai +lebih efektif untuk memudahkan admin dalam memantau kehadiran setiap +perangkat desa, meninjau jam masuk dan jam pulang, serta melakukan +evaluasi kinerja secara lebih spesifik. Perubahan ini bertujuan untuk +meningkatkan kejelasan informasi dan efisiensi proses pemantauan data +absensi. +6) Penambahan fitur pengaturan absensi + + Responden memberi masukanadanya fitur pengaturan absensi yang +memungkinkan admin untuk mengatur jadwal kehadiran. Fitur ini +mencakup pengaturan jam check-in, jam check-out, serta penentuan hari +kerja atau hari absensi. Dengan adanya fitur pengaturan tersebut, sistem +diharapkan dapat lebih fleksibel dalam menyesuaikan kebijakan kehadiran +yang berlaku di lingkungan kantor desa. + 102 + +4.1.5 Iterasi Desain + Iterasi desain pada penelitian ini dilakukan sebagai tindak lanjut dari + +hasil evaluasi usability tahap awal serta masukan kualitatif yang diberikan +oleh pengguna. Iterasi bertujuan untuk menyesuaikan desain antarmuka +dengan kebutuhan, pengalaman, dan harapan pengguna agar aplikasi presensi +yang dirancang menjadi lebih mudah digunakan dan efektif dalam +mendukung proses absensi perangkat desa. + + Perbaikan desain dilakukan dengan mengidentifikasi setiap umpan +balik pengguna, kemudian diterjemahkan ke dalam solusi desain yang relevan +pada aplikasi mobile dan web admin. Adapun hasil iterasi perbaikan desain +yang dilakukan adalah sebagai berikut. +a. Perbaikan tampilan menu interaktif pada aplikasi mobile + + Perbaikan tampilan menu utama pada aplikasi mobile dilakukan + berdasarkan masukan dari responden (R4) yang menyatakan bahwa menu + Izin dan Riwayat kurang terlihat sebagai tombol sehingga + membingungkan saat pertama kali digunakan. Selain itu, responden + dengan skor rendah juga mengindikasikan bahwa tampilan antarmuka + masih terasa kurang intuitif. Perbaikan desain ditunjukkan pada Gambar + 4.36 sebagai hasil pembaruan tampilan menu utama aplikasi. + 103 + + Gambar 4.36 Iterasi Halaman Home Pengguna + Sebelum dilakukan perbaikan, elemen menu ditampilkan dengan visual + yang kurang kontras dan belum menunjukkan affordance sebagai tombol + interaktif. Oleh karena itu, dilakukan penataan ulang struktur menu, + peningkatan kontras warna, serta penegasan bentuk tombol agar lebih + mudah dikenali sebagai elemen yang dapat ditekan. Perubahan ini + bertujuan untuk meningkatkan kejelasan navigasi serta meminimalkan + kebingungan pengguna dalam mengakses fitur utama aplikasi presensi. +b. Penambahan umpan balik sistem + Berdasarkan masukan dari responden (R5 dan R7), aplikasi sebelumnya + belum memberikan umpan balik yang cukup jelas setelah pengguna + melakukan suatu aksi, sehingga menimbulkan ketidakpastian apakah + proses yang dilakukan telah berhasil. Oleh karena itu, perbaikan desain + ditunjukkan pada Gambar 4.37 dilakukan penambahan umpan balik sistem + pada desain aplikasi untuk memberikan informasi yang lebih jelas kepada + pengguna. + 104 + + Gambar 4.37 Iterasi Halaman Notifikasi + Penambahan umpan balik sistem diwujudkan melalui penyediaan + notifikasi atau indikator status yang muncul setelah pengguna melakukan + interaksi tertentu, seperti proses absensi atau penyimpanan data. Dengan + penambahan ini bertujuan untuk meningkatkan rasa kepastian dan kontrol + pengguna terhadap sistem, sehingga pengalaman penggunaan menjadi + lebih jelas dan meyakinkan. +c. Penyederhanaan tampilan tabel dan penegasan warna + Iterasi pada desain web dilakukan berdasarkan masukan dari responden + (R3 dan R6), yang menyatakan bahwa tampilan terlalu padat karena + banyaknya informasi yang ditampilkan dalam satu layar dan warna status + kehadiran kurang tegas sehingga sulit dibaca ketika data yang ditampilkan + banyak. Gambar 4.38 hasil perbaikan dari umpan balik evaluator. + 105 + + Gambar 4.38 Iterasi Halaman Dashboard Wb + Perbaikan dilakukan penyederhanaan tampilan tabel dengan mengatur + ulang struktur kolom dan mengurangi informasi yang tidak bersifat utama. + Selain itu, dilakukan penegasan warna pada status kehadiran untuk + membedakan kondisi hadir, izin, dan tidak hadir. Perubahan ini bertujuan + untuk meningkatkan keterbacaan informasi dan memudahkan admin + dalam melakukan pemantauan kehadiran secara cepat dan efisien. +d. Perubahan penyajian laporan absensi menjadi perorangan + Perubahan penyajian laporan absensi dilakukan berdasarkan masukan + dari responden (R2), yang mengusulkan agar laporan ditampilkan dalam + format perorangan agar lebih mudah ditinjau. Sebelumnya, laporan + ditampilkan secara kolektif sehingga pengguna harus melakukan + pencarian manual untuk melihat detail individu tertentu. Hasil perbaikan + ditunjukkan pada Gambar 4.39. + 106 + + Gambar 4.39 Iterasi Halaman Laporan + Sebagai bentuk iterasi, desain laporan diperbarui dengan menyediakan +tampilan laporan per individu, sehingga admin dapat langsung melihat +rincian data absensi masing-masing perangkat desa tanpa harus memilah +data secara keseluruhan. Perubahan ini bertujuan untuk meningkatkan +efisiensi dalam proses evaluasi dan monitoring kehadiran. + 107 + +e. Penambahan fitur setting absen + Penambahan fitur setting absen dilakukan berdasarkan masukan dari + + responden (R5), yang mengusulkan agar sistem menyediakan pengaturan + jadwal kehadiran secara langsung melalui halaman admin. Sebelumnya, + sistem belum menyediakan fitur untuk mengatur waktu absensi sehingga + jam check-in, check-out, dan hari kerja tidak dapat disesuaikan secara + fleksibel. Hasil perbaikan ditunjukkan pada Gambar 4.xx. + + Gambar 4.40 Iterasi Setting Absen + Sebagai bentuk iterasi, desain sistem diperbarui dengan menambahkan + halaman Setting Absensi yang memungkinkan admin untuk mengatur jam + check-in, jam check-out, serta menentukan hari kerja atau hari absensi. + Fitur ini dirancang agar pengelolaan kebijakan absensi dapat dilakukan + secara lebih fleksibel sesuai kebutuhan kantor desa. Penambahan fitur ini + diharapkan dapat meningkatkan kemudahan pengelolaan sistem serta + mendukung proses monitoring kehadiran secara lebih efektif. + 108 + +4.2 Pembahasan +4.2.1 Penerapan Metode UCD + + Berdasarkan hasil penelitian, penerapan metode User Centered Design +(UCD) terbukti mampu menghasilkan desain UI/UX aplikasi presensi yang +sesuai dengan kebutuhan, karakteristik pengguna dengan literasi digital dasar, +dan konteks kerja di Kantor Desa Pelem. Pendekatan ini diterapkan secara +sistematis dan iteratif, dengan melibatkan pengguna secara langsung dalam +setiap tahapannya. Hal ini menegaskan bahwa desain harus berpusat pada +pengguna, berbasis pemahaman konteks penggunaan, serta melalui proses +evaluasi dan perbaikan secara berulang. + + Pada tahap memahami konteks penggunaan (understanding the context +of use), peneliti melakukan observasi dan wawancara untuk mengidentifikasi +permasalahan pada sistem absensi manual yang digunakan sebelumnya. +Ditemukan beberapa kendala, seperti pencatatan waktu yang kurang akurat, +potensi manipulasi data, kesulitan dalam rekapitulasi kehadiran, serta +kurangnya efisiensi dalam proses pelaporan. Selain itu, latar belakang +pengguna dengan kemampuan teknologi dasar dan pengalaman terbatas +terhadap sistem sejenis, dari sisi usia dan kemampuan teknologi menjadi +faktor penting dalam menentukan pendekatan desain yang sederhana dan +mudah dipahami (Putra & Kristiana, 2025). + + Tahap identifikasi kebutuhan pengguna (specifying user requirements) +menghasilkan kebutuhan fungsional dan non-fungsional yang disusun +berdasarkan karakterisitik pengguna. Kebutuhan fungsional meliputi fitur +absensi masuk dan pulang berbasis QR-Code, pencatatan waktu otomatis, +riwayat kehadiran, serta pengelolaan laporan absensi melalui platform web. +Kebutuhan tersebut dirancang untuk mengatasi permasalahan pengguna yang +selama ini mengalami kesulitan dalam pencatatan dan rekap data. Sementara +itu, kebutuhan non-fungsional menekankan aspek kemudahan penggunaan +(usability), tampilan yang sederhana, navigasi yang jelas, konsistensi desain, +serta kejelasan umpan balik sistem setelah pengguna melakukan suatu aksi. +Penekanan pada aspek usability dilakukan karena pengguna dengan literasi + 109 + +digital dasar membutuhkan sistem yang mudah dipelajari dan digunakan +tanpa hambatan (Hutabarat & Sudaryana, 2024). + + Tahap perancangan solusi desain (producing design solutions) +dilakukan melalui penyusunan wireframe, pengembangan mockup, hingga +pembuatan prototype interaktif untuk platform mobile dan web. Proses ini +disesuaikan dengan karakteristik pengguna yang membutuhkan tampilan +sederhana dan tidak kompleks. Prototype yang dihasilkan kemudian diuji +secara langsung oleh pengguna dalam sesi evaluasi usability menggunakan +metode System Usability Scale (SUS), yang merupakan metode standar untuk +mengukur tingkat kemudahan penggunaan sistem secara kuantitatif. Hasil +evaluasi tahap pertama menunjukkan beberapa permasalahan sehingga +mendapat masukan dari pengguna seperti kurangnya tampilan menu yang +interaktif, perlunya penyederhanaan dengan mengurangi kepadatan tabel +tampilan dashboard, penegasan warna, tampilan laporan yang belum optimal, +serta belum tersedianya pengaturan absensi dan notifikasi sebagai umpan +balik sistem. Temuan ini menunjukkan bahwa evaluasi usability merupakan +bagian penting dalam UCD untuk mengidentifikasi kesenjangan antara desain +dan kebutuhan pengguna (S. Sari dkk., 2024b). + + Masukan dari pengguna menjadi dasar dilakukannya iterasi desain. +Karakteristik pengguna dengan literasi digital dasar maka perbaikan +difokuskan dengan menyederhanakan tampilan untuk mengurangi kepadatan +tabel pada dashboard, penataan ulang struktur informasi agar lebih +terorganisir, serta penegasan penggunaan warna untuk membedakan status +kehadiran secara lebih jelas. Struktur informasi yang lebih terorganisir +diwujudkan melalui penyusunan elemen berdasarkan hierarki visual yang +jelas, seperti pengelompokan data absensi berdasarkan kategori, pemisahan +antar elemen menggunakan whitespace, serta penempatan informasi utama +pada area yang mudah dijangkau pengguna. Pendekatan ini bertujuan untuk +menurunkan beban kognitif pengguna sehingga informasi dapat dipahami +dengan lebih cepat dan akurat (Ambatoding dkk., 2025). + + Analisis karakteristik responden dalam penelitian ini tidak sepenuhnya +didasarkan pada data kuantitatif, khususnya pada aspek kebiasaan + 110 + +penggunaan perangkat digital, melainkan diperoleh melalui observasi dan +wawancara pada tahap awal UCD. Hasil analisis menunjukkan bahwa +pengguna berada pada rentang usia produktif dengan tingkat literasi digital +dasar serta pengalaman terbatas dalam menggunakan sistem digital. Kondisi +tersebut mempengaruhi cara pengguna dalam memahami dan berinteraksi +dengan aplikasi yang dikembangkan. Pengguna cenderung mengalami +kesulitan ketika dihadapkan pada tampilan yang kompleks atau tidak +memiliki kejelasan visual. Temuan ini juga diperkuat oleh hasil evaluasi SUS +yang menunjukkan bahwa beberapa responden masih mengalami kendala +dalam memahami alur sistem dan membutuhkan bantuan dalam penggunaan +aplikasi. + + Temuan tersebut menunjukkan adanya keterkaitan yang kuat antara +karakteristik pengguna dengan kebutuhan desain sistem. Pengguna dengan +pengalaman teknologi yang terbatas cenderung membutuhkan tampilan yang +lebih sederhana, visual, dan mudah dipahami. Hal ini terlihat dari masukan +responden (R4) yang mengalami kebingungan dalam mengenali elemen +interaktif karena tampilan menu tidak terlihat sebagai tombol. Kondisi +tersebut menunjukkan bahwa karakteristik pengguna yang memiliki literasi +digital dasar membutuhkan penegasan visual pada komponen interaktif. +Selain itu, responden (R3) juga menyatakan bahwa tampilan dashboard +terlalu padat sehingga menyulitkan fokus terhadap informasi utama. Masukan +tersebut menunjukkan bahwa pengguna membutuhkan desain yang lebih +terstruktur dengan hierarki visual yang jelas agar informasi dapat dipahami +dengan cepat. + + Karakteristik pengguna juga mempengaruhi preferensi terhadap +efisiensi dan kejelasan tampilan sistem. Pengguna yang memiliki pengalaman +lebih dalam penggunaan perangkat digital tetap menunjukkan kebutuhan +terhadap kejelasan visual yang tinggi. Hal ini ditunjukkan oleh responden +(R6) yang menyatakan bahwa warna status kehadiran kurang tegas sehingga +sulit dibedakan. Kondisi tersebut menunjukkan bahwa kejelasan visual tidak +hanya penting bagi pengguna dengan kemampuan rendah, tetapi juga bagi +pengguna yang lebih berpengalaman. Penelitian sebelumnya menyatakan + 111 + +bahwa pengalaman teknologi dan kebiasaan penggunaan perangkat digital +berpengaruh terhadap persepsi usability dan efektivitas interaksi pengguna +(Putra & Kristiana, 2025). Oleh karena itu, desain sistem harus mampu +mengakomodasi berbagai tingkat kemampuan pengguna melalui pendekatan +visual yang jelas dan konsisten. + + Penggunaan warna sebagai pembeda status kehadiran juga didasarkan +pada karakteristik pengguna yang membutuhkan informasi secara cepat dan +mudah dikenali. Warna yang kurang kontras menyebabkan pengguna +kesulitan dalam membedakan status kehadiran tanpa membaca teks secara +detail. Masukan dari responden (R6) menunjukkan bahwa elemen visual +memiliki peran penting dalam membantu proses pemahaman informasi. Oleh +karena itu, penggunaan warna yang lebih tegas diterapkan sebagai visual cue +untuk mempercepat identifikasi informasi. Penelitian menunjukkan bahwa +atribut visual seperti warna dan kontras memiliki pengaruh signifikan +terhadap kemudahan penggunaan sistem (Hall & Hanna, 2023). Hal ini +menunjukkan bahwa desain visual berfungsi sebagai alat bantu kognitif yang +mendukung karakteristik pengguna. + + Selain itu, perbaikan pada tampilan laporan yang disajikan secara lebih +terstruktur perorangan juga menunjukkan adanya korelasi dengan kebutuhan +pengguna dalam konteks pekerjaan. Hal ini secara langsung diusulkan oleh +responden (R2) yang menginginkan laporan ditampilkan secara individual +agar lebih mudah dalam proses pencarian dan pemantauan data. Berdasarkan +karakteristik karyawan kelurahan yang memiliki tugas administratif dan +kebutuhan pemantauan data secara rutin, penyajian laporan secara individual +dinilai lebih efektif dibandingkan tampilan kolektif. Pendekatan ini sejalan +dengan prinsip UCD yang menekankan bahwa desain harus +mempertimbangkan konteks kerja pengguna dan alur tugas (task flow) agar +sistem dapat digunakan secara efisien (Johnson, 2023). + + Penambahan notifikasi sebagai umpan balik sistem juga merupakan +respon terhadap karakteristik pengguna yang membutuhkan kejelasan setelah +melakukan suatu aksi. Masukkan ini diusulkan oleh responden (R5 dan R7) +yang menyatakan bahwa sistem belum menyediakan notifikasi setelah + 112 + +melakukan aktivitas penting seperti absensi dan pengajuan izin. Temuan ini +menunjukkan bahwa pengguna pada rentang usia produktif tetap +membutuhkan umpan balik yang jelas untuk meningkatkan rasa percaya dan +mengurangi ketidakpastian dalam penggunaan sistem. Selain notifikasi, +kebutuhan akan fleksibelitas sistem mendapat usulan adanya pengaturan +durasi jam kerja. Hal ini menunjukkan bahwa pengguna tidak hanya +membutuhkan sistem yang mudah digunakan, tetapi juga sistem yang dapat +menyesuaikan dengan kebijakan operasional di lingkungan kerja. Dengan +demikian, bahwa fitur-fitur tersebut menjadi bagian penting dalam +mendukung kebutuhan kontekstual pengguna dan meningkatkan kepercayaan +dan kenyamanan pengguna dalam berinteraksi dengan sistem (Sheiderman +dkk., 2023). + + Efektivitas penerapan metode UCD dalam penelitian ini ditunjukkan +melalui peningkatan skor SUS pada tahap evaluasi kedua, baik pada platform +mobile maupun web. Peningkatan skor rata-rata serta berkurangnya variasi +nilai ekstrem menunjukkan bahwa desain hasil iterasi lebih konsisten, lebih +mudah digunakan, dan lebih sesuai dengan ekspektasi pengguna. Dengan +demikian, penerapan metode UCD tidak hanya menghasilkan desain yang +berbasis asumsi perancang, tetapi benar-benar didasarkan pada pengalaman +dan umpan balik nyata dari pengguna. + + Secara keseluruhan, proses UCD yang diterapkan dalam penelitian ini +membuktikan bahwa pendekatan yang berpusat pada pengguna dan dilakukan +secara iteratif mampu meningkatkan kualitas usability desain secara terukur. +Hal ini menunjukkan bahwa keterlibatan pengguna sejak tahap awal hingga +evaluasi akhir menjadi faktor kunci dalam menghasilkan desain UI/UX yang +efektif, efisien, dan memuaskan bagi pengguna. + 113 + +4.2.2 Evaluasi SUS + Evaluasi usability pada penelitian ini dilakukan menggunakan metode + +System Usability Scale (SUS) terhadap desain aplikasi presensi berbasis +mobile dan web. Pengujian dilakukan dua tahap, yaitu tahap pertama (SUS 1) +sebelum revisi dan tahap kedua (SUS 2) setelah dilakukan perbaikan +berdasarkan masukan pengguna. Perbandingan skor rata-rata SUS pada kedua +tahapan disajikan pada Tabel 4.10: + + Tabel 4.10 Perbandingan Skor SUS + + Platform SUS 1 SUS 2 Selisih + +Mobile 77,25 88,5 11,25 + +Web 79,75 89,25 9,5 + + Berdasarkan Tabel 4.10, pada tahap pertama desain mobile memperoleh +skor rata-rata sebesar 77,25 dan desain web sebesar 79,75. Kedua nilai +tersebut termasuk dalam kategori “Acceptable” dengan adjective rating +“Good”. Setelah dilakukan perbaikan desain, skor rata-rata meningkat pada +tahap kedua, yaitu menjadi 88,5 untuk mobile dan 89,25 untuk web. Nilai +tersebut masuk dalam kategori adjective rating “Exelent”, yang menunjukkan +peningkatan kualitas usability. + + Peningkatan sebesar 11,25 poin pada platform mobile dan 9,5 poin pada +platform web menunjukkan adanya perbaikan usability yang terukur setelah +dilakukan perbaikan desain berbasis umpan balik. Kenaikan skor ini +mengindikasikan bahwa perubahan antarmuka yang dilakukan mampu +meningkatkan efektivitas, efisiensi, dan kepuasan pengguna. Secara khusus, +peningkatan ini menunjukkan bahwa pengguna menjadi lebih mudah dalam +memahami sistem (efektivitas), lebih cepat dalam menyelesaikan tugas +(efisiensi), serta merasa lebih nyaman dan puas saat menggunakan aplikasi +(kepuasan pengguna). Sehingga perbandingan dua tahap evaluasi +memperlihatkan adanya dampak positif dari penerapan umpan balik +pengguna dalam proses perancangan. + 114 + + Pada desain mobile tahap pertama skor terendah adalah 60, yang +diberikan oleh R2 dan termasuk dalam kategori “Marginal”. Nilai tersebut +memiliki selisih perbandingan yang cukup besar yaitu 17,25 poin dari rata- +rata keseluruhan, sehingga menunjukkan adanya preseppsi usability yang +belum optimal. Responden menyampaikan bahwa tampilan masih kurang +menarik dan perlu penambahan efek visual agar tidak terkesan monoton. +Kondisi ini menunjukkan dari sisi efektivitas bahwa pengguna masih +mengalami kesulitan dalam memahami fungsi sistem secara langsung. +Kemudian dari sisi efisiensi, tampilan yang kurang menarik dan tidak jelas +juga berpotensi memperlambat pengguna dalam menyelesaikan tugas. +Sementara dari sisi kepuasan, kurangnya elemen visual menyebabkan +pengalaman pengguna menjadi kurang menyenangkan. Skor yang diberikan +dinilai paling berbeda atau unik secara negatif karena berada jauh di bawah +skor responden lainnya. + + Skor tertinggi pada tahap pertama desain mobile adalah 85, skor yang +diberikan oleh beberapa responden. Meskipun nilai yang diberikan berada +dalam kategori “Good”, beberapa responden tetap memberikan masukan +terkait kejelasan tombol dan notifikasi validasi setelah melakukan aksi. Hal +ini menunjukkan bahwa meskipun sistem sudah dinilai layak, masih terdapat +aspek yang dapat disempurnakan. Variasi skor yang cukup rentan sebesar 25 +poin mengindikasikan perlunya perbaikan desain secara lebih terarah. + + Setelah dilakukan perbaikan desain, skor terendah pada tahap kedua +meningkat menjadi 85 dan skor tertinggi mencapai 92,5. Responden yang +sebelumnya memberikan skor terendah mengalami peningkatan pada tahap +kedua. Rentang skor menyempit menjadi 7,5 poin, menunjukkan bahwa +persepsi usability antar responden menjadi lebih konsisten. Peningkatan skor +menunjukkan bahwa perbaikan desain berhasil meningkatkan efektivitas +melalui kejelasan fungsi, meningkatkan efisiensi melalui penyederhanaan +alur, serta meningkatkan kepuasan melalui tampilan yang lebih menarik dan +adanya umpan balik sistem. Kondisi ini mengindikasikan bahwa revisi desain +berhasil menjawab permasalahan yang sebelumnya dirasakan pengguna. + 115 + + Pada desain web tahap pertama skor terendah diberikan oleh R2 dan R7 +adalah 65, skor termasuk dalam kategori “Marginal”. Responden +memberikan masukan terkait tampilan laporan yang perlu dibuat lebih +terstruktur, penggunaan warna yang kurang tegas, serta tabel yang terlalu +padat. Kondisi ini menunjukkan bahwa dari sisi efektivitas, pengguna +mengalami kesulitan dalam memahami informasi yang ditampilkan. +Kemudian dari sisi efisiensi, kepadatan informasi menyebabkan proses +pencarian data menjadi lebih lambat. Tampilan yang kurang terstruktur +menurunkan kenyamanan pengguna dalam menggunakan sistem dari sisi +kepuasan penggunaan. Sementara itu skor tertinggi pada tahap ini adalah 90 +yang diberikan oleh R10. Meskipun responden memberikan nilai yang baik, +responden tetap memberikan saran berupa penambahan fitur setting absen. +Hal ini menunjukkan bahwa sistem sudah cukup efektif dan efisien, namun +masih perlu ditingkatkan dari sisi kepuasan pengguna dengan menyediakan +fitur yang lebih fleksibel sesuai kebutuhan pengguna. Rentang skor sebesar +25 poin menunjukkan persepsi usability yang masih beragam pada tahap +awal. + + Pada tahap kedua desain web, skor terendah meningkat menjadi 75 dan +skor tertinggi mencapai 92,5. Tidak ditemukan lagi skor dalam kategori +“Marginal”, sehingga menunjukkan peningkatan kualitas usability secara +menyeluruh. Meskipun rentang skor masih sebesar 17,5 poin, distribusi nilai +cenderung lebih tinggi dibandingkan tahap pertama. Hal ini menunjukkan +bahwa revisi desain memberikan dampak positif terhadap efektivitas dalam +memahami sistem, efisiensi dalam penggunaan, serta kepuasan pengguna +secara keseluruhan. + + Secara keseluruhan, hasil evaluasi menunjukkan adanya peningkatan +skor usability pada kedua platform setelah dilakukan revisi desain. Pada +desain mobile skor rata-rata meningkat dari 77,25 menjadi 88,5, sedangkan +pada desain web meningkat dari 79,75 menjadi 89,25. Peningkatan skor +tersebut menunjukkan bahwa perbaikan desain yang dilakukan berdasarkan +umpan balik pengguna mampu meningkatkan kualitas usability pada ketiga +aspek utama, yaitu efektivitas, efisiensi, dan kepuasan pengguna. Selain itu, + 116 + +berkurangnya variasi skor pada tahap kedua menunjukkan bahwa persepsi +usability antar responden menjadi lebih konsisten. + + Tahapan evaluasi yang dilakukan dalam dua tahap ini merupakan +bagian dari satu siklus iterasi dalam pendekatan User Centered Design +(UCD). Proses tersebut meliputi perancangan desain awal, evaluasi usability, +analisis umpan balik pengguna, perbaikan desain, serta evaluasi kembali +untuk melihat peningkatan kualitas usability. Hasil evaluasi menunjukkan +adanya peningkatan skor serta perbaikan distribusi nilai antar responden pada +kedua platform. Dengan demikian, proses iteratif yang dilakukan terbukti +mampu meningkatkan kualitas usability desain secara terukur dan lebih +sesuai dengan kebutuhan pengguna. + 117 + + BAB 5. KESIMPULAN DAN SARAN + +5.1 Kesimpulan + Berdasarkan hasil dan pembahasan dari penelitian “Implementasi + +Metode UCD Dalam Perancangan UI/UX Pada Aplikasi Presensi Berbasis +Web Dan Mobile Untuk Meningkatkan Kemudahan Absensi Di Kantor Desa +Pelem” yang telah dilakukan, maka dapat disimpulkan bahwa: +a. Metode User Centered Design (UCD) berhasil diterapkan secara + + sistematis dan iteratif melalui tahapan memahami konteks pengguna, + identifikasi kebutuhan pengguna, perancangan Solusi, serta evaluasi dan + perbaikan desain. Keterlibatan pengguna dalam setiap tahap + menghasilkan desain antarmuka yang sesuai dengan kebutuhan, + karakteristik, dan konteks kerja di Kantor Desa Pelem, sehingga mampu + menjawab rumusan masalah pertama pada penleitian. +b. Hasil evaluasi usability menggunakan metode System Usability Scale + (SUS) menunjukkan peningkatan kualitas desain yang signifikan, dari + kategori Good (Acceptable) pada tahap awal menjadi Excellent setelah + dilakukan iterasi perbaikan. Peningkatan skor serta konsistensi penilaian + responden menunjukkan bahwa desain yang dihasilkan lebih efektif, + efisien, dan memberikan kepuasan bagi pengguna, sehingga rumusan + masalah kedua telah terjawab. + Secara keseluruhan, penerapan UCD yang dilakukan secara iteratif dan +berpusat pada pengguna mampu meningkatkan kualitas usability desain +UI/UX secara terukur dan signifikan. + +5.2 Saran + Berdasarkan hasil penelitian yang telah dilakukan, pengembangan + +selanjutnya disarankan untuk mengoptimalkan penerapan metode User +Centered Design (UCD), khususnya pada tahap memahami konteks pengguna +(understand context of use). Pada tahap ini, identifikasi pengguna sebaiknya +dilakukan secara lebih mendalam dengan menekankan pada karakteristik +pengguna, seperti usia, tingkat literasi digital, pengalaman penggunaan +sistem, serta kebutuhan dan kebiasaan kerja. Selain itu, penting untuk + + 117 + 118 + +mempertimbangkan penyesuaian role atau peran pengguna dalam sistem, +seperti perbedaan hak akses dan kebutuhan antara admin dan pengguna +umum, sehingga desain yang dihasilkan dapat lebih relevan, kontekstual, dan +sesuai dengan tugas masing-masing pengguna. + + Selain itu, pada tahap evaluasi, penelitian selanjutnya disarankan untuk +tidak hanya berfokus pada nilai akhir System Usability Scale (SUS), tetapi +juga melakukan analisis secara lebih rinci terhadap setiap pernyataan dalam +kuesioner. Analisis per pernyataan ini dapat dikombinasikan dengan +pendekatan kualitatif, seperti wawancara atau observasi langsung, untuk +menggali lebih dalam pengalaman, kendala, serta kebutuhan pengguna +selama menggunakan sistem. Dengan demikian, hasil evaluasi yang diperoleh +tidak hanya bersifat kuantitatif, tetapi juga didukung oleh temuan kualitatif +yang mampu memberikan insight yang lebih komprehensif dalam +mendukung proses iterasi desain berbasis UCD. + 119 + DAFTAR PUSTAKA + +Abadi, B., & Gunawan, R. D. (2023). Journal of Data Science and + Information System (DIMIS) Pengembangan Sistem Absensi + Berbasis GPS Perangkat Mobile Pada Diskominfo Kota Metro. + 1(4). https://doi.org/10.58602/dimis.v1i4.78 + +Aditya, R., Kurniawati, L., Informasi, F. T., & Mandiri, U. N. (2024). + Analisa perancangan ui/ux aplikasi absensi berbasis mobile + menggunakan metode user centered design. 7, 1025–1034. + https://doi.org/10.37600/tekinkom.v7i2.1671 + +Ambatoding, A., Allo, N. T., & Gallaran, F. B. (2025). Redesign User + Interface Aplikasi Identitas Kependudukan DigitalMenggunakan + Color Cognitive Load Theory. INFINITY: UKI Toraja Journal of + Information Technology, 5(1), 37–45. + +Arisa, N. N., Fahri, M., Putera, M. I. A., & Putra, M. G. L. (2023). + Perancangan Prototipe UI/UX Website CROWDE Menggunakan + Metode Design Thinking. Teknika, 12(1), 18–26. + https://doi.org/10.34148/teknika.v12i1.549 + +Aryanti, U., & Karmila, S. (2022). Sistem informasi absensi pegawai + berbasis web di Kantor Desa Nagreg. INTERNAL (Information + System Journal), 5(1), 90–101. + +Athallah, M. F., & Dirgahayu, T. (2024). Evaluasi dan Redesain User + +Interface (UI) dan User Experience (UX) pada Aplikasi Berbasis + +Web. ILKOMNIKA: Journal of Computer Science and Applied + +Informatics, 6(2), 116–126. + +https://doi.org/10.28926/ilkomnika.v6i2.627 + +B, A. M., Lumingkewas, C. S., & Rofi’i, A. (2023). The Implementation + of User Centered Design Method in Developing UI/UX. Journal of + Information System, Technology and Engineering. + https://api.semanticscholar.org/CorpusID:263169779 + +Colceriu, C., Theis, S., Brell-Cokcan, S., & Nitsch, V. (2023). User- + centered design in mobile human-robot cooperation: consideration + of usability and situation awareness in GUI design for mobile + robots at assembly workplaces. i-com, 22(3), 193–213. + https://doi.org/10.1515/icom-2023-0016 + +Dermawan, D. A. (2025). Perancangan Antarmuka Pengguna Aplikasi + Absensi Kerja Berbasis Mobile Dengan Metode Design Thinking: + Studi Kasus PT QLCom Solusi Bisnis. Jurnal Manajemen + Informatika, 17(01). + + 119 + 120 + +Elmatsani, H. M. (2019). User Centered Design dan Evaluasi Iteratif + pada Pengembangan Aplikasi DUPAK Perekayasa. InfoTekJar + (Jurnal Nasional Informatika dan Teknologi Jaringan), 3(2), 96– + 102. https://doi.org/10.30743/infotekjar.v3i2.1014 + +Fadilah, A., Yahya, M., & Rahman, E. S. (2024). Pengembangan Sistem + Absensi Qr Code Berbasis Web Untuk Siswa Jurusan Teknik + Komputer dan Jaringan SMK Negeri 4 Makassar. Dalam JIMU: + Jurnal Ilmiah Multi Disiplin (Vol. 02). JIMU. + +Fadilah, R. N., & Sweetania, D. (2023). Perancangan design prototype + ui/ux aplikasi reservasi restoran dengan menggunakan metode + design thinking. Jurnal Ilmiah Teknik, 2(2), 132–146. + +Faizah, S., & Pudjiarti, E. (2024). Perancangan Desain UI / UX Absensi + Karyawan Berbasis Mobile Dengan Menggunakan Metode Design + Thinking Pada PT . Tanto Intim Line Jakarta. 11(2), 178–186. + +Fauziyah, R., & Yunita, Y. (2024). PERANCANGAN UI/UX ABSENSI + +KARYAWAN PT. SUMBER BAHAGIA METALINDO DENGAN + +METODE DESIGN THINKING. Journal of Information System, + +Informatics and Computing, 8(1), 50. + +https://doi.org/10.52362/jisicom.v8i1.1504 + +Febrian, R., Putra, N., A, M. S. Z., Manurung, P., & Aziz, R. A. (2024). + UNTUK PENINGKATAN EFISIENSI DAN KEAMANAN DATA + MAHASISWA. (November), 1155–1164. + +Galavi, Z., Norouzi, S., & Khajouei, R. (2024). Heuristics used for + evaluating the usability of mobile health applications: A systematic + literature review. https://doi.org/10.17605/OSF.IO/PZJ7H + +Habib, S., Ahsyar, T. K., Afdal, M., Salisah, F. N., & Syaifullah, S. + (2023). Enhancing Website Usability by Utilizing Heuristic + Evaluation and User Feedback for Better User Experience. Journal + of Information System Research (JOSH), 4(4), 1093–1101. + https://doi.org/10.47065/josh.v4i4.3706 + +Haikal, M., Kusuma, R. S., Nauvanda, S. E., & Safitri, M. (2022). + PERANCANGAN USER INTERFACE DAN USER + EXPERIENCE PADA WEB MB TOURS AND TRAVEL + BEKASI. JIKA (Jurnal Informatika), 6(3), 271. + https://doi.org/10.31000/jika.v6i3.6777 + +Hartawan, M. S. (2022). PENERAPAN USER CENTERED DESIGN + (UCD) PADA WIREFRAME DESAIN USER INTERFACE DAN + USER EXPERIENCE APLIKASI SINOPSIS FILM. JEIS: + JURNAL ELEKTRO DAN INFORMATIKA SWADHARMA. + https://api.semanticscholar.org/CorpusID:257596487 + 121 + +Herlambang Cahya Pratama, Y., Al Hafidz, M., Lazuardy, N., & Naristi, + K. (2024). Application Of User Centered Design (Ucd) Method For + Ui/Ux Design At Husqy Petshop. MSJ : Majority Science Journal, + 2(2), 62–70. https://doi.org/10.61942/msj.v2i2.152 + +Howell, C. R., Su, W., Nassel, A. F., Agne, A. A., & Cherrington, A. L. + (2020). Area based stratified random sampling using geospatial + technology in a community-based survey. BMC Public Health, + 20(1). https://doi.org/10.1186/s12889-020-09793-0 + +Jakob Nielsen. (1993). Iterative User Interface Design . Nielsen Norman + Group. + +Kadek Tribuana Tungga Wibowo, I., & Putu Agus Eka Pratama, dan I. + +(2023). EVALUASI DAN RANCANG ULANG TAMPILAN + +ANTARMUKA WEBSITE MENGGUNAKAN METODE SYSTEM + +USABILITY SCALE DAN DESIGN THINKING (Studi Kasus: Dinas + +Komunikasi dan Informatika Kabupaten Gianyar). Jurnal Informatika + +dan Komputer, 271(2), 271–278. + +https://doi.org/10.35508/jicon.v11.i2.12654 + +Karakaya, K., Yigitbas, E., & Engels, G. (2022). Automated UX + Evaluation for User-Centered Design of VR Interfaces. 140–149. + https://doi.org/10.1007/978-3-031-14785-2_9 + +Kujala, S., & Kauppinen, M. (2004). Identifying and Selecting Users for + User-Centered Design. + +Kurnia Wirawan, D., Evi Maria, dan, Teknologi Informasi, F., & Kristen + Satya Wacana, U. (2024). PENERAPAN METODE HEURISTIC + EVALUATION UNTUK EVALUASI USER INTERFACE + APLIKASI LAZADA. Dalam Jurnal Pendidikan Teknologi + Informasi (JUKANTI) (Nomor 7). + +Lim, C., Clearesta Sumarlie, A., & Andana Haris, D. (2021). + PERANCANGAN UI/UX APLIKASI ABSENSI JIKAN + DENGAN METODE USER CENTERED DESIGN. Dalam + Computatio: Journal of Computer Science and Information + Systems (Vol. 5, Nomor 1). + +Nasution, I. M., Lubis, I., & Lubis, H. (2022). Design of Employee + Attendance Data Information System Using Web-Based QR Code + at Medan City Election Commission Office. Indonesian Journal of + Education, Social Sciences and Research (IJSSR), 3(3), 134–140. + https://doi.org/10.30596/jcositte.v1i1.xxxx + +Nuria, P., Septiana, E. E., Dewi Safitri, A., Informatika Sekolah Tinggi + Ilmu Komputer PGRI Banyuwangi, T., & Informatika Sekolah + Tinggi Ilmu Komputer PGRI Banyuwangi, M. (2024). Enhance the + 122 + + User Interface Design of the booking application at Rana Photo + Studio by applying the User-Centered Design (UCD) method. + Ultima Infosys : Jurnal Ilmu Sistem Informasi, 15(1). + +Pateman, D., & Pramudia, G. (2024). Analisis Bibliometrik pada + Efektivitas UI/UX pada Penerapan Web Development. Media + Jurnal Informatika, 16(1), 48–53. + +Pudjiarti, E., & Faizah, S. (2024). Perancangan Desain UI/UX Absensi + Karyawan Berbasis Mobile Dengan Menggunakan Metode Design + Thinking Pada PT. Tanto Intim Line Jakarta. BINA INSANI ICT + JOURNAL, 11(2), 178–186. + +Putra, A., & Kristiana, T. (2025). ANALISA DESAIN UI/UX WEBSITE + E-LEARNINGMTSN 33 JAKARTA MENGGUNAKAN + METODE USER CENTERED DESIGN. Jurnal Ilmiah Sistem + Informasi, 4(3), 590–606. https://doi.org/10.51903/32j40x26 + +Ramadhani, S., Muslimah Az-Zahra, H., & Rachmadi, A. (2023). + Perancangan User Interface Sistem Monitoring Akademik dan + Kehadiran Siswa Terintegrasi Auto Notification berbasis Mobile + dengan menggunakan Metode Human Centered Design (Studi + Kasus: SMKN 6 Malang) (Vol. 7, Nomor 5). http://j-ptiik.ub.ac.id + +Sambo, D. I., Nugraha, K. A., & Delima, R. (2023). Pembuatan + Antarmuka Website Desa Jambuwuluk Menggunakan Metode User + Centered Design. Jurnal Terapan Teknologi Informasi, 7(2), 79–88. + +Sari, E., & Pratama, F. (2024). Integrasi Teknologi Web Dengan + Peningkatan Dan Tantangan Dalam Konteks Internet Of Things + (LOT) Dengan Analisis Komprehensif Terhadap Implementasi, + Manfaat, Dan Kendala. Journal of Visual Communication and + Humanities, 1(1), 15–21. + +Sari, S., Saadah, A. T., Sugiono, D. F., Palunggono, G. D. P., & + Hidayatullah, M. F. (2024). Penerapan Metode System Usabillity + Scale (SUS) pada Pengujian UI/UX Website “Ternakku.Id.” Smart + Comp: Jurnalnya Orang Pintar Komputer, 13(2). + https://doi.org/10.30591/smartcomp.v13i2.6275 + +Suprianto, B. (2023). Literature review: penerapan teknologi informasi + dalam meningkatkan kualitas pelayanan publik. Jurnal + Pemerintahan dan Politik, 8(2), 123–128. + +Syaputra, A. (2022). Implementasi Metode Random Sampling Pada + Animasi Motion Grapich Herbisida Dan Fungisida. Jurnal + Sisfokom (Sistem Informasi dan Komputer), 11(2), 142–147. + https://doi.org/10.32736/sisfokom.v11i2.1370 + 123 + +Wange, S. F., Tohopi, R., & Noho Nani, Y. (2023). Pengaruh Disiplin + Kerja Pegawai terhadap Kualitas Pelayanan Publik Pemerintahan + Desa Dikecamatan Bongomeme Kabupaten Gorontalo. Journal of + Education, Humaniora and Social Sciences (JEHSS), 6(1), 458– + 465. https://doi.org/10.34007/jehss.v6i1.1891 + +Wijaya, E. Y., Arif, M., Aini, N., & Putri, Y. N. (2024). UI/UX Web + +Based Learning Design with UCD Approach to Basic Programming + +using FIGMA. bit-Tech, 6(3), 412–420. + +https://doi.org/10.32877/bt.v6i3.1534 + +Yasmin, A., & Voutama, A. (2024). Perancangan UI/UX Pada Aplikasi + Stayzy Menggunakan Metode Design Thinking. JATI (Jurnal + Mahasiswa Teknik Informatika), 8(3), 2756–2763. + 124 + LAMPIRAN +Lampiran 1. Dokumentasi Observasi, Wawancara, dan Pengujian + + 124 + 125 + + Lampiran 2. Data Pertanyaan Wawancara + +No Pertanyaan Jawaban + 10 orang perangkat desa beserta kepala desa. +1. Ada berapa perangkat desa di + Semua perangkat desa sebenarnya punya + Kantor Desa Pelem? jadwal yang sama, mulai kerja jam 07.30 pagi + sampai jam 1 siang. Tapi kalau ada kegiatan +2. Apakah semua perangkat desa atau pelayanan yang belum selesai, biasanya + ada beberapa yang masih harus tetap di kantor + memiliki jadwal yang sama? dan belum bisa pulang. + +3. Bagaimana proses absensi yang Saat ini masih menggunakan metode manual + saat ini digunakan di kantor desa? dengan mencatat kehadiran di buku absensi + setiap harinya. Dan pemantaun secara + langsung menggunakan cctv. + +4. Apakah ketika absen tidak Di kantor juga ada pencatatan waktu saat + melakukan pencatatan waktu/jam absen, tapi kadang ada perangkat desa yang + saat absen? lupa atau tidak mencatat jamnya. Jadi pas saya + buat rekap, saya biasanya tanya langsung ke +5. Jam berapa masuk dan pulang orangnya atau saya catatkan dengan waktu + kerja? yang sesuai. + +6. Apakah perangkat desa memiliki Masuk jam 07.30 maksimal 08.00 dan pulang + kegiatan rutin atau jadwal kerja jam 13.00. + tertentu yang perlu dimonitor + secara berkala? Untuk kegiatan rutin di Desa Pelem setiap + bulannya mengadakan kerohanian seperti + kataman dan juga senam pagi, yang diikuti + oleh perangkat dan warga Desa Pelem yang + diumumkan melalui masing-masing ketua RT. + +7. Siapa saja yang bertanggung jawab Saya sendiri, sekertaris desa + mencatat dan merekap absensi + pegawai? + +8. Pernahkah terjadi kesalahan dalam Pernah. Biasanya saya tanyakan langsung ke + pencatatan absensi? Jika iya, yang bersangkutan, lalu dicatat ulang secara + bagaimana penyelesaiannya? manual. + +9. Apakah anda merasa sistem manual Kurang transparan karena tidak ada bukti + + ini transparan dan dapat langsung seperti waktu tercatat otomatis. + + dipertanggungjawabkan? + 126 + +No Pertanyaan Jawaban + Lupa mencatat dan tidak bisa membuktikan +10. Apa kendala atau kesulitan yang waktu kehadiran. + + sering Anda alami saat melakukan + + absensi manual? + +11. Bagaimana sistem manual ini Kurang memotivasi untuk disiplin karena + memengaruhi kedisiplinan atau tidak ada sistem yang mencatat waktu secara + keterlambatan pegawai? akurat. + +12. Apakah proses rekap atau Ya, cukup lama karena harus dihitung dan + pelaporan absensi membutuhkan diperiksa satu per satu secara manual. + waktu lama? + Rekap absensi ini tidak digunakan untuk +13. Dari hasil rekap absen ini biasanya penggajian, tapi lebih untuk menjaga + digunakan untuk apa? Seperti kedisiplinan pegawai dan menumbuhkan rasa + evaluasi atau penggajian pegawai? tanggung jawab. + Ya, sangat terbuka asalkan mudah digunakan. +14. Apakah pegawai selalu + menggunakan hp atau dalam Fitur scan QR, catatan waktu masuk & pulang, + beraktivitas? Jika iya, apakah rekap otomatis, notifikasi, dan bukti foto pada + terbuka untuk menggunakan sistem saat izin. + absensi digital berbasis QR Code? + +15. Fitur apa saja yang menurut Anda + penting dimiliki oleh sistem absensi + digital? + +16. Menurut Anda, seperti apa tampilan Tampilan sederhana, jelas dan menu yang + + aplikasi yang mudah digunakan mudah dipahami. + + oleh perangkat desa? + +17. Apakah Anda memerlukan Ya, pelatihan singkat akan sangat membantu + pelatihan terlebih dahulu jika untuk adaptasi awal. + menggunakan sistem digital? + +18. Apa harapan Anda terhadap Dapat mempermudah absensi, transparan, dan + aplikasi presensi yang akan mendukung kedisiplinan perangkat desa. + dirancang nanti? + Ya, saya bersedia ikut dalam proses uji coba. +19. Apakah Anda bersedia dilibatkan + dalam proses evaluasi atau uji coba + sistem? + 127 +Lampiran 3. Form SUS + 128 + 129 + 130 + 131 + 132 + 133 + 134 + 135 +