Aprilia, G.N., Dasaprawira, N.M. — Perancangan UI/UX Aplikasi E-Rapor berbasis Android
Gita Nur Aprilia 1,*) , M Noviarsyah Dasaprawira 2)
1, 2) Sistem Informasi Universitas Nahdlatul Ulama Al Ghazali Cilacap Jl. Kemerdekaan Timur No. 16 Kesugihan Cilacap, Jawa Tengah 53274 e-mail: gitanurapriliaaaa@gmail.com 1) , viarprawira93@unugha.id 2) *corresponding author
(Naskah masuk : 10 April 2023 Diterima untuk diterbitkan : 9 Mei 2023)

## ABSTRAK
Taman Pendidikan Al-Qur'an (TPQ) Sabilul Khoir adalah lembaga yang tumbuh dan beroperasi di masyarakat desa Karangreja untuk mendidik anak usia dini. Akan tetapi lembaga ini belum memiliki pengelolaan informasi hasil nilai belajar siswa yang berupa digital. Hal ini yang menyababkan pengelolaan informasi hasil nilai belajar siswa dengan cara manual di buku rapor dan itu akan membutuhkan banyak waktu. Berdasarkan permasalahan tersebut,  maka  lembaga  ini  memerlukan  suatu  perancangan  aplikasi  e-rapor  TPQ.  Aplikasi  E-Rapor  TPQ dirancang  sebagai  aplikasi  android  dengan  metode  UCD  (User  Centered  Design),  yang  mana  pengguna dilibatkan pada desain prototype. Dengan menggunakan metode user centered design diharapkan bisa membantu permasalahan  terkait  pengelolaan  informasi  hasil  nilai  belajar  siswa.  Untuk  mencapai  usability,  pengujian dilakukan dengan menggunakan pendekatan cognitive walkthrough, yaitu evaluasi usability user interface (UI). Berdasarkan hasil pengujian dan hasil evaluasi, pengujian cognitive walkthrough berakhir pada iterasi pertama karena  partisipan  puas  dengan  antarmuka  pengguna.  Skor  evaluasi  seperti  durasi  pengujian  untuk  setiap skenario kurang dari 30 detik, dan kesalahan yang ditemui partisipan saat mempergunakan desain antarmuka merupakan  kesalahan  kecil  dengan  tingkat  kesalahan  kurang  dari  50%.  Pengujian  ini  dilakukan  untuk memastikan  bahwa  aplikasi  menyediakan  antarmuka  pengguna  yang  menarik  serta  kepuasan  pengguna  yang memadai.
Kata Kunci: E-Rapor, TPQ, User Interface (UI), User Experience (UX), UCD

## ABSTRACT
Sabilul Khoir Qur'an Education Park (TPQ) is an institution that grows and operates in the village community of Karangreja to educate early childhood. However, this institution does not yet have information management of student learning outcomes in the form of digital. This is what causes the management of information on student learning outcomes by manual means in the report card book and it will take a lot of time. Based on these problems, this institution needs a TPQ e-report card application design. The TPQ E-Report Card application is designed as an  android application  with  the  UCD  (User  Centered  Design)  method,  where  users  are  involved  in prototype design. By using the user centered design method, it is hoped that it can help problems related to the management of  information  on  student  learning  outcomes.  To  achieve usability, testing  is  carried  out  using  a  cognitive walkthrough  approach,  namely  the  evaluation  of  user  interface  (UI)  usability.  Based  on  the  test  results  and evaluation results, the cognitive walkthrough test ended in the first iteration because participants were satisfied with the user interface. Evaluation scores such as the test duration for each scenario were less than 30 seconds, and the errors participants encountered while using the interface design were minor errors with an error rate of less  than  50%. This testing  is  done  to  ensure  that  the  application  provides  an  attractive  user  interface  and sufficient user satisfaction.
Keywords: E-Rapor, TPQ, User Interface (UI), User Experience (UX), UCD

## PERANCANGAN UI/UX APLIKASI E-RAPOR PADA TPQ BERBASIS ANDROID DENGAN MENGGUNAKAN METODE USER CENTERED DESIGN (UCD)
INDEXIA : Informatic and Computational Intelligent Journal Vol.5, No.1, Mei 2023, hlm. 48-58 P-ISSN : 2657-0424 E-ISSN : 2657-0432

## I. PENDAHULUAN
Perkembangan teknologi saat ini begitu pesat, sehingga teknologi digunakan di hampir setiap aspek kehidupan manusia. Kebutuhan alat untuk mengelola sebuah lembaga pendidikan berbasis IT semakin meningkat, seperti halnya lembaga yang berada di sekitar masyarakat yang disebut Taman Pendidikan Al-Qur’an (TPQ) yang setidaknya membutuhkan aplikasi pegelolaan informasi hasil nilai belajar siswa, dll.    Salah  satunya  adalah  Taman  Pendidikan  Al-Qur'an  (TPQ)  Sabilul  Khoir  yaitu  lembaga  yang tumbuh  dan  beroperasi  di  masyarakat  desa  Karangreja  untuk  mendidik  anak  usia  dini  dengan membimbing mereka baca tulis Al-Qur’an dengan benar, serta menambah ilmu dasar agama serta moral perilaku sosial dalam masyarakat sesuai ajaran Islam [1].
Namun sejak berdirinya TPQ Sabilul Khoir pada tahun 2021 sampai saat tulisan ini dibuat Maret 2023  pengelolaan  informasi  hasil  nilai  belajar  siswa  di  TPQ  Sabilul  Khoir  masih  menggunakan pencatatan manual di buku rapor dan itu akan membutuhkan banyak waktu.  Oleh karena itu penulis mengkaji jurnal dan mengkaji literatur yang memiliki permasalahan terkait dengan apa yang terjadi di TPQ Sabilul Khoir. Ada tiga jurnal dengan penjelasan singkat tentang judul, nama penulis, masalah, solusi serta kelebihan dan kekurangan.
Perancangan  E-Raport  Dengan  Metode  Waterfall  Berbasis  Web,  oleh  M.Haris,  dkk . SMKN  1 Kabupaten Tangerang belum mengolah nilai berbasis IT, sehingga diperlukan sistem informasi e-raport berbasis  web . Kelebihannya,  sistem  ini  memiliki  pemrosesan  data  yang  lebih  cepat  dan  akurat, sedangkan kekurangannya siswa tidak dapat mengaksesnya [2].
Pengembangan  Aplikasi  Raport  Berbasis  Web  Pada SD  Pelangi  Bangsa  Pamulang,  oleh  M.  Irfa, dkk. Dikembangkan aplikasi raport berbasis web untuk SD Sekolah Pelangi Bangsa Tangerang karena penilaian rapor tidak efektif. Kelebihan sistem ini adalah memberikan kemudahan bagi wali kelas dalam penulisan rapor, sedangkan kekurangannya siswa tidak dapat masuk mengaksesnya [3].
Perancangan Raport Online Menggunakan Framework Laravel Berbasis Website, oleh Ade Irma. Metode  manual  masih  digunakan  pada  pelaporan  nilai  siswa,  maka  dibutuhkan  sistem  informasi pelaporan  online  dengan  metode  waterfall  dan  laravel  framework.  Kelebihan  sistem  ini  adalah memberikan kemudahan akses untuk wali murid, sedangkan kekurangannya peneliti tidak dicantumkan [4].
Berdasarkan kajian terhadap tiga jurnal serupa, penulis menjumpai kekurangan yang bisa diperbaiki berupa fitur untuk jenis pengguna yang berbeda pada aplikasi, dimana untuk fokus kepada peran setiap pengguna,  setiap  jenis  pengguna  dapat  memiliki  hak  akses  yang  berbeda.  Dimana  mencakup  siswa, guru  dan  administrator.  Oleh  karena  itu,  penulis  melakukan  penelitian  berjudul  “PERANCANGAN UI/UX  APLIKASI  E-RAPOR  PADA  TPQ  BERBASIS  ANDROID  DENGAN  MENGGUNAKAN METODE  USER  CENTERED  DESIGN  (UCD)”  dengan  tujuan  dapat  membantu  pengelolaan informasi hasil nilai belajar siswa yang lebih efektif dan efisien bagi para guru dan siswa TPQ Sabilul Khoir.

## II. LANDASAN TEORI

## 2.1 Taman Pendidikan Al-Qur’an (TPQ)
Taman Pendidikan Al-Qur’an adalah lembaga yang tumbuh dan beroperasi di sekitar masyarakat untuk  menyelenggarakan  pendidikan  informal  berbasis  pendidikan  agama  Islam  dan  meningkatkan pengetahuan membaca dan menulis Al-Quran sejak usia dini [5].

## 2.2 Perancangan
Perancangan  merupakan  proses  menggambarkan  berbagai  teknologi,  termasuk  arsitektur, komponen, dan kendala yang terjadi dalam proses [6]. Menurut Subhan [7], perancangan merupakan mengembangkan  spesifikasi  baru  berdasarkan  rekomendasi  yang  berasal  dari  hasil  analisis  sistem. Perancangan tahap pertama diawali dengan ketidakteraturan dalam kerangka pemikiran atau gagasan, kemudian  keteraturan  diciptakan  dengan  pengerjaan  dan  pengorganisasikan  agar  keteraturan  dapat dimanfaatkan dengan semestinya [8].

## 2.3 User Interface (UI)
User  interface  (UI)  merupakan  fungsi  output  dan  intput  yang  menggunakan  pengguna  langsung untuk mendeteksi fungsionalitas perangkat antarmuka pengguna tertentu. Setiap antarmuka pengguna harus dirancang untuk kenyamanan pengguna yang maksimal dan optimal [9]. Dari pengertian tersebut
dapat menunjukkan bahwa antarmuka pengguna adalah penghubung antara sistem dan pengguna. Maka dari  itu,  antarmuka  pengguna  yang  baik  harus  mudah  digunakan.  Dalam  pembuatan  aplikasi,  salah satunya yang harus diperhatikan ialah interface, karena interface yang kita buat sangat mempengaruhi usability dari aplikasi yang akan dibuat [10].  Hal ini tidak biasa bagi pengguna untuk menilai sistem semata-mata berdasarkan penampilan atau antarmuka pengguna, sehingga desain antarmuka pengguna harus dipikirkan matang-matang untuk membuat antarmuka yang efektif [11] dan berfokus pada desain antarmuka pengguna.

## 2.4 User Experience (UX)
Menurut Garret [12], UX tidak sekadar berfokus pada bagaimana produk atau layanan bekerja, tapi juga pada bagaimana pengguna berinteraksi dengan produk, dan apakah mudah dipahami dan seberapa efektifnya  serta  efektivitas  interaksi  dengan  produk.    User  Experience  juga  dapat  diartikan  sikap, perilaku,  dan  perasaan  pengguna  tentang  menggunakan  suatu  produk,  sistem,  atau  layanan,  disertai dengan persepsi pribadi tentang kemudahan penggunaan dan kenyamanan yang terlihat [13].

## 2.5 E-Rapor
E-Rapor adalah sarana pilihan yang dapat digunakan guru dan satuan pendidikan untuk melaporkan hasil belajar siswa yang disampaikan kepada orang tua atau wali siswa [14]. Dengan kata lain, E-Rapor dapat dipahami sebagai sistem penilaian kinerja pembelajaran baru berbasis aplikasi yang dibuat untuk memudahkan  pendidik melaporkan  kepada  orang tua,  selain  untuk membantu  pekerjaan  guru dalam melaporkan hasil pembelajaran dengan lebih mudah. Hal ini juga dapat mengurangi beban administrasi guru [15].

## 2.6 Android
Android adalah sistem operasi smartphone. Saat ini, ada banyak smartphone dengan sistem operasi Android  [16].  Menurut  Satyaputra  [17],  android  adalah  sistem  operasi  untuk  smartphone dan tablet. Sistem operasi adalah koneksi antara perangkat dan pengguna yang memungkinkan mereka berinteraksi dengan perangkat dan menggunakan aplikasi. [18].

## 2.7 Prototype
Kegiatan  prototype  ialah  kegiatan  prototyping.  Prototyping  adalah  metode  pengembangan  atau transformasi ide yang masih berupa kerangka ke dalam desain sistem perangkat lunak yang memenuhi kebutuhan dan keinginan pengguna [19]. Dalam siklus pengembangan prototype terdiri dari 3 tahap, yakni tahap pengumpulan kebutuhan, tahap pembuatan prototype, dan tahap pengujian  [20].

## 2.8 Metode User Centered Design (UCD)
UCD adalah desain antarmuka pengguna di mana pengguna ikut berpartisipasi, antarmuka pengguna dapat  menarik  perhatian  pengguna.  Bagian  penting  dari  UCD  ialah  keterlibatan  pengguna  dalam keseluruhan  proses  [21].  Pengguna  berada  di  pusat  penerapan  metode  UCD,  serta  karakteristik pengguna  yang  paling  penting  ialah tugas  dan tujuan.  Penerapan  metode  user centered  design  dapat membantu  memutuskan  korespondensi  antarmuka  pengguna  aplikasi  terhadap  daya  tarik  pengguna aplikasi [22]. Kondisi ini konsisten pada prinsip inti user centered design yang berpusat pada pengguna, yaitu partisipasi pengguna, pengukuran, pengujian empiris, serta desain iteratif.

## 2.9 Metode Cognitive Walkthrough
Pengujian  dilakukan  dengan  pendekatan  cognitive  walkthrough,  ialah  pengujian  untuk mengevaluasi  kegunaan  antarmuka  pengguna  (UI)  [19].  Cognitive  walkthrough  merupakan  metode penilaian kegunaan dimana satu ataupun lebih evaluator menyusun serangkaian tugas serta menanyakan serangkaian  pertanyaan  berdasarkan  situasi  dari  sudut  pandang  pengguna  [23].  Evaluasi  usability cognitive  walkthrough  digunakan  untuk  menganalisa  permasalahan  yang  dihadapi  selama menggunakan aplikasi e-rapor TPQ dan untuk memastikan bahwa aplikasi e-rapor TPQ memiliki user interface dan memenuhi kepuasan pengguna.

## III. METODE PENELITIAN

## 3.1 Metode Perancangan
Metode  user  centered  design  (Gambar  1)  adalah  proses  iterasi  yang  mencakup  4  tahap,  yakni, Memahami  Kegunaan  Aplikasi  (Understand  Context  of  Use),  Merincikan  Kebutuhan  Pengguna
(Specify  User  Requirements),  Membuat  Solusi  Desain  (Design  Solutions),  dan  Evaluasi  (Evaluate Against Requirements). Proses iterasi berarti langkah ini berlanjut beberapa kali ketika evaluasi solusi desain dirasa kurang dari yang diinginkan pengguna [24].
Gambar 3.1 Tahapan Metode UCD (Sumber: Interaction Design Foundation) [26] .

## 3.1.1 Understand Context of Use
Keadaan dimana pengguna yang dituju akan menggunakan produk untuk melakukan tugas. Ini tidak berlaku untuk lingkungan khusus, tapi lebih dari itu untuk semua sudut pandang sosial, organisasi, dan individu situs web. Memahami kondisi penggunaan dapat memudahkan pengembang membuat produk yang nyaman, mudah digunakan, serta dibutuhkan oleh pengguna akhir.

## 3.1.2 Specify User Requirements
Saat  mendefinisikan  kebutuhan  pengguna,  tujuan  yang  ingin  dicapai  pengguna  dapat  digunakan. Pengguna  mengharapkan  sistem  dalam  spesifikasi  kebutuhan.  Pada  awal  proses  validasi,  spesifikasi kebutuhan pengguna ditulis sebelum sistem dibuat.

## 3.1.3 Design Solutions
Dalam tahap ini, solusi desain akan dikembangkan menurut hasil dari dua tahap sebelum tahap ini. Solusi  desain  dicapai  dalam  sejumlah  tahap,  mulai  dari  pengembangan  konsep  hingga  pembuatan prototype hingga desain akhir.

## 3.1.4 Evaluate Against Requirements
Melalui keterlibatan pengguna, evaluasi dilakukan dari awal hingga akhir proses. Tujuan evaluasi adalah  untuk menentukan apakah  aplikasi  yang  dikembangkan  dan  dibuat memenuhi keputusan  dan kebutuhan pengguna.

## 3.2 Metode Pengujian
Pengujian dilakukan dengan menggunakan cognitive walkthrough. Pendekatan ini menitikberatkan atas  kemudahan  pengguna  di  keadaan  penemuan  (discovery  learning),  yang  berarti  pengguna menyelesaikan suatu masalah atau tugas menggunakan cara “trial and error”.

## IV. HASIL DAN PEMBAHASAN

## 4.1 Iterasi Pertama
Berikut realisasi prototype aplikasi E-Rapor TPQ pada iterasi pertama.

## 4.1.1 Memahami Kegunaan Aplikasi
Dari  hasil  pengamatan  penulis  di  salah  satu  TPQ  (Taman  Pendidikan  Al-Qur’an),  diketahui  dari beberapa point yaitu, pengelolaan hasil nilai belajar siswa di TPQ Sabilul Khoir masih menggunakan pencacatan  manual  dengan  menggunakan  buku  rapor.  Dalam  penilaian  pada  buku  rapor  terdapat kendala yaitu setiap siswa memiliki nilai yang berbeda sehingga membutuhkan banyak waktu untuk mengerjakannya. Oleh karena itu, dibuatlah aplikasi E-Rapor TPQ untuk memberikan kemudahan bagi siswa dan guru.
E-Rapor TPQ merupakan aplikasi hasil nilai belajar siswa mengaji yang akan digunakan oleh siswa, guru dan admin  di  TPQ  Sabilul  Khoir.  Sebagai aplikasi  pengelolaan  hasil  nilai,  tentunya aplikasi  e-
rapor TPQ akan digunakan pada saat melihat hasil nilai belajar siswa. Tentunya aplikasi e-rapor TPQ ini  sangat  penting,  karena  aplikasi  ini  terdapat  pengelolaan  hasil  nilai  belajar  siswa.  Apabila  tidak melihat hasil nilai belajar siswa, siswa tidak dapat mengetahui informasi hasil nilai belajar siswa.

## 4.1.2 Merincikan Kebutuhan Pengguna
Berdasarkan  informasi  yang  diperoleh,  penulis  mendefinisikan  kebutuhan  pengguna  akan  desain yang dapat dibuat dengan desain sederhana untuk membuat file yang ringan. Adapun kebutuhan yang dibutuhkan  oleh  pengguna  berdasarkan  informasi  yang  diterima  penulis  dijelaskan  pada  Tabel  4.1 berikut.

## Tabel 4.1 Kebutuhan Pengguna
Needs Requirements Terdapat  beberapa  pengguna  dapat login/mengakses aplikasi e-rapor TPQ Adanya  beberapa  pengguna  yang  dapat  login/mengakses aplikasi e-rapor TPQ seperti siswa, guru dan admin. Mendapatkan informasi jadwal mengaji siswa Pada  informasi  jadwal  mengaji  siswa  terdapat  informasi lengkap berupa hari, tanggal, waktu mengaji, dan kegiatan mengaji. Terdapat hasil nilai belajar siswa Pada  informasi  hasil  nilai  belajar  siswa  mengaji  terdapat informasi  lengkap  berupa  nama  siswa,  tahun  pelajaran, bidang study, hasil nilai, dan catatan guru untuk siswa.
Tabel  4.2  berikut  menunjukkan  model  konseptual  yang  diperoleh  dari  proses  analisis  kebutuhan pengguna.
Tabel 4.2 Model Konseptual No Task Sub-task Sub-sub-task Respon Keterangan 1 Masuk ke halaman login Menampilkan halaman login Menampilkan halaman login Halaman login 2 Masuk ke halaman beranda Menampilkan informasi jadwal mengaji siswa Menampilkan informasi jadwal mengaji siswa Halaman beranda 3 Masuk ke halaman hasil nilai belajar siswa mengaji Menampilkan informasi hasil nilai belajar siswa mengaji Menampilkan informasi hasil nilai belajar siswa mengaji Halaman nilai Kembali ke halaman sebelumnya Kembali ke halaman beranda Tombol dengan icon rumah 4 Masuk ke halaman profil Menampilkan halaman profil Menampilkan halaman profil Halaman profil Kembali ke halaman sebelumnya Kembali ke halaman nilai Tombol dengan icon buku 5 Masuk ke halaman pengaturan Pilih menu pengaturan akun Menampilkan halaman profil Halaman profil Pilih menu bantuan aplikasi Menampilkan halaman bantuan Halaman bantuan Pilih menu tentang aplikasi Menampilkan halaman tentang Halaman tentang Pilih logout aplikasi Kembali ke halaman login Halaman login
Kembali ke halaman sebelumnya Kembali ke halaman profil Tombol dengan icon orang

## 4.1.3 Membuat Solusi Desain
Tahap ini, mencakup penyelesaian rancangan aplikasi e-rapor TPQ yang dimulai dengan pembuatan user interface (UI) wireframe dan prototype high-fidelity pada platform Figma. Dibuatlah wireframe dari e-rapor TPQ. Wireframe adalah garis kasar atau sketsa yang digunakan untuk menyusun halaman web  ataupun  objek  aplikasi  sebelum  proses  desain  yang  sebenarnya  dimulai  [24].  Wireframe  dibuat untuk  mengilustrasikan  rancangan  aplikasi  e-rapor  TPQ.  Menurut  wireframe  yang  dibuat  sehingga dibuatlah rancangan final aplikasi e-rapor TPQ sebagai berikut.
Gambar 4.1 Tampilan halaman splash screen
Pada gambar 4.1 adalah halaman saat pertama kali pengguna membuka aplikasi e-rapor TPQ sebagai halaman pembuka untuk memberikan kesan yang menarik dalam aplikasi tersebut.
Gambar 4.2 Tampilan halaman pilih pengguna
Pada gambar 4.2 adalah halaman pilih pengguna, pada halaman tersebut pengguna akan memilih pengguna untuk login sebagai siswa, guru, atau admin seperti gambar diatas.
Gambar 4.3 Tampilan halaman login siswa
Pada gambar 4.3 adalah halaman login yang berisi input text atau username dan kata sandi untuk masuk ke dalam aplikasi e-rapor TPQ tersebut, pengguna diminta login apabila sudah mempunyai akun.
Gambar 4.4 Tampilan halaman beranda siswa
Pada gambar 4.4 adalah halaman beranda, halaman ditujukan kepada pengguna saat aplikasi pertama kali dibuka, yang memuat informasi jadwal kegiatan pembelajaran mengaji bagi siswa TPQ.

## Gambar 4.5 Tampilan halaman hasil nilai siswa
Pada gambar 4.5 adalah halaman hasil nilai belajar siswa, menunjukkan perancangan halaman yang berisi informasi hasil nilai belajar mengaji bagi siswa TPQ. Pada halaman tersebut juga terdapat catatan pembelajaran bagi siswa yang dituliskan oleh guru.
Gambar 4.6 Tampilan halaman profil siswa
Pada gambar 4.6 adalah halaman profil yang berguna untuk mengubah data siswa, mengubah alamat yang tersimpan, edit profil dan masih banyak lagi.

## Gambar 4.7 Tampilan halaman pengaturan siswa
Pada  gambar  4.7  adalah  halaman  pengaturan  terdapat  beberapa  menu  yaitu,  pengaturan  akun, bantuan,  dan  tentang  aplikasi.  Pada  halaman  pengaturan  juga  disediakan  tombol  keluar  pada  akun pengguna.

## 4.1.4 Evaluasi
Setelah  desain  antarmuka  pengguna  atau  user  interface  (UI)  dirancang,  akan  dilakukan  evaluasi dengan pengembang dan calon pengguna yang akan menggunakan aplikasi e-rapor TPQ. Berdasarkan evaluasi yang dilakukan, tidak ada hal yang perlu dievaluasi. Karena perancangan antarmuka pengguna sudah memenuhi spesifikasi yang diharapkan dan memberikan kesan menarik bagi calon pengguna.

## 4.2 Metode Pengujian
Setelah  melaksanakan  perancangan  UI,  kemudian  dilaksanakan  uji  usability  dengan  pendekatan cognitive walkthrough. Proses prototype yang perlu ditempuh pengguna ialah salah satu impelementasi pendekatan cognitive walkthrough, yang bermaksud untuk memperoleh tujuan dalam skenario tugas yang  dibuat.  Menurut  Jacobsen  dan  John  dalam  Raharjo  berikut  adalah  tahapan  metode  cognitive walkthrough [25].

## 4.2.1 Persiapan (preparation)
Pada tahap ini mencakup analisis sistem yang diuji, identifikasi responden, dan pembuatan skenario tugas  yang  harus  dilakukan  responden  untuk  memenuhi  kebutuhan  pengguna  saat  menggunakan aplikasi  E-Rapor  TPQ.  Skenerio  tugas  adalah  sekumpulan  tugas  yang  perlu  diselesaikan  responden dengan menggunakan aplikasi E-Rapor TPQ [19]. Tabel 4.3 menggambarkan skenario tugas yang perlu dilakukan oleh responden.

## Tabel 4.3 Skenario Tugas Responden
ST Tujuan ST 1 Login ST 2 Melihat halaman hasil nilai belajar siswa ST 3 Melihat halaman profil ST 4 Melihat halaman pengaturan ST 5 Logout
Keterangan: ST = Skenario Tugas

## 4.2.2 Eksekusi (execution)
Tahap ini, mencakup proses aktivitas dan penulisan masalah dalam bentuk log masalah apa yang terjadi dalam setiap tugas. Dalam tahap ini, hasil uji usability juga dianalisis dan masalah serta saran untuk pembaruan diidentifikasi. Berikut pada Tabel 4.4 merupakan hasil uji usability.

## Tabel 4.4 Hasil Uji Usability
No ST Tujuan Indikator pengujian (detik) Persentase kesalahan 1 ST1 Login 7 0 2 ST2 Melihat halaman hasil nilai belajar siswa 12 1 3 ST3 Melihat halaman profil 8 0 4 ST4 Melihat halaman pengaturan 7 0 5 ST5 Logout 7 0 Hasil Akhir Rata-rata 8,2 4,1%
Pengujian  cognitive  walkthrough  berakhir  pada  iterasi  pertama  karena  partisipan  puas  dengan antarmuka pengguna. Skor evaluasi seperti durasi pengujian untuk setiap skenario kurang dari 30 detik, dan kesalahan yang ditemui partisipan saat mempergunakan desain antarmuka merupakan kesalahan kecil dengan tingkat kesalahan kurang dari 50%. Dilihat pada ekspresi wajah dan gestur tubuh partisipan selama saat dan setelah mempergunakan aplikasi tidak menunjukkan kebingungan. Maka perancangan antarmuka bisa berlanjut ke tahap selanjutnya yakni tahap implementasi.

## V. KESIMPULAN

## 5.1 Kesimpulan
Penulis telah mencapai kesimpulan berikut berdasarkan penelitiannya pada TPQ Sabilul Khoir untuk perancangan UI/UX aplikasi e-rapor pada TPQ berbasis android menggunakan metode UCD:
1. Desain UI dilakukan dengan proses yang memenuhi spesifikasi yang diharapkan pengguna.
2. Perancangan UI/UX dengan metode UCD dapat memberikan tampilan yang baik pada proses aplikasi android e-rapor TPQ. Dengan menggunakan metode UCD yang mencakup pengguna dan  pengembang,  hal  ini  sangat  membantu  pengguna  dan  pengembang  untuk  membuat antarmuka pengguna yang diharapkan.
3. Dilaksanakan  uji  usability  dengan  pendekatan  cognitive  walkthrough,  pengujian  cognitive walkthrough berakhir pada iterasi pertama karena partisipan puas dengan antarmuka pengguna. Skor evaluasi seperti durasi pengujian untuk setiap skenario kurang dari 30 detik, dan kesalahan yang  ditemui  partisipan  saat  mempergunakan  desain  antarmuka  merupakan  kesalahan  kecil dengan  tingkat  kesalahan  kurang  dari  50%.    Dengan  menggunakan  pendekatan  cognitive walkthrough  dinilai  efisien  ketika  menentukan  kepuasan  pengguna  dengan  menggunakan aplikasi  e-rapor  TPQ.   Dengan  bantuan  uji  usability,  memungkinkan  peneliti  mengenali kesulitan  yang  dihadapi  pengguna  saat  menggunakan aplikasi  e-rapor  TPQ  dan menentukan evaluasi perubahan yang dibutuhkan

## 5.2 Saran
Tampilan  UI  yang  terus-menerus  berubah  dan  gaya  yang  terus-menerus  berubah  bisa  sebagai referensi untuk mengembangkan UI yang lebih baik. Penelitian ini bisa dikembangkan sebagai bentuk implementasi perancangan, penambahan fungsi baru atau pengembangan desain antarmuka pengguna yang lebih menarik.

## DAFTAR PUSTAKA
[1] D.  Muttaqin  Benculuk  Banyuwangi  Rosi  Afianingsih  and  P.  UIN  KHAS  Jember,  “Upaya  Orang  Tua Menumbuh-Kembangkan Karakter Islami Anak Melalui Pembiasaan Mengaji di Taman Pendidikan al- Qur’an (TPQ),” Journal of Islamic Education Research , 2021.
[2] M.  Haris  Khoirul  Fadillah,  A.  Moenir,  J.  Raya  Surya  Kencana  No,  P.  Barat,  K.  Pamulang,  and  K. Tangerang  Selatan,  “Rancang  Bangun  Sistem  Informasi  E-Raport  Berbasis  Web  Dengan  Metode Waterfall (Studi Kasus: SMKN 1 Kabupaten Tangerang),” 2021.
[3] M.  Irfa  Nufaiyal  Kharish,  “PENGEMBANGAN  SISTEM  APLIKASI  RAPORT  BERBASIS  WEB PADA SEKOLAH DASAR Studi Kasus di SD Sekolah Pelangi Bangsa, Pamulang, Tangerang,” 2021.
[4] A. Irma, K. Wardani, and A. I. Nurhidayat, “RANCANG BANGUN SISTEM INFORMASI RAPORT ONLINE BERBASIS WEBSITE MENGGUNAKAN FRAMEWORK LARAVEL,” 2019.
[5] H. Amalia, T. Retnasari, and S. Rachmawati, “Pemanfaatan Teknologi Informasi Untuk Meningkatkan Pelayanan Akademik Rumah Tahfidz dan TPQ Sakinah Cipayung Jakarta Timur,” 2020.
[6] S. Rizky and others, “Konsep dasar rekayasa perangkat lunak,” Jakarta: Prestasi Pustaka , 2011.
[7] M. Subhan, “Analisa perancangan sistem,” Jakarta: Lentera Ilmu Cendekia , 2012.
[8] A.  G.  Pramesti,  Q.  J.  Adrian,  and  Y.  Fernando,  “PERANCANGAN  UI/UX  PADA  APLIKASI PEMESANAN BUKET MENGGUNAKAN METODE USER CENTERED DESIGN (STUDI KASUS: BOUQUET LAMPUNG),” JATIKA, 2022
[9] J.  W.  Satzinger,  R.  B.  Jackson,  and  S.  D.  Burd,  “Introduction  To  Systems  Analysis  And  Design:  An Agile,” Iterative Approach (Paperback) , 2012.
[10] H.  Ismatullah  and  Q.  Jafar  Adrian,  “IMPLEMENTASI  PROTOTYPE  DALAM  PERANCANGAN SISTEM INFORMASI IKATAN KELUARGA ALUMNI SANTRI BERBASIS WEB,” JATIKA , 2021.
[11] B. Renaldy Suteja and A. Harjoko, “UPN ‘Veteran’ Yogyakarta,” Seminar Nasional Informatika , 2008.
[12] J. J. Garret, “The elements of user experience,” Berkeley, CA: New Riders , 2011.
[13] Y.  Wulandari  and  H.  Sulistiani,  “RANCANG  BANGUN  APLIKASI  PRESENSI  SMS  GATEWAY BERBASIS WEB DENGAN FRAMEWORK CODEIGNITER PADA SMKN 1 TRIMURJO,” 2020.
[14] Direktorat  Sekolah  Dasar  Kemdikbud,  “e-Rapor  Kurikulum  Merdeka  Dikembangkan  Sesederhana Mungkin,”  Dec.  07,  2022.  https://ditpsd.kemdikbud.go.id/artikel/detail/e-rapor-kurikulum-merdeka- dikembangkan-sesederhana-mungkin (accessed Mar. 29, 2023).
[15] NaikPangkat.com, “E-Rapor Kemendikbud: Pengertian dan Perbedaan untuk SD, SMP, dan SMK,” Dec. 09,  2022.  https://naikpangkat.com/e-rapor-kemendikbud-pengertian-dan-perbedaan-untuk-sd-smp-dan- smk/ (accessed May 06, 2023).
[16] P. Teknologi and others, “Pendetaksian Lokasi Rawan Kriminalitas Berbasis Android Kecamatan Praya Timur, Kabupaten Lombok Tengah,” JIRE , 2019.
[17] A. Satyaputra, E. M. Aritonang, and S. Kom, Lets Build Your Android Apps with Android Studio . Elex Media Komputindo, 2016.
[18] J.  Kuswanto  and  F.  Radiansah,  “Media  Pembelajaran  Berbasis  Android  Pada  Mata  Pelajaran  Sistem Operasi Jaringan Kelas XI,” 2018.
[19] A.  A.  Mahfudh  and  W.  R.  Saputra,  “Perancangan  User  Interface  User  Experience  Aplikasi  E-Ngaji Berbasis Android Menggunakan Metode User Centered Design (UCD) Pada TPQ Designing an Android- Based User Interface User Experience Application Using the User Centered Design (UCD) Method at TPQ,” Jurnal Ilmiah Intech : Information Technology Journal of UMUS , 2022.
[20] M. Syaukati Robbi, “Jurnal Teknologi Sistem Informasi dan Aplikasi Perancangan Aplikasi E-Learning Berbasis Web dengan Model Prototype pada SMPN 7 Kota Tangerang Selatan,” 2019.
[21] I. P. Sari, I. Purnama, and A. A. Ritonga, “Implementasi API pada Aplikasi Al-Qur’an Berbasis Android dengan Metode UCD,” JURNAL MEDIA INFORMATIKA BUDIDARMA , 2021.
[22] A. Subiyakto, V. Adhiazni, E. Nurmiati, N. Hasanati, S. Sumarsono, and Moh. Irfan, “Redesigning User Interface Based On User Experience Using Goal-Directed Design Method,” CITSM , 2020.
[23] C. Lewis and C. Wharton, “Chapter 30 - Cognitive Walkthroughs,” in Handbook of Human-Computer Interaction (Second Edition) , 1997.
[24] C. Lim, A. Clearesta Sumarlie, and D. Andana Haris, “PERANCANGAN UI/UX APLIKASI ABSENSI JIKAN DENGAN METODE USER CENTERED DESIGN,” 2021.
[25] P. Saman and C. Indah Ratnasari, “Pengujian Black Box Pada Aplikasi Pembelajaran Bahasa Mandarin Berbasis  Android  Black  Box  Testing  on  an  Android-Based  Mandarin  Learning  Application,” Jurnal Ilmiah Intech : Information Technology Journal of UMUS , 2022.
[26] H. Bastian, G. Eko Saputro, and A. Farantikan Yogananti, “Design, Art Education & Culture Studies),” JADECS (Journal of Art, Design, Art Education & Culture Studies) , 2021.