Received 6 th Dec 2023, revision 20 th Dec 2023, accepted 22 nd Dec 2023, published 31 st Dec 2023
149 | Doi : 10.46510/jami.v4i2.173 | ISSN 2722-4406 (p)/2722-4414(e) | https://journal.akb.ac.id/

## Perancangan User Interface (UI) Perpustakaan Online Berbasis Android
Fastabiq Furoqonul Pratama 1 , Feby Revita Rahma 2 , Salman Abdurahman 3 , Yulia Dewi 4 , Yulianto 5 , Miftahul Huda 6
1,2,3,4,5,6 Ilmu Komputer, Universitas Putra Bangsa e-mail : fastabiq123@gmail.com 1 , febyrevitarahma012@gmail.com 2 , salmanabdurrahman86@gmail.com 3 , yuliadewi809@gmail.com 4 , yulianto@fst.universitasputrabangsa.ac.id 5 , hudablue11@gmail.com 6 .
Penulis Korespondensi. Yulianto, Ilmu
Komputer, Universitas Putra Bangsa e-mail:
yulianto@fst.universitasputrabangsa.ac.id

## A B S T R A K
Perpustakaan  online  telah  menjadi  sumber  informasi  yang  penting  dalam  kehidupan  modern.  Untuk mempermudah akses dan penggunaan perpustakaan, perancangan User Interface (UI) yang baik dan intuitif sangat penting.  Penelitian  ini  bertujuan  untuk  merancang  UI  perpustakaan online berbasis  Android dengan menggunakan  metode  prototype.  Metode  prototype  adalah  pendekatan  perancangan  yang  berfokus  pada pengembangan  iteratif  dari  desain  awal.  Penelitian  ini  mengadopsi  metode  ini  untuk  menghasilkan  UI perpustakaan  online  yang  dapat  memenuhi  kebutuhan  pengguna  secara  efektif.  Proses  perancangan melibatkan langkah-langkah seperti analisis kebutuhan pengguna, perancangan awal, implementasi prototype, evaluasi, dan perbaikan berkelanjutan.
Pada tahap analisis kebutuhan pengguna, data dikumpulkan melalui survei dan wawancara dengan pengguna potensial  perpustakaan  online.  Hasil  analisis  ini  digunakan  sebagai  dasar  untuk  perancangan  awal  UI. Berdasarkan hasil analisis, fitur-fitur penting seperti pencarian buku, daftar peminjaman, rekomendasi buku, dan  kategori  buku  diprioritaskan  dalam  perancangan  UI.  Setelah  perancangan  awal  selesai,  prototipe  UI dibangun  menggunakan  alat  desain  UI  berbasis  Android.  Prototype  ini  kemudian  dievaluasi  melalui  sesi pengujian dengan pengguna  potensial. Feedback dari pengguna diperoleh dan digunakan untuk melakukan perbaikan dan penyempurnaan pada UI. Iterasi ini dilakukan untuk mencapai desain UI yang lebih baik dan memenuhi kebutuhan pengguna.
Hasil  akhir  dari  penelitian  ini  berupa  desain  UI  perpustakaan  online  berbasis  Android  yang  menggunakan metode  prototype.  Desain  akhir  memiliki  tampilan  atau  antarmuka  pengguna  yang  sesuai  keinginan  hati penguna serta mudah dalam penggunaannya, sehingga para pengguna merasakan kemudahan dalam pencarian buku,  melihat  daftar  peminjaman,  dan  menemukan  rekomendasi  buku  yang  sesuai  dengan  minat  mereka. Metode  prototype  memainkan  peran  penting  dalam  menghasilkan  desain  UI  yang  responsif  terhadap kebutuhan pengguna.
Kata kunci : User Interface (UI), perpustakaan online, Android, metode prototype, desain iteratif.

## A B S T R A C T
Online libraries have become an important source of information in modern life. To facilitate access and use of libraries, designing a good and intuitive User Interface (UI) is essential. This research aims to design an Android- based online library UI using the prototype method. The prototype method is a design approach that focuses on iterative development of the initial design. This research adopts this method to produce an online library UI that can meet the needs of users effectively. The design process involves steps such as user needs analysis, initial design, prototype implementation, evaluation, and continuous improvement.
At the user needs analysis stage, data is collected through surveys and interviews with potential users of the online library. The results of this analysis are used as the basis for the initial design of the UI. Based on the results of the analysis, important features such as book search, loan list, book recommendation, and book category are prioritized in UI design. Once the initial design is complete, the UI prototype is built using Android-based UI design tools. The prototype is then evaluated through testing sessions with potential users. User feedback is obtained and used to make improvements and improvements to the UI. This iteration is done to achieve better UI design and meet user needs.
The  final  result  of  this  research  is  in  the  form  of  an  Android-based  online  library  UI  design  that  uses  the prototype method. The final design has a display or user interface that suits the user's desire and is easy to use, so that users feel easy in searching for books, viewing loan lists, and finding book recommendations that suit their interests. The prototype method plays an important role in producing UI designs that are responsive to user needs.
Keywords : User Interface (UI), online library, Android, prototype methods, iterative design.

## 1. PENDAHULUAN
Pendidikan merupakan kebutuhan semua manusia sepanjang perjalanan hidup. Pelaksanaan pendidikan di berbagai instutusi pendidikan tidak bisa dilepaskan dari ketersediaan sarana penunjang berupa perpustakaan. Masa Covid-19 telah merubah berbagai mekanisme pekerjaan termasuk didalamnya institusi Pendidikan. Kegiatan pendidikan dan pengajaran semula dilaksanakan secara tatap muka harus dilakukan secara online termasuk didalamnya penggunaan perpustakaan. Kebutuhan pengguna perpustakaan terkait berbagai pustaka antara lain buku, jurnal, tugas akhir, laporan hasil  penelitian,  koran,  majalah  dan  dokumen  lainnya  juga  mengalami  perubahan khususnya  terkait  cara  akses  sumber  informasi  tersebut.  Selain  proses  pelayanan sumber informasi  juga  terkait  pelayanan administrasi  surat menyurat,  pencegahan plagiasi  tugas  akhir  ataupun  skripsi,  denda  keterlambatan,  kerusakan  ataupun kehilangan  pinjaman  juga  dilakukan  secara  online.  Berbagai  kondisi  tersebut menuntut  perpustakaan  untuk  menambahkan  layanan  secara  daring  atau  online (Suharti, 2020).
Perpustakaan  memperhitungkan  ketersediaan  dan  keberadaan  ponsel, khususnya apabila pustakawan peduli dan responsive terhadap keinginan pengguna (Abdallah Umar & Isyawati Permata Ganggi, 2019). Desain user interface dibuat secara beragam  sesuai  dengan  fungsi  serta  kebutuhannya  (Geasela,  Ranting,  &  Fernandes Andry, 2018). Proses perancangan system, hubungan antar pengguna dan pengguna lain dilakukan melalui perintah, input data dan konten yang dijadikan acuan dalam mendesain user interface (Gilang Ananta & Vitra Paputungan, 2023).
User Interface merupakan tampilan antarmuka komputer dan perangkat lunak (software) yang dapat dilihat oleh pengguna sebagai media komunikasi antara sistem dengan pengguna (Ernawati & Dwi Indriyanti, 2022). User Interface merupakan ilmu yang berhubungan dengan penyusunan tata letak dan desain grafis untuk mendukung penampilan website ataupun aplikasi. (Jamilah & Padmasari, 2022).
Namun, dalam mengembangkan perpustakaan online yang efektif, perancangan User Interface (UI) yang baik dan intuitif sangat penting. UI yang dirancang dengan baik memungkinkan pengguna untuk menjelajahi dan memanfaatkan sumber daya perpustakaan  dengan  mudah,  meningkatkan  pengalaman  pengguna  dan memaksimalkan nilai dari perpustakaan online itu sendiri.
Dalam  hal  ini,  metode  prototype  telah  terbukti  menjadi  model  yang  efektif dalam perancangan UI. Model prototyping merupakan teknik pengembangan sistem secara cepat dengan cara mengumpulkan informasi dan kebutuhan informasi untuk selanjutnya  dievaluasi  secara  cepat  oleh  pengguna.  Proses  pengembangan  dapat dilakukan  dengan  cepat  karena  pengembang  dan  pengguna  sering  beinteraksi tentang berbagai aspek yang dibutuhkan untuk pembuatan informasi yang diinginkan dan sekaligus melakukan evaluasi sistem yang sedang dilaksanakan (Titania, 2021). Metode  ini  memungkinkan  desainer  untuk  mengembangkan  iterasi  desain  yang berfokus  pada  pengguna  dan  memungkinkan  mereka  untuk  menguji  dan  menguji coba desain sebelum implementasi akhir. Dengan menggunakan metode prototype, kesalahan  dan  kekurangan  dalam  desain  dapat  diidentifikasi  dan  diperbaiki  lebih awal  dalam  proses  pengembangan,  yang  pada  gilirannya  mengarah  pada pengembangan UI yang lebih baik.
Dalam  penelitian  ini,  kami  akan  merancang  UI  perpustakaan  online  berbasis Android menggunakan metode prototype. Penelitian dilakukan untuk menghasilkan desain  UI  yang  intuitif  serta  responsif,  yang  memenuhi  harapan  dan  kebutuhan pengguna  perpustakaan  online.  Melalui  langkah-langkah  analisis  kebutuhan pengguna,  perancangan  awal,  implementasi  prototype,  evaluasi,  dan  perbaikan berkelanjutan,  dalam  rangka  menghasilkan  UI  yang  optimal  untuk  pengguna perpustakaan online.
Dengan  demikian,  penelitian  ini  memiliki  implikasi  penting  dalam pengembangan perpustakaan online yang lebih baik dan pengalaman pengguna yang lebih  baik pula.  Hasil penelitian  ini dapat menjadi panduan  bagi para pengembang perpustakaan online dalam merancang UI yang efektif dan menarik bagi pengguna, serta dapat meningkatkan aksesibilitas dan penggunaan perpustakaan online secara keseluruhan.

## 2. MATERIAL DAN METODE
Metode  yang  dipilih  dalam  perancangan  sistem  yaitu  metode  prototype. Pemilihan  metode  prototype  ini  karena  memiliki  keunggulan  kecepatan  dengan membuat rancangan atau model, selanjutnya dilakukan evaluasi dan koreksi dengan calon pengguna sistem. Proses evaluasi dan koreksi terhadap desain dapat dilakukan dengan cepat karena pengembang, pemesan dan pengguna saling berkomunikasi dan berinterkasi  selama  proses  pembuatan  sistem.    Model    prototype  itu    sendiri merupakan  model  yang  memperlihatkan  hal-hal  besar  dalam  sistem,  tetapi  belum lengkap  sehingga  pada  saatnya  untuk  dimodifikasi,  diperinci,  dapat  ditambahkan ataupun  digabungkan  dengan  sistem-sistem  yang  lainnya.  Konstruksi  model prototype  ini  melalui  suatu  parameter  khusus  yang  dapat  diukur  dengan  baik meliputi struktur,  bentuk, isi, jumlah dan maknanya (T. Husain, 2019). Prototyping mampu  mempercepat  proses  perancangan  dan  pembuatan  sebuah  aplikasi (Pressman & Maxim, 2015).
Metode prototype pada perancangan User Interface (UI) merupakan pendekatan yang digunakan untuk mengembangkan iterasi desain yang berfokus pada pengujian dan evaluasi oleh pengguna. Evaluasi dilakukan dengan tujuan untuk mendapatkan umpan  balik  langsung  dari  pengguna  dan  mengaplikasikannya ke  dalam  desain  UI yang akhir.
Berikut adalah penjelasan lebih rinci tentang langkah-langkah metode prototype pada UI:
1. Perancangan  Awal  (Low-Fidelity  Prototype):  Pada  awalnya,  dilakukan perancangan  awal  UI  dengan  menggunakan  sketsa  atau  alat  desain  yang sederhana. Fokus utama pada tahap ini  adalah menentukan struktur, tata letak halaman, navigasi, dan komponen utama UI yang akan digunakan. Prototype awal ini lebih berfokus pada konsep dan kerangka kerja dasar daripada detail-desain yang lengkap.
2. Implementasi  Prototipe  (High-Fidelity  Prototype):  Setelah  perancangan  awal selesai, prototipe diimplementasikan dengan lebih rinci menggunakan alat desain yang lebih lengkap. Pada tahap ini, elemen desain seperti ikon, warna, font, dan komponen UI yang sesuai diintegrasikan ke dalam prototype. Tujuan dari tahap
ini  adalah  untuk  menciptakan  prototipe  yang  lebih  realistis  dan  mendekati tampilan akhir yang diinginkan.
3. Pengujian  dan  Evaluasi:  Setelah  prototipe  diimplementasikan,  dilakukan  sesi pengujian  dengan  pengguna  potensial.  Pengguna  diajak  untuk  berinteraksi dengan prototipe UI dan memberikan umpan balik tentang pengalaman mereka. Observasi  dan  wawancara  dilakukan  untuk  memahami  tanggapan  pengguna terhadap UI, kesulitan yang mereka hadapi, serta aspek-aspek yang mereka sukai atau  tidak  sukai.  Umpan  balik  ini  digunakan  untuk  memahami  kekuatan  dan kelemahan prototipe dan untuk memperbaiki desain UI yang ada.
4. Perbaikan  dan  Iterasi:  Berdasarkan  umpan  balik  dari  pengguna,  dilakukan perbaikan  pada  prototipe  UI.  Perubahan  dan  penyempurnaan  dilakukan  untuk mengatasi masalah yang diidentifikasi selama sesi pengujian. Setelah perbaikan dilakukan,  proses  iterasi  dimulai  kembali,  di  mana  prototipe  ditingkatkan berdasarkan umpan balik dan pengujian yang lebih lanjut.
5. Validasi dan Implementasi Akhir: Setelah melalui beberapa iterasi, prototipe UI diuji kembali dengan pengguna untuk memastikan kembali (validasi) perubahan yang  telah  dilakukan.  Pengujian  ini  bertujuan  untuk  memastikan  bahwa perbaikan yang diterapkan telah mengatasi masalah dan memenuhi kebutuhan pengguna dengan lebih baik. Setelah UI prototipe dinyatakan valid dan memenuhi persyaratan pengguna, tahap implementasi akhir dimulai untuk mengembangkan UI yang siap untuk digunakan.
Dengan  menggunakan  metode  prototype,  perancangan  UI  menjadi  lebih responsif  terhadap  kebutuhan  pengguna.  Pengguna  memiliki  kesempatan  untuk berpartisipasi secara aktif dalam pengembangan desain UI dan memberikan umpan balik  yang  berharga.  Hal  ini  memungkinkan  pengembang  untuk  melakukan penyempurnaan dan perbaikan secara iteratif, sehingga menghasilkan UI yang lebih baik dan lebih sesuai dengan kebutuhan pengguna.
2.1 Alur Penelitian
Gambar 1. Alur penelitian
2.2 Analisis Masalah
Proses  analisis  permasalahan  dilakukan  dengan  cara  mempelajari  prosedur operasional  perpustakaan  beserta  dinamikanya,  kemudian  melakukan  wawancara kepada pengelola dan calon pengguna.
2.3 Analisis Kebutuhan
Analisis Permasalaha n Analisis Kebutuhan Desain Prototipe Perancangan Alur Proses Bisnis Kesimpulan
Tahap  analisis  kebutuhan  merupakan  tahapan  untuk  mengetahui  apa  saja kebutuhan yang diperlukan untuk menjalankan sistem dan para pihak terkait dalam operasional sistem.
2.4 Desain Prototype
Tahap desain prototype merupakan tahap untuk membangun desain prototype dari  aplikasi.  Melalui  prototipe  ini  pengguna  memperoleh  gambaran  secara  nyata terkait bentuk dan tampilan dari  aplikasi perpustakaan. Selanjutnya pengguna dapat memberikan masukan ataupun evaluasi terhadap  kekurangan dari desain prototipe tersebut.
3.5 Pengambilan Kesimpulan
Tahap  ini berisi kesimpulan yang  diambil  berdasarkan kepada penjelasan  dan solusi dari permasalahan yang telah diuraikan dalam tahapan sebelumnya.

## 3. HASIL DAN PEMBAHASAN

## 3.1 Alur diagram Use Case
Use  case  diagram  merupakan  pemodelan  untuk  menggambarkan  interaksi pengguna terkait apa yang dapat dilakukan (behavior) dengan sistem informasi yang akan  dibuat.  Use  case  menjelaskan  bagaimana  interaksi  antar  satu  atau  lebih pengguna  dengan  sistem  informasi  yang  akan  dibuat.  Use  case  secara  jelas menunjukkan fungsi apa saja yang ada didalam sebuah sistem informasi dan siapa saja  yang  berhak  menggunakan  fungsi-fungsi  itu  (Aditya,  Pranatawijaya,  &  Putra, 2021).

## Gambar 1. Diagram Use Case

## 3.2 Sketsa Desain
Tampilan awal
Gambar 2. Sketsa tampilan awal
Login
Gambar 3. Sketsa tampilan Login
Register
Gambar 4. Sketsa tampilan Register
Home (Beranda)
Gambar 5. Sketsa tampilan beranda
Tampilan Peminjaman

## Gambar 6, Sketsa tampilan halaman peminjaman

## 3.3 Desain Prototype
Tampilan Awal
Gambar 7. Tampilan Awal
Tampilan awal ada logo perpustakaan, kata-kata (quote) sebagai pemacu untuk lebih meningkatkan literasi dan  pengguna memahami bahwa dari sebuah buku bisa mengetahui banyak hal. Selain itu di pojok kanan atas terdapat tanda masuk login ke sistem.

## Tampilan Login
Gambar 8. Tampilan Login
Tampilan  login,  bagi  pengguna  yang  sudah  terdaftar  dalam  sistem  sebagai pengguna  diminta  memasukkan  email  dan  password.  Pengguna  yang  lupa  dengan password-nya  untuk  mengklik  tulisan  “forget  password“  untuk  mengganti password dan dapat masuk kembali ke dalam sistem perpustakaan. Pengguna yang belum  memiliki  akun  dapat  mendaftar  sebagai  pengguna  dengan  mengklik “register“ dan melakukan pendaftaran.
Register

## Gambar 9. Tampilan Register
Halaman Library atau Beranda
Gambar 10. Tampilan halaman Library atau Beranda Di  halaman  library  atau  beranda  tampil  buku  yang  mempunyai  review  bagus atau  tinggi  sesuai  penilaian pengguna.  Pengguna  dapat  mencari  buku  sesuai  genre yang diinginkan dengan memilih menu pencarian di posisi atas.
Menu strip tiga di kiri atas
Gambar 11.  Tampilan halaman untuk strip tiga kiri atas Menu  strip tiga dikiri atas terdapat button  untuk menuju beberapa sub menu yaitu :
 Library atau beranda
 Profile
 Device
 History
Tampilan Profile
Gambar 12. Tampillan halam profile
Device

## Tampilan Device
Gambar 13. Tampilan halaman Divice Tampilan  device  ini  untuk  tempat  penyimpanan  otomatis  ketika  buku  sudah dipinjam.  Untuk  mengembalikan  peminjaman  buku  bisa  mengklik  “return“.  Jika melebihi tanggal pengembalian buku sistem akan mengembalikan otomatis. Tampilan History
Gambar 14. Tampilan halaman history
Tampilan History digunakan sebagai ruang pemberian rating tentang buku yang sudah dibaca oleh pengguna.

## Tampilan meminjam buku
Gambar 15. Tampilan halaman meminjam buku Tampilan  untuk  meminjam  buku  disebelah  rating  bintang  terdapat  informasi terkait  stock  buku  untuk  mengetahui  ketersediaan  buku  tersebut  di  perpustakaan. Jika stock kosong maka tidak bisa dipinjam. Menu informasi terdapat nama penerbit, tahun terbit, penulis, dan synopsis

## 4. KESIMPULAN
Berdasarkan hasil pembahasan tersebut diatas dapat disimpulkan bahwa:
1. Buku  berupa  softfile  memungkinkan  pembaca  dapat  melakukan  peminjaman  di perpustakaan online dan membaca buku tersebut menggunakan smartphone android.
2. Perpustakaan online memiliki keunggulan tidak dibatasi waktu pelayanan karena akses ke perpustakaan digital dapat dilakukan dalam waktu 24 jam sehari dan darimana saja selama pengguna terhubung dengan internet.
Tekologi  sudah  diterapkan  di  banyak  institusi  tak  terkecuali  pengelolaan perpustakaan.  Era  digital  harus  ditangkap  sebagai  bagian  mempermudah  dan meluaskan pelayanan kepada pengguna. Segala aktivitas sudah semestinya mengarah kepada penerapan teknologi yang tercipta untuk dimanfaatkan dan didayagunakan. Pemanfaatan  teknologi  mendorong  proses  produksi  informasi  yang  akurat,  terkini dan  terseleksi.  Hal  tersebut  dilakukan  dengan  tetap  memperhatikan  faktor kemanfaatan. Penerapan teknologi informasi di perpustakaan akan membawa kepada layanan informasi yang berkualitas karena tidak lagi dibatasi dengan ruang dan wakti. Kapanpun dan di manapun pengguna dapat mengakses perpustakaan dalam rangka memberikan layanan maksimal pada pengujung.
Saat  ini  keberadaan  perpustakaan  secara  fisik  masih  diperlukan,  tetapi keberadaan  perpustakaan  digital  berfungsi  sebagai  pelengkap  dan  penambah  nilai dari  perpustakaan  yang  sudah  ada.  Proses  membangun  sistem  perputakaan membutuhkan  waktu,  koordinasi  dan  konsistensi dari  pengembang,  pengelola  dan tentunya dengan melibatkan pengguna. Diperlukan perencanaan dan studi kelayakan
secara teknis, ekonomis, dan sosial juga harus dilakukan. Keberhasilan membangun perpustakaan digital secara baik, tentunya akan meningkatkan citra perpustakaan.

## 5. SARAN
Perancangan  User  Interface  dapat  memberikan  hasil  yang  lebih  baik  dengan menitik beratkan pada kebutuhan pengguna sehingga memungkinkan User Interface yang dihasilkan tidak hanya mudah untuk digunakan (user friendly) tetapi juga dapat menarik  minat  pengunjung  untuk  melakukan  peminjaman  buku  di  sistem perpustakaan tersebut.

## DAFTAR PUSTAKA
Abdallah Umar, S. A., & Isyawati Permata Ganggi, R. (2019). EVALUASI DESAIN USER INTERFACE  BERDASARKAN  USER  EXPERIENCE  PADA  iJATENG. Jurnal  Ilmu Perpustakaan, 8(4), 11 – 21. Retrieved from https://kominfo.go.id Aditya, R., Pranatawijaya, V. H., & Putra, P. B. A. A. (2021). Rancang Bangun Aplikasi Monitoring  Kegiatan  Menggunakan  Metode  Prototype. Journal  of  Information Technology and Computer Science , 1(1), 47 – 57. Ernawati,  S.,  &  Dwi  Indriyanti,  A.  (2022).  Perancangan  User  Interface  dan  User Experience  Aplikasi  Medical  Tourism  Indonesia  Berbasis  Mobile  Menggunakan Metode  User  Centered  Design  (UCD)  (Studi  Kasus:  PT  Cipta  Wisata  Medika). JEISBI, 03(04), 90 – 102.
Geasela,  Y.  M.,  Ranting,  P.,  &  Fernandes  Andry,  J.  (2018).  Analisis  User  Interface terhadap  Website  Berbasis  E-Learning  dengan  Metode  Heuristic  Evaluation. JURNAL INFORMATIKA, 5(2).
Gilang Ananta, B., & Vitra Paputungan, I. (2023). Perancangan User Interface dan User Experience Aplikasi Mobile Pemesanan Tukang Kangtukang Dengan Metodologi Human-Centered Design. AUTOMATA, 4(1).
Jamilah, Y. S., & Padmasari, A. C. (2022). PERANCANGAN USER INTERFACE DAN USER EXPERIENCE  APLIKASI  SAY.CO. TANRA,  9(1),  73 – 88.  Retrieved  from https://ojs.unm.ac.id/tanra/
Pressman, R. S., & Maxim, B. (2015). Software Engineering A Practitioner ’ s Approach. New York: Mc Graw Hill Education.
Suharti,  S.  (2020).  Layanan  perpustakaan  di  masa  pandemi  Covid  19. Buletin Perpustakaan Universitas Islam Indonesia, 3(2), 53 – 64.
T.  Husain.  (2019).  An  Analysis  of  Modeling  Audit  Quality  Measurement  Based  on Decision Support Systems (DSS). European Journal of Scientific Exploration, 2(6),
1 – 9.
Titania, P. (2021). Perbandingan Metode Pengembangan Perangkat Lunak (Waterfall, Prototype, RAD). Jurnal Bangkit Indonesia , 10(1), 6 – 12.