TUGAS AKHIR

PERANCANGAN UI/UX PROTOTYPE PADA

APLIKASI PRESENSI SISWA MELALUI
PENDEKATAN USER CENTERED DESIGN
(STUDI KASUS : SMPN 2 KARANGLEWAS)

FAHMI NUR BAIHAQI

NIM. 18104032

PROGRAM STUDI REKAYASA PERANGKAT LUNAK

FAKULTAS INFORMATIKA
INSTITUT TEKNOLOGI TELKOM PURWOKERTO
2022
 Lembar Pengesahan Pembimbing

PERANCANGAN UI/UX PROTOTYPE PADA APLIKASI PRESENSI

SISWA MELALUI PENDEKATAN USER CENTERED DESIGN
(STUDI KASUS : SMPN 2 KARANGLEWAS)

UI/UX PROTOTYPE DESIGN IN STUDENT PRESENCE APPLICATIONS

THROUGH USER CENTERED DESIGN APPROACH
(CASE STUDY: SMPN 2 KANGLEWAS)

Dipersiapkan dan disusun oleh:

FAHMI NUR BAIHAQI 18104032

Telah Diujikan dan Dipertahankan dalam Sidang Ujian Tugas Akhir

Pada hari……………

Pembimbing I Pembimbing II

(Rifki Adhitama, S.Kom., M.Kom.) (Ariq Cahya Wardhana, S.Kom.,

M.Kom.)
NIDN. 0627089101 NIDN. 0630069302

Mengetahui,
Ketua Program Studi

(Gita Fadila Fitriana, S.Kom., M.Kom)

NIK. 0620039302

ii
 Lembar Penetapan Penguji

PERANCANGAN UI/UX PROTOTYPE PADA APLIKASI PRESENSI

SISWA MELALUI PENDEKATAN USER CENTERED DESIGN
(STUDI KASUS : SMPN 2 KARANGLEWAS)

UI/UX PROTOTYPE DESIGN IN STUDENT PRESENCE APPLICATIONS

THROUGH USER CENTERED DESIGN APPROACH
(CASE STUDY: SMPN 2 KANGLEWAS)

Dipersiapkan dan disusun oleh:

FAHMI NUR BAIHAQI
NIM. 18104032
Tugas Akhir Telah diuji dan Dinilai Penguji Program
Studi Rekayasa Perangkat Lunak
Fakultas Informastika
Institusi Teknologi Telkom Purwokerto
Pada tanggal …. 2022

Penguji I Penguji II

(………………………………..) (………………………………..)

NIDN. (…………...) NIDN. (…………)

Mengetahui,
Ketua Penguji

(………………………)

NIDN. (………….)

iii
HALAMAN PERNYATAAN KEASLIAN TUGAS AKHIR

Yang bertandatangan di bawah ini,

Nama mahasiswa : Fahmi Nur Baihaqi

NIM : 18104032
Program Studi : S1 Rekayasa Perangkat Lunak

Menyatakan bahwa Tugas Akhir dengan judul berikut:

PERANCANGAN UI/UX PROTOTYPE PADA APLIKASI PRESENSI
SISWA MELALUI PENDEKATAN USER CENTERED DESIGN (STUDI
KASUS : SMPN 2 KARANGLEWAS)

Dosen Pembimbing Utama : Rifki Adhitama, S.Kom., M.Kom.

Dosen Pembimbing Pendamping : Ariq Cahya Wardhana, S.Kom., M.Kom

1. Karya tulis ini adalah benar-benar ASLI dan BELUM PERNAH diajukan untuk
mendapatkan gelar akademik, baik di Institut Teknologi Telkom Purwokerto
maupun di Perguruan Tinggi lainnya.
2. Karya tulis ini merupakan gagasan, rumusan, dan penelitian Saya Sendiri,
tanpabantuanpihak lain kecuali arahan dari Tim Dosen Pembimbing.
3. Dalam Karya tulis ini tidak terdapat karya atau pendapat orang lain, kecuali
secara tertulis dengan jelas dicantumkan sebagai acuan dalam naskah dengan
disebutkan namapengarang dan disebutkan dalam Daftar Pustaka pada karya tulis
ini.
4. Perangkat lunak yang digunakan dalam penelitian ini sepenuhnya menjadi
tanggungjawab Saya, bukan tanggungjawab Institut Teknologi Telkom
Purwokerto.
5. Pernyataan ini Saya buat dengan sesungguhnya, apabila dikemudian hari terdapat
penyimpangan dan ketidakbenaran dalam pernyataan ini, maka Saya bersedia
menerima Sanksi Akademik dengan pencabutan gelar yang sudah diperoleh
sertasanksi lainnya sesuai dengan norma yang berlaku di Perguruan Tinggi.

Purwokerto, … Juli 2022

Yang Menyatakan,

(materai 10000 dan tanda tangan)

(Fahmi Nur Baihaqi)

iv
 KATA PENGANTAR

Puji syukur penulis panjatkan kepada Tuhan Yang Maha Esa, atas berkat rahmat
dan karunia-Nya kepada penulis, sehingga penulis dapat menyelesaikan tugas akhir ini
dengan baik. Penyusunan tugas akhir ini dimaksudkan untuk memenuhi sebagian
syarat-syarat guna mencapai gelar Sarjana di Institut TeknologiTelkom Purwokerto.
Penulis menyadari bahwa penulisan ini tidak dapat terselesaikan tanpa dukungan
dari berbagai pihak baik moril maupun materil. Oleh karena itu, penulisingin
menyampaikan ucapan terima kasih kepada semua pihak yang telah membantu dalam
penyusunan tugas akhir ini terutama kepada:
1. Tuhan YME karena atas izin-Nya penulis dapat menyelesaikan laporan Tugas
Akhir ini.
2. Kedua Orang tua dan adek saya Hendra Braja Saragih yang telah memberikan doa
dan mendukung penuh yang tiada henti-hentinya kepada penulis.

3. Bapak Dr. Arfianto Fahmi, S.T., M.T. selaku Rektor Institut Teknologi Telkom
Purwokerto.

4. Ibu Dr. Tenia Wahyuningrum, S.Kom.,M.T. Selaku Wakil Rektor Institut

Teknologi Telkom Purwokerto.
5. Ibu Gita Fadila Fitriana, S. Kom., M. Kom selaku Ketua Program Studi Rekayasa
Perangkat Lunak.
6. Bapak Rifki Adhitama, S.Kom., M.Kom. dan Bapak Ariq Cahya Wardhana,
S.Kom., M.Kom. sebagai pembimbing yang sudah membantu Menyusun Tugas
Akhir
7. Ibu Setiyowati M.Pd sebagai kepala sekolah SMPN 2 KARANGLEWAS, beserta
ibu-ibu guru yang ada di SMPN 2 KARANGLEWAS yang sudah membantu
penulis untuk menyelesaikan Tugas Akhir.
Penulis menyadari bahwa Tugas Akhir ini masih jauh dari sempurna dikarenakan
terbatasnya pengalaman dan pengetahuan yang dimiliki penulis. Oleh karena itu,
penulis mengharapkan segala bentuk saran serta masukan bahkan kritik yang
membangun dari berbagai pihak. Semoga tugas akhir ini dapat bermanfaat bagi para
pembaca dan semua pihak khususnya dalam bidang Informatika.

v
 Purwokerto, 2022
Penulis,

Fahmi Nur Baihaqi

vi
 DAFTAR ISI

Lembar Pengesahan Pembimbing .......................................................................... ii

Lembar Penetapan Penguji........................................................................................ iii
HALAMAN PENYATAAN KEASLIAN TUGAS AKHIR ……......................... iv
KATA PENGANTAR ............................................................................................... v
DAFTAR ISI ............................................................................................................. vii
DAFTAR TABEL ................................................................................................... x
DAFTAR GAMBAR .......................................................................................... xi
DAFTAR LAMPIRAN ...................................................................................... xii

BAB 1 PENDAHULUAN.......................................................................................... 1
1.1. Latar Belakang .......................................................................................... 1
1.2. Perumusan Masalah ................................................................................... 4
1.3. Pertanyaan Penelitian ................................................................................ 4
1.4. Batasan Masalah ........................................................................................ 4
1.5. Tujuan Penelitian ....................................................................................... 4
1.6. Manfaat Penelitian ..................................................................................... 5

BAB 2 TINJAUAN PUSTAKA ................................................................................ 6

2.1. Kajian Pustaka .......................................................................................... 6
2.2. Dasar Teori ................................................................................................. 11
2.2.1 Presensi Sekolah ........................................................................................ 11
2.2.2 Persona ...................................................................................................... 12
2.2.2 Usability .................................................................................................... 12
2.2.3 Usability Testing ...................................................................................... 12
2.2.5 UI/UX ........................................................................................................ 13
2.2.6 User centered Design .................................................................................. 14
2.2.7 Aplikasi mobile android ........................................................................... 15
2.2.8 Prototype ................................................................................................... 15
2.2.9 Black Box Testing.................................................................................... 16

17

vii
BAB 3 METODE PENELITIAN ............................................................................
3.1. Objek dan Subjek Penelitian ..................................................................... 17
3.2. Alat dan Bahan Penleitian ......................................................................... 17
3.2.1 Perangkat Keras ......................................................................................... 17
3.2.2 Perangkat Lunak ........................................................................................ 17
3.3 Diagram Alir Penelitian ............................................................................ 18
3.3.1 Permasalahan ............................................................................................. 19
3.3.2 Pengumpulan Data …………….................................................................. 19
3.3.3 Wawancara ……………............................................................................. 19
3.3.4 Rangkuman Jawaban................................................................................... 20
3.3.5 Plan the human centered ptoces .................................................................. 20
3.3.6 Specify the contect of use ……………………..……………………………. 20
3.3.7 Persona ....................................................................................................... 20
3.3.8 Specify user and organizational requirement …………………….............. 20
3.3.9 Unified Modeling Language........................................................................ 21
3.3.10 Use case, activity diagram, class diagram ………..………………………. 21
3.3.11 Product design solution ………….………………………………………… 21
3.3.12 Wireframe dan UI……..……...................................................................... 21
3.3.13 Evaluate design againt user requirement …................................................. 22
3.3.14 Hasil SUS ………………………………………………...………………… 22
3.3.15 User Centered Design …………................................................................. 22
3.3.16 Prototype MVP ........................................................................................... 23
3.3.17 Analis Hasil …………….…………............................................................ 24
3.3.18 Black Box ................................................................................................... 24
3.3.19 Aplikasi Utama ………………...…........................................................... 25
3.3.20 Saran dan Kesimpulan …............................................................................ 25

BAB 4 HASIL DAN PEMBAHASAN .................................................................... 27

4.1 Pengumpulan Data .................................................................................... 27
4.2 Plant the human centered proses ……………............................................ 27
4.3 Specify the context of use ……................................................................... 28
4.4 Persona ....................................................................................................... 29
4.5 Specify the user and organization requirement ........................................... 36
4.6 Product design solution ……………………………………………………. 38
4.7 Evaluate design SUS ................................................................................... 41

viii
 4.8 Analisis Hasil............................................................................................... 44

BAB 5 KESIMPULAN DAN SARAN .................................................................... 47

4.1 Kesimpulan ................................................................................................ 47
4.2 Saran ……………...................................................................................... 47

DAFTAR PUSTAKA ................................................................................................ 48

ix
 DAFTAR TABEL

Tabel 2.1 Kajian Pustaka ....................................................................................... 9

Tabel 3.1 Kriteria Calon Pengguna …..................................................................... 21
Tabel 3.2 Pertanyaan SUS ..................................................................................... 23
Tabel 4.1 Aktor dan Deskripsi ............................................................................... 28
Tabel 4.2 Pengisisan kuisioner SUS guru ….......................................................... 41
Tabel 4.3 Hasil penghitungan SUS guru …............................................................ 41
Tabel 4.4 Pengisian Kuisioner SUS wali siswa ….................................................. 42
Tabel 4.5 Hasil penghitungan SUS wali siswa …................................................... 43
Tabel 4.6 Hasil pengujian …................................................................................... 45

x
 DAFTAR GAMBAR
Gambar 1.1 proses wawancara ............................................................................... 3
Gambar 2.1 pertanyaan SUS .................................................................................. 13
Gambar 2.2 proses User Interface .......................................................................... 14
Gambar 2.3 aplikasi Mobile Android ..................................................................... 15
Gambar 3.1 diagram alir penelitan ......................................................................... 18
Gambar 3.2 tahapan UCD ...................................................................................... 24
Gambar 4.1 Persona user 1 .................................................................................... 29
Gambar 4.2 Persona user 2 ................................................................................... 30
Gambar 4.3 use case ............................................................................................. 30
Gambar 4.4 Activity diagram Log in ..................................................................... 32
Gambar 4.5 Activity diagram menu ....................................................................... 32
Gambar 4.6 Activity diagram presensi .................................................................. 33
Gambar 4.7 Activity diagram presensi kelas .......................................................... 33
Gambar 4.8 Activity diagram rekap presensi .......................................................... 34
Gambar 4.9 Activity diagram rekap presensi kelas ................................................ 34
Gambar 4.10 Activity diagram Log in .................................................................... 35
Gambar 4.11 Activity diagram melihat kehadiran siswa ....................................... 35
Gambar 4.12 Class diagram ................................................................................... 36
Gambar 4.13 wireframing splashscreen, login, home guru .................................. 37
Gambar 4.14 wireframing pilih kelas, presensi kelas ............................................ 37
Gambar 4.15 wireframing rekap presensi, edit rekap presensi ............................. 38
Gambar 4.16 wireframing spashscreen, Log in, home wali siswa ....................... 38
Gambar 4.17 UI splashscreen, login, home guru .................................................. 39
Gambar 4.18 UI pilih kelas, presensi kelas .......................................................... 39
Gambar 4.19 UI rekap presensi, edit rekap presensi ............................................. 40
Gambar 4.20 UI spashscreen, Log in, home wali siswa ...................................... 40
Gambar 4.21 Hasil SUS guru ................................................................................ 42
Gambar 4.22 Hasil SUS Wali siswa ..................................................................... 44

xi
 DAFTAR LAMPIRAN
Lampiran 1 wanwancara pengambilan kasus dengan guru………………………….....…51
Lampiran 2 penyataan izin dengan kepala sekolah SMPN 2 KARANGLEWAS ....................... 52
Lampiran 3 persona kebutuhan aplikasi ReCek............................................................................ 53
Lampiran 4 dokumen desain ........................................................................................................ 62
Lampiran 5 coding dengan android studio................................................................................... 63
Lampiran 6 kuisioner google form .............................................................................................. 67
Lampiran 7 data responden google spreadsheet .......................................................................... 71

xii
 BAB I

PENDAHULIAN

1.1. Latar Belakang

Saat ini perkembangan teknologi informasi yang semakin maju dan cepat
tentunya akan mempengaruhi kemudahan-kemudahan yang dibawa dalam
kehidupan sehari-hari dan mengakibatkan perubahan pandangan manusia [1].
Sekolah berperan besar dalam mendidik siswa melalui pengawasan yang
komprehensif dari dinas pendidikan Manajemen pendidikan di sekolah dengan
menggunakan teknologi informasi dapat membantu proses pengelolaan data
sekolah dengan baik dan efektif, seperti informasi catatan sekolah, data guru,
siswa dan siswa [2]. Pendidikan merupakan salah satu dari bidang utama
penggunaan teknologi komputer. yang setiap daerah-daerah selalu berusaha untuk
ditingkatkan, termasuk SMPN 2 Karanglewas berada di Kecamatan Karanglewas.
Mencoba untuk mengenal e-presensi dengan android [3] [4].
Penggunaan teknologi informasi banyak digunakan terutama dalam bidang
pemerintahan, bisnis dan pendidikan. Teknologi informasi memiliki peran
penting, khususnya dalam bidang pendidikan, untuk meningkatkan kualitas
pengajaran dan kualitas siswa. Bidang pendidikan, salah satunya sekolah
menengah yang profesional, merupakan tempat pertukaran ilmu antara guru dan
siswa, sehingga menghasilkan sumber daya manusia yang berkualitas, berkualitas
dan berdaya saing [5]. Penting pembangunan di setiap negara. Dalam bidang
pendidikan, sekolah menengah pertama pada khususnya masih membutuhkan
suatu sistem untuk mengolah, menyimpan, dan menyebarluaskan informasi, salah
satunya terkait dengan kegiatan proses belajar mengajar. Dalam kegiatan belajar
mengajar di sekolah tentunya harus ada siswa yang harus mencatat buku absensi
setiap hari. Catatan kehadiran ini sering disebut sebagai kehadiran. Dengan
memanfaatkan teknologi informasi [1].
User Interface dan User Experience Design (User Interface / User
Experience UI / UX Design) adalah faktor terpenting yang perlu
dipertimbangkan selama proses presensi untuk memudahkan pengguna
menggunakan aplikasi, mendapatkan jawaban dari interaksi dan mengetahui

1
kebutuhan pengguna[6]. Oleh karena itu, aplikasi presensi ricek dalam
membangun sebuah aplikasi android yang berhubungan langsung dengan
pengguna yaitu guru agar dapat menerima umpan balik yang positif dan
memperhatikan komponen terpenting yang dibutuhkan untuk adalah
fungsionalitas dan kegunaan. Untuk meningkatkan kepuasan pengguna
(pengguna aplikasi). Peningkatan ini kemudian akan disamakan dengan
peningkatan keramahan pengguna dan kegembiraan yang tercipta dalam
interaksi antara pengguna dan produk. Oleh karena itu, penting untuk melakukan
observasi dengan berdialog langsung agar bisa di teliti lebih lanjut berdasarkan
riset guru sekolah [7].
Pendekatan desain yang berpusat pada pengguna (UCD) dipilih dalam
penelitian ini karena dalam pendekatan UCD ini, pengguna terlibat langsung
sebagai basis utama dari proses pengembangan sistem. Persepsi umum dan
karakteristik manusia bukanlah satu-satunya fokus metodologi UCD, tetapi juga
fokus pada karakteristik dan perilaku spesifik dari pengguna target. Hasil terbaik
dari penelitian tersebut selanjutnya akan dijadikan sebagai data kunci dalam
proses pembuatan desain antarmuka terbaik. Partisipasi calon pengguna aktif
sangat penting dalam proses pengambilan keputusan terkait implementasi desain
konsep Pendidikan percontohan aplikasi presensi ricek [7] [8].
SMP N 2 KARANGLEWAS merupakan SMP yang berlokasi di Dusun I,
Pangebatan, Kec. Karanglewas, Kabupaten Banyumas, Jawa Tengah 53161.
Manajemen SMP N 2 KARANGLEWAS terakreditasi A saat ini dikelola oleh
Ibu Setiyowati. Sebagai pimpinan fasilitas yang didukung oleh 26 guru dalam
hal jumlah siswa/siswi tahun ajaran 2021-2022, yakni sejumlah 530 siswa dari
kelas 7 sampai dengan kelas 9, data tersebut adalah diambil sample atas dasar
observasi dan wawancara atau mengisi form survei yang penulis lakukan dari
sekolah.data.kemdikbud.go.id dengan salah satu guru tentang permasalahan
presensi.
Absensi siswa di SMPN 2 KARANGLEWAS saat ini menggunakan
kriteria kehadiran hadir, sakit, izin, dan alpha masih dilakukan secara manual
dengan menggunakan kertas lembar yang berisi identitas siswa. Kegiatan
absensi dilakukan setiap hari berangkat siswa, setor rekap pada semester sekali,

2
saat mengambilan raport. Apabila absensi itu terkena air atap yang rusak di
sekolah, air terkena buku absen disitu buku absennya bisa rusak. Kendala lain
bisa usang pada lembar absensi pengelola kelas sehingga dapat menimbulkan
masalah pada saat itu. Selain itu, Upaya mendidik kedisiplinan siswa tidak
hanya menjadi tanggung jawab sekolah tetapi juga orang tua harus dilibatkan[9].
Orang tua siswa tidak mengetahui apakah anaknya benar-benar hadir untuk
mengikuti kegiatan belajar mengajar di sekolah. Berdasarkan observasi dan
wawancara dengan wakil pengajar di Sekolah SMPN 2 KARANGLEWAS,
diperlukan suatu sistem yang mampu menangani masalah tersebut seperti
pemberitahuan untuk memberitahukan orang tua siswa. kehadiran putra mereka
di sekolah [10].
Memberikan kesan pertama yang baik pada calon pengguna dan dapat
menggunakannya dengan baik, diperlukan desain antarmuka pengguna dan
pengalaman pengguna yang baik. Antarmuka pengguna (UI) adalah di mana
sistem dan pengguna dapat berinteraksi satu sama lain melalui perintah seperti
menggunakan konten dan memasukkan data. Sedangkan User Experience (UX)
dikenal sebagai pengalaman yang berhubungan dengan reaksi, persepsi,
perilaku, perasaan dan pemikiran pengguna saat menggunakan sistem. Ricek
adalah aplikasi absensi ponsel yang dirancang untuk memecahkan masalah
SMPN 2 Karanglewas. Aplikasi menggunakan pendekatan User-Centered
Design (UCD). Pendekatan ini memungkinkan pengguna produk untuk
berpartisipasi langsung dalam proses desain aplikasi. Pengujian dilakukan dalam
2 tahap yaitu pengujian Black Box dan pengujian kegunaan [11] [12].
Berikut foto sebsedang wawancara.

Gambar 1.1 proses wawancara

3
1.2. Perumusan Masalah
Bedasarkan latar belakang masalah yang dihadapi buku rekap manual bisa
terjadi kerusakan, maka perlu melakukan penelitian dengan memudahkan
aplikasi presensi yang dapat merekap dan menyimpan data dengan lebih baik
dari tampilan terbaik user mengenai evaluasi UI/UX pada aplikasi ReCek.
Proses evaluasi UI/UX menggunakan pendekatan user centered design agar
aplikasi yang dikembangkan dapat bermanfaat serta mudah digunakan bagi
pengguna.

1.3. Pertanyaan Penelitian

Berdasarkan perumusan masalah, dapat diambil pertanyaan terkait dengan
rumusan masalah tersebut yaitu
a. Apakah aplikasi dengan perancangan UI/UX dapat memudahkan
presensi di sekolah.
b. Bagaimana cara membuat pengembangan UI/UX aplikasi presensi: ricek
, dengan menggunakan metode user centered design.
c. Pembuatan dan implementasi metode user centered design UI/UX
prototype.
d. Hasil pengujian black box dari penerapan aplikasi presensi menggunakan
metode user centered design.

1.4. Batasan Masalah

Batasan masalah dalam penelitian ini adalah berfokus pada system dan
desain yang bisa berfungsi dengan baik dari aplikasi presensi. Aplikasi dianggap
memenuhi batas pengujian sebagai berikut :
a. Penelitian dilaksanakan di SMPN 2 KARANGLEWAS.
b. Penelitian pada perancangan aplikasi android presensi.
c. Sistem operasi minimum pada android minimal versi 4.4 (Kitkat) dengan
API level 19.

4
1.5. Tujuan Penelitian
Berdasarkan pertanyaan penelitian yang sudah disebutkan di atas, maka
tujuan dari penelitian ini yaitu :
a. Membangun aplikasi presensi menggunakan metode user centered
desain.
b. Cara pengembangan UI/UX dengan menggunakan metode user centered
design.
c. Membuat dan mengimplementasikan UI/UX prototype mvp
menggunakan metode ucer centered design.
d. Melakukan pengujian aplikasi dengan metode black box.

1.6. Manfaat Penelitian

Hasil penelitian ini diharapkan dapat memberi manfaat antara lain :
a. Manfaat bagi penelitian selanjutnya
Hasil penelitian ini diharapkan dapat memberikan manfaat
dalam pengembangan perangkat lunak sebagai panduan
atau rujukan untukpenelitian selanjutnya.
b. Manfaat bagi pendidikan
Hasil penelitian ini diharapkan dapat memudahkan sekolah
untuk meningkatkan kualitas dan efisiensi.
c. Manfaat bagi penulis
Penelitian ini dapat menambah wawasan dalam
pengembangan perangkat lunak serta dapat menerapkannya
pada studi kasus yang berbeda.

5
 BAB II

TINJAUAN PUSTAKA

2.1. Kajian Pustaka

Peneliti melakukan literature review terhadap beberapa jurnal penelitian
sebelumnya. Ulasan dipilih berdasarkan topik yang relevan dan terkait dengan
topik penelitian yang diteliti, yaitu penilaian pengalaman pengguna. Berikut
penjelasan lebih lanjut.

Pengembangan E-Presensi berbasis Android untuk Monitoring Kehadiran

Siswa Sekolah Menengah di Kota Pekalongan (Studi Kasus: SMP Islam
Pekalongan)
Penelitian tentang memahami pengembangan aplikasi android kehadiran
siswa, mengembangkan aplikasi e-Presensi berbasis android untuk monitoring
kehadiran siswa sekolah menengah di Kota Pekalongan. Metode pengumpulan
data yang digunakan dalam penelitian ini adalah observasi dan wawancara.
Sedangkan metode pengembangan sistem yang digunakan adalah metode SDLC
(System Decelopment Life Cycle) dengan tahapan planning, analysis, design,
implementation, testing & integration, maintenance. Hasil dari penelitian ini
adalah terwujudnya aplikasi e-Presensi berbasis android untuk monitoring
kehadiran siswa sekolah menengah di Kota Pekalongan. Kelebihan dari jurnal
tersebut memiliki data yang lengkap dan terdapat diagram use case beserta flowcart untuk
system hingga mudah bagi pembaca. Kekuranganya terdapat pada penggunggunaan
aplikasi masih tahap pengembangan, belum digunakan pada SMP tersebut [3].

Perancangan User Interface dan User Experience pada Placeplus

menggunakan pendekatan User Centered Design
Penelitian tentang merefrensikan bagaimana cara perancangan metode User
Centered Design UI/UX dirancang pada Placeplus menggunakan pendekatan User
Centered Design (UCD). Terdapat 4 (empat) tahap dalam pendekatan UCD yaitu analisis,
desain, evaluasi dan implementasi. User atau pengguna akan dilibatkan pada saat
melakukan evaluasi pada desain yang dibuat, sehingga dapat dilakukan desain ulang jika
diperlukan. Hasilnya pada evaluasi tahap awal user kurang cocok dengan beberapa bagian
desain, setelah dilakukan proses desain ulang yang menyesuaikan hasil evaluasi akhirnya

6
user memberikan kesan baik terhadap Placeplus. Kelebihan dari jurnal tersebut penulisan
dan alur bisa dipahami pembaca, terdapat gambar prototype hingga pada evaluasi dapat di
pahami pembaca. Kekuranganya terdapat pada pendekatan karena tidak sepenuhnya
menggunakan metode UCD hingga butuh pemahaman lebih [12].

Analisis User Experience pada Pendekatan User Centered Design dalam

rancangan Aplikasi Placeplus
Penelitian tentang pendekatan User Centered Design (UCD) dengan
berorientasikan konsep Product Market Fit. Konsep tersebut sering diabaikan
sehingga menjadi faktor utama kegagalan dari suatu rintisan bisnis. Kesimpulan
sebagai pengguna adalah hanya 1 dari 5 aspek yang diteliti yang sudah dapat
mencapai angka kepuasan pengguna pada skala baik dengan nilai rata-rata 83,25.
Penilaian 4 aspek lainnya yang memiliki nilai rata-rata terendah 60 kemudian
dijadikan fokus utama pada rancangan aplikasi yang selanjutnya akan
direkomendasikan kepada sejumlah stakeholder. Kelebihan dari jurnal tersebut
terdapat data spesifik dari penelitian analisis dari stakeholder menggunakan cara in depth
interview pada Q5 yaitu tampilan medapatkan nilai 70,25 terkesan menarik,
kekuranganya terdapat pada selain dari tampilan memiliki penggunaan yang kurang
nyaman jadi perlu di kempbangkan [7].

Perancangan User Interface dan User Experience Mobile Application

SiBengkel untuk memenuhi kebutuhan pengguna dengan Metode User-
Centered Design (UCD)
Penelitian ini tentang aplikasi yang dirancang untuk memudahkan
pengguna sepeda motor dalam melakukan pemesanan atau service sepeda motor
secara online di bengkel yang terdaftar di aplikasi dan terdekat dengan pengguna
aplikasi. Pembentukan start-up SiBengkel bertujuan untuk menyelesaikan masalah
perawatan berbagai kendaraan dan memudahkan bengkel untuk mengelola antrian
layanan yang membengkak. Pentingnya UI/UX dalam pengembangan aplikasi
adalah untuk memudahkan pengguna dalam menggunakan aplikasi, mendapatkan
jawaban dari interaksi, dan mengetahui kebutuhan pengguna. Dalam desain
penelitian menggunakan User-Centered Design (UCD), pendekatan ini berfokus
pada kebutuhan pengguna. Hasil penelitian berupa solusi yang dirancang pada

7
aplikasi SiBengkel yang dapat diterima oleh pengguna dengan skor SUS 74.
Kelebihan dari jurnal tersebut dari latar belakang hingga tujuan terlihat jelas dan memiliki
urutan yang mudah dibahami dengan evaluasi SUS mendapatkan hasil yang cocok dari
pengguna dengan metode UCD. Kekuranganya terdapat pada pada sub prototype hanya
menjelaskan hasilnya saja tidak dengan deskripsisnya sebagai materidasar prototype [6].

8
 Tabel 2.1 Kajian Pustaka

NO Judul Tahun Kontribuasi Metode Limitasi Hasil

1. Pengembangan E- 2018 Menargetkan sebagai Pengumpulan data Sebagai gambaran Aplikasi e-presensi
Presensi berbasis pengembangan aplikasi pembuatan aplikasi masih perlu di
Android untuk e- presensi android android sebagai kembangkan.
Monitoring Kehadiran presensi.
Siswa Sekolah
Menengah di Kota
Pekalongan (Studi
Kasus: SMP Islam
Pekalongan)
2. Perancangan User 2020 Menjabarkan UI UX di User Centered Untuk mengetahui Metode UCD
Interface dan User rencanakan sebagai Design UI UX yang baik mampu
Experience pada pembuatan project dan menerapkan memberikan kesan
Placeplus menggunakan dengan menggunakan metode UCD. yang baik.
pendekatan User metode UCD
Centered Design

3. Analisis User Experience 2020 Sebagai analisis User Centered Berfokus pada Memiliki analisis
pada Pendekatan User pengembangan lebih Design pendekatan user stakeholder dengan
Centered Design dalam lanjut UI UX kepada stakeholder metode UCD
rancangan Aplikasi pengembangan metode
Placeplus UCD

9
4. PERANCANGAN 2020 Diagram alir pada User Centered Diagram alir UI UX yang
USER INTERFACE metode penelitian Design penelitian dan dirancang
DAN USER mengacu pada metode yang di menggunakan
EXPERIENCE MOBILE perancangan implementasikan metode SUS
APPLICATION menggunakan metode mendapat skor 74,
SIBENGKEL UNTUK UCD skor itu dinyatakan
MEMENUHI dapat diterimya oleh
KEBUTUHAN pengguna
PENGGUNA DENGAN
METODE USER-
CENTERED DESIGN
(UCD)

10
2.2. Dasar Teori

2.2.1. Presensi Sekolah

Pendidikan sekolah merupakan pendidikan yang direncanakan, dalam
proses pelaksanaannya terdapat banyak komponen yang berbeda-beda, salah
satunya adalah pergi ke sekolah (going to school). Kehadiran siswa di sekolah
sering disebut dengan absensi siswa, yang mengandung makna dua hal, yaitu soal
hadir dan tidak masuk sekolah. Daftar hadir berperan penting dalam melihat
seberapa disiplin anggota dalam melaksanakan aturan absensi dan kepulangan
yang telah ditentukan. Kehadiran dan ketidakhadiran siswa di sekolah dianggap
sebagai isu penting dalam pengelolaan siswa di sekolah, karena sangat erat
kaitannya dengan keberhasilan siswa. Selain itu, kehadiran dan ketidakhadiran
siswa di sekolah merupakan gambaran dari tatanan sekolah[13][14].
Yang dimaksud dengan kehadiran siswa (absensi), memiliki kriteria hadir,
sakit, izin, dan alpha adalah kehadiran dan partisipasi fisik dan mental siswa
dalam kegiatan sekolah selama jam sekolah yang sebenarnya. Ketidakhadiran
mempengaruhi pembelajaran dan prestasi, dan tingkat ketidakhadiran yang lebih
tinggi dikaitkan dengan penurunan kinerja yang lebih besar. Ada risiko
penggunaan narkoba, cuti sekolah dini dan pengangguran. Banyaknya remaja
yang tidak bersekolah menjadi anak nakal, menempuh jalur sekolah ke penjara
dan mengakhiri karir sekolahnya. Absen dapat secara serius mengganggu
perkembangan sosial-emosional remaja, dan banyak remaja yang mengalami
kesulitan bersekolah memiliki masalah kesehatan mental. Jelas bahwa intervensi
yang efektif untuk kehadiran di sekolah diperlukan. Intervensi diinformasikan
oleh penilaian, tetapi proses penilaian diperumit oleh sejumlah faktor [15][14].
Pendidikan tidak hanya penyerapan pengetahuan tetapi juga membutuhkan
partisipasi aktif fisik dan mental dalam proses ini, sehingga kehadiran fisik di
sekolah selalu penting untuk alasan apa pun, atau kecanggihan teknologi yang
digunakan. Pendidikan sejak lama dipandang sebagai kegiatan yang menuntut
partisipasi aktif siswa, bukan sekedar penyebaran informasi. Teknologi ini
sekarang dapat dimanfaatkan untuk memberi kemudahan pada sekolah dalam
melaksanakan proses belajar mengajar. Siswa yang masuk sekolah harus dicatat
dalam buku absensi oleh guru, dan siswa yang tidak hadir harus dicatat dalam

11
buku absensi. Dengan kata lain, kehadiran adalah daftar siswa yang hadir di
sekolah, dan kehadiran adalah daftar siswa yang tidak hadir [14][16].

2.2.2. Persona
Persona merupakan dokumentasi yang berisi penjelasan tentang
karakteristik user yang disatukan dengan tujuan, kebutuhan dan ketertarikannya
yang menjadi target user yang didapatkan dari hasil penelitian tentang user yang
sesuai target. Istilah Persona dalam perancangan interaksi secara praktis untuk
menghasilkan produk hightech. Karakter didapatkan dari hasil analisis pengguna
dan pemilihan persona ditentukan melalui interview atau survei. Dari semua
persona akan memberikan goals yang menjadi acuan dalam pembuatan kerangka
aplikasi [6].

2.2.3. Usability
Usability adalah seberapa nyaman pengguna saat menggunakan suatu
aplikasi atau sistem. Kegunaan yang baik berarti pengguna dapat menggunakan
aplikasi dengan cepat (efektif), mengambil kepuasan (satisfaction) dan
penggunaan aplikasi yang sederhana (efektif) sebagai ketersediaan produk [17].

2.2.4. Usability Testing

Uji usability dari aplikasi yang dirancang menggunakan metode System
Usability Scale (SUS). SUS adalah alat survei yang digunakan untuk mengukur
ketersediaan suatu sistem untuk melihat apakah sistem tersebut bermanfaat bagi
pengguna. Metode SUS menggunakan kuesioner 10 pertanyaan dengan
pengukuran respon menggunakan skala Likert.
Pernyataan ganjil (1,3,5,7,9) positif sedangkan pernyataan genap (2,
,6,8,10) negatif. Skala Likert bergerak dari kiri ke kanan dengan skor 1 (sangat
tidak setuju), 2 (tidak setuju), 3 (ragu-ragu), (setuju), 5 (sangat setuju). Cara
pemrosesan data SUS adalah sebagai berikut.
1. Hitung skor untuk setiap pernyataan ganjil (1,3,5,7,9) diperoleh dari
nilai jawaban yang dipilih kemudian kurangi 1.
2. Untuk setiap pernyataan genap skor awal = 5 Oleh karena itu,

12
 perhitungan skor untuk setiap pernyataan genap diperoleh skor awal 5
dikurangi nilai jawaban yang dipilih
3. Setiap skor soal dijumlahkan kemudian dikalikan 2,5 sehingga skor
SUS berkisar antara 0 sampai 100. Dihitung berdasarkan rumus
berikut:
Skor SUS = (((𝑸𝟏 − 𝟏) + (𝟓 − 𝑸𝟐) + (𝑸𝟑 − 𝟏) + (𝟓 −
𝑸𝟒) + (𝑸𝟓 − 𝟏) + (𝟓 − 𝑸𝟔) + (𝑸𝟕 − 𝟏) + (𝟓 − 𝑸𝟖) +
(𝑸𝟗 − 𝟏) + (𝟓 − 𝑸𝟏𝟎)) ∗ 𝟐. 𝟓)
Untuk interpretasi skor SUS yang diperoleh dapat dilakukan dengan
membandingkan rerata skor SUS dengan rentang dari skor akseptabilitas, dan
skala penilaian yang ditunjukkan pada Gambar 2.

Gambar 2.1 Rentang nilai skor rata rata SUS berdasarkan nilai adjective ratings,
acceptability scores, dan grading scales [17]
2.2.5. UI/UX
UI (antarmuka pengguna) / UX (pengalaman pengguna) menjelaskan
sekumpulan konsep, pedoman, dan alur kerja untuk berpikir kritis tentang desain
dan penggunaan produk yang interaktif [18]. Dengan antarmuka ini diharapkan
pengguna akan mudah memahami apa yang harus dilakukan dan menghindari
kebingungan saat menggunakan sistem. Desain antarmuka pengguna adalah
tentang menciptakan sarana komunikasi yang efektif antara manusia dan
komputer Gambar 2 merupakan gambar dari proses UI. [6].

13
 Gambar 2.2 Proses User Interface [6]

2.2.6 User centered design

UCD berfokus pada pengguna potensial tertentu, seperti jenis kelamin
atau usia. Proses perancangan kedua pendekatan UCD dilakukan dengan
beberapa cara, seperti wawancara atau konsultasi langsung dengan pengguna,
tentang kebutuhan pengguna terhadap sistem, atau selama fase kritis. waktu
tertentu dalam proses desain UI/UX [12]. UCD Merupakan proses iteratif yang
terdiri dari 4 langkah, yaitu Understand Context of Use (Memahami Kegunaan
Aplikasi), Specify User Requirements and organizational (merinci kebutuhan
pengguna), Design Solutions (menghasilkan solusi desain) dan Evaluate Against
Requirements (penilaian). Proses iteratif artinya langkah ini akan terus berjalan
secara iteratif jika hasil evaluasi solusi desain ditemukan masih belum memenuhi
harapan pengguna [11].
Hal-hal yang perlu diperhatikan dalam UCD:
a. Target pengembangan aplikasi adalah pengguna
b. Perancangan terstruktur atau terintegrasi
c. Proses pengujian dari awal hingga akhir melibatkan pengguna
d. Perancangan interaktif
Dalam metode UCD, ada 4 tahapan yang harus dilalui secara iterasi seperti
pada Gambar.

14
 Gambar 2.3 Tahapan User Centered Design [17]

2.2.7. Aplikasi Mobile Android

Pengembang aplikasi seluler, tidak terjadi pada perangkat seluler itu
sendiri. Tetapi ini dilakukan dalam lingkungan pengembangan khusus yang
dilakukan pada perangkat komputasi. Menguji aplikasi seluler di desktop
menyebabkan aplikasi mengubah platform, yaitu platform target adalah
ponsel,Personal Digital Assistant(PDA), atau perangkat lain yang berperilaku
sangat berbeda dari perangkat seluler komputasi seluler. Platform terbuka bagi
para pengembang untuk menciptakan aplikasi mereka sendiri yang digunakan
dalam berbagai macam piranti bergerak. Dengan sistem distribusi open sources
yang digunakan memungkinkan para pengembang untuk menciptakan berbagai
aplikasi menarik yang dapat dinikmati oleh penggunanya Aplikasi seluler
didefinisikan sebagai aplikasi komputer yang disebarkan atau dijalankan di
lingkungan perangkat seluler seperti ponsel, PDA, tablet, dan perangkat serupa
lainnya. Aplikasi ini dikembangkan dengan bahasa pemrograman tertentu
menggunakan perangkat komputasi. Aplikasi diuji dan diimpor ke perangkat
seluler yang diinginkan. Pengembang aplikasi dapat memulai pembuatan aplikasi
pada platform Android menggunakan bahasa pemrograman Java [14] [16].

2.2.8. Prototype
Prototyping adalah metode pengembangan perangkat lunak yang
merupakan model fisik dari cara kerja sistem dan digunakan sebagai versi awal
dari sistem. Dengan metode prototyping ini, dihasilkan sebuah sistem prototipe
sebagai perantara bagi pengembang dan pengguna agar dapat berinteraksi selama
kegiatan pengembangan sistem informasi dalam prototype tingkat medium

15
fidelity. Pebuatan prototyping maka desain lebih rinci. Agar proses prototyping
berhasil, perlu untuk menetapkan aturan pada tahap awal, yaitu bahwa
pengembang dan pengguna harus memahami bahwa prototype dibangun untuk
menentukan persyaratan awal. Medium fidelity memberikan detail seperti
perkiraan navigasi, fungsionalitas, konten, tata letak, dan tampilan. Prototype
akan dihilangkan atau ditambahkan bagian-bagiannya sehingga sesuai untuk
perencanaan dan analisis yang dilakukan oleh pengembang sampai pengujian
dilakukan secara mandiri [19][20].

2.2.9. Black Box Testing

Black box. Pengujian yang dilakukan hanya mengamati hasil proses yang
berjalan melalui data uji dan pengujian fungsionalitas perangkat lunak. Jadi,
seperti halnya kita melihat black box, kita hanya melihat tampilan luarnya saja,
tanpa mengetahui apa yang ada di balik black box tersebut. Pengujian ini hanya
dimaksudkan untuk memverifikasi bahwa program mendukung fungsi program
yang dimaksudkan tanpa mengetahui kode program yang digunakan. Perkiraan
jumlah data uji yang dapat dihitung dengan jumlah bidang input yang akan
diperiksa, aturan masuk yang harus dipenuhi. Data pengujian dapat dihitung untuk
jumlah bidang input yang akan diuji, aturan input yang harus dipenuhi, dan kasus
batas atas dan bawah yang harus dipenuhi. Pengujian black box, hanya dilihat dari
tampilan (interface), fungsionalitas, tidak mengetahui apa yang sebenarnya terjadi
dalam proses detailnya. Penyelidikan ini dimulai dengan mengidentifikasi
masalah yang ada dan kemudian dilakukan analisis. Perancangan sistem sebagai
solusi dari permasalahan yang ada. Teknik observasi dan wawancara digunakan
untuk menyelidiki dan mengidentifikasi masalah [21][22][23].

16
 BAB III

METODE PENELITIAN

Pada bab ini akan dibahas mengenai metodologi penelitian yang

dilakukan dalam Tugas Akhir ini.

3.1. Objek dan Subjek Penelitian

Berdasarkan latar belakang masalah yang telah di uraikan pada bab 1, yang
digunakan dalam penelitian ini adalah Sistem informasi guru SMPN 2
Karanglewas sebagai sampel, Sedangkan objek penelitianya diambil berdasarkan
batas masalah yang sudah di jelaskan pada bab 1, yaitu pembuatan aplikasi
sebagai evaluasi dan penelitian UI/UX menggunakan metode UCD.

3.2. Alat dan Bahan Penelitian

Pada pembuatan aplikasi berbasis android ini membutuhkan beberapa alat
pendukung antara lain :

3.2.1. Perangkat Keras

Pada pembuatan aplikasi berbasis android ini membutuhkan beberapa alat
pendukung antara lain :
a. Prosesor Intel Core i3-1115G4HQ CPU @ 3.00GHz.
b. Ram 8GB.
c. SSD 500GB.

3.2.2. Perangkat Lunak

Adapun perangkat lunak yang digunakan pada penelitian ini adalah sebagai
berikut :
a. Sistem Operasi Windows 10 64bit
b. Android Studio
c. Web Browser

17
3.3. Diagram Alir Penelitian

Gambar 3.1 diagram alir penelitan.

18
3.3.1 Permasalahan
Mengkaji permasalahan pendidikan di Indonesia sama seperti mengurai
benang kusut, sulit menemukan ujung pangkal permasalahannya. Meretas
Permasalahan Pendidikan di Indonesia. Permasalahan demi permasalahan
pendidikan di Indonesia dituai tiap tahunnya.Permasalahan pun muncul mulai dari
aras input, proses, sampai output. Ketiga aras ini sejatinya saling terkait satu sama
lain. Input mempengaruhi keberlanjutan dalam proses pembelajaran. Proses
pembelajaran juga mempengaruhi output. Hasilnya kemudian mengalir lebih jauh
ke tingkat pendidikan tinggi atau dunia kerja, di mana teori itu dipraktikkan. Di
antara masalah yang saya dapatkan dalam studi kasus, saya memiliki masalah
dengan presensi sekolah dalam studi kasus di SMPN 2 Karanglewas [24].
3.3.2 Pengumpulan Data
Pada tahap pendahuluan berisi penetapan latar belakang masalah,
perumusan masalah, batasan masalah, penetapan tujuan penelitian dan manfaat
penelitian, wawancara dilakukan untuk memahami dan mengidentifikasi konteks
pengguna yang mewakili kepribadian pengguna di mana pertanyaan disiapkan
untuk mencapai tujuan tertentu. Dalam penelitian ini dilakukan wawancara
dilakukan mendatangi salah satu guru SMPN 2 Karanglewas [6].
3.3.3 Wawancara
Cara mendapatkan data melalui wawancara pemangku kepentingan atau
tanya jawab langsung. Pengguna dalam periode waktu tertentu selama proses
desain UI/UX dengan mewawancarai atau berbicara langsung kepada mereka
tentang apa yang mereka butuhkan untuk sistem mereka, atau pada tahap yang
lebih ekstrem. Wawancara dengan salah satu guru SMPN 2 Karanglewas. Oleh
karena itu, SMPN 2 Karanglewas saat ini belum menggunakan aplikasi untuk
mencatat kehadiran siswa, dan karena proses manual yang rusak dan ketinggalan
zaman, bolos sekolah dan memanipulasi data kehadiran, dapat disimpulkan bahwa
masih ada siswa. Oleh karena itu, diperlukan suatu aplikasi yang dapat
memberikan informasi tentang kehadiran siswa di sekolah, yang dapat diakses
tidak hanya oleh pihak sekolah tetapi juga oleh orang tua siswa, sehingga orang
tua dapat memantau kehadiran anaknya di sekolah[25][12][3].

19
3.3.4 Rangkuman Jawaban
Untuk meringkas jawaban, jawaban dari wawancara pemangku kepentingan,
atau jawaban lisan dari guru, sangat panjang dan muncul kata demi kata,
meminimalkan masalah. Kemudian menggunakan hasil wawancara dengan calon
pengguna untuk merancang persona pengguna. Pemangku kepentingan ini
dipersilakan ketika penulis melaporkan aplikasi kehadiran, yang dapat
memfasilitasi koordinasi antara pengelola dan pemilik terkait pengungkapan
berbagai data selama periode waktu tertentu, bahkan saya menyarankan. Dapatkan
outputnya. Rekap kehadiran dapat rusak, usang, atau hilang [26][12].
3.3.5 Plan the human centered ptoces
Selama proses ini, perlu mengadakan diskusi dengan orang-orang yang
akan mengerjakan proyek, untuk mendapatkan komitmen bahwa proses
pengembangan proyek berpusat pengguna atau user, yang berarti bahwa proyek
akan memiliki waktu terkait pengguna atau pengguna. dan tugas pada awal dan
akhir proses atau sesuai kebutuhan. Dan orang-orang proyek juga harus sangat
familiar dengan pendekatan User-Centered Design (UCD) ini dengan mempelajari
dokumentasinya [27].
3.3.6 Specify the contect of use
Dasar dari setiap proses UCD adalah memahami pengguna produk yang
dituju dan lingkungan penggunaannya. Dengan demikian, proses UCD yang khas
dimulai dengan identifikasi pengguna, termasuk semua pemangku kepentingan,
atau pengguna tidak langsung, yang semuanya terkait dengan sistem. Juga pada
tahap ini kami menentukan karakteristik pengguna dan grup pengguna,
karakteristik yang tergantung pada definisi, tingkat pendidikan, usia, goals atau
harapan tercapainya aplikasi tersebut. Needs atau kebutuhan aplikasi tersebut [27].
3.3.7 Persona
Persona bertujuan untuk mengetahui calon pengguna yang akan
mendapatkan permintaan pengguna menggunakan aplikasi presensi. konteks
pengguna dipahami melalui identifikasi persona yang diperoleh dari mengamati
data pengguna. Dalam analisis task use adalah tugas mendasarkan kebutuhan yang
di inginkan pengguna yang didapat output untuk persona menyelesaikan goals.
[28][6]. Tabel di bawah ini menunjukkan karakteristik pengguna target. Ada

20
beberapa informasi yang akan digunakan pada langkah selanjutnya. Informasi ini
diambil dari hasil wawancara sebelumnya[8][6].
Tabel 3.1 Kriteria Calon Pengguna[8]
Demography • Guru
• Laki-laki atau perempuan
Geography Kawasan SMPN 2 Karanglewas
Psychography Pengguan android dengan minimal
versi 4.4 (Kitkat) dengan API level 19
Behavior • Mempermudah presensi siswa
• Wali siswa dapat monitoring
kehadiran

3.3.8 Specify user and organizational requirement

Dalam proses ini, Specify the Context of Use intinya adalah memahami
konteks pengguna dengan mengidentifikasi karakter yang diperoleh dari
mengamati data pengguna. Persona dimaksudkan untuk menampilkan tipe
pengguna yang akan dideskripsikan dalam berbagai bentuk/teknologi, seperti
cerita, gambar atau diagram, dll.yang memenuhi kebutuhan pengguna [6][27].
3.3.9 Unified Modeling Language
Unified Modeling Language (UML) adalah "bahasa" yang telah menjadi
standar industri untuk memvisualisasikan, merancang, dan mendokumentasikan
sistem perangkat lunak. UML menyediakan standar untuk merancang model
sistem yang diwakili oleh empat diagram, yaitu: Use Case, Sequence Diagram,
Activity Diagram, dan Class Diagram[29].
3.3.10 Use case, activity diagram, class diagram
Use case diagram digunakan untuk memodelkan proses bisnis dari sudut
pandang pengguna sistem. Aktor mewakili orang yang akan mengoperasikan atau
berinteraksi dengan aplikasi dengan menggunakan pendekatan (UCD).
Activity diagram digunakan untuk memodelkan perilaku use case dan objek
dalam sistem aplikasi menggunakan pendekatan (UCD).
Class diagram adalah diagram yang selalu ada dalam pemodelan sistem
berorientasi objek. Diagram kelas yang menunjukkan hubungan antar Class dalam

21
dengan pendekatan (UCD) yang sedang dibangun dan bagaimana mereka bekerja
sama untuk mencapai tujuan[30].
3.3.11 Product design solution
Pada langkah ini, desain pertama dibuat. Sketsa, model, simulasi, dan
bentuk prototipe lainnya digunakan untuk membuat ide terlihat dan memfasilitasi
komunikasi yang efektif dengan pengguna. Ini menghindari kemungkinan
kebutuhan dan biaya tinggi terkait untuk pengerjaan ulang produk pada tahap
siklus hidup berikutnya. Ketika solusi desain disajikan kepada pengguna, mereka
juga harus diberi wewenang untuk melakukan tugas. Umpan balik pengguna yang
dikumpulkan harus dimasukkan ke dalam peningkatan solusi desain. Itu harus
diulang terus menerus sampai tujuan desain tercapai [27].
3.3.12 Wireframe dan UI
Pada tahap ini desain dibuat menggunakan Wireframe dan UI. Wireframe
dapat dipahami sebagai sebuah framework desain antarmuka aplikasi dengan
tujuan memberikan tampilan pertama dari bentuk desain antarmuka aplikasi yang
akan dibuat. Secara umum, gambar rangka selalu merupakan desain dengan low-
fidelity tanpa elemen estetika apa pun seperti tipografi, warna, foto, atau karya
seni. Contoh elemen elemen yang dapat ditata dalam wireframe adalah banner,
header, body, footer, form, button[8].
3.3.13 Evaluate design againt user requirement
Dasar dari setiap proses UCD adalah memahami pengguna yang dituju
dari produk dan lingkungan di mana mereka digunakan. Dengan demikian, proses
UCD yang khas dimulai dengan identifikasi pengguna, termasuk semua
pemangku kepentingan, atau pengguna tidak langsung, yang semuanya terkait
dengan sistem. Juga pada tahap ini kami menentukan karakteristik pengguna dan
grup pengguna, karakteristik yang mungkin, tergantung pada definisi,
keterampilan, tingkat pendidikan, usia, dll[27].
3.3.14 Hasil SUS
Tahap ini akan dilakukan dengan melibatkan pengguna dari proses sampai
akhir. Evaluasi untuk memastikan apakah aplikasi yang dirancang dan dibangun
sesuai dengan preferensi dan kebutuhan permintaan pengguna atau tidak [11].
Dalam pengujian ini menggunakan test case berdasarkan desain yang ada pada

22
aplikasi terdapat 10 pertanyaan yang akan dijawab oleh responden. Pertanyaan
System Usability Scale SUS akan diberikan kepada responden untuk mengukur
nilai kepuasan pengguna. Pertanyaan yang digunakan mengacu pada standar
usability kuesioner yaitu SUS[22][6].
Tabel 3.2 Pertanyaan SUS [6]
No. Pertanyaan Skala
1 2 3 4 5
1. Saya pikir saya akan sering menggunakan
aplikasi ini.
2. Saya menukan fitur yang komplek untuk
digunakan.
3. Saya pikir tampilan aplikasi ini mudah
digunakan.
4. Saya pikir saya butuh bantuan orang lain
untuk bisa menggunakan aplikasi ini.
5. Saya pikir fitur yang pada tampilan aplikasi
ini sudah terintegrasi dengan baik
6. Saya pikir pada tampilan aplikasi terdapat
banyak hal yang tidak konsisten
7. Menurut saya, guru dapat mempelajari cara
menggunakan tampilan aplikasi ini dengan
cepat
8. Menurut saya tampilan aplikasi ini sangat
sulit untuk pemakaian
9. Saya akan merasa percaya diri menggunakan
aplikasi ini
10. Saya perlu belajar sebelum saya bisa
menggunakan aplikasi ini

23
3.3.15 User Centered Design
Dalam metode UCD ini, ada 4 langkah yang dilakukan secara iterasi [6]:

Gambar 3.2 tahapan UCD [17]

1. Specify the context of use adalah proses pembuatan dari identifikasi
target pengguna.
2. Specify user and organizational requirement adalah proses dari
perancangan UML.
3. Product design solution adalah proses perancangan antar muka sampai
wireframe dan UI.
4. Evaluate design againt user requirement adalah proses dari hasil SUS.
3.3.16 Prototype MVP
Pada tahap ini, pengujian dijalankan pada prototipe Minimun Viable
Product yang sebelumnya dirancang dan dijalankan secara mandiri oleh user. Hal
ini dilakukan untuk membuktikan bahwa Minimun Viable Product (MVP) yang
dirancang sudah sesuai dan dapat dijalankan dengan baik dalam bentuk APK
dengan membangun Android Studio sebelum mengujinya dengan pengguna.
Tahapan pengujiannya adalah sebagai berikut:
1. Rancang daftar skenario tugas untuk menguji fungsionalitas setiap
fitur.
2. Selain itu, berdasarkan hasil prototipe yang dibuat, semua fitur diuji
satu per satu secara individual, terlepas dari apakah fitur tersebut
sesuai dengan yang diharapkan.
3. Perhatikan fitur yang diperlukan untuk setiap pengujian fitur dari
setiap fitur, dan jumlah klik yang diperlukan untuk menyelesaikan
tugas untuk setiap fitur. Penilaian oleh fungsi tes dijalankan secara
individual untuk setiap tugas [26].

24
3.3.17 Analis Hasil
Pengujian sistem merupakan hal yang sangat penting yang bertujuan untuk
menemukan bug atau eror pada perangkat lunak yang diuji, dengan menggunakan
metode black box dan tes usability agar hasil tes sesuai dengan tujuan[22].
Tujuan evaluasi yang dilakukan secara berulang adalah untuk mendapatkan
umpan balik secara terus menerus terhadap desain yang telah dibuat sebelumnya,
siklus ini dilakukan secara iteratif sampai memperoleh desain UI/UX yang paling
sesuai dengan harapan calon pengguna. Proses tersebut sesuai dengan pendekatan
UCD yang sangat berfokus pada pengguna [12]. Dibutuhkan pengguna
berdasarkan kepribadian dan hasil wawancara. Needs pengguna berasal dari
permintaan pengguna di persona [6].
3.3.18 Black Box
Dalam tahap pengujian Black Box. Pengujian sistem sangat penting karena
bertujuan untuk menemukan bug dan kekurangan pada perangkat lunak yang
diuji. Data pengujian dapat dihitung dengan jumlah bidang input data yang akan
diuji, aturan input yang harus dipenuhi, dan instance batas atas dan bawah yang
harus dipenuhi. Anda juga dapat menggunakan metode pengujian black box untuk
meningkatkan sistem dan meminimalkan kesalahan dan eror[22][31]. Langkah-
langkah yang dilakukan selama pengujian dan implementasi adalah sebagai
berikut:
1. Pengguna menginstal aplikasi pada perangkat Android masing-masing
menggunakan yang dimuat dengan perangkat user melaukan lunak aksi
dan strategi.
2. Pengguna masuk ke aplikasi Android pada saat yang sama
menggunakan pengguna dan kata sandi yang ditentukan untuk
menentukan kemampuan sistem untuk merespons sejumlah besar
pengguna pada saat yang bersamaan.
3. Setiap pengguna menjalankan tes Black Box, memperhatikan
kemampuan aplikasi aksi dan strategi.
4. Setiap pengguna akan melakukan uji black box fitur backend dengan
mengolah data pengguna, langsung terkoneksi dengan koneksi internet.
5. Kesimpulan ditarik dengan mengisi data kuesioner pada skala

25
 pengukuran dan mendapatkan jawaban yang tetap[22].
3.3.19 Aplikasi Utama
Aplikasi Presensi: Ricek, dibangun menggunakan bahasa pemrograman java
sebagai prototype MVP dan juga menggunakan database. Software yang digunakan untuk
membangun aplikasi ini menggunakan Android Studio.
3.3.20 Saran dan Kesimpulan
Pada tahap akhir ini dibuat kesimpulan dan rekomendasi berdasarkan hasil
implementasi dan pengujian bab sebelumnya, maka dapat disimpulkan setelah
melalui beberapa tahapan yaitu tahap perancangan sistem, implementasi dan
pengujian. Kesimpulan diperoleh dari analisis dan pengujian sistem yang
dibangun. Sementara itu, ada saran untuk penelitian dan pengembangan lebih
lanjut[30].

26
 BAB IV
HASIL DAN PEMBAHASAN
4.1 Pengumpulan Data
Pada tahap ini proses awal adalah pengumpulan data peneliti melakukan
wawancara pada salah satu yang mewakili guru untuk mendapatkan permasalah
dalam presensi dan menawarkan aplikasi tentang presensi dan merekap data
sebagai solusi cara ini dalam UCD, dan prose selanjutnya membuat persetuan izin
kepada kepala sekolah dengan menemui bu Setiyowati menggukan surat izin dari
kampus ITTP pada tanggal 10 Mei 2022 serta menyebarkan kuisioner survei
kepada semua guru. Untuk proses seterusnya pengumpulan data perancangan saya
berkomunikasi dengan salah satu guru B.Indonesia dengan menemui dan chat
Whatsapp sebagai perwakilan semua guru.
Dengan pendekatan kepada user adalah salah satu metode UCD yang
filosofi desain yang menempatkan pengguna sebagai pusat dari proses
pengembangan sistem. Kesulitan pengguna akhir dalam membaca dan
menerjemahkan dokumen selama setiap proses pengembangan dapat diselesaikan
dengan menggunakan pendekatan UCD [29].

4.2 Plant the human centered proses

Pada tahap ini adalah awal proses penulis menentukan rencana dan
komitmen untuk membangun proyek aplikasi yaitu ReCek yang berpusat berpusat
kepada user, pada tahapan ini penulis mampu memahami dan mereview betul
tentang metode UCD dengan melakukan studi literatur terkait aplikasi berbasis
android dan pernajngan aplikasi desain UI/UX menggunakan UCD, disertai
dengan tinjauan pustaka dilakukan untuk mendukung penulis memperpecah
masalah yang dilakukan.
Penulis menghasilkan rencana dan studi literatur sebagai uraian atau
deskripsi tentang metode UCD melaui jurnal: Pengembangan E-Presensi berbasis
Android untuk Monitoring Kehadiran Siswa Sekolah Menengah di Kota
Pekalongan (Studi Kasus: SMP Islam Pekalongan), Perancangan User Interface
dan User Experience pada Placeplus menggunakan pendekatan User Centered
Design, Analisis User Experience pada Pendekatan User Centered Design dalam

27
rancangan Aplikasi Placeplus, PERANCANGAN USER INTERFACE DAN
USER EXPERIENCE MOBILE APPLICATION SIBENGKEL UNTUK
MEMENUHI KEBUTUHAN PENGGUNA DENGAN METODE USER-
CENTERED DESIGN (UCD). Rencana runtutan pelaksaan sisusun melaui
diagram alir yang sudah tertera pada BAB III sebagai pelaksaan rencana metode
UCD.
4.3 Specify the context of use
Pada analisi kebutuhan dengan metode UCD yaitu Specify the context of
use, merupakan tahap dilakukanya indentifikasi menentuakan siapa dan
karakteristik user system serta lingkungan system beroperasi, dengan
mendeskripsikan siapa user tersebut kedalam tabel berikut.
Tabel 4.1 aktor dan deskripsi
Aktor Deskripsi
Guru Guru merupakan pengguna aplikasi
sebagai prioritas penggunaan untuk
presensi siswa hingga dapat untuk
absensi dan rekap absensi
Wali siswa Wali siswa merupakan pengguna
aplikasi sebagai opsional untuk
melihat kehadiran siswa

28
4.4 Persona
Pada output specify the context of use dengan pembuatan persona dan
sketsa deskriptif proses presensi ReCek melalui aplikasi yang dirancang. Unsur
persona didasarkan pada kebutuhan aplikasi presensi ReCek berdasarkan hasil
kuisioner google form pada tahap analisis. Karakter dapat dilihat pada gambar 4.1
dan gambar 4.2 [32].

Gambar 4.1 Persona user 1

29
 Gambar 4.2 persona user 2
4.5 Specify the user and organization requirement
Tahap selanjutnya dilakukan pada proses Specify the user and
organization requirement yaitu mengumpulkan data untuk mengetahui kebutuhan
dari calon pengguna. Pertanyaan dan hasil wawancara dan bukti foto pertemuan
pada lampiran 1. Selanjutnya sudah pengumpulan data melalui wawancara pada
salah satu perwakilan guru didapat hasil kebutuhan fungsional dan non fungsional
sebagai berikut:

30
 a. Kebutuhan fungsional
1. Tampilan sistem dapat absensi digital untuk membantu kemudahan
presensi.
2. Tampilan sistem dilakukan dengan perangkat android.
3. Tampilan sistem bisa melakukan presensi pada saat hari sekarang
dan rekap data pada hari yang sudah di lalui absensi untuk
mengubah data kehadiran preseni
b. Kebutuhan non fungsional
1. Dengan tampilan yang mudah dipahami.
2. Dengan tampilan yang minimalis.
3. Menjadikan presensi berbasis android dengan tampilan mudah
digunakan
Sesudah pengumpulan data sebagai analisi kebutuhan pencapaian sistem
masuk ketahap perancangan ke dalam diagram use case, activity diagram, dan
class diagram dengan menggunakan UML.
1. Use case

Gambar 4.3 use case

31
2. Activity diagram
1. Guru
1) Activity diagram Log in

Gambar 4.4 Activity diagram Log in

2) Activity diagram menu

Gambar 4.5 Activity diagram menu

32
3) Activity diagram presensi

Gambar 4.6 Activity diagram presensi

4) Activity diagram presensi kelas

Gambar 4.7 Activity diagram presensi kelas

33
5) Activity diagram rekap presensi

Gambar 4.8 Activity diagram rekap presensi

6) Activity diagram rekap presensi kelas

Gambar 4.9 Activity diagram rekap presensi kelas

34
2. Wali
1) Activity diagram Log in

Gambar 4.10 Activity diagram Log in

2) Activity diagram melihat kehadiran siswa

Gambar 4.11 Activity diagram melihat kehadiran siswa

35
 3. Class diagram

Gambar 4.12 Class diagram

4.6 Product design solution

Pada tahap product design solution menggunakan wireframe membuat
struktur konten dan alur yang nantinya akan membuat pengguna lebih mudah
dalam menyelesaikan goals yang mereka tuju. Dalam tahap ini akan dilakukan
pembuatan wireframing.
Pada tahap ini dibuatlah wireframing berdasarkan analisis kebutuhan, adapun fitur
Sistem presensi ReCek sebagai berikut :
1. Wireframing Guru
a. Splashscreen, adalah layar awal yang dibuka sebelum aplikasi di
jalankan.
b. Log in, berguna untuk pengguna akses sesuai dengan akun guru
masing-masing.
c. Beranda home, halaman setelah login berisi informasi login dan fitur
utama yaitu presensi dan rekap data presensi.
d. Presensi, digunakan untuk memilih kelas pada hari saat ini juga.
e. Presensi kelas, adalah seteleh memilih kelas, terdapat nama siswa
pada kelas tersebut presensi terdapat masuk, izin, sakit dan alpha
untuk di ceklis salah satu.
f. Rekap presensi, digunakan untuk mengolah data pada hari-hari
sebelumnya, tampilanawal memilih tanggal dan kelas yang di
tentukan.

36
g. Rekap presensi kelas, sama seperti pada presensi kelas perbedaan
pada hari sebelumnya yang di tentukan.

Gambar 4.13 wireframing splashscreen, login, home guru

Gambar 4.14 wireframing pilih kelas, presensi kelas

37
 Gambar 4.15 wireframing rekap presensi, edit rekap presensi

2. Wireframing wali siswa

a. Splashscreen, adalah layar awal yang dibuka sebelum aplikasi di
jalankan.
b. Login, berguna untuk pengguna akses sesuai dengan akun wali siswa
masing-masing.
c. Kehadiran anak, terdapat kalender dimana setiap tanggal yang
berwarna menerangkan presensi siswa.

Gambar 4.16 wireframing spashscreen, Log in, home wali siswa

38
1. UI Guru

Gambar 4.17 UI splashscreen, login, home guru

Gambar 4.18 UI pilih kelas, presensi kelas

39
 Gambar 4.19 UI rekap presensi, edit rekap presensi
2. UI Wali

Gambar 4.20 UI spashscreen, Log in, home wali siswa

40
4.7 Evaluate design SUS
Kuisioner SUS akan diisi melaui kuisioner menggunakan google
form yang di isi oleh guru dan wali siswa SMPN 2 Karanglewas dengan
hasil seperti berikut.
1. SUS guru
Tabel 4.2 Pengisian kuisioner SUS guru
No Responsen Usia Jenis Kelamin Skor Asli
Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 Q10
1 Responden 1 53 Perempuan 2 2 3 3 3 3 4 2 4 3
2 Responden 2 51 Laki-laki 4 4 4 3 4 2 4 1 5 5
3 Responden 3 53 Perempuan 3 5 3 5 3 1 5 5 3 5
4 Responden 4 42 Laki-laki 3 3 3 3 3 3 3 3 3 3
5 Responden 5 49 Perempuan 5 5 3 3 4 2 3 3 3 5
6 Responden 6 58 Perempuan 5 1 5 1 5 1 5 1 5 1
7 Responden 7 33 Laki-laki 4 3 4 3 4 3 4 4 3 4
8 Responden 8 43 Perempuan 4 2 4 1 4 1 5 2 5 3
9 Responden 9 27 Laki-laki 5 5 5 2 5 1 5 1 5 2
10 Responden 10 51 Perempuan 5 1 5 1 5 1 5 1 5 1
11 Responden 11 41 Perempuan 5 1 5 1 5 1 5 1 5 1
12 Responden 12 59 Perempuan 5 2 5 2 5 1 5 1 5 2
13 Responden 13 43 Perempuan 2 2 3 3 3 3 4 2 4 2
14 Responden 14 55 Laki-laki 3 2 5 2 5 1 5 1 5 3
15 Responden 15 59 Laki-laki 5 1 5 2 5 1 5 1 5 3
16 Responden 16 50 Perempuan 4 2 5 3 5 1 5 2 5 2
17 Responden 17 55 Perempuan 5 2 5 1 5 2 5 1 5 3
18 Responden 18 49 Perempuan 4 1 5 2 5 1 5 1 5 3
19 Responden 19 23 Perempuan 5 1 5 1 5 1 5 1 5 1
20 Responden 20 46 Laki-laki 5 1 5 2 5 1 5 1 5 3
21 Responden 21 49 Perempuan 4 1 5 2 5 1 4 2 5 1
22 Responden 22 42 Perempuan 5 1 5 3 1 4 2 1 5 1
23 Responden 23 57 Perempuan 4 1 5 2 5 1 5 1 5 3
24 Responden 24 31 Laki-laki 5 1 5 1 5 1 5 1 5 1
25 Responden 25 24 Perempuan 4 4 4 1 4 3 4 3 5 5
26 Responden 26 27 Laki-laki 5 5 5 1 3 1 5 1 5 1

Tabel 4.3 Hasil penghitungan SUS guru

No Skor Hasil Hitung Jumlah Nilai
Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 Q10 (Jumlah x 2.5)
1 1 3 2 2 2 2 3 3 3 1 20 50
2 3 1 3 2 3 3 3 4 4 0 26 65
3 2 1 2 0 2 4 4 0 2 0 17 43

41
 4 2 2 2 2 2 2 2 2 2 2 20 50
5 4 0 2 0 2 2 2 2 2 2 18 45
6 4 4 4 4 4 4 4 4 4 4 40 100
7 3 2 3 2 3 2 3 1 2 1 35 88
8 3 3 3 4 3 4 4 3 4 2 33 83
9 4 0 4 1 4 4 4 4 4 3 32 80
10 4 4 4 4 4 4 4 4 4 4 40 100
11 4 4 4 4 4 4 4 4 4 4 40 100
12 4 3 4 3 4 4 4 4 4 3 37 93
13 4 4 4 3 3 4 4 3 4 3 36 90
14 2 3 4 3 4 4 4 4 4 2 34 90
15 4 4 4 3 4 4 4 4 4 2 37 100
16 3 3 4 2 4 4 4 3 4 3 34 92.5
17 4 3 4 4 4 3 4 4 4 2 36 90
18 3 4 4 3 4 4 4 4 4 2 36 70
19 4 4 4 4 4 4 4 4 4 4 40 90
20 4 4 4 3 4 4 4 4 4 2 37 100
21 3 4 4 3 4 4 3 3 4 4 36 62.5
22 4 4 4 2 0 1 1 4 4 4 28 85
23 3 4 4 3 4 4 4 4 4 2 36 90
24 4 4 4 4 4 4 4 4 4 4 40 85
25 3 1 3 4 3 2 3 2 4 0 25 92.5
26 4 0 4 4 2 4 4 4 4 4 34 85
Skor Rata-rata (Hasil-Akhir) 82

Berdasarkan hasil skoring SUS guru dengan menggunakan mean nilai

Likert didapatkan hasil akhir skor mean 82 (garis merah). Berdasarkan SUS,
rentang nilai usability dapat dilihat pada Gambar.

Gambar 4.21 Hasil SUS guru [17]

2. SUS wali siswa

Kuisioner SUS akan diisi melaui kuisioner menggunakan google
form yang di isi oleh wali siswa SMPN 2 Karanglewas dengan hasil
seperti berikut.
Tabel 4.4 Pengisian kuisioner SUS wali siswa
No Responsen Usia Jenis Kelamin Skor Asli
Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 Q10
1 Responden 1 42 Perempuan 3 3 3 3 3 3 4 3 4 4
2 Responden 2 35 Perempuan 3 4 5 2 5 2 5 1 4 2

42
3 Responden 3 30 Perempuan 3 3 3 3 3 3 3 3 3 3
4 Renponden 4 50 Perempuan 5 1 5 1 5 1 5 1 5 1
5 Responden 5 35 Perempuan 5 1 5 1 5 1 5 1 5 1
6 Responden 6 45 Perempuan 1 2 3 4 5 4 5 4 5 5
7 Responden 7 41 Perempuan 1 2 1 3 1 4 5 4 2 5
8 Responden 8 48 Laki - laki 5 1 5 1 5 1 5 1 5 1
9 Responden 9 38 Perempuan 5 1 5 1 5 1 5 1 5 1
10 Responden 10 40 Perempuan 5 1 5 1 5 1 5 1 5 1
11 Renponden 11 38 Perempuan 5 1 5 1 5 1 5 1 5 1
12 Responden 12 39 Laki - laki 5 1 5 1 5 1 5 1 5 1
13 Responden 13 47 Perempuan 5 1 5 1 5 1 5 1 5 1
14 Responden 14 58 Laki - laki 5 1 5 1 5 1 5 1 5 1
15 Responden 15 51 Laki - laki 5 1 5 1 5 1 5 1 5 1
16 Responden 16 39 Perempuan 5 1 5 1 5 1 5 1 5 1
17 Renponden 17 50 Perempuan 5 1 5 1 5 1 5 1 5 1
18 Responden 18 41 Perempuan 5 1 5 1 5 1 5 1 5 1
19 Responden 19 42 Perempuan 5 1 5 1 5 1 5 1 5 1

Tabel 4.5 Hasil penghitungan SUS wali siswa

No Skor Hasil Hitung Jumlah Nilai
Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 Q10 (Jumlah x 2.5)
1 2 2 2 2 2 2 3 2 3 1 21 53
2 2 1 4 3 2 2 4 4 3 2 27 68
3 2 2 2 2 2 2 2 2 2 2 20 50
4 4 4 4 4 4 4 4 4 4 4 40 100
5 4 4 4 4 4 4 4 4 4 4 40 100
6 0 3 2 1 4 1 4 1 4 0 20 50
7 0 3 0 2 0 1 4 1 1 0 12 30
8 4 4 4 4 4 4 4 4 4 4 40 100
9 4 4 4 4 4 4 4 4 4 4 40 100
10 4 4 4 4 4 4 4 4 4 4 40 100
11 4 4 4 4 4 4 4 4 4 4 40 100
12 4 4 4 4 4 4 4 4 4 4 40 100
13 4 4 4 4 4 4 4 4 4 4 40 100
14 4 4 4 4 4 4 4 4 4 4 40 100
15 4 4 4 4 4 4 4 4 4 4 40 100
16 4 4 4 4 4 4 4 4 4 4 40 100
17 4 4 4 4 4 4 4 4 4 4 40 100
18 4 4 4 4 4 4 4 4 4 4 40 100
19 4 4 4 4 4 4 4 4 4 4 40 100
Skor Rata-rata (Hasil-Akhir) 87

Berdasarkan hasil skoring SUS wali siswa dengan menggunakan mean

nilai Likert didapatkan hasil akhir skor mean 87 (garis merah). Berdasarkan SUS,
rentang nilai usability dapat dilihat pada Gambar.

43
 Gambar 4.22 Hasil SUS Wali siswa [17]
4.8 Analisis Hasil
Analisis hasil dari kegiatan penlitian awal yaitu pengumpulan data
wawancara studi kasus samapai menggunakan UI/UX melakukan kegiatan
metode menggunakan User Centered Design pengujian menggunakan
black box testing memudahkan pengguna dapat jalanya setiap arahan
desain tampa di ajarkaan, kesimpulanya perancangan UI/UX aplikasi
presensi menggunakan metode User Centered Design user dapat
mendapatkan timbal bali gambaran langsung sebagai gambaran system
yang dapat membantu penggunanya, dari semua dari rumusan masalah
sudah menjawab rumusan masalah yang ada pada penelitian
Analisisnya mengacu pada tahap ini untuk mencari kesimpulan
dari hasil kuisioner yang di dapat, hingga apa yang harus di tekankan
karakteristik. Permasalahan dari presensi manual yang masih memakai
kertas, guru dan wali dari penulis memberi gambaran agar ada apliaksi
yang dapat diguanakn di android secara praktis. Kebutuhan analisis yang
telah di ketahui pada hasil kuisioner user guru pertanyaan kuisioner pada
urut genap mendapatkan nilai yang tinggi pada Q9 dari hasil SUS
responden mendapatkan nilai tertinggi saat di jumlahkan dari seluruh
responden pada pertanyaan “Saya pikir fitur yang pada tampilan aplikasi
ini sudah terintegrasi dengan baik ?”. dan wali siswa pertanyaan
kuisioner pada urut ganjil mendapatkan nilai mendapatkan hasil penilaian
SUS Acceptable(Dapat diterima), pada Q7 mendapatkan nilai tertinggi
saat di jumlahkan dari seluruh responden pada pertanyaan “Menurut saya,
guru dapat mempelajari cara menggunakan tampilan aplikasi ini dengan
cepat ?”. mendapatkan hasil penilaian SUS Acceptable(Dapat diterima),

44
 Hasil prototype MVP yang telah di buat yang dilaksanakan dengan
metode User Centered Design yang menggunakan penguji kuisioner
evaluasi SUS(System Usability Scale) dapat dilihat skor yang di dapat dari
responden guru mencapai 82 diartikan mendapat rating B sebagai grade
excellent(bagus sekali) status Acceptable(Dapat diterima), responden wali
siswa mencapai 87 diartikan mendapatkan rating B sebagai grade
excellent(bagus sekali) status Acceptable(Dapat diterima).
Dilakukan dengan uji coba secara langsung bagaimana prototype
bisa dijalankan menggukanan pengujian black box dengan hasil sebagai
berikut.
Tabel 4.6 Hasil Pengujian [22]
No Nama Output yang di Validasi Skor %
harapkan Y T
1. Login Guru dapat Y 100
guru login ke
halaman
presensi siswa
2. Guru ke Guru dapat Y 100
halaman memilih
home presensi dan
rekap presensi
3. Guru Guru dapat Y 100
memilih memilih kelas
presensi dalam presensi

4. Guru Guru Y 100

dapat melakukan
memilih presensi siswa
kelas
5. Guru Guru memilih Y 100
memilih tanggal dan
rekap kelas dalam

45
 presensi presensi

6. Guru Guru merekap Y 100

dapat data presensi
memilih siswa
kelas
untuk
rekap
7. Guru Guru login Y 100
simulasi wali siswa
untuk wali melihat
melihat kehadiran
kehadiran siswa sesui
siswa tanggal dan
bulan
8. Wali Guru dapat Y 100
siswa Log login ke
In halaman
presensi siswa
9. Wali Wali siswa Y 100
siswa dapat melihat
dapat ke kehadiran
halaman siswa
kehadiran
siswa

Hasil data black box untuk kepuasan pengujian testing pada aplikasi
menghasilkan semua fitur pada prototype berjalan dengan baik.

46
 BAB V
KESIMPULAN DAN SARAN
5.1 Kesimpulan
Aplikasi prototype absensi presensi siswa telah berhasil dirancang dengan
mengikuti langkah-langkah desain UCD untuk membuat aplikasi yang mudah
digunakan. Aplikasi telah dibuat yang dapat presensi siswa dan monitoring siswa
untuk membantu SMP N 2 KARANGLEWAS presensi siswa dengan benar. Hasil
uji usability dengan skala usability sistem, aplikasi ReCek SMPN 2
KARANGLEWAS berada pada rentang yang dapat diterima, untuk skala rating
pada user guru dengan hasil B dan pada user wali siswa hasil B, rating dihitung
pada user guru dengan hasil bagus sekali sebesar 82 dan pada user wali siswa
dengan hasilb bagus sekali sebesar 87. Dengan demikian, prototype aplikasi siswa
telah berhasil menetapkan tingkat ketersediaan yang baik pada user guru dan
bagus sekali pada user wali siswa. Hasil pengujian black box menunjukkan bahwa
semua kebutuhan fungsional dari sistem yang dibangun telah terpenuhi dan
berfungsi dengan baik.
5.2 Saran
Saran untuk penelitian selanjutnya adalah melakukan pengembangan
aplikasi lebih dari prototype dengan metode UCD mendapatkan kegunaan guru
dan wali siswa. Pada penelitian saat ini mendapatkan pada kategori grade B yang
berarti sudah bagus sekali sebesar 82 pada user guru dan grade B yang berarti
bagus sekali sebesar 85 pada user wali siswa hingga di harapkan selanjutnya
sistem aplikasi bisa digunakan.

47
 DAFTAR PUSTAKA

[1] D. S. Sugeng Wibowo, “Analisis Dan Perancangan Sistem Informasi

Presensi Siswa Berbasis Android Pada Sd Dan Smp Kanaan Global
School Jambi,” Jurnalmsi.Stikom-Db.Ac.Id, vol. 3, no. 2, pp. 1093–
1105, 2018, [Online]. Available: http://www.jurnalmsi.stikom-
db.ac.id/index.php/jurnalmsi/article/view/161.
[2] M. Daryuni and R. Yani, “WORKSHOP PEMANFAATAN
TEKNOLOGI INFORMASI,” vol. 1, no. 1, pp. 78–88, 2020.
[3] M. R. Maulana and E. Mulyani, “Pengembangan E-Presensi berbasis
Android untuk Monitoring Kehadiran Siswa Sekolah Menengah di
Kota Pekalongan (Studi Kasus : SMP Islam Pekalongan),” IC-Tech,
vol. XIII, no. 1, pp. 55–60, 2018, [Online]. Available:
https://ejournal.stmik-wp.ac.id/index.php/ictech/article/view/40.
[4] F. Setiawan, “APLIKASI MONITORING KEHADIRAN SISWA
SMKN 1 BANDUNG BERBASIS ANDROID,” vol. 1, no. 1, pp.
747–754, 2017.
[5] L. Setiyani, “Pemodelan dan Perancangan Aplikasi Manajemen
Presensi Siswa Sekolah Menengah Kejuruan Berbasis Mobile
Android,” vol. 12, no. 1, pp. 40–50, 2019.
[6] D. Ucd, “PERANCANGAN USER INTERFACE DAN USER
EXPERIENCE MOBILE APPLICATION SIBENGKEL UNTUK
MEMENUHI KEBUTUHAN PENGGUNA DENGAN METODE
USER-CENTERED,” vol. 7, no. 2, pp. 7574–7580, 2020.
[7] Y. P. Savira, “Analisis User Experience pada Pendekatan User
Centered Design dalam rancangan Aplikasi Placeplus,” Automata,
vol. 1, no. 2, pp. 28–29, 2020.
[8] R. B. Solichuddin, “Perancangan User Interface dan User Experience
dengan Metode User Centered Design pada Situs Web Kalografi.”
[9] P. Issn and R. Tamin, “MONITORING KEHADIRAN DAN
PERILAKU PESERTA DIDIK DENGAN SISTEM INTEGRASI
PRESENSI DAN BUKU PENGHUBUNG BERBASIS ANDROID,”
vol. 6, no. 2, pp. 28–34, 2020.
[10] R. P. Setiawan and M. Muhaqiqin, “Sistem Informasi Manajemen
Presensi Siswa Berbasis Mobile Studi Kasus SMAN 1 Sungkai Utara
Lampung Utara,” … Teknol. dan Sist. Inf., vol. 2, no. 3, pp. 119–124,
2021, [Online]. Available:
http://jim.teknokrat.ac.id/index.php/sisteminformasi/article/view/898.
[11] P. Studi, S. Informasi, F. T. Informasi, and U. Tarumanagara,
“PERANCANGAN UI/UX APLIKASI ABSENSI JIKAN DENGAN
METODE USER CENTERED DESIGN,” vol. 1, pp. 16–24, 2021.
[12] M. Multazam, “Perancangan User Interface dan User Experience
pada Placeplus menggunakan pendekatan User Centered Design,”
Univ. Islam Indones., vol. 1, p. 8, 2020.

48
[13] L. S. Helling and H. Apriyani, “Sipresi: Sistem Informasi Presensi
Siswa Smp Taman Siswa Bogor,” J. Ris. Inform., vol. 2, no. 3, pp.
137–144, 2020, doi: 10.34288/jri.v2i3.136.
[14] E. Mulyani and M. R. Maulana, “Perancangan Aplikasi E-Presensi
Siswa Sekolah Menengah Di Kota Pekalongan Berbasis Android,”
Prosidin Semin. Nas. Int., vol. 1, no. 1, p. 477, 2018, [Online].
Available:
http://103.97.100.145/index.php/psn12012010/article/view/4168.
[15] D. Heyne, M. Gren-Landell, G. Melvin, and C. Gentle-Genitty,
“Differentiation Between School Attendance Problems: Why and
How?,” Cogn. Behav. Pract., vol. 26, no. 1, pp. 8–34, 2019, doi:
10.1016/j.cbpra.2018.03.006.
[16] R. Rajulianto and Y. Hedriyani, “Perancangan Aplikasi Android
Absensi Siswa Pada Sekolah Smk Negeri 5 Padang,” Voteteknika
(Vocational Tek. Elektron. dan Inform., vol. 7, no. 4, p. 225, 2020,
doi: 10.24036/voteteknika.v7i4.106718.
[17] A. B. Tampubolon, “Penerapan UCD ( User Centered Design ) Pada
Perancangan Sistem Informasi Manajemen Aset TI Berbasis Web di
Bid TIK Kepolisian Daerah Kepulauan Riau,” vol. 4, no. 1, pp. 74–
83, 2020.
[18] N. S. Azwar, A. Fauzi, A. Zachry, and V. Virginia, “HOW TO BE A
UX / UI DESIGNER ?,” vol. 2, no. 2, pp. 541–545, 2021, doi:
10.31949/jb.v2i2.863.
[19] D. Purnomo, “Model Prototyping Pada Pengembangan Sistem
Informasi,” J I M P - J. Inform. Merdeka Pasuruan, vol. 2, no. 2, pp.
54–61, 2017, doi: 10.37438/jimp.v2i2.67.
[20] A. Cahya and G. Fadila, “Perancangan aplikasi pengukuran tingkat
menggunakan user experience lifecycle kesiapan inovasi Designing
an application for measuring innovation readiness level using the user
experience lifecycle,” vol. 11, no. 1, pp. 34–45, 2021.
[21] P. Astuti, “Penggunaan Metode Black Box Testing (Boundary Value
Analysis) Pada Sistem Akademik (Sma/Smk),” Fakt. Exacta, vol. 11,
no. 2, p. 186, 2018, doi: 10.30998/faktorexacta.v11i2.2510.
[22] W. N. Cholifah, S. M. Sagita, and S. Knowledge, “PENGUJIAN
BLACK BOX TESTING PADA APLIKASI ACTION &
STRATEGY BERBASIS ANDROID,” vol. 3, no. 2, pp. 206–210,
2018.
[23] Ismail, “Black-Box Testing : Analisis Kualitas Aplikasi Source Code
Bank Programming,” J. Teknol. Inf. dan Komun., vol. 5, no. 6, pp. 1–
6, 2021.
[24] P. Megawanti, “Permasalahan Pendidikan Dasar Di Indonesia,” J.
Ilm. Pendidik. MIPA, vol. 2, no. 3, pp. 227–234, 2012.
[25] A. Junaedi, D. Drajat, R. I. Syihabuddin, U. M. Damayanti, and M. F.
Wahyutama, “Perancangan Perpustakaan Digital Berbasis Website

49
 Pada SMAN 18 Kabupaten Tangerang,” ADI Bisnis Digit.
Interdisiplin J., vol. 2, no. 2, pp. 20–26, 2021, doi:
10.34306/abdi.v2i2.550.
[26] Ariyanti et al., “PERANCANGAN DESAIN UI/UX APLIKASI
PEMESANAN DEKORASI PERNIKAHAN PADA UKM
MNDECORATION MENGGUNAKAN METODE LEAN UX,” J.
Apl. Teknol. Pangan, vol. 4, no. 1, pp. 1–2, 2021, [Online].
Available:
http://www.ejurnal.its.ac.id/index.php/sains_seni/article/view/10544
%0Ahttps://scholar.google.com/scholar?hl=en&as_sdt=0%2C5&q=ta
wuran+antar+pelajar&btnG=%0Ahttps://doi.org/10.1016/j.jfca.2019.
103237.
[27] B. A. B. Iii, “Bab iii dasar teori batubara,” pp. 23–48, 2002.
[28] D. Setiawan, Y. Dwi Wijaya, and C. D. Rukminingtyas,
“Perancangan Dan Evaluasi Desain Wireframe Sistem Informasi
Lentera (Design and Evaluation of the Wireframe Design Lentera
Information System),” Semin. Nas. Teknol. Inf. dan Komun., pp. 531–
537, 2020.
[29] Y. Apridiansyah and G. Gunawan, “Menggunakan Metode User
Centered Design ( Ucd ),” J. Technopreneursh. Inf. Syst., vol. 2, no.
2, pp. 74–80, 2019.
[30] I. Purnama, D. Prodi, and M. Informatika, “PERANCANGAN
KAMUS MUSLIM BERBASIS SMARTPHONE ANDROID
DENGAN METODE USER CENTERED DESIGN ( UCD ),” vol. 5,
no. 3, 2017.
[31] U. Salamah and F. Khasanah, “Pengujian Sistem Informasi Penjualan
Undangan Pernikahan Online Berbasis Web Menggunakan Black
Box Testing,” Inf. Manag. Educ. Prof., vol. 2, no. 1, pp. 35–46, 2017.
[32] A. C. Wardhana, T. Fani, N. Adila, and K. P. Raharjo, “Perancangan
Aplikasi Antrean Online Pemeriksaan Ibu Hamil Menggunakan User
Experience Lifecycle,” vol. 4, no. 1998, pp. 1016–1023, 2020, doi:
10.30865/mib.v4i4.2338.

50
Lampiran
Lampiran 1 wanwancara pengambilan kasus dengan guru

51
Lampiran 2 penyataan izin dengan kepala sekolah SMPN 2
KARANGLEWAS

52
Lampiran 3 persona kebutuhan aplikasi ReCek

53
54
55
56
57
58
59
60
61
Lampiran 4 dokumen desain

62
Lampiran 5 coding dengan android studio

63
64
65
66
Lampiran 6 kuisioner google form

67
68
69
70
Lampiran 7 data responden google spreadsheet

71
72