JURNAL TEKNIK ELEKTRO DAN KOMPUTER TRIAC 2024 Mokhammad Syafaat, Aguk Sridaryono
https://journal.trunojoyo.ac.id/triac

## Perancangan User Interface
dan User Experience Pada Game-based Learning Pointer Menggunakan Figma
Rena Agustien 1 , Nugraha Gumilar 2 , Dekki Widiatmoko 3 , Mokhammad Syafaat 4 , Aguk Sridaryono 5 Program Studi Teknik Elektronika Sistem Senjata, Politeknik Angkatan Darat E-mail: 1 r.agustien@poltekad.ac.id , 2 gumilarwe@gmail.com , 3 dekkiwidiatmoko@poltekad.ac.id , 4 syafaatarh96@poltekad.ac.id , 5 agukerfa@gmail.com
Abstrak —  Belajar  merupakan  proses  aktivitas  mental dimana seorang individu melalui pendidikan dan pengalaman, menyebabkan  perubahan  perilaku  positif  dan  relatif berjangka  panjang  yang  dapat  melibatkan  aspek  fisik  dan psikologis  kepribadian.  Metode  pengajaran  secara konvensional  membuat  peserta  didik  cenderung  cepat  bosan sehingga  pemahaman  tentang  materi  pelajaran  tidak maksimal. Kreativitas tenaga pendidik sangat dibutuhkan agar proses pembelajaran lebih menarik. Pada penelitian yang telah dilakukan sebelumnya dihasilkan media pembelajaran inovatif berupa  game  yaitu game-based  learning Pointer . Di  era perkembangan  teknologi  yang  pesat  dibutuhkan  digitalisasi game  tersebut  agar  bisa  memaksimalkan  proses  belajar  dan mengatasi  tantangan  yang  ada.  Dalam  penelitian  ini  akan dibuat  sebuah  rancangan design  user  interface dan user experience dari aplikasi Pointer sebagai acuan atau gambaran nyata dalam membangun sistem sebenarnya.
Kata  Kunci—desain,  game-based  learning,  inovatif,  user interface, user experience

## I. P ENDAHULUAN
Belajar  merupakan  proses  aktivitas  mental  dimana seorang  individu  melalui  pendidikan  dan  pengalaman, menyebabkan  perubahan  perilaku  positif  dan  relatif berjangka  panjang  yang  dapat  melibatkan  aspek  fisik  dan psikologis kepribadian [1] [2]. Kegiatan belajar mengajar di sekolah  lebih  sering  mengadopsi  pendekatan  konvensional dalam proses pengajaran dan monoton dapat membuat siswa cenderung  cepat  bosan  [3]  [4].  Proses  pembelajaran  yang tidak maksimal membuat peserta didik cenderung pasif dan kurang  mempunyai  inisiatif  saat  proses  pembelajaran  [5]. Dalam menghadapi tantangan tersebut, peran pendidik begitu krusial tidak hanya untuk menyampaikan pembelajaran yang efisien dan inovatif, tentunya juga diharapkan untuk mampu memperhatikan  perkembangan  dari  setiap  peserta  didik dalam aspek kecerdasan dan pada psikisnya [6].
Peserta  didik  yang  termotivasi  dalam  pembelajaran umumnya lebih mudah dibimbing, memiliki dorongan untuk ingin tahu dan aktif mencari informasi mengenai materi yang diajarkan  [7].  Meningkatkan  semangat  belajar  bisa  dicapai melalui  inovasi  dalam  pendidikan  yang  menggunakan pendekatan bermain game [8]. Dengan Metode pembelajaran berbasis  permainan  atau  dikenal  dengan game-based learning dianggap  sebagai  salah  metode  pembelajaran inovatif untuk meningkatkan minat siswa dalam belajar [9]. Hal  serupa  diungkapkan  oleh  Coffey,  yang  menjelaskan bahwasannya digital game-based learning merupakan suatu pendekatan  dimana  materi  Pendidikan  atau  prinsip-prinsip belajar  diintegrasikan  ke  dalam  permainan,  dengan  tujuan menarik minat para peserta didik agar lebih termotivasi dan tertarik  dalam  melaksanakan  proses  pembelajaran  [10].
Permainan edukasi membuat peserta didik lebih termotivasi dan  kegiatan  belajar  lebih  menyenangkan  sehingga  tanpa mereka  sadari  saat  bermain  mereka  memperkuat  memori tentang  materi  pelajaran  yang  telah  dituangkan  dalam permainan tersebut. Salah satu permainan edukasi yang telah dikembangkan  sebelumnya  oleh  Heri  Setiawan,  Nugraha Gumilar  dkk  ,  adalah game-based  learning "POINTER" yang  dikemas  untuk  pembelajaran  materi  pengenalan jaringan  komputer  [11].  Dalam  penelitian  tersebut  berisi materi  topologi  jaringan  dan  aturan  permainan  yang  harus dipahami  oleh  pengguna  permainan.  Pembelajaran  berbasis game dapat meningkatkan minat dan motivasi belajar Bintara Mahasiswa  Poltekad  dari  pada  metode  pembelajaran ceramah  atau  konvensional.  Pada  media  pembelajaran tersebut dirancang dalam bentuk fisik berupa board game .
Gambar 1. Penggunaan Game-based Learning Pointer Dalam Pembelajaran
Di era saat ini yaitu industri 4.0 kemajuan perkembangan teknologi  semakin  meningkat  sangat  pesat  sehingga  dapat mempengaruhi berbagai aspek kehidupan [12][13][14][24]. Bahkan  dalam  pendidikan  pengembangan  teknologi  sangat dibutuhkan  untuk  menunjang  proses  belajar  [15][16]. Pengembangan  edugame  dalam  bentuk  fisik  atau board game menjadi digital diperlukan agar mampu meningkatkan jangkauan  pemain,  memfasilitasi  interaksi  maupun kolaborasi di antara pemain atau peserta didik, bahkan dari lokasi  yang  berbeda.  Dalam  proses  perancangan game- based learning Pointer menjadi digital tentunya diperlukan adanya  proses  perancangan  antarmuka  pengguna  atau disebut  dengan user  interface dan  juga    perancangan pengalaman  pengguna  atau user  experience yang  biasanya dikenal  dengan  UI/UX.  Hasil  dari  perancangan  UI/UX Pointer  ini  diharapkan  dapat  diimplementasikan  untuk membuat  aplikasi  game  sehingga  dapat  diakses  secara online.
JURNAL TEKNIK ELEKTRO DAN KOMPUTER TRIAC
Mokhammad Syafaat, Aguk Sridaryono
https://journal.trunojoyo.ac.id/triac

## II. B AHAN DAN M ETODE
A. Pengertian Perancangan Menurut  Jogiyanto,  pada  karya  yang  ditulis  berjudul "Analisis dan Desain", mengungkapkan bahwa perancangan merupakan  tahapan  yang  mengikuti  analisis  dalam  siklus pengembangan sistem. Proses ini melibatkan penggambaran, perencanaan, dan pembuatan sketsa atau pengaturan elemen- elemen  terpisah  menjadi  satu  kesatuan  yang  utuh  dan fungsional.  Bagian  dari  perancangan  juga  mencakup konfigurasi  komponen  perangkat  lunak  dan  keras  dalam sistem tersebut [17].
B. User Interface dan User Experience (UI/UX) Antarmuka  Pengguna  atau  biasa  dikenal  dengan User Interface dan User  Experience/ Pengalaman  Pengguna merupakan  elemen  penting  dalam  aplikasi,  situs  web,  dan platform online.  UI  merupakan  sistem  yang  mengatur tampilan  antarmuka  dan  memungkinkan  pengguna berinteraksi  dengan  sistem  [18].  Berbeda  dengan user experience yang merupakan  sistem  untuk  mengatur pengalaman  yang  dapat  dirasakan  oleh  pengguna  meliputi kenyamanan  dan  kemudahan  terhadap  fungsionalitas terhadap perangkat lunak [19].
Di  zaman  digital  saat  ini,  tersedia  berbagai  macam platform yang  dapat  digunakan  untuk  mendesain  sebuah aplikasi.  Dengan  adanya  bantuan  teknologi  dapat memecahkan  suatu  permasalahan  [20].  Peneliti menggunakan  Figma  dalam  perancangan  UI/UX  aplikasi. Figma  adalah  salah  satu  alat  desain  yang  dipakai  untuk menciptakan  antarmuka  suatu  aplikasi  mobile,  situs  web, desktop ,  dan  berbagai  platform  lainnya.  [21].  Figma memberikan  fitur  yang  dibutuhkan  dalam  tahap  desain proyek  dan  kemampuan prototyping dalam  perancangan UI/UX aplikasi game-based learning Pointer .
C. Metode Prototype
Prototype merupakan  representasi  kerja  dasar  dari pengembangan suatu program atau software yang diciptakan secara khusus untuk tahap pengembangan sebelum tahapan konstruksi  aktual  dimulai  [22].  Metode  yang  digunakan dalam  pengembangan game-based  learning Pointer secara digital ini adalah metode Prototyping.
Gambar 2. Metode Prorotype [23]
Proses  pertama  yang  dilakukan  oleh  peneliti  adalah tahap  rancangan design secara  sederhana  kebutuhan aplikasi. Dengan demikian rancangan sederhana ini menjadi alat  yang  berguna  untuk  selanjutnya  dibuat design UI/UX game-based  learning Pointer  menggunakan  Figma.  Tahap berikutnya  adalah  pembuatan prototype menggunakan Figma. Titik beratnya adalah perancangan antarmuka fungsi aplikasi  yang  diharapkan.  Selanjutnya  peneliti  membuat pengalamatan  pada interface yang  telah  dibuat  agar  bisa memberikan  pengalaman  fungsi  aplikasi  pada  pengguna. Apabila  ada  bagian  yang  tidak  diinginkan  maka  perlu diubah  sesuai  evaluasi  pengguna.  Langkah  berikutnya adalah membuat rancangan sistem aplikasi berdasarkan hasil evaluasi pengguna.

## III. H ASIL DAN P EMBAHASAN
A. Proses Desain Pada tahap  awal  perancangan  aplikasi  dibuat rancangan design sederhana secara garis besar sebagai gambaran awal perancangan antarmuka aplikasi. Rancangan design tersebut digunakan  sebagai  gambaran  awal  pembuatan  UI/UX  di Figma.  Selanjutnya  dalam  tahapan  perancangan  antarmuka menggunakan  Figma  dengan  alamat website di  figma.com, mulai dari proses pendaftaran, membuat background, gambar ilustrasi,  memasukkan  logo,  gambar  pendukung,  membuat text  hingga  tombol  dalam  tampilan  aplikasi.  Perancangan antarmuka  dan  fitur  dari system tentunya  tidak  lepas  dari hasil  penelitian game-based  learning Pointer yang  telah dilakukan sebelumnya.
Gambar 3. Rancangan Desain
Gambar 4. Proses Perancangan Antarmuka
Mokhammad Syafaat, Aguk Sridaryono
https://journal.trunojoyo.ac.id/triac
Gambar 5. Hasil Peracangan Halaman Landing Page, Login, Register Dan Home Rancangan design antarmuka  aplikasi  yang  dibuat  pada halaman landing page sebagai halaman muka aplikasi yang berisi  pengenalan  tentang  aplikasi  sekaligus  mengarahkan pengguna  untuk  membuat  akun  atau  masuk  ke  akun pengguna. Landing page ini juga merupakan halaman awal Ketika aplikasi dibuka. Halaman login yang telah dibuat di dalamnya  terdapat  perancangan  halaman form untuk pengguna  masuk  ke  dalam system apabila  pengguna  sudah memiliki  akun  pada  aplikasi . Sedangkan  halaman register berisi  rancangan  form  untuk  pengguna  melakukan pendaftaran sebagai user system. Pada rancangan antarmuka landing  page,  login dan register terdapat  penambahan tombol  di  bagian  atas  antarmuka  agar  pengguna mendapatkan  kenyamanan  dan  kemudahan  saat  ingin menggunakan  aplikasi.  Setelah  pengguna  masuk  ke system selanjutnya  diarahkan  ke  halaman home yang  berisi informasi  akun  pengguna  dan  menu  utama system .  Pada menu profile terdapat  beberapa  informasi  pengguna diantaranya nama pengguna, instansi, username, e-mail dan tentunya foto profil pengguna. Pengguna juga diberikan fitur untuk  mengubah  informasi  pada profile. Pada  menu  utama terdapat  dua  fitur  yaitu  tombol  fitur guide  book dan play pointer game.
Gambar 6. Perancangan Halaman Guide Book, Tampilan Permainan, Pertanyaan Dan Leaderboard Pada halaman guide book memberikan informasi tentang aturan  permainan  dan  macam-macam  komponen  beserta fungsinya.  Pada  halaman  untama  permainan  menampilkan mapping permainan  saat  dimainkan.  Terdapat  beberapa tombol  tambahan  yang  bisa  digunakan  seperti  melihat petunjuk permainan dan menuju menu utama atau keluar dari permainan.  Perancangan  halaman  untuk  menjawab  soal diberikan  untuk  mendapatkan  poin  tambahan.  Tampilan
selanjutnya  adalah leaderboard yang  digunakan  untuk mengetahui  poin  dari  pemain.  Pada  halaman  ini  terdapat suatu tombol yang mengarah ke halaman utama.
Tahap  selanjutnya  adalah  tahap prototyping menggunakan  fitur prototype yang  telah  disediakan  Figma. Dalam  tahap  ini,  semua  tombol  dan  menu  dalam  desain terhubung  untuk  membentuk  alur  kerja  sesuai  dengan pedoman pada game-based learning Pointer. .
Gambar 7. Tampilan Prototyping Figma

## B. Hasil Tampilan Menggunakan Laptop
Gambar 8. Tampilan Landing Page Gambar 9. Tampilan Halaman Login
Gambar 10. Tampilan Perancangan Pada Halaman Register
Mokhammad Syafaat, Aguk Sridaryono
https://journal.trunojoyo.ac.id/triac
Gambar 11. Tampilan Hasil Perancangan Halaman Utama/ Home
Gambar 12. Tampilan Fitur Guide Book Permainan Gambar 13. Tampilan Board Permainan Gambar 14. Tampilan Soal Materi Gambar 15. Tampilan Poin Pemain

## C. Pengujian Tombol
Pada proses selanjutnya dilakukan pengujian tombol dan menganalisis  semua  tampilan  design  aplikasi  UI/UX
Pointer.  Pengujian  dilakukan  dengan  menggunakan  laptop dan smartphone .  Pengujian  dengan  laptop  dapat menggunakan  fitur preview di  Figma  di  halaman design . Sedangkan untuk pengujian menggunakan smartphone perlu mengunduh terlebih dahulu aplikasi Figma di play store atau app store. Untuk menguji fungsi tombol bisa menggunakan fitur mirror di  aplikasi  Figma . Peneliti  dapat  menganalisa hasil perancangan UI/UX yang telah dibuat di smartphone , apabila ada perubahan pada design maka tampilan design di smartphone akan otomatis berubah.
Gambar 16. Pengujian UI/UX Menggunakan Laptop
Gambar 17. Pengujian UI/UX Menggunakan S martphone IV. K ESIMPULAN
Berdasarkan  hasil  penelitian  yaitu  perancangan design menggunakan  Figma  dengan  metode prototype didapatkan implementasi  antarmuka  pengguna  atau user  interface dan user  experience atau  pengalaman  pengguna  pada game- based  learning Pointer. Platform desain  Figma  dapat dimanfaatkan untuk menciptakan desain antarmuka aplikasi Pointer  yang  menarik,  modern,  dan  minimalis.  Tombol- tombol  di  setiap  halaman  berfungsi  seperti prototype yang direncanakan.  Dalam  proses  perbaikan  hasil  evaluasi  dapat dilihat  secara real  time perubahannya  menggunakan device lain  atau smartphone. Secara  keseluruhan  desain  UI/UX yang  telah  dirancang  memberikan  gambaran  nyata  untuk membangun sistem game-based learning Pointer .

## D AFTAR P USTAKA
[1] B. Qur’ani, Belajar dan Pembelajaran , 1st ed. Sukoharjo: Tahta Media  Group,  2023.  Accessed:  Jan.  07,  2024.  [Online]. Available: https://tahtamedia.co.id/
[2] A.  Djamaluddin  and  Wardana, Belajar  Dan  Pembelajaran ,  1st ed.,  vol.  1.  Jakarta:  CV.  Kaaffah  Learning  Center,  2019.
Mokhammad Syafaat, Aguk Sridaryono https://journal.trunojoyo.ac.id/triac Accessed: Jan. 07, 2024. [Online]. Available: http://repository.iainpare.ac.id/id/eprint/1639 [3] N. C. Burbules, G. Fan, and P. Repp, “Five trends of education and  technology  in  a  sustainable  future,” Geography  and Sustainability ,  vol.  1,  no.  2,  pp.  93–97,  Jun.  2020,  doi: 10.1016/j.geosus.2020.05.001.
[4] M. Videnovik, T. Vold, L. Kiønig, A. Madevska Bogdanova, and V.  Trajkovik,  “Game-based  learning  in  computer  science education: a scoping literature review,” International Journal of STEM Education , vol. 10, no. 1. Springer Science and Business Media Deutschland GmbH, Dec. 01, 2023. doi: 10.1186/s40594- 023-00447-2.
[5] A. Arfandi, S. Wulandari, M. Nasir Malik, M. Agung, and A. M. Mappalotteng,  “Pengaruh  Penerapan  Model  Pembelajaran Creative Problem Solving terhadap Hasil Belajar Siswa di SMKN 1 Soppeng,” Jurnal Ilmiah Edutic : Pendidikan dan Informatika , vol.  9,  no.  2,  pp.  108–117,  May  2023,  doi: 10.21107/edutic.v9i2.17513.
[6] O.  Rianingtyas,  “Pengembangan  Game  Edukasi  Berbasis Android  Sebagai  Media  Pembelajaran  Biologi  Bernuansa Motivasi Siswa Kelas XI di SMA/MA,” Universitas Islam Negeri Raden Intan , Lampung, 2019.
[7] M. Papastergiou, “Digital Game-Based Learning in high school Computer Science education: Impact on educational effectiveness and student motivation,” Comput Educ , vol. 52, no. 1, pp. 1–12, Jan. 2009, doi: 10.1016/j.compedu.2008.06.004.
[8] K.  R.  Winatha  and  I.  M.  D.  Setiawan,  “Pengaruh  Game-Based Learning  Terhadap  Motivasi  dan  Prestasi  Belajar,” Scholaria: Jurnal Pendidikan dan Kebudayaan , vol. 10, no. 3, pp. 198–206, Sep. 2020, doi: 10.24246/j.js.2020.v10.i3.p198-206.
[9] M.  Priyaadharshini,  N.  NathaMayil,  R.  Dakshina,  S.  Sandhya, and  R.  Bettina  Shirley,  “Learning  analytics:  Game-based Learning  for  Programming  Course  in  Higher  Education,”  in Procedia Computer Science , Elsevier  B.V., 2020, pp. 468–472. doi: 10.1016/j.procs.2020.05.143.
[10] G.  F.  Khairunnisa  and  Y.  I.  N.  Ilmi,  “Media  Pembelajaran Matematika  Konkret  Versus  Digital:  Systematic  Literature Review di Era Revolusi Industri 4.0,” Jurnal Tadris Matematika , vol.  3,  no.  2,  pp.  131–140,  Nov.  2020,  doi: 10.21274/jtm.2020.3.2.131-140.
[11] H.  Setiawan,  N.  Gumilar,  Z.  Basuki  R,  and  D.  Rahmawati, “Media  Pembelajaran  Inovatif  Game  Based  Learning  Pointer pada  Materi  Topologi  Jaringan  Komputer,” Jurnal  FORTECH , vol.  3,  no.  2,  pp.  57–63,  Jan.  2023,  doi: 10.56795/fortech.v3i2.102.
[12] D.  Rahmawati,  R.  Alfita,  R.  Moch  Fadlian,  and  T.  Elektro, “Rancang  Bangun  Mesin  Telur  Asin  Berbasis  Proportional Integral  Derivative,” Jurnal  Teknik  Elektro  dan  Komputer TRIAC , vol. 9, 2022.
[13] A. K. Saputro, M. Ulum, A. Karim, and R. Alfita, “Perancangan Smart –TV Menggunakan Perintah Suara Dengan Metode Hidden Markov  Model,” Jurnal  Teknik  Elektro  dan  Komputer  TRIAC , vol.  7,  no.  2,  pp.  43–45,  Dec.  2020,  doi: 10.21107/triac.v7i2.7757.
[14] R.  Yunitarini,  “Sistem  Informasi  e-Office  Pada  Lembaga Bimbingan  Belajar,” Jurnal  Ilmiah  Edutic :  Pendidikan  dan Informatika ,  vol.  9,  no.  2,  pp.  118–126,  May  2023,  doi: 10.21107/edutic.v9i2.19292.
[15] Y. N. Pratama, M. Ulum, and D. Rahmawati, “Rancang Bangun Antena  Helix  Sebagai  Penguat  Sinyal  GSM  Untk  Menunjang Komunikasi  (Studi  Kasus  di  Sekolah  Darul  Hadist  Desa Klapayan,” Seminar  Nasional  Fortei  Regional ,  vol.  2,  no.  1, 2019.
[16] R.  Amalia,  S.  Assani’,  and  M.  A.  Effindi,  “Rancang  Bangun Media  Pembelajaran  Algoritma  Perograman Berbasis  Android,” Jurnal Ilmiah Edutic : Pendidikan dan Informatika , vol. 9, no. 2, pp. 188–200, Jun. 2023, doi: 10.21107/edutic.v9i2.20215.
[17] M. A. Muhyidin, M. A. Sulhan, and A. Sevtiana, “Perancangan UI/UX  Aplikasi  MY  CIC  Layanan  Informasi  Akademik Mahasiswa Menggunakan Aplikasi Figma,” Jurnal Digit , vol. 10, no. 2, p. 208, Dec. 2020, doi: 10.51920/jd.v10i2.171.
[18] I.  Kresna  A  and  D.  Yuliana,  “Rancang  Bangun  User  Interface (UI)  dan  User  Experience  (UX)  Pada   Sistem  Informasi Pengarsipan  Dokumen  Berbasis  Website  di  Kabupaten  Tegal,” LEDGER : Journal Informatic and Information Technology , vol. 1, no. 2, pp. 29–38, Oct. 2022, doi: 10.20895/ledger.v1i2.828.
[19] M. N. M. Al-Faruq, S. Nur’aini, and M. H. Aufan, “Perancangan UI/UX  Semarang  Virtual  Tourism  Dengan  Figma,” Walisongo
Journal of Information Technology , vol. 4, no. 1, pp. 43–52, Aug. 2022, doi: 10.21580/wjit.2022.4.1.12079.
[20] D.  Rahmawati,  I.  Febriana,  and  K.  A.  Wibisono,  “S  Simulasi Rancang  Sistem  Penyiraman  Tanaman  Berbasis  Fuzzy  Logic Control  Pada  Proteus  Dan  Matlab,” ALINIER:  Journal  of Artificial  Intelligence  &  Applications ,  vol.  3,  no.  2,  pp.  22–27, Dec. 2022, doi: 10.36040/alinier.v3i2.5834.
[21] M. M. Syaikhuddin, E. Jaya Wardhana, N. Balafif, T. P. Utomo, and  *  Korespondensi,  “Perancangan  User  Interface  Aplikasi TypeofLife  Menggunakan  Figma  dengan  Metode  Perancangan User Interface Aplikasi TypeofLife Menggunakan Figma dengan Metode Prototype TypeofLife Application User Interface Design Using  Figma  with  Prototype,” Online)  Teknologi:  Teknologi: Jurnal Ilmiah Sistem Informasi , vol. 12, no. 2, pp. 54–61, 2022, doi: 10.26594/teknologi.v12i2.3347.
[22] B.  Kurniawan  and  M.  Romzi,  “Perancangan  Ui/Ux  Aplikasi Manajemen  Penelitian  Dan  Pengabdian  Kepada  Masyarakat Menggunakan  Aplikasi  Figma,” Jurnal  Sistem  Informasi Mahakarya (JSIM) , vol. 5, no. 1, p. 17, Jun. 2022.
[23] M.  Alda,  N.  A.  Daulay,  E.  Khoiriah,  and  M.  P.  Berutu, “Perancangan  UI/UX  Aplikasi  Sumatera  Bus  Berbasis  Android Menggunakan  Figma,” Da’watuna:  Journal  of  Communication and Islamic Broadcasting , vol. 4, no. 1, pp. 116–126, Mar. 2023, doi: 10.47467/dawatuna.v4i1.3281.
[24] R.  Setiawibawa,  “Implementation  Of  Organizational  Culture AndWork Discipline And Their Influence On Army Polytechnic Performance,” 2022.